Even with the inline JavaScript function - Google ReCAPTCHA couldn't find user-provided function: function (response) -

Question

I am using ReCAPTCHA version V2. On the callback function (ie data-callback ), I am getting the following error message.

ReCAPTCHA couldn't find user-provided function: function (response)

Now, most of the posts/solutions I see on the web are related to a local callback function that doesn't get invoked when referred in data-callback attribute of the g-recaptcha div. However, in my case, even the inline function does not get invoked. Please have a look at the following image.

Screenshot-1:

In fact, when I am using JavaScript native function such as alert(), it is still not working.

Screenshot-2:

Here's the JS code I am using.

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

First try - callback function:

<div class="g-recaptcha" data-sitekey="Please add your site key if you want to test" data-callback="function (response) { alert('working: ', response);}"></div>

Second try - callback function:

<div class="g-recaptcha" data-sitekey="Please add your site key if you want to test" data-callback="Window.alert('hi');"></div>

I appreciate your help if you can help me understand why is the google API responding in a completely weird way.

Answer 1

Inline JavaScript function in Google ReCAPTCHA will never work.

If it could save somebody's time, I am posting his answer here.

All credit goes to @Christos Lytras . Many thanks to him for helping me understand the JS behind the Google ReCAPTCHA. What he said in the comment section about Recaptcha's JS tries to identify the function by its name in the global window object, is absolutely correct. Thus, my implementation was not working and will never work (at least in the V2 version).

In all my solutions when I was trying to implement an inline function, it was read as the window[function (){}] or window[Window.alert('hi');] which is incorrect JS syntax. Therefore, when I tried it the following way, it worked like charm.

Correct approach

<script>window.myCallBackFunction = function() { alert("HI"); }</script>
<script src='https://www.google.com/recaptcha/api.js'></script>
<div class="g-recaptcha" data-sitekey="XXX" data-callback="myCallBackFunction" ></div>

Please note: Just for more clarity, I have also tried implementing the callback function initially before posting this question and it didn't work because of the order of the scripts. Thanks to this answer on another question that helped me immensely but after @Christos Lytras 's explaination. In the beginning, I was implementing it in the following order.

Incorrect approach

<script src='https://www.google.com/recaptcha/api.js'></script>
<script>window.myCallBackFunction = function() { alert("HI"); }</script>
<div class="g-recaptcha" data-sitekey="XXX" data-callback="myCallBackFunction" ></div>

I hope it could help somebody like me, in the future.