My recaptcha render doesn’t work and return 0

I currently have a problem with Google’s Invisible Captcha. It refuses to load properly despite all my attempts.

The situation: I have a form which is added to the DOM via jQuery when clicking on a button. The form is then displayed in an overlayer which covers the entire screen. At first, no worries but once the form is displayed, I try to render the captcha without success, which prevents doing the execute and thus using the captcha on the form.

Here is the insertion code of my form (which works):

$('.js-event-subscribe').click(function(e){
        e.preventDefault();
        var event = $(this).data('event');
        
        clearTimeout(ajxTimeout);
        if(typeof ajx != "undefined")
            ajx.abort();
            
        ajxTimeout = setTimeout(function(){
            ajx = $.ajax({
                type: 'POST',
                url: langPath + '/ajax/event-subscribe/',
                data: 'id='+event,
                success: function(content){
                    if($('body').find('#js-event-subscribe').length)
                        $('body').find('#js-event-subscribe').remove();

                    $(content).insertAfter('footer');
                    $('html, body').addClass('opened');

                    //var test = grecaptcha.render('js-recaptcha-event');
                    //console.log(test);
                    //grecaptcha.execute('js-recaptcha-event');
                }
            });
        }, 500);
    });

So far it works, the form is correctly added and functional. The grecaptcha.render (according to the documentation) should return the widgetID but reply 0. The “js-recaptcha-event” parameter corresponds to the ID of the DIV captcha in the form (added to the DOM therefore).

<div id="js-recaptcha-event" class="g-recaptcha" data-sitekey="xxxxxxxxx" data-size="invisible"></div>

Therefore the grecaptcha.execute (‘js-recaptcha-event’) returns an error

Uncaught Error: Invalid site key or not loaded in api.js: js-recaptcha-event

I tried adding the sitekey in render parameters with the same result. 🙁

The recaptcha API is loaded via (also tested with async & defer in attributes)

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

Can you tell me what I need to make it work?

Thank you in advance

Answer

As far as I know 0 is a valid response to the render event, i.e. the widget ID is an integer starting at 0 for the first widget rendered.

As render is explicit, I would take the approach of specifying all the parameters in the render event:

widget = grecaptcha.render(captcha, {
        'sitekey': 'xxx',
        'callback': function(token) { ... },
        'badge': 'inline',
        'size': 'invisible'
    });

Given your error response, I would triple-check that your site key is correct, and that it corresponds to the correct entry in your reCAPTCHA admin console, where the domain you are loading from needs to be specified.

Ensure the code for rendering the widget is loaded before the reCAPTCHA script loads.

I would suggest you render the reCAPTCHA immediately on the form appearing, and then execute it upon clicking submit. That may also resolve the issue.