Cannot contact recaptcha. Check your connection and try again. After initial submission (reCaptcha v2 invisible)

Question

I am having trouble getting the reCaptcha to work properly on a form submission in which case I have error states being handle both through client-side validation and through an API call. The reason for this is because I need to re-submit the form after user corrects the form while having the API provide data that there are errors on the form -- REQUIRING a new response token everytime.

I have verified the site-key and secret-key as well as the domain listed in my reCaptcha console.

The problem here is that AFTER the initial submission, reCaptcha will intermittently give me an alert saying that it cannot connect to reCaptcha through a callback function I am executing.

Here is the code I am executing on form submission through data-callback

let correctCaptcha = function(response) {
    // Fire Post Route
    window.submitUserAPIForm(response);

    // Reset the reCaptcha token due to not allowing duplicate tokens used in the same instance -- to re-submit form
    grecaptcha.reset();
  };

  <form>
    <!-- MY FORM INPUT VALUES HERE -->
    <button class="g-recaptcha" data-sitekey="MY_SITE_KEY" data- callback="correctCaptcha">
     <p>Start My Free Trial Now</p>
    </button>
  </form>

I do have the MY_SITE_KEY set to the key provided by the console, and I am assuming that the culprit is in this specific call as opposed to my monolith of an API call and client-side validation.

Also, note that I am using this:

.grecaptcha-badge {
  visibility: hidden;
}

to hide the badge from the page

Everything seems to work fine on sometimes, but there are intermittent times where the connection issue occurs causing the user to refresh the page and or just outright stuck.

Any insights on this would be much appreciated!

Answer 1

UPDATE:

Found a work-around for this and if anyone has any tips and or a better way to do this please let me now

Rather a 'DUH' sort of a solution since data-error-callback exists, but would have expected this intermittent problem to have been addressed somewhere.

Here is the code:

<script>
  // Callback function to fire after reCaptcha response is complete
  function correctCaptcha(response) {
      // Fire desired behavior after receiving the response
      window.submitUserAPIForm(response);
      // Reset the reCaptcha token due to not allowing duplicate tokens used in the same instance
      grecaptcha.reset();
    });
  };

  // If connection poops, re-try
  function onErrorCallback() {
    // Re-initialize reCaptcha
    grecaptcha.reset();
    // Fire reCaptcha
    grecaptcha.execute();

    // Fire desired behavior AFTER reCaptcha is complete 
    window.submitUserAPIForm(grecaptcha.getResponse());
  }
</script>

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

  <form>
    <!-- MY FORM INPUT VALUES HERE -->
    <button class="g-recaptcha" data-sitekey="MY_SITE_KEY" data-callback="correctCaptcha" data-error-callback="onErrorCallback">
      <p>Start My Free Trial Now</p>
    </button>
  </form>

I am practically forcing the reCaptcha to do the expected behavior when it loses the connection.

It seems the connection is lost after an attempt to reset the reCaptcha -- meaning it does not fire the callback after repeated attempts that would cause it to lose connection (which makes sense).

Debugging this was near impossible due to how things were operating under the hood, and this was a good work around if you are attempting to do validations through an API call and requiring re-submits to your form (user correction on the form).

Hopefully this helps someone from banging their heads against the wall.