We're trying to implement the new Google reCAPTCHA on our website, however when we try and load a callback from it using a namespaced function, the callback does not run.

Changing the callback to not use a callback works correctly. We're doing something similar with the Google Maps API, which works fine.

Is there any way to get around this, or is this a limitation of the new Google reCAPTCHA system?

Code

<script>
    var namespace = {};
    namespace.captcha = function() {
        alert("Hello world!")
    };
</script>
<script src="//www.google/recaptcha/api.js?onload=namespace.captcha&render=explicit" async defer></script>

The issue really is that we want to keep all our code wrapped up in namespaced scripts using revealing modular pattern. A way around this is to create a global variable and use this as the callback, but it's not quit what I had hoped for.

Global callback

<script>
    var namespace = {};
    namespace.captcha = (function() {         
        function call() {
            alert("Hello world!")
       };
       window.callback = namespace.captcha.call;   
       return call:call;
    })();
</script>
<script src="//www.google/recaptcha/api.js?onload=callback&render=explicit" async defer></script>

We're trying to implement the new Google reCAPTCHA on our website, however when we try and load a callback from it using a namespaced function, the callback does not run.

Changing the callback to not use a callback works correctly. We're doing something similar with the Google Maps API, which works fine.

Is there any way to get around this, or is this a limitation of the new Google reCAPTCHA system?

Code

<script>
    var namespace = {};
    namespace.captcha = function() {
        alert("Hello world!")
    };
</script>
<script src="//www.google./recaptcha/api.js?onload=namespace.captcha&render=explicit" async defer></script>

The issue really is that we want to keep all our code wrapped up in namespaced scripts using revealing modular pattern. A way around this is to create a global variable and use this as the callback, but it's not quit what I had hoped for.

Global callback

<script>
    var namespace = {};
    namespace.captcha = (function() {         
        function call() {
            alert("Hello world!")
       };
       window.callback = namespace.captcha.call;   
       return call:call;
    })();
</script>
<script src="//www.google./recaptcha/api.js?onload=callback&render=explicit" async defer></script>

• javascript
• recaptcha
• captcha

• Yes, it looks like they don't allow it. – Emmanuel Delay Commented Jan 5, 2015 at 12:46
• "Changing the callback to not use a callback works correctly" Did you mean to not use a namespace? – xr280xr Commented Aug 16, 2016 at 20:32
• I'm having same problem PLUS the issue that we minify function names, so our global namespace function names are unpredictable. – webdevinci Commented Oct 14, 2016 at 13:33
• What is the problem with using <script src="//www.google./recaptcha/api.js?onload=namespace.captcha.call&render=explicit" async defer></script> – Roumelis George Commented Oct 25, 2016 at 11:56
• 1 I also can't get recaptcha V2 to work with a namespace'd module function as a callback. – Gurnzbot Commented Jul 7, 2017 at 13:36

2 Answers 2

You can do it by using the Javascript API to set the callback.

This will allow you to use the namespaced callback, or even the scope protected callback when using a framework.

I couldn't test it, so as an example:

var script = document.createElement('script');

script.id = 'container'
script.src = '//www.google./recaptcha/api.js?render=explicit';
script.async = true;
script.defer = true;

script.onload = () => { ... };

document.body.appendChild(script);

For the V3

Your script.onload function could be like:

grecaptcha.ready(function() {
  namespace.captcha();
});

For the V2

Your script.onload function could be like:

grecaptcha.render('container', { 
  callback: namespace.captcha
});

The file api.js load another stuff.

The parameter onload=functionCallback in:

//www.google./recaptcha/api.js?onload=callback&render=explicit

is used to determinate the function that will be loaded when the stuff in the api.js is loaded.