reCaptcha TOTALLY invisible

Question

I’m making a page that will send a form by Javascript (Jquery), not in the usual way. The purpose of the feat is not to reload the page. I am unable to implement Invisible reCaptcha in this system.

After reading the documentation I found that this code is placed on the form and I believe it includes the code when submitting a form.

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

The line data-callback="onSubmit" calls such a function if the user "passes the test". What doesn’t help much in my case, not to mention that although it is inivisible, still appears the symbol of the reCaptcha.

From what I understand, soon when loading the reCaptcha it already generates the code, but I need to access it in a Javascript to send it to the server.

If anyone knows any way to solve please help me. I would like to include that div in the HTML.

Answer 1

I found it. I’ll leave you the answer if there’s anyone else’s question.

The div

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

var have to continue in HTML.

Before calling the reCaptcha API I put a Javascript with the code:

function onloadCallback() { // Callback
    $(function () { // Site carregado
        grecaptcha.execute(); // Executa o recaptcha
    });
}

And next to the API link I passed a GET:

?onload=onloadCallback

The onload=onloadCallback makes the function onloadCallback(); is called as soon as the codeword is loaded. Then it makes the token request as soon as the page is loaded with grecaptcha.execute();. Then you just pick up the code whenever you want with grecaptcha.getResponse();.

PS: If reCaptcha has not yet loaded, and a grecaptcha.getResponse();, it will return null. For this I recommend putting a if(grecaptcha.getResponse() !== "") to ensure that a null token will not be sent.