@wodira/browser

SDK frontend para publishable keys de WODira (wpk_live_...). Permite leer eventos/tarifas y crear sesiones de Stripe Checkout para inscripciones externas sin exponer una secret key.

bun add @wodira/browser

import { createWodiraBrowserClient } from '@wodira/browser';

const wodira = createWodiraBrowserClient({ publishableKey: 'wpk_live_...' });

const session = await wodira.createRegistrationCheckoutSession({
  eventId: 'event_...',
  categoryId: 'cat_...',
  purchaserEmail: '[email protected]',
  purchaserName: 'Buyer Name',
  teamName: 'Team Name',
  termsAccepted: true,
  waiversAccepted: { waiver_123: true }, // si el evento tiene waivers requeridos
  idempotencyKey: crypto.randomUUID(),
  successUrl: 'https://organizador.com/gracias',
  cancelUrl: 'https://organizador.com/cancelado',
  athletes: [
    {
      fullname: 'Ada Lovelace',
      idNumber: '12345678A',
      email: '[email protected]',
      phone: '+34600000000',
      gender: 'FEMALE',
      birthDate: '1990-01-01',
    },
  ],
});

if (session.sessionUrl) window.location.href = session.sessionUrl;

Las URLs de éxito/cancelación deben pertenecer a un origen permitido en la publishable key.

Web Components: @wodira/browser/ui

@wodira/browser/ui incluye Web Components basados en Lit para incrustar el embudo de inscripción en webs de organizadores. Los componentes usan publishable keys, CSS variables y ::part() para personalización visual.

import { defineWodiraElements } from '@wodira/browser/ui';

defineWodiraElements();

<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>

También se puede montar por JS:

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',
});

Componentes disponibles:

• <wodira-event-list>: lista eventos publicados.
• <wodira-event-card>: tarjeta de evento reutilizable.
• <wodira-pricing-cards>: categorías, precios, cupos y selección.
• <wodira-registration-form>: formulario de inscripción y creación de Stripe Checkout Session.
• <wodira-checkout-flow>: embudo completo evento → categoría → inscripción → Stripe Checkout.

Eventos DOM:

• wodira:event-select
• wodira:category-select
• wodira:checkout-start
• wodira:checkout-created
• wodira:redirect
• wodira:error

Personalización:

wodira-checkout-flow {
  --wodira-color-primary: #111827;
  --wodira-color-accent: #f97316;
  --wodira-radius: 18px;
  --wodira-font-family: Inter, system-ui, sans-serif;
}

wodira-checkout-flow::part(button) {
  text-transform: uppercase;
}

wodira-checkout-flow::part(card) {
  border-width: 2px;
}

Atributos principales: publishable-key, base-url, event-id, success-url, cancel-url, locale y auto-redirect.

Production notes

• Los componentes hacen validación cliente antes de crear Checkout Session: comprador, atletas, campos obligatorios, términos y waivers requeridos.
• Si el evento expone suplementos activos, el formulario renderiza extras y selecciona automáticamente los obligatorios.
• El resumen de precio se recalcula con getRegistrationSummary cuando hay purchaserEmail válido, categoría y extras/promocode.
• locale="en-US" cambia los textos base a inglés; cualquier otro locale usa español por defecto y se usa para fecha/moneda.
• auto-redirect está activo por defecto; si se desactiva, escucha wodira:checkout-created o wodira:redirect para gestionar la navegación.

CSS variables soportadas

| Variable | Uso | | ---------------------------------------- | -------------------- | | --wodira-color-primary | Botones principales | | --wodira-color-primary-contrast | Texto sobre primario | | --wodira-color-accent | Precios y foco | | --wodira-color-surface | Tarjetas e inputs | | --wodira-color-muted | Fondos secundarios | | --wodira-color-border | Bordes | | --wodira-color-text | Texto principal | | --wodira-color-text-muted | Texto secundario | | --wodira-color-danger | Errores | | --wodira-radius / --wodira-radius-sm | Radios | | --wodira-space | Espaciado base | | --wodira-font-family | Tipografía | | --wodira-shadow | Sombra de tarjetas |

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.