42

I'm trying to use ReCAPTCHA where I am getting following error.

ReCAPTCHA couldn't find user-provided function: myCallBack.

How can I solve this issue?

var verifyCallback3 = function(response) {
    if(response!=null){
        $("#rss").show();
    }
};

var myCallBack = function() {
    grecaptcha.render('html_element', {
        'sitekey' : '6sssfffffffffAAPfEI_RkbAlUuw5FA4p-kiGy5Nea',
        'callback' : verifyCallback3,
        'theme' : 'light',
        'type':'image'
    });
};
1
  • 3
    Is this funtion verifyCallback3 defined globally? Or inside other function? Commented Jun 15, 2017 at 12:29

10 Answers 10

45

Make sure your callback function is being defined in the global scope. For some reason, in production my function was not in this namespace.

In addition to:

function myCallback() { ... }

Make sure you directly assign it into the global space:

window.myCallback = myCallback;

You should be able to test whether this is your problem, my typing the function name at the Javascript console and seeing if it's defined or not.

1
  • 5
    is there any way to do this within a es6 class module js file? there all my functions are defined without keyword 'function' and then initiated in constructor like this.myFunction. currently i just have window.recaptchaCallback= recaptchaCallback above my function recaptchaCallback definition which looks ugly sitting above my export default class{}
    – Akin Hwan
    Commented Dec 11, 2018 at 17:06
13

The same thing happening with me.I have checked my code carefully, every thing is fine but captcha not shown and in console the message is "ReCAPTCHA couldn't find user-provided function: myCallBack" but finally I found that my JavaScript code was is in page load function. I am just put out it from page load function and its working.

2
  • Thanks. I had the same problem.
    – AnujDeo
    Commented Mar 26, 2018 at 12:10
  • 1
    That worked for me as well, i remove document.ready from script.
    – Moxet Jan
    Commented May 11, 2020 at 14:40
12

In your recaptcha div, make sure not to use parenthesis in your data-callback.

Like so data-callback="yourCallback", rather than data-callback="yourCallback();"

2
  • 1
    Is there still a way to pass a variable with it? It would be handy to pass in on which form this was used
    – Empi
    Commented Nov 14, 2018 at 16:05
  • 3
    how can I have this callback function in global scope if I'm using es6 class modules?
    – Akin Hwan
    Commented Dec 11, 2018 at 16:50
12

You have to put your script function:

<script> function registerFormCheck()</script>

Before the google script something like this:

/* First */    <script> function registerFormCheck(){} </script>
/* Second */   <script src='https://www.google.com/recaptcha/api.js'></script>

This worked for me...

0
2

As reference to the John Lehmann's answer, for React users, in order to make your callback function visible make it global.

You can achieve this by using useEffect() or componentDidMount() lifecycle methods.

For example:

useEffect(() => {
    window.verifyCaptcha = verifyCaptcha;
})

This way, when component that contains reCAPTCHA box loads, it will also make your callback function global.

1

There is likely an error somewhere in the function or somewhere in your javascript causing the function to not become registered, for me it was a missing comma. From what you have, I'm guessing its related to 'html_element' or a widgetID not being assigned. Try:

var myCallBack = function() {
    var widgetID;
    widgetID = grecaptcha.render(document.getElementById('html_element'), {
        'sitekey' : '6sssfffffffffAAPfEI_RkbAlUuw5FA4p-kiGy5Nea',
        'callback' : verifyCallback3,
        'theme' : 'light',
        'type':'image'
    });
};
1

Funny thing:

Changing this:

var verifyCallback3 = function(response) {
   if(response!=null){
       $("#rss").show();
   }
};

To This:

function verifyCallback3(response) {
   if(response!=null){
       $("#rss").show();
   }
};

did the trick for me.

0

For me working this solution:

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

In one of the code samples in Google's documentation, they include this script tag without a closing tag:

<script async src="https://www.google.com/recaptcha/api.js">

Adding the closing tag fixed the problem for me:

<script async src="https://www.google.com/recaptcha/api.js"></script>
0

I faced the same issues and solved them by deactivating caching plugins. This issue often occurs in WordPress sites due to caching plugins. Deactivate the caching plugins and check.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.