Upgrading to Google Invisible reCaptcha

Google invisible reCaptcha is in beta stage right now. Here is how you can upgrade your existing reCaptcha v2 to the new invisible reCaptcha.

1. First, you can remove the div element that holds your reCaptcha box.
2. Move all the existing data attributes to a checkbox (e.g. your T&C checkbox) or button (e.g. your submit button). This includes:
• class="g-recaptcha"
• data-sitekey="your_key"

<button type="button" class="g-recaptcha button"
	data-callback="recaptchaCallback"
	data-badge="bottomright"
	data-sitekey="your_key">&nbsp;Submit&nbsp;</button>

3. Add a callback method to perform some action after the validation is done. The action could be enabling the submit button, submitting the form, etc. If you are already using a callback in reCaptcha v2, then skip this step, you should use the same callback and no changes are needed.

<script src='https://www.google.com/recaptcha/api.js'></script>
<script>
  function recaptchaCallback() {
    $("#my_form").submit();
  };
</script>

4. Next, link this callback to reCaptcha using data-callback attribute.

data-callback="recaptchaCallback"

5. And, that's all. Server side code has no changes.

If you integrated successfully, you will see this at the bottom right of your page:

Now when your user clicks on the terms checkbox or the submit button (depends on where you put it), reCaptcha will perform the validation in the background. If robot checking is needed, then a popup screen will appear just like v2.

Once verification is successful. reCaptcha will trigger the callback method and you can proceed.

Note: If your site key is not enrolled in the beta program, you will get this error instead.