We are using recpatcha v2 and v3 on our forms (v3 falls back to v2), and this works great.
This would be an example of that:
<script src="https://www.google.com/recaptcha/api.js?onload=reCaptchaV2onload" async defer></script>
<script src="https://www.google.com/recaptcha/api.js?onload=reCaptchaV3onload&render={{ $.Site.Params.recaptcha3 }}" async defer></script>
<script>
function reCaptchaV2onload() { console.log('v2 loaded'); }
function reCaptchaV3onload() { console.log('v3 loaded'); }
</script>
Now the problem comes when we add a 3rd party web chat to our website. This webchat uses its own recaptcha with its own site key for its own purposes, and once it loads, it overrides the instance that I've loaded, causing my forms to fail with the error
const token = await grecaptcha.execute(window.reCaptchaSiteKey, { 'action': 'contact' });
Uncaught Error: Invalid site key or not loaded in api.js: mySiteKey
I tried to "keep" the (possibly) separate grecaptcha
instances, but the object actually seems to stay the same the entire time, so something like this doesn't appear to work
function reCaptchaV2onload() {
window.grecaptcha2 = grecaptcha;
}
function reCaptchaV2onload() {
window.grecaptcha3 = grecaptcha;
}
window.grecaptcha2 === window.grecaptcha
and window.grecaptcha3 === window.grecaptcha
are always true. I was even hoping that maybe recaptcha passes itself to the onload func, but it appears to pass 0 arguments.
How can I use recaptcha without my site key without the conflicting 3rd party loading its own with its own site key?