Google Invisible ReCaptcha not invisible

Question

I just try to get Google Invisible ReCaptcha to work after submitting a form. My problem is, the ReCaptcha is NOT invisible, it looks like the "old" recaptcha is popping up. I don't understand why. My site-key is for invisible recaptcha. Please help me.

First of all i'm loading the API:

<script src='https://www.google.com/recaptcha/api.js?render=explicit&onload=onScriptLoad' async defer></script>

My form looks like this:

<form method="post" id="contact-form-face" class="clearfix" onsubmit="return false">
<input type="text" required name="name" value="name" onFocus="if (this.value == 'name') this.value = '';" onBlur="if (this.value == '') this.value = 'name';" />
<button type="submit" id="sendButton" data-size="invisible" class="g-recaptcha contact_btn" onclick="onSubmitBtnClick()" value="send" >send</button>
</form>

JS:

window.onScriptLoad = function () {
// this callback will be called by recapcha/api.js once its loaded. If we used
// render=explicit as param in script src, then we can explicitly render reCaptcha at this point

// element to "render" invisible captcha in
var htmlEl = document.querySelector('.g-recaptcha');

// option to captcha
var captchaOptions = {
    sitekey: 'XXXXXXX',
    size: 'invisible',
    // tell reCaptcha which callback to notify when user is successfully verified.
    // if this value is string, then it must be name of function accessible via window['nameOfFunc'],
    // and passing string is equivalent to specifying data-callback='nameOfFunc', but it can be
    // reference to an actual function
    callback: window.onUserVerified
};

// Only for "invisible" type. if true, will read value from html-element's data-* attribute if its not passed via captchaOptions
var inheritFromDataAttr = true;

console.log("render now!");
// now render
recaptchaId = window.grecaptcha.render(htmlEl, captchaOptions, inheritFromDataAttr);
};

// this is assigned from "data-callback" or render()'s "options.callback"
window.onUserVerified = function (token) {
alert('User Is verified');
console.log('token=', token);

};

// click handler for form's submit button
function onSubmitBtnClick () {
var token = window.grecaptcha.getResponse(recaptchaId);

// if no token, mean user is not validated yet
if (!token) {
    // trigger validation
    window.grecaptcha.execute(recaptchaId);
    return;
}

var xhrData = {
    'g-recaptcha-response': token
    // more ajax body/data here
};

};

To make things clearer: This reCaptcha works fine, the callback loads, the verification works fine as well.... The only problem is, that this recaptcha must be invisibile, while it's not :/

Answer 1

I think your problem is that you are explicitly calling the render() method

recaptchaId = window.grecaptcha.render(htmlEl, captchaOptions, inheritFromDataAttr);

};

if you want it to be invisible, you have to include this custom DIV

    <div class="g-recaptcha"
      data-sitekey="your_site_key"
      data-callback="onSubmit"
      data-size="invisible">
    </div>

https://developers.google.com/recaptcha/docs/invisible

the recaptcha script will look for the div class element and bind it there, then execute the call back when the recaptcha verification is invoked.

to invoke the recaptcha verification use grecaptcha.execute();

follow the example in the googledev page, is pretty straight forward.

I hope that helped =)

Answer 2

I think you are missing the badge parameter in your "captchaOptions".
there are 3 possible values : bottomright (default), bottomleft and inline (which lets you customize the css of the recaptcha).

Answer 3

Looking at the JavaScript API docs, https://developers.google.com/recaptcha/docs/invisible#js_api You need to add a div with an id to render to, the class and data attributes are not required on the button element when you render the captchas with JavaScript.

Your HTML should be:

<form method="post" id="contact-form-face" class="clearfix"   
onsubmit="return false">
    <input type="text" required name="name" value="name" onFocus="if 
    (this.value == 'name') this.value = '';" onBlur="if (this.value == 
    '') this.value = 'name';" />
    <div id="recaptcha"></div>
    <button type="submit" id="sendButton" class="contact_btn" 
    onclick="onSubmitBtnClick()"value="send">send</button>
</form>

And Your JS should be updated to:

// element to "render" invisible captcha in
var htmlEl = 'recaptcha'