Google Recaptcha V3 - Widget Id when loading captcha through URL

Question

I am implementing the Recaptcha V3 on my site, and I could not find a proper way to reset the token if my request has failed.

Following the documentation, to load the recaptcha I need to include the following script on my page:

<script src='https://www.google.com/recaptcha/api.js?render=MY_KEY'></script>

Also I am binding the captcha token to a field, to validate on my back end when the customer choose to send an e-mail:

    grecaptcha.ready(function() {
        grecaptcha.execute('MY_KEY', {
            action : 'homepage'
        }).then(function(token) {
            $("#recaptcha").val(token);
        });
    });

So I have mainly two steps:

1. Validate the captcha
2. Send the e-mail

If some error occur during the second step, I was unable to find a way to reset the current captcha on the page, since it was already validated if I try again it is no longer valid.

I have tried the grecaptcha.reset(), but without the widgetId the following message appears: Uncaught Error: No reCAPTCHA clients exist.

How can I get the widget id when rendering through the script?

Neuman

Answer 1

As I understand from Recaptcha V3 you have to call execute again try to do it like this

let createNewToken = () => {
        grecaptcha.ready(function() {                   
            grecaptcha.execute('code', {action: 'homepage'}).then(function(token) {
                 console.log(token);
            });
         });        
}

Kabul

Hey Baha'a, I will check this approach and let you know if it worked, thank you for your time! – Neuman

I put the "grecaptcha.execute" part in a function and just call it whenever I need to reset the captcha. Works fine. – Mordent