Procaptcha Image Mode - Explicit Rendering

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

Example Form

CAPTCHA Status Log

How Invisible 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 "%VITE_BUNDLE_URL%"
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,
    size: "invisible"
});

Execution Flow

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