New ReCaptcha (invisible) not working

Question

I am trying to implement the new invisible reCaptcha, but it is not working.

First, event tough I have created a new key with the "invisible" option, changed the key in my application, when I look in my console I can see this request:

https://www.google.com/recaptcha/api2/anchor?k=.....

I think this is not the correct api, right?

My code for the importing part is like this:

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

Which is right according to the doc...

Second, I chose to put the captcha in a div (which is ok according to the doc):

<div id="captchaSignup" class="g-recaptcha" data-size="invisible" data-badge="inline"></div>

I am also using the render function to declare the callback and the site-key:

grecaptcha.render(document.getElementById('captchaSignup'), { 'sitekey' : '...', 'callback' : function(response) {$rs.validCaptcha=response;$s.$apply()} });

This works as a captcha solution, but not as the invisible one since it is still showing the box. I know that I also have to use the execute function, but since I am still seeing the box, I think I am not in that phase yet.. Can anybody help me?

Answer 1

In case of "invisible" recaptcha, grecaptcha.render() api takes optional third boolean parameter called inherit and defaults to false. If its value is specified as true, only then recaptcha uses existing data-* attributes on .g-recaptcha element for parameters not specified in options to render(), otherwise it treats as if the parameter is missing.

Since you are not passing this parameter with true value, it never reads data-size="invisible" value that you have on your HTML element and thereby goes on to render it as visible recaptcha.

Try this:

grecaptcha.render(document.getElementById('captchaSignup'), {
                    'sitekey' : '...',
                    'callback' : function(response) { ... }
                  }, true);       // <-- this is the change. Pass "true" here