Skip to content
WODira WODira WODira Developers

Interactive showcase

This page renders the real components shipped by @wodira/browser/ui. The first previews use an in-browser mock backend to test states without external effects. The Live checkout demo block uses WODira’s demo API, a real origin-limited publishable key, and the DOCSDEMO100 coupon to create a complete registration without a Stripe card.

Web Components en vivo

Componentes reales de @wodira/browser/ui

Estos previews renderizan los mismos Web Components Lit que publica el browser SDK. Los componentes interactivos usan la Browser API demo real; la card de evento mantiene datos estáticos de ejemplo.

API demo real
Event card <wodira-event-card>
Lista de eventos <wodira-event-list>
Pricing cards <wodira-pricing-cards>
Envío de comprobante <wodira-registration-receipt-sender>
API demo real

Este bloque usa el evento demo real y la Browser API real. Prueba un email con inscripción completada como docs-live-1779433120411@example.com.

Formulario de inscripción <wodira-registration-form>
Checkout flow <wodira-checkout-flow>
Demo de reserva real <wodira-checkout-flow>
API demo real

Este bloque usa el evento real de demo, la Browser API real y los Web Components reales. El cupón demo DOCSDEMO100 se rellena automáticamente para completar la inscripción sin tarjeta Stripe.

What this demo validates

Section titled “What this demo validates”
  • Custom elements are registered with defineWodiraElements.
  • Mock previews use the browser SDK public API against https://docs.wodira.local.
  • The live demo uses http://localhost:3000 locally and https://api.demo.wodira.app when docs are deployed.
  • DOM events and selection states are the same ones an integrator receives.
  • WODira theme CSS variables are applied to real components, not screenshots.
  • The live flow creates a registration visible in the demo organizer dashboard.

Base code

Section titled “Base code”
<script type="module">
  import { defineWodiraElements } from '@wodira/browser/ui';
  defineWodiraElements();
</script>


<wodira-checkout-flow
  publishable-key="wpk_live_..."
  event-id="event_..."
  success-url="https://organizer.com/success"
  cancel-url="https://organizer.com/cancel"
></wodira-checkout-flow>

To connect it to production, create a publishable key with your domains in allowed origins and replace the mock IDs with real WODira IDs.