How Proof of Work CAPTCHA Works (Implicit Rendering)

Implementation Details

This demo shows how to implement Proof of Work CAPTCHA using implicit rendering:

1. Include the Procaptcha script in your document
2. Add a div with the procaptcha class
3. Set data-sitekey with your Image site key
4. Set the data-callback and data-failed-callback attributes
5. Add data-captcha-type="image" to specify the type

Key CAPTCHA Attributes

<div
    class="procaptcha"
    data-theme="light"
    data-sitekey="5E1bGh2NgRb8dD4NC5bQKRbgiCz8oBc2EhAuYJzy99q3iJ3s"
    data-failed-callback="onCaptchaFailed"
    data-callback="onCaptchaVerified"
    data-captcha-type="image"
></div>

Execution Flow

1. When the page loads, Procaptcha scans for elements with the procaptcha class
2. The Image CAPTCHA is rendered in the container
3. User completes the image challenge
4. On successful completion, the data-callback function is called with the token
5. The token is stored in a hidden input named procaptcha-response
6. When the form is submitted, the token is included in the request