Skip to main content

How to add Invisible ReCaptcha to Powr

[last update: May 1 2022 by [email protected]]

Adding Recaptch on Front end part,​

In recaptcha_helper.js has buildRecaptcha(RECAPTCHA_ELEMENT_NAME, callback_function_param => { ... }), this function takes first parameter HTML element unique id where you want to load recaptcha, and second parameter is a callback function where you should place your on submit function. buildRecaptcha(RECAPTCHA_ELEMENT_NAME, params => submit(params.token, params.type));. This callback function will execute with recaptch params when you will call function called executeRecaptcha(window[RECAPTCHA_ELEMENT_NAME + "reCaptchaWidgetId"]).

Example​

componentDidMount() {
  buildRecaptcha(RECAPTCHA_ELEMENT_NAME, params => this.submitForm(params.token, params.type));

  ...

}

execRecaptcha() {
  // eslint-disable-next-line no-undefined
  if (isRecaptchaLoaded() && typeof window[`${RECAPTCHA_ELEMENT_NAME}reCaptchaWidgetId`] !== undefined) { // check whether recaptch already on the page
    executeRecaptcha(window[`${RECAPTCHA_ELEMENT_NAME}reCaptchaWidgetId`]);
  } else
    buildRecaptcha(RECAPTCHA_ELEMENT_NAME, params => this.inviteToEdit(params.token, params.type)).then( // build recaptcha if it is not loaded
      executeRecaptcha(window[`${RECAPTCHA_ELEMENT_NAME}reCaptchaWidgetId`]) 
    );
}

...

<button onClick={this.execRecaptcha.bind(this)}>