Instalación

Instala @feelrift/react y sus dependencias peer, luego monta la cadena de providers en el framework que usas.

Instalar

pnpm add @feelrift/react react react-dom

react y react-dom son dependencias peer. El SDK apunta a React 19+ y no las incluye en el bundle.

Eventos de pago

Si alguno de tus eventos tiene tipos de boleto con precio mayor a cero, instala también los dos peers de Stripe:

pnpm add @stripe/stripe-js @stripe/react-stripe-js

El SDK carga @stripe/stripe-js de forma dinámica. Los embeds que solo sirven eventos gratuitos nunca disparan ese import y no necesitan ninguno de esos peers. <CheckoutForm> muestra una advertencia en la consola si lo montas en un evento de pago sin los peers presentes.

Nota <RiftEvent> llama loadStripe(ticketingConfig.stripe.publishableKey, { stripeAccount: ticketingConfig.stripe.connectedAccountId }) en cuanto llega la configuración de pagos de Ticketing. Cuando el usuario llega a <CheckoutForm>, el script de Stripe ya está descargado. No hay una llamada separada de "iniciar Stripe".

Montar la cadena de providers

El SDK tiene dos componentes envolventes: <RiftProvider> (raíz, transversal) y <RiftEvent> (scope de evento, dueño de eventId y del loader de Stripe). Móntalos en ese orden alrededor de cualquier componente del SDK.

import { RiftEvent, RiftProvider } from "@feelrift/react";

export function TicketingEmbed() {
  return (
    <RiftProvider locale="es-MX">
      <RiftEvent eventId="evt_summerfest_2026">
        {/* SDK components go here */}
      </RiftEvent>
    </RiftProvider>
  );
}

<RiftProvider> debe aparecer una vez cerca de la parte superior de la superficie embebida. <RiftEvent> envuelve la UI con scope de evento. La mayoría de los embeds tienen uno, pero puedes montar más de uno si muestras varios eventos en la misma página.

Ubicación por framework

El lugar de la cadena de providers depende de tu framework.

Next.js App Router

El SDK es solo cliente: cada componente incluye "use client". Envuelve un segmento de layout con un componente cliente que monte la cadena de providers:

// app/embed/RiftRoot.tsx
"use client";

import type { ReactNode } from "react";
import { RiftEvent, RiftProvider } from "@feelrift/react";

export function RiftRoot({
  eventId,
  children,
}: {
  eventId: string;
  children: ReactNode;
}) {
  return (
    <RiftProvider>
      <RiftEvent eventId={eventId}>{children}</RiftEvent>
    </RiftProvider>
  );
}

// app/embed/[eventId]/layout.tsx
import { RiftRoot } from "../RiftRoot";

export default function Layout({
  params,
  children,
}: {
  params: { eventId: string };
  children: React.ReactNode;
}) {
  return <RiftRoot eventId={params.eventId}>{children}</RiftRoot>;
}

Importar cualquier componente del SDK directamente en un server component falla en build con un error claro de "client-only module". Las directivas "use client" se conservan durante el build.

Next.js Pages Router

Monta la cadena de providers en _app.tsx:

// pages/_app.tsx
import type { AppProps } from "next/app";
import { RiftEvent, RiftProvider } from "@feelrift/react";

export default function App({ Component, pageProps }: AppProps) {
  return (
    <RiftProvider>
      <RiftEvent eventId={pageProps.eventId}>
        <Component {...pageProps} />
      </RiftEvent>
    </RiftProvider>
  );
}

Vite SPA

Las directivas no tienen efecto en Vite; el SDK funciona como cualquier librería de React:

// src/main.tsx
import { createRoot } from "react-dom/client";
import { RiftEvent, RiftProvider } from "@feelrift/react";

import { App } from "./App";

createRoot(document.getElementById("root")!).render(
  <RiftProvider>
    <RiftEvent eventId="evt_summerfest_2026">
      <App />
    </RiftEvent>
  </RiftProvider>,
);

Astro

Envuelve los componentes del SDK en una isla client:idle o client:visible:

---
// MyRiftEmbed is your own client component that wraps
// <RiftProvider><RiftEvent>...</RiftEvent></RiftProvider>.
// The SDK doesn't ship it — you compose the providers
// and the SDK pieces you want inside it.
import { MyRiftEmbed } from "../components/MyRiftEmbed";
---

<MyRiftEmbed eventId="evt_summerfest_2026" client:idle />

Las directivas "use client" dentro del SDK son benignas en la integracion de React de Astro.

URL base

El SDK apunta a la API de Experiences de produccion por defecto. Tanto apiBaseUrl como altchaBaseUrl quedan baked in en build. Solo necesitas sobrescribirlas para staging o configuraciones multiambiente:

<RiftProvider
  apiBaseUrl="https://api.staging.feelrift.com"
  altchaBaseUrl="https://altcha.staging.feelrift.com"
>
  {/* … */}
</RiftProvider>

Prop	Default	Cuando cambiarla
apiBaseUrl	https://api.feelrift.com	Apunta a staging o a una instalacion self-hosted de Rift.
altchaBaseUrl	https://altcha.feelrift.com	Igual; el endpoint de reto Altcha vive en otro host.

Para desarrollo local contra una API en localhost, configura las props apiBaseUrl y altchaBaseUrl en <RiftProvider> con tus endpoints locales: normalmente http://localhost:3000 (API) y http://localhost:8787 (Altcha). Consulta las props de <RiftProvider>.

Obtener tu primer eventId

Crea un evento en el dashboard de Rift. La URL del evento contiene su ID: el segmento después de /events/ que empieza con evt_…. Ese string es lo que pasas a <RiftEvent eventId="evt_…">. Los drafts también tienen ID; simplemente no exponen disponibilidad a asistentes anónimos.

Verificar

Renderiza este embed minimo y cambia evt_summerfest_2026 por uno de tus IDs de evento:

import { EventHeader, RiftEvent, RiftProvider } from "@feelrift/react";

export function SanityCheck() {
  return (
    <RiftProvider>
      <RiftEvent eventId="evt_summerfest_2026">
        <EventHeader />
      </RiftEvent>
    </RiftProvider>
  );
}

Debes ver el nombre del evento, fechas de inicio/fin, ubicación (si existe) y organizador sin errores. El panel de red del navegador debe mostrar una request GET /api/v1/events/<eventId>/config con respuesta 200.

Si no se renderiza nada:

• 404 en /config - el ID de evento es incorrecto o pertenece a otra organizacion distinta a la que sirve el host de API.
• 403 en /config - ingress rechazo la request. Usa el apiBaseUrl de produccion (el default) en vez de una URL privada de origen.
• No hay request - falta <RiftEvent> o el path de import es incorrecto. <EventHeader> no renderiza nada sin un scope de evento por encima.

Siguiente

-> Tu primer checkout - el flujo completo de inicio a fin.