How Invisible Image CAPTCHA Works (Implicit Rendering)

Implementation Details

This example demonstrates how to use Procaptcha in image mode with implicit rendering:

1. Import the Procaptcha script
2. Add a div with the procaptcha class
3. Set data-* attributes to configure the CAPTCHA
4. Handle the verification result in the callback function

Key Code Example

<div
    class="procaptcha"
    data-theme="light"
    data-sitekey="%PROSOPO_SITE_KEY_IMAGE%"
    data-failed-callback="onCaptchaFailed"
    data-callback="onCaptchaVerified"
    data-captcha-type="image"
    data-size="invisible"
></div>

Execution Flow

1. On page load, Procaptcha scans for elements with the procaptcha class
2. The CAPTCHA challenge is rendered only when needed
3. When the user completes the challenge, the callback function is called
4. On successful verification, the form can be submitted with the token