Explicitly Rendering ReCaptcha - Onload Function Not Firing

javascript html recaptcha

39,936

Solution 1

I just copied your code, used my own Site Key and it works.

The code I used is:

<html>
  <body>
    <p>ReCaptcha Test</p>

    <div id="recaptcha"></div>

    <script src="https://www.google.com/recaptcha/api.js?onload=recaptchaCallback&render=explicit&hl=iw" async defer></script>

    <script type="text/javascript">
      var recaptchaCallback = function () {
        console.log('recaptcha is ready'); // showing
        grecaptcha.render("recaptcha", {
            sitekey: 'SITE_KEY',
            callback: function () {
                console.log('recaptcha callback');
            }
        });
      }
    </script>

  </body>
</html>

Check your code carefully, as just a single character typo can stop things from working.

Solution 2

Make sure that your onload method is defined before the recaptcha script. Otherwise you will have a race condition where the recaptcha script could be attempting to call your method before it is defined (especially if the recaptcha script is cached).

From the documentation for onload https://developers.google.com/recaptcha/docs/display

Note: your onload callback function must be defined before the reCAPTCHA API loads. To ensure there are no race conditions:

order your scripts with the callback first, and then reCAPTCHA

use the async and defer parameters in the script tags

For example:

<div id="recaptcha"></div>


<script type="text/javascript">
  var recaptchaCallback = function () {
    console.log('recaptcha is ready'); // not showing
    grecaptcha.render("recaptcha", {
        sitekey: 'SITE_KEY',
        callback: function () {
            console.log('recaptcha callback');
        }
    });
  }
</script>

<script src="https://www.google.com/recaptcha/api.js?onload=recaptchaCallback&render=explicit&hl=iw" async defer></script>

39,936

Author by

Gofilord

Updated on July 09, 2022

Comments

Gofilord almost 2 years
From the documentation I understood that in order to change the language of the recaptcha I have to render it explicitly.

The problem is, however, that it's not really showing up, and the onload is not even called.
When I try to render it automatically it does work.

Here's the code:
In the HTML head: (I have also tried putting this at the end of the body tag)
```
<script src="https://www.google.com/recaptcha/api.js?onload=recaptchaCallback&render=explicit&hl=iw" async defer></script>
```
In the HTML form:
```
<div id="recaptcha"></div>
```
Javascript:
```
var recaptchaCallback = function() {
  console.log('recaptcha is ready'); // not showing
  grecaptcha.render("recaptcha", {
    sitekey: 'My Site Key',
    callback: function() {
      console.log('recaptcha callback');
    }
  });
}
```