appleboy/react-recaptcha

reCAPTCHA couldn't find user-provided function: onloadCallback

ochanje210 opened this issue · 10 comments

ochanje210 commented

I have followed Explicitly render the reCAPTCHA widget and having the following message:

reCAPTCHA couldn't find user-provided function: onloadCallback
razvansandu commented

I've had the same issue and found two solutions:

  1. Add the onloadCallback function to window
  2. Remove the onload=onloadCallback part from the query string of the script you included in index.html
  • 👍11
  • ❤️1
JaosnHsieh commented

I had the same problem started from these few days. It solved by @razvansandu comments. thanks.

jsardev commented

Maybe try making it more modern and react-way and use my new React reCAPTCHA wrapper library. I think you'll feel much better with it 😄 🚀

Library: https://github.com/sarneeh/reaptcha
Example: https://sarneeh.github.io/reaptcha/

Deleted user commented

Hello razvansandu
I have a question
I have an issue like ochanje210.
Could you explain your solution 1 in more detail?
what is window?
How do i have to add onloadCallback?
please tell me about it in detail
Thanks

  • 👍1
varpenny commented

I've found a solution: just pass onloadCallback to the component, even if it is sometime not necessary to handle the onload event.
version: 2.3.10

<Recaptcha sitekey="xxx" render="explicit" onloadCallback={() => console.log('loaded')} />

  • 👍1
mwang7 commented

In your index.html you probably have this:

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

remove "onload=onLoadCallback"

should look like this:

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

That worked for me

  • 👍2
  • 🎉5
  • ❤️3
  • 🚀1
EitsamShahzad commented

a

  • 👍12
JozeHernandez commented

Tuve el mismo problema y removiendo "onload=onLoadCallback" del Query me funciono, como lo mencionan arriba. Mi query quedo <script src="https://www.google.com/recaptcha/api.js?render=explicit" async defer></script>
:)

DanCanetti commented

In your index.html you probably have this:

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

remove "onload=onLoadCallback"

should look like this:

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

That worked for me

I had this loading in as <script src="https://www.google.com/recaptcha/api.js" async defer></script> and adding ?&render=explicit to the src worked for me. Thanks for this, I've been looking for a solution (using jQuery) for ages.

waliddeejay commented

brother just replace your script with this 💯

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