How Invisible Proof of Work CAPTCHA Works (Implicit Rendering)

Implementation Details

This example demonstrates how to use Procaptcha in Proof of Work 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_POW%"
    data-failed-callback="onCaptchaFailed"
    data-callback="onCaptchaVerified"
    data-captcha-type="pow"
    data-size="invisible"
></div>

Execution Flow

1. On page load, Procaptcha scans for elements with the procaptcha class
2. The Proof of Work computation happens in the browser
3. When the computation is complete, the callback function is called
4. On successful verification, the form can be submitted with the token