Ir al contenido
WODira WODira WODira Developers

Showcase interactivo

Esta página renderiza los componentes reales publicados por @wodira/browser/ui. Los primeros ejemplos usan un backend mock en memoria dentro del navegador para probar estados sin efectos externos. El bloque Demo de reserva real usa la API demo de WODira, una publishable key real limitada por origen y el cupón DOCSDEMO100 para crear una inscripción completa sin tarjeta Stripe.

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.

Qué valida esta demo

Sección titulada «Qué valida esta demo»
  • Los custom elements se registran con defineWodiraElements.
  • Los previews mock usan la API pública del browser SDK contra https://docs.wodira.local.
  • La demo real usa http://localhost:3000 en local y https://api.demo.wodira.app al desplegar docs.
  • Los eventos DOM y estados de selección son los mismos que verá un integrador.
  • Las CSS variables del theme WODira se aplican sobre componentes reales, no sobre capturas.
  • El flujo real crea una inscripción visible en el panel del organizador de demo.

Código base

Sección titulada «Código base»
<script type="module">
  import { defineWodiraElements } from '@wodira/browser/ui';
  defineWodiraElements();
</script>


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

Para conectarlo a producción, crea una publishable key con tus dominios en allowed origins y reemplaza los IDs mock por IDs reales de WODira.