ReCAPTCHA couldn't find user-provided function: myCallBack

Question

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'
    });
};

Is this funtion `verifyCallback3 ` defined globally? Or inside other function? — Victor Leontyev, Jun 15 '17 at 12:29

score 43 · Answer 1 · answered May 11 '18 at 12:53

43

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.

answered May 11 '18 at 12:53

John Lehmann

7,975
4
58
71

4

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 Dec 11 '18 at 17:06

Husnain Shabbir · Answer 2 · 2017-12-06T03:44:10.330

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.

edited Dec 06 '17 at 03:44

answered Dec 06 '17 at 03:24

Husnain Shabbir

516
5
12

Thanks. I had the same problem. – AnujDeo Mar 26 '18 at 12:10
1

That worked for me as well, i remove document.ready from script. – Moxet Jan May 11 '20 at 14:40

score 12 · Answer 3 · answered Sep 25 '17 at 03:59

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();"

answered Sep 25 '17 at 03:59

Qasim

1,554
1
13
22

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 Nov 14 '18 at 16:05
2

how can I have this callback function in global scope if I'm using es6 class modules? – Akin Hwan Dec 11 '18 at 16:50

score 10 · Answer 4 · edited Jul 11 '20 at 12:33

10

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...

edited Jul 11 '20 at 12:33

Professor Abronsius

33,063
5
32
46

answered May 08 '18 at 15:59

Nestor Junior Castellano

109
1
3

score 2 · Answer 5 · answered Oct 06 '21 at 14:12

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.

dayo · Answer 6 · 2020-06-18T20:12:41.407

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'
    });
};

score 0 · Answer 7 · answered Aug 27 '22 at 10:06

0

For me working this solution:

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

answered Aug 27 '22 at 10:06

step

2,254
2
23
45

score 0 · Answer 8 · answered Sep 18 '22 at 16:43

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>

score 0 · Answer 9 · answered Apr 24 '23 at 14:14

0

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.

answered Apr 24 '23 at 14:14

Alireza Bijantabar

474
3
10

ReCAPTCHA couldn't find user-provided function: myCallBack

9 Answers9

Linked