nucab/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Implementing Invisible reCAPTCHA with Redux Form</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.22.1/babel.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.6.0/redux.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/5.0.2/react-redux.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/redux-form/6.5.0/redux-form.js"></script>
    <script src="index.js" type="text/babel"></script>
    <script src="https://www.google.com/recaptcha/api.js?render=explicit&onload=onReCaptchaReady"></script>
  </head>
  <body>
    <div id="entry"></div>
  </body>
</html>

## index.js
class ReCaptcha extends React.Component {
  render() {
    return <div ref={div => this.container=div} />
  }

  componentDidMount() {
    const { input: { onChange }, sitekey } = this.props
    grecaptcha.render(this.container, {
      sitekey,
      size: "invisible",
      callback: onChange
    })
  }
}

class TestForm extends React.Component {
  static onSubmit(values, dispatch, props) {
    if (!values.captcha) {
      throw new ReduxForm.SubmissionError({ _error: "Please prove that you are human." })
    } else {
      console.log("onSubmit succeeded:", values)
    }
  }

  render() {
    const { submitFailed, error, handleSubmit } = this.props
    return (
      <form onSubmit={handleSubmit}>
        <ReduxForm.Field name="foo" component="input" />
        <ReduxForm.Field name="bar" component="input" />
        {submitFailed && error && <div>{error}</div>}
        <ReduxForm.Field name="captcha" component={ReCaptcha} sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI" />
        <button>Submit</button>
      </form>
    )
  }
}
TestForm = ReduxForm.reduxForm({
  form: "test",
  onSubmit: TestForm.onSubmit
})(TestForm)

const store = Redux.createStore(Redux.combineReducers({
  form: ReduxForm.reducer
}))

function onReCaptchaReady() {
  const provider = (
    <ReactRedux.Provider store={store}>
      <TestForm />
    </ReactRedux.Provider>
  )
  ReactDOM.render(provider, document.getElementById("entry"))
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8" />
	<title>Implementing Invisible reCAPTCHA with Redux Form</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.22.1/babel.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.6.0/redux.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/5.0.2/react-redux.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/redux-form/6.5.0/redux-form.js"></script>
	<script src="index.js" type="text/babel"></script>
	<script src="https://www.google.com/recaptcha/api.js?render=explicit&onload=onReCaptchaReady"></script>
	</head>
	<body>
	<div id="entry"></div>
	</body>
	</html>
	class ReCaptcha extends React.Component {
	render() {
	return <div ref={div => this.container=div} />
	}

	componentDidMount() {
	const { input: { onChange }, sitekey } = this.props
	grecaptcha.render(this.container, {
	sitekey,
	size: "invisible",
	callback: onChange
	})
	}
	}

	class TestForm extends React.Component {
	static onSubmit(values, dispatch, props) {
	if (!values.captcha) {
	throw new ReduxForm.SubmissionError({ _error: "Please prove that you are human." })
	} else {
	console.log("onSubmit succeeded:", values)
	}
	}

	render() {
	const { submitFailed, error, handleSubmit } = this.props
	return (
	<form onSubmit={handleSubmit}>
	<ReduxForm.Field name="foo" component="input" />
	<ReduxForm.Field name="bar" component="input" />
	{submitFailed && error && <div>{error}</div>}
	<ReduxForm.Field name="captcha" component={ReCaptcha} sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI" />
	<button>Submit</button>
	</form>
	)
	}
	}
	TestForm = ReduxForm.reduxForm({
	form: "test",
	onSubmit: TestForm.onSubmit
	})(TestForm)

	const store = Redux.createStore(Redux.combineReducers({
	form: ReduxForm.reducer
	}))

	function onReCaptchaReady() {
	const provider = (
	<ReactRedux.Provider store={store}>
	<TestForm />
	</ReactRedux.Provider>
	)
	ReactDOM.render(provider, document.getElementById("entry"))
	}