javascripthtmlrecaptcha

Explicitly Rendering ReCaptcha - Onload Function Not Firing


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');
    }
  });
}

Solution

  • 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.