Everytime I tried to render the reCAPTCHA manually using the render function I get the following error
Error: Invalid site key or not loaded in api.js: "6Lf....."
It works fine doing it the way shown in the docs
<head>
<script src="https://www.google.com/recaptcha/enterprise.js?render=6L..."></script>
<!-- Your code -->
</head>
<script>
function onClick(e) {
e.preventDefault();
grecaptcha.enterprise.ready(async () => {
const token = await grecaptcha.enterprise.execute('6L...', {action: 'LOGIN'});
});
}
</script>
But whenever I try:
<script src="https://www.google.com/recaptcha/enterprise.js?render=explicit&onload=onRecaptchaLoadCallback"></script>
// recaptcha.js
function onRecaptchaLoadCallback(){
grecaptcha.enterprise.render('recaptcha', {
sitekey: "6L...",
badge: 'inline',
size: "invisible",
callback: function () {
console.log('recaptcha callback');
}
})
}
// executed upon form onsubmit
function onClick(e) {
e.preventDefault();
grecaptcha.enterprise.ready(async () => {
const token = await grecaptcha.enterprise.execute('KEY_ID', {action: 'LOGIN'});
});
}
I get the above-stated error. I have already double-checked the keys and tried creating a new key, but it did not work. Any ideas as to why it doesn’t work when trying to render manually?