"Error: Invalid ReCAPTCHA client id" when executing an invisible captcha

Question

I'm trying to implement Google's Invisible reCAPTCHA in a HTML form in a Wordpress website.

In the head

First, I have the script that sets up the callbacks and binds the submit event of the form to the verification:

jQuery(document).ready(function() {
  var valid = false;

  window.recaptchaOkay = function(token) {
    valid = true;
    jQuery('#cadastro').submit();
  };

  document.getElementById('cadastro').addEventListener('submit', function validate(event) {
    if (valid) {
      return true;
    }

    var cap = document
        .getElementById('cadastro')
        .querySelector('.g-recaptcha');
    grecaptcha.execute(cap);

    event.preventDefault();
    return false;
  });
});

Then, I load the reCAPTCHA script, precisely as indicated in the documentation:

<script src="https://www.google.com/recaptcha/api.js" async defer></script>

In the body

And this is the form I'm using:

<form action="https://example.com/" method="post" id="cadastro">
    <div
        class="g-recaptcha"
        data-sitekey="6Lc0jC4UAAAAANlXbqGWNlwyW_e1kEB89zLTfMer"
        data-callback="recaptchaOkay"
        data-size="invisible"
        id="cadastro-captcha">
    </div>
    <button type="submit" id="cadastro-submit">Enviar</button>
</form>

What happens

I fill the form, submit it, and the following error is thrown (in the line with grecaptcha.execute):

Error: Invalid ReCAPTCHA client id: [object HTMLDivElement]

Also tried just passing the cadastro-captcha ID directly to that function as a string (e.g. grecaptcha.execute("cadastro-captcha")), yet the same error happens (bar the id being different, obviously). Equivalently, if I pass no argument, the same error happens, except it refers to undefined.

Solution

Try this one :--

The grecaptcha.reset() method accepts an optional widget_id parameter, and defaults to the first widget created if unspecified. A widget_id is returned from the grecaptcha.render() method for each widget created. So you need to store this id, and use it to reset that specific widget:

var widgetId = grecaptcha.render(container);
grecaptcha.reset(widgetId);

If More information then Read google recaptcha docs:-- https://developers.google.com/recaptcha/docs/display#js_api

Comments

[dewd]

"A widget_id is returned from the grecaptcha.render() method" 👍

[Toskan]

why did you link that url? there is no information how the widget id is created or returned there... sadly