reCaptcha is not calling the onload function

Question

I am trying to implement reCaptcha for submission of form but I am having trouble implement the google captcha javascript . I am not getting any console message in console.

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

    <script type="text/javascript">
      var recaptchaCallback = function () {
        console.log('recaptcha is ready');
        grecaptcha.ready(function() {
            grecaptcha.execute('SITE_KEY', {action: 'some_action'}).then(function(token) {
                console.log(token);
            });
        });
      }
    </script>

I don't see any console message, error, warning literally nothing in console. isn't onload should invoke the callback function. I checked the javascript response in network tab I am getting response with 200 status nothing wrong there . Can anyone tell me what I am doing wrong here . yeah I replaced the SITE_KEY with actual key .

Thanks and any advice will be helpful.

Answer 1

Your error is in Google's script URL: .../api.js?onload=recaptchaCallback&render=SITE_KEY the render param should not have the site key as value, it should be either explicit or onload

source: https://developers.google.com/recaptcha/docs/invisible#javascript_resource_apijs_parameters