Procaptcha PoW Mode - Explicit Rendering

This example demonstrates how to use Procaptcha in pow mode with explicit rendering.

Example Form

CAPTCHA Status Log

How Invisible Proof of Work CAPTCHA Works (Explicit Rendering)

Implementation Details

This example demonstrates how to use Procaptcha in Proof of Work mode with explicit rendering:

  1. Import the Procaptcha render function
  2. Create a container for the CAPTCHA
  3. Render the CAPTCHA explicitly
  4. Handle the verification result in the callback function

Key Code Example

// Import the render function
import { render } from "%VITE_BUNDLE_URL%"
import { CaptchaType } from "@prosopo/types";

// Render CAPTCHA
const widgetId = render(document.getElementById('procaptcha-container'), {
    siteKey: import.meta.env.PROSOPO_SITE_KEY_POW,
    captchaType: CaptchaType.pow,
    callback: handleCaptchaResponse,
    "failed-callback": handleCaptchaFailed,
    size: "invisible"
});

Execution Flow

  1. On page load, the render function is called to initialize
  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