Invisible reCAPTCHA callback on fail or exit

Question

The Invisible reCAPTCHA lets you easily set a callback upon successful verification:

<button class="g-recaptcha" data-sitekey="your_site_key" data-callback='successfulVerification()'>Submit</button>

But it doesn't appear to have any option to trigger a callback if the modal for further verification is closed (or the reCAPTCHA is unable to verify that you're a human - actually not sure if this ever happens, maybe it just keeps showing you new challanges forever?)

The reason why this is important is say we have a loading spinner or some kind of visual cue to show the user that we're working on the submission. If the reCAPTCHA is unable to automatically determine that the user is indeed human, the modal will be shown - now if the user completes it successfully then that's fine - but if he/she exits it, the loading spinner will still be visible as it doesn't know that the reCAPTCHA failed/user exited it.

One workaround is to only show the loading spinner after the reCAPTCHA succeeds and the request begins - however this would be a poor experience for the user as there would be a delay between clicking the button and the form "appearing" to be submitted - leaving the user to possibly wonder if the form actually submitted or not.

Any ideas on how to remedy this? Thanks!

Answer 1

I haven't found a solution to this but a hack workaround would be to reenable the submission button after a timeout so at least the user isn't locked out indefinitely if they cancel the recaptcha attempt.

var timeout = setTimeout(function () { enableSubmit(); }, 3000);
grecaptcha.render(elem, {
    ...
    callback: function (token) {
        clearTimeout(timeout);
        continueWithSubmission();
    }
});
grecaptcha.execute();