Frontend Captcha

Unified demo interface for three providers

mCaptcha Demo

mCaptcha inherits the same responsive structure and visual rhythm.

This route now embeds the configured mCaptcha widget with a low-level receiver integration and forwards the resulting token to a local verification route.

Shared design baseline

Provider

mCaptcha

The mCaptcha demo uses the provider widget URL from `.env`, listens for challenge tokens via the low-level receiver library and supports optional backend verification when a secret is available.

Shared page anatomy

All demo pages reuse the same hero, plan cards and call-to-action structure.

Responsive spacing

The layout scales from compact mobile cards to wider desktop columns without changing hierarchy.

Prepared integration slot

The future captcha widget is intentionally reserved in the Compare plan area from the start.

Compare plan

Reserved Captcha Area

Challenge

mCaptcha with custom embed shell

This integration uses the low-level receiver library from mCaptcha, while the iframe shell and token handling stay under our control.

low-level api
Security challenge
Preparing the mCaptcha challenge...

Ready for submission

Fill out the form, complete the captcha and submit the demo request.

Flow

Common Demo Structure

  1. 1. A visitor opens the provider page and sees the same presentation pattern on every route.
  2. 2. The captcha widget will live in the reserved Compare plan panel without altering the outer layout.
  3. 3. Validation results and provider-specific form behavior can later be added in a consistent way.