Search code examples
javascriptjqueryrecaptchainvisible-recaptcharecaptcha-v3

Google Recaptcha V3 - Widget Id when loading captcha through URL


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?


Solution

  • 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);
                });
             });        
    }