How Image CAPTCHA Works (Explicit Rendering)

Implementation Details

This example demonstrates how to use Procaptcha in image 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 "https://staging-js.prosopo.io/js/procaptcha.bundle.js"
import { CaptchaType } from "@prosopo/types";

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

Execution Flow

1. On page load, the render function is called to initialize the CAPTCHA
2. The CAPTCHA challenge is rendered in the specified container
3. When the user completes the challenge, the callback function is called
4. On successful verification, the form can be submitted with the token