How to Implement Invisible CAPTCHA on VanillaJS

Prerequisites

First, you should get your Captcha ID and Captcha Div ID
Please visit for more information: Displaying Lemin CAPTCHA

Integration

Add an empty div element where you want to display your Lemin Captcha. 

Lemin Captcha must be placed inside of a “form” element.

<form>
<div id="lemin-cropped-captcha"></div> // your captcha div id
</form>

This component prepares the lemin captcha and marks where the captcha will appear if necessary.

Please ensure that your captcha-div-id is the same as the captcha-div-id you've set before. If you set a captcha-div-id for your Lemin Captcha in the advanced settings, this div must have that same captcha-div-id. (default: "lemin-cropped-captcha")

Installation

Add the script tag to your View

<script src="https://api.leminnow.com/captcha/v1/cropped/CROPPED_.../js"></script>

or

const captchaContainer = document.getElementById('lemin-cropped-captcha'); // your captcha div id
const leminScript = document.createElement('script');
leminScript.setAttribute('src', 'https://api.leminnow.com/captcha/v1/cropped/CROPPED_.../js');
captchaContainer?.parentNode?.appendChild(leminScript);

These div and script elements can be placed just above your “Submit” or “Login” buttons.

JavaScript code must be outside of the “div” element; do not paste the code inside the “div” element.

<div id="lemin-cropped-captcha"></div>
<script src="..."></script>

Usage Examples

Automatically bind the challenge to a button

Please ensure you set the ID field of your form submit element to "leminSubmitButton".

If this method is not suitable for you, consider using the programmatically invoke the challenge method.

<script>
  const form = document.getElementById("lemin-form");

  form.addEventListener("submit", onSubmit);

  function onSubmit(event) {

    const captchaValues = window.leminCroppedCaptcha
      .getCaptcha()
      .getCaptchaValue();

    const isCaptchaValid = captchaValues.answer && captchaValues.challenge_id;

    if (isCaptchaValid) {
      //execute your method
    }
  }
</script>

<form id="lemin-form">
  <div id="lemin-cropped-captcha"></div>
<script src="..."></script>

  <button className="btn btn-primary" type="submit" id="leminSubmitButton">
    Submit
  </button>

</form>

Programmatically invoke the challenge.

If you use the programmatically invoke challenge method, please ensure that the submit button ID is NOT "leminSubmitButton".

If you wish to have more control over when Invisible CAPTCHA runs, you can use the execute method in the leminCroppedCaptcha object. 

<script>
  function onYourHandler() {
    const captcha = window.leminCroppedCaptcha.getCaptcha();

    captcha.execute().then(({ answer, challenge_id }) => {
      const isCaptchaValid = answer && challenge_id;

      if (isCaptchaValid) {
        //execute your method
      }
    });
  }
</script>