How It Works

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

1. Include the Procaptcha script with ?render=explicit parameter
2. Create a container div with data-size="invisible"
3. Define an onloadCallback function that renders the Procaptcha widget
4. Add a click handler to your submit button that validates the form and executes Procaptcha
5. When Procaptcha verification succeeds, your callback function is called

The key elements are:

<script type="module" src="./assets/procaptcha.bundle.js?render=explicit" async defer></script>

<div id="procaptcha-container" data-size="invisible"></div>

<script>
// Render the widget
window.procaptcha.render('procaptcha-container', {
    'siteKey': 'your_site_key',
    'callback': onSubmit,
    'size': 'invisible',
    'captchaType': 'image'
});

// Execute the verification
window.procaptcha.execute();
</script>
        

Console Output

When you click the Submit button, the execute() function will:

1. Find all Procaptcha containers on the page
2. Log each container and its attributes to the console
3. Log all child elements of each container
4. Dispatch a custom procaptcha:execute event to show the modal

This helps debug and understand how the invisible Procaptcha is structured in the DOM.

Event-Based Communication System

To connect the vanilla JavaScript bundle with the React components, we use a custom event system:

1. When window.procaptcha.execute() is called, it dispatches a procaptcha:execute event
2. The ProcaptchaWidget React component listens for this event
3. When the event is received, the component sets state.showModal = true
4. This causes the CAPTCHA modal to appear and verification to begin

This decoupled approach allows the JavaScript bundle to communicate with React components without direct references.