Multiple reCaptcha site keys on the same page, different instances of `grecaptcha` possible?

93 views Asked by At

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?

0

There are 0 answers