Tickean Elements (10 minutos)

Tickean Elements es la capa visual white-label sobre /v1/checkout.

Instalar

npm install @tickean/checkout-js@^0.2.11 @tickean/react-checkout @tickean/checkout-elements@^0.2.22

Usá checkout-js ≥ 0.2.11 y elements ≥ 0.2.22 (wizard + recovery ?resume=).

React completo

import { TickeanProvider, TickeanCheckout } from "@tickean/react-checkout";

export default function Page() {
  return (
    <TickeanProvider
      publishableKey={process.env.NEXT_PUBLIC_TICKEAN_PUBLISHABLE_KEY!}
      eventSlug="demo-festival"
      apiBaseUrl="https://api.tickean.com"
      locale="es-AR"
      appearance={{ theme: "flat", variables: { colorPrimary: "#16a34a" } }}
    >
      <TickeanCheckout />
    </TickeanProvider>
  );
}

Web Components

<script type="module">
  import "@tickean/checkout-elements";
</script>

<tickean-checkout
  publishable-key="pk_test_..."
  event-slug="demo-festival"
  locale="es-AR"
  appearance='{"theme":"flat"}'
></tickean-checkout>

Por defecto layout="steps" (Entradas → Datos → Pago → Listo). Usá layout="stacked" para el layout clásico todo-en-uno.

Vista previa del wizard

Mock interactivo (modo demo, OTP 123456):

Abrir en pantalla completa · Guía ilustrada: Flujo del wizard.

Tres niveles

Checkout completo — <TickeanCheckout /> / <tickean-checkout> (wizard por pasos incluido)
Componible — TicketSelector, Discount, BuyerVerification, Payment, OrderSummary
Headless — hooks useEvent, useCart, useCheckout, usePayment

Recovery

Si el comprador abandona tras OTP + carrito, el mail de recuperación abre tu página con ?resume=CODE. Elements intercambia el código, rehidrata el wizard y limpia la URL. Ver Reanudar sesión.

Playground

El repo incluye examples/playground para explorar Appearance y locale. En tu app, instalá desde npm e importá @tickean/checkout-elements o @tickean/react-checkout.