googleInvisibleRecaptcha.js

// https://developers.google.com/recaptcha/docs/invisible
// https://developers.google.com/recaptcha/docs/invisible#render_param
// https://github.com/thiamsantos/invisible-grecaptcha

import { 
  execute, 
  destroy
} from 'invisible-grecaptcha'

export default class GoogleInvisibleRecaptcha {

  dev = true; // If dev equal true, then use test key
  sitekey = (this.dev ? '6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI' : 'enter your site key here');
  captchaSelector = 'data-captcha';
  globalSettings = {
    locale: 'ru',
    position: 'bottomleft' // bottomleft|bottomright|inline
  };
  widgetSettingsDefault = {
    sitekey: this.sitekey,
    size: "compact", // compact|normal|invisible
    theme: "dark", // dark|light
    tabindex: 0,
    badge: 'inline'
  };
  
  constructor() {
    this.init();
  }

  onloadReCaptchaInvisible() {
    const captchaBoxes = document.querySelectorAll(`[${this.captchaSelector}]`);
    window.captchas = [];
    if(captchaBoxes.length) {
      captchaBoxes.forEach(element => {
        const $form = $(element).closest('form');
        
        if(window.grecaptcha) {
          let customSettings = {};
          Object.keys(this.widgetSettingsDefault).forEach(key => {
            customSettings[key] = ( element.getAttribute(`data-${key}`) || this.widgetSettingsDefault[key] );
          });
          
          customSettings['callback'] = function(token) {
            $form.prepend(`<input type="hidden" name="g-recaptcha-response" value="${token}">`)
          }

          customSettings['expired-callback'] = function(token) {
            $form.remove('input[name="g-recaptcha-response"]')
          }

          customSettings['error-callback'] = function(token) {
            // console.debug('Error');
            // console.debug(token);
            // console.debug(element);
          }

          window.captchas[element.id] = window.grecaptcha.render(element.id, customSettings);
        }
      });
    }
  };

  init() {
    execute(this.sitekey, this.globalSettings);
    this.onloadReCaptchaInvisible();
    destroy();
  }

}