Error: No reCAPTCHA clients exist (reCAPTCHA v3)
Have you tried loading the script before trying to send the request?
<script src="https://www.google.com/recaptcha/api.js?onload=ReCaptchaCallbackV3&render=site_key"></script>
<script type="text/javascript">
var ReCaptchaCallbackV3 = function() {
grecaptcha.ready(function() {
grecaptcha.execute("site_key").then(function(token) {
console.log("v3 Token: " + token);
});
});
};
</script>
I believe this error occurs when the reCaptcha api.js loads, but your container is not present on the page yet (at least for v2). I had this error occur in a React app when I navigated to the page rather than loading it as the first on. Instead of using render=explicit
and using a global namespace onLoadCallback
, I was able to resolve it by rendering the captcha element manually.
Instead of creating a <div class="g-recaptcha"></div>
, give the container div an id only (<div id="recaptcha-container"></div>
) and render it in your JS code (e.g. in componentDidMount
for a React app):
grecaptcha.ready(function() {
grecaptcha.render("recaptcha-container", {
"sitekey": "your-site-key"
});
});