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
```html
<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:
```js
<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?
Hi @paul_freeman,
Welcome to the Google Cloud Community!
As first troubleshooting step, kindly re-generate your key with either v2
or v3
[1]. Probably, your script wants ReCaptcha v2
, but you are using v3
(or vice-versa) [2].
Let me know if it worked. Thank you.
[2]. https://stackoverflow.com/questions/62635943/recaptcha-v3-error-for-site-owner-invalid-key-type