CODEWITHSUNDEEP
javascriptrecaptchainvisible-recaptcha
user3024235
user3024235

Reputation: 425

Invisible ReCapcha not calling callback

I have my invisible capcha setup like this:

<!-- CAPCHA -->
<script src="https://www.google.com/recaptcha/api.js"></script>
<div class="g-recaptcha"
    data-sitekey="6LchqW0UAAAAANOoHruD0Ql5aNJIZld4EwLiaf-W"
    data-callback="capchaDone" data-size="invisible">
</div>

And the callback function is defined here:

window.capchaDone = function(response) {
    console.log("DONE");
    console.log("RES", response);
};

But nothing is ever logged. I have also tried to find a simple implementation of this in Javascript. but there is no real documentation regarding this

Upvotes: 3

Views: 2244

Answers (1)

Luca Kiebel
Luca Kiebel

Reputation: 10096

As of the Documentation, if you attach the action to a DIV, you also have to call grecaptcha.execute(); from JavaScript, for the reCAPTCHA to execute. Let's say you have a form like this:

<!-- CAPTCHA -->
<script src="https://www.google.com/recaptcha/api.js"></script>
<div class="g-recaptcha"
    data-sitekey="6LchqW0UAAAAANOoHruD0Ql5aNJIZld4EwLiaf-W"
    data-callback="capchaDone" data-size="invisible">
</div>

<form id="loginForm">
  <input type="text" name="username" id="usernameField" />
  <input type="password" name="password" id="passwordField" />
  <input type="submit" />
</form>

And have a submit eventListener attached to it, you have to call reCAPTCHA in there:

document.querySelector("#loginForm").addEventListener("submit", function() {
  /** Validate input **/
  grecaptcha.execute(); // hand execution off to `data-callback`
});

You can then submit the form in your data-callback function, after you have validated the response.

function capchaDone(response) {
  console.log(response)
  /** Validate reCAPTCHA **/
  document.querySelector("#loginForm").submit() // at last, submit the form
}

Upvotes: 4

Related Questions