How Puzzle CAPTCHA Works (Implicit Rendering)

Implementation Details

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

Execution Flow

1. On page load, Procaptcha scans for elements with the procaptcha class
2. A drag-to-target puzzle challenge is presented to the user
3. When the user completes the puzzle, the callback function is called
4. On successful verification, the form can be submitted with the token