How Invisible image CAPTCHA Works (Implicit Rendering)

Implementation Details

This demo shows how to implement invisible image CAPTCHA directly on a button using implicit rendering:

1. Include the Procaptcha script
2. Add the procaptcha class to your submit button
3. Set data-sitekey with your image site key
4. Set data-callback to the function that will receive the token
5. Add data-captcha-type="image" to specify the type
6. Add data-size="invisible" to enable invisible mode

Key Button Attributes

<button 
    class="mui-btn mui-btn--raised procaptcha"
    data-sitekey="%PROSOPO_SITE_KEY_image%" 
    data-callback="onActionHandler"
    data-failed-callback="onCaptchaFailed"
    data-captcha-type="image"
    data-size="invisible">
    Submit
</button>

Execution Flow

1. When the page loads, Procaptcha scans for elements with the procaptcha class
2. For buttons, it adds an event listener that triggers on click
3. When the button is clicked, the default action is prevented
4. Procaptcha dispatches a procaptcha:execute event
5. This event triggers the verification flow in the background
6. Once verified, the data-callback function is called with the token

Behind the Scenes

When the button is clicked, these internal steps happen:

1. The script identifies all CAPTCHA containers based on:
   • Elements with data-size="invisible"
   • Elements with specific IDs (like procaptcha-container)
   • Elements with class p-procaptcha
2. It dispatches a procaptcha:execute event with container details
3. The image CAPTCHA verification happens invisibly
4. When completed, your callback function receives the verification token

Callback Functions

Important: Callback functions must be defined directly on the window object, not inside event listeners or other closures, so they're accessible when the CAPTCHA system initializes.

window.onActionHandler = function(token) {
    console.log('Procaptcha token received:', token);
    // Handle form submission with the token
};