callback method not firing in grecaptcha.render()

[hutber]

I am trying to have my callback fire once recaptacha i loaded however it won't load the callback.

Taken from https://developers.google.com/recaptcha/docs/display#example

        grecaptcha.render('example3', {
          'sitekey' : 'your_site_key',
          'callback' : verifyCallback,
          'theme' : 'dark'
        });

In my example I am doing:

            grecaptcha.render('recaptcha', {
                'sitekey': config.recaptcha.id,
                'callback': function(){
                      console.info('something'); 
                 }
            });

The callback function will never execute. reCacptcha will however load in the page.

Latest version of Chrome.

[crobinson42]

@jamiehutber are you passing the URL params?

render=explicit

<script src='https://www.google.com/recaptcha/api.js?onload=myCallBack&render=explicit'></script>

[savedario]

I have encountered the same issue and wrote a sample fiddle for it: https://jsfiddle.net/savedario/wbtjmjbf/ The onload does not seem to work in there, so I added the call manually to render the recaptcha. Either way, and whether the recaptcha is solved before or after submitting the form, the alert of the callback is never executed. EDIT: fiddle updated following comment

[mycarrysun]

I've encountered the issue as well. Trying to alert inside the callback does nothing. Check this page: columbusahu.org/contact-us.

I originally thought this was a ninja forms issue but seems it's might actually be a recaptcha issue.

[webtekkers]

@savedario The above catpcha fiddle works, if you specify your callback as an object reference and not a string. "captchaSubmit" > captchaSubmit

recaptcha_one = grecaptcha.render('id-one', {"sitekey":"6LcgSAMTAAAAACc2C7rc6HB9ZmEX4SyB0bbAJvTG","theme":"light","callback":captchaSubmit}); var myCallBack = function() { alert('Rendering...'); recaptcha_one = grecaptcha.render('id-one', {"sitekey":"6LcgSAMTAAAAACc2C7rc6HB9ZmEX4SyB0bbAJvTG","theme":"light","callback":captchaSubmit}); }

[hutber]

Thanks for the update, I believe the documentation should show clearly how the above is implemented then.

[raguchak]

@savedario and @mycarrysun

The sites you reffered in your post do not work in firefox...

I have the same issues. My Captach works in all browsers expect firefox

[jasonfedor]

reCAPTCHA logs an error to the console if it can't find the function to call. This may happen in different browsers if they load resources in a different order (make sure to add 'async defer' to the reCAPTCHA script as in the documentation and make sure the functions you want to call are available on the global scope in time)

[raguchak]

@jasonfedor ... i did include async and defer and my functions are in the global scope.

[sergiomb2]

in https://developers.google.com/recaptcha/docs/display#render_param (g-recaptcha tag attributes and grecaptcha.render parameters) I don't see any callback (only) parameter , therefore example might be erroneous ...

[ghost]

i'm finding it thoroughly upsetting I can't put my captcha rendering JS inside an external file because the html is necessary to have in the file

[andreySadomovskiy]

@johnspostsalotfishing I have the same issue, did you found any solution?

[ghost]

@andreySadomovskiy yes, kind of I used Require JS to do this:

var requireConfig = {
  paths: {
      'recaptcha': '//www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit'
  }
};
function render(id) {
    recaptchaClientId = grecaptcha.render(id, {
        'sitekey': 'SITEKEY',
        'callback': verifyCallback,
        'theme': 'light'
    });
}
window.renderRecaptcha = render;
var onloadCallback = function() {
  if (!document.getElementById('MYCUSTOMID')) {
    return;
  }
  window.renderRecaptcha('MYCUSTOMID');
};
requirejs.config(requireConfig);
require(['jquery','recaptcha'], function(recaptcha) {

});
var verifyCallback = function (response) {
    jQuery("#submitButton").removeClass('disabled'); 
};`

this seemed to solve my problem but it's the only method I found to get around it. Good luck!

[andreySadomovskiy]

@johnspostsalotfishing, interesting. Thank You!

[rowan-m]

Closing as this looks to be a JS issue and seems to be solved.

[sbseeram]

Is verifyCallBack issue resolved, i am facing the same issue. Once callback was called after challenge image. later onwards never called the verifyCallBack.

Can any one please have the solution?

[ghost]

Just to clarify, I don't think this issue is resolved, my issue and the one I helped Andrey with, doesn't actually correspond to this problem, we're in a different situation - read https://github.com/google/recaptcha/issues/101#issuecomment-362533763 - where a solution to this should solve our problem, but my solution to our problem does not solve your problem.

[sbseeram]

Thanks for the response. any one know below questions,
1) Does invisible recpatcha displays challenge popup every time or shows challenge popup only when it feels it's bot?

I thought invisible reCaptcha - Challenge popup will throw only if it suspects as a bot, else it will not popped up is it correct?

2) does data-callback method will allways call? or calls only when responded to the challenge popup?

[acarlstein]

Yeah, regrettably, I am having troubles too with recaptcha v3: [:{(]

I have this inside the form: <div id="recaptcha_element"></div> My form has the action as action="?" I added the class g-recaptcha to my submit button.

The onloadCallback is being called since the message Captcha Loading... shows up; however, the message Loaded... never shows up.

 <script type="text/javascript">
          var onloadCallback = function() {
                console.log("Captcha Loading...")                
                grecaptcha.render('recaptcha_element', 
                {
                    'sitekey': '<site_key_goes_here>',
                    'callback': function(response) {
                        console.log("Loaded...")
                        console.log(response)
                    }
                });
            };
</script>
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit&hl=iw" async defer></script>

Plus... big plus... I haven't found yet a way to test manually if this is actually running. I want to see something showing up if detects that its a bot.

This could be doing nothing for all I know.