How Invisible Puzzle CAPTCHA Works (Explicit Rendering)

Implementation Details

This example demonstrates how to use Procaptcha in puzzle 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%"

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

Execution Flow

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