0

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.

enter image description here

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

0