UI Components: Reusable Lit Web Components for organizer websites. --- # Checkout Flow > Incrusta un flujo completo de inscripción y pago con Stripe Checkout. ## HTML [Sección titulada «HTML»](#html) ```html ``` ## JS factory [Sección titulada «JS factory»](#js-factory) ```ts import { createWodiraCheckoutFlow } from '@wodira/browser/ui'; createWodiraCheckoutFlow(document.querySelector('#checkout')!, { publishableKey: 'wpk_live_...', eventId: 'event_...', successUrl: 'https://organizador.com/gracias', cancelUrl: 'https://organizador.com/cancelado', }); ``` ## Atributos [Sección titulada «Atributos»](#atributos) * `publishable-key` * `base-url` * `event-id` * `success-url` * `cancel-url` * `locale` * `auto-redirect` --- # Checkout Flow > Embed a complete registration and Stripe Checkout flow. ## HTML [Section titled “HTML”](#html) ```html ``` ## JS factory [Section titled “JS factory”](#js-factory) ```ts import { createWodiraCheckoutFlow } from '@wodira/browser/ui'; createWodiraCheckoutFlow(document.querySelector('#checkout')!, { publishableKey: 'wpk_live_...', eventId: 'event_...', successUrl: 'https://organizer.com/success', cancelUrl: 'https://organizer.com/cancel', }); ``` --- # Visual customization > CSS variables and parts for organizer branding. ## CSS variables [Section titled “CSS variables”](#css-variables) ```css wodira-checkout-flow { --wodira-color-primary: #111827; --wodira-color-accent: #f97316; --wodira-radius: 18px; --wodira-font-family: Inter, system-ui, sans-serif; } ``` ## Parts [Section titled “Parts”](#parts) ```css wodira-checkout-flow::part(button) { text-transform: uppercase; } ``` Main parts: `card`, `event-card`, `pricing-card`, `registration-form`, `summary`, `button`, `input`, `select`, `textarea`, `checkbox`, `label`, `title`, `price`, `meta`, `hint`, `error`, `field-error`, `loader`, `empty`, `waiver`, `supplement`. --- # DOM events > CustomEvents emitted by Web Components. Events bubble and are composed. | Event | When | | ------------------------- | --------------------------------------------- | | `wodira:event-select` | User selects an event. | | `wodira:category-select` | User selects a category. | | `wodira:checkout-start` | Checkout Session creation starts. | | `wodira:checkout-created` | WODira returns a session. | | `wodira:redirect` | The component is about to redirect to Stripe. | | `wodira:error` | A recoverable error occurs. | --- # UI Components overview > Reusable Web Components for organizer websites. `@wodira/browser/ui` includes Lit Web Components that embed WODira in any website, with or without a framework. ## Components [Section titled “Components”](#components) * ``: full event → category → registration → Stripe Checkout flow. * ``: published event list. * ``: reusable event card. * ``: categories, prices, and selection. * ``: registration form. See them rendered with safe mock data in the [interactive showcase](/en/ui-components/showcase/). ## Register components [Section titled “Register components”](#register-components) ```ts import { defineWodiraElements } from '@wodira/browser/ui'; defineWodiraElements(); ``` --- # Interactive showcase > Real @wodira/browser/ui Web Component previews with safe mock data and a real demo API flow. 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 `` Lista de eventos `` Pricing cards `` Envío de comprobante `` 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 `` Checkout flow `` Demo de reserva real `` 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”](#what-this-demo-validates) * Custom elements are registered with [`defineWodiraElements`](/en/ui-components/checkout-flow/#html). * 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”](#base-code) ```html ``` To connect it to production, create a [publishable key](/en/api/publishable-keys/) with your domains in allowed origins and replace the mock IDs with real WODira IDs. --- # Personalización visual > CSS variables y parts para adaptar los componentes a la marca del organizador. ## CSS variables [Sección titulada «CSS variables»](#css-variables) ```css wodira-checkout-flow { --wodira-color-primary: #111827; --wodira-color-accent: #f97316; --wodira-radius: 18px; --wodira-font-family: Inter, system-ui, sans-serif; } ``` Variables soportadas: * `--wodira-color-primary` * `--wodira-color-primary-contrast` * `--wodira-color-accent` * `--wodira-color-surface` * `--wodira-color-muted` * `--wodira-color-border` * `--wodira-color-text` * `--wodira-color-text-muted` * `--wodira-color-danger` * `--wodira-radius` * `--wodira-radius-sm` * `--wodira-space` * `--wodira-font-family` * `--wodira-shadow` ## Parts [Sección titulada «Parts»](#parts) ```css wodira-checkout-flow::part(button) { text-transform: uppercase; } wodira-checkout-flow::part(card) { border-width: 2px; } ``` Parts principales: `card`, `event-card`, `pricing-card`, `registration-form`, `summary`, `button`, `input`, `select`, `textarea`, `checkbox`, `label`, `title`, `price`, `meta`, `hint`, `error`, `field-error`, `loader`, `empty`, `waiver`, `supplement`. --- # Eventos DOM > CustomEvents emitidos por los Web Components. Los componentes emiten eventos con `bubbles: true` y `composed: true`. | Evento | Cuándo se emite | | ------------------------- | ---------------------------------------- | | `wodira:event-select` | El usuario selecciona un evento. | | `wodira:category-select` | El usuario selecciona una categoría. | | `wodira:checkout-start` | Empieza la creación de Checkout Session. | | `wodira:checkout-created` | WODira devuelve una sesión. | | `wodira:redirect` | El componente va a redirigir a Stripe. | | `wodira:error` | Ocurre un error recuperable. | ```ts document.addEventListener('wodira:error', (event) => { console.error(event.detail.message); }); ``` --- # Overview de UI Components > Web Components reutilizables para webs de organizadores. `@wodira/browser/ui` incluye Web Components basados en Lit para incrustar WODira en cualquier web, con o sin framework. ## Componentes [Sección titulada «Componentes»](#componentes) * ``: embudo completo evento → categoría → inscripción → Stripe Checkout. * ``: lista eventos publicados. * ``: tarjeta de evento. * ``: categorías, precios y selección. * ``: formulario de inscripción. Puedes verlos renderizados con datos mock seguros en el [showcase interactivo](/ui-components/showcase/). ## Registrar componentes [Sección titulada «Registrar componentes»](#registrar-componentes) ```ts import { defineWodiraElements } from '@wodira/browser/ui'; defineWodiraElements(); ``` --- # Showcase interactivo > Previews reales de los Web Components de @wodira/browser/ui con mock seguro y demo API real. 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 `` Lista de eventos `` Pricing cards `` Envío de comprobante `` 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 `` Checkout flow `` Demo de reserva real `` 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»](#qué-valida-esta-demo) * Los custom elements se registran con [`defineWodiraElements`](/ui-components/checkout-flow/#html). * 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»](#código-base) ```html ``` Para conectarlo a producción, crea una [publishable key](/api/publishable-keys/) con tus dominios en allowed origins y reemplaza los IDs mock por IDs reales de WODira.