How Invisible Frictionless CAPTCHA Works (Explicit Rendering)

Implementation Details

This example demonstrates how to use Procaptcha in frictionless 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_FRICTIONLESS,
    captchaType: CaptchaType.frictionless,
    callback: handleCaptchaResponse,
    "failed-callback": handleCaptchaFailed,
    size: "invisible"
});

Execution Flow

1. On page load, the render function is called to initialize
2. The CAPTCHA verification happens invisibly in the background
3. When verification is complete, the callback function is called with the token
4. On successful verification, the form can be submitted with the token