How Frictionless CAPTCHA Works (Implicit Rendering)

Implementation Details

This example demonstrates how to use Procaptcha in frictionless 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_FRICTIONLESS%"
    data-failed-callback="onCaptchaFailed"
    data-callback="onCaptchaVerified"
    data-captcha-type="frictionless"
></div>

Execution Flow

1. On page load, Procaptcha scans for elements with the procaptcha class
2. The CAPTCHA verification happens when the user interacts with it
3. When verification is complete, the callback function is called with the token
4. On successful verification, the form can be submitted with the token