The problem I'm currently facing is that I have a plugin with a Google reCAPTCHA feature. This plugin has been used by other sites, and those sites also have Google reCAPTCHA implemented. When this scenario occurs, I encounter an error.
So, I referred to some blogs where they mentioned that we can execute the Google reCAPTCHA by providing a unique ID. I have done that, but I'm encountering another issue.
const widgetId = (window as any).grecaptcha.render('rtl-captcha', {
sitekey: '-------sitekey-------',
size: 'invisible',
callback: 'getToken',
});
await (window as any)?.grecaptcha.execute(widgetId);
This is what i implemented but i am getting this error
Error: reCAPTCHA has already been rendered in this element
at recaptcha__en.js:197:433
at Oi.formSubmitEvent (poupengine.iife.js:9:37517)
at HTMLFormElement.<anonymous> (poupengine.iife.js:9:36391)
and the above error occurs only when i pass the widgetId in the execution
Any Solution for this ?
I am expecting the my captcha should work even though if some other sites have there captcha
private addInvisibleRecaptcha() {
const gREle = this.createScriptElement();
gREle.src = import.meta.env.VITE_RECAPTCHA_URL;
gREle.defer = true;
gREle.async = true;
this.recaptchaClientEle();
this.appendHeadElement(gREle);
}
private recaptchaClientEle() {
const createClientElement = this.createDivElement();
// createClientElement.setAttribute(
// 'data-sitekey',
// `${import.meta.env.VITE_RECAPTCHA_CLIENT_KEY}`,
// );
// createClientElement.setAttribute('data-size', 'invisible');
// createClientElement.setAttribute('data-callback', 'getToken');
// createClientElement.classList.add('g-recaptcha');
createClientElement.id = 'rtl-captcha';
// createClientElement.style.visibility =
// import.meta.env.VITE_RECAPTCHA_VISIBILITY === 'true'
// ? 'visible'
// : 'hidden';
this.appendBodyElement(createClientElement);
}
This is also another kind of implementation which i used before