16

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.com/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.com/recaptcha/api.js?onload=callback&render=explicit" async defer></script>
user7637745
  • 965
  • 2
  • 14
  • 27
Toby
  • 1,651
  • 2
  • 18
  • 31

2 Answers2

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.com/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
});
Gatsbimantico
  • 1,822
  • 15
  • 32
0

The file api.js load another stuff.

The parameter onload=functionCallback in:

//www.google.com/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.

montorodiaz
  • 1
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jan 12 '23 at 13:21