Saltar al contenido principal
El SDK de React conecta botones y tablas de precios con tu backend.

Instalar

pnpm add @onflay/react @onflay/node

Provider

import { OnflayProvider } from '@onflay/react';

export function App({ children }: { children: React.ReactNode }) {
  return (
    <OnflayProvider
      publishableKey={process.env.NEXT_PUBLIC_ONFLAY_PUBLISHABLE_KEY!}
      serverActions={{
        createCheckoutSession: async (input) => {
          const response = await fetch('/api/onflay/checkout', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(input),
          });
          if (!response.ok) throw new Error('No se pudo crear checkout');
          return response.json();
        },
      }}
    >
      {children}
    </OnflayProvider>
  );
}
Usa pk_test_* o pk_live_* en cliente. Nunca uses sk_* en React.

CheckoutButton

import { CheckoutButton } from '@onflay/react';

export function Comprar() {
  return (
    <CheckoutButton
      price="price_..."
      successUrl="https://tu-app.com/gracias"
      cancelUrl="https://tu-app.com/cancelado"
      customerEmail="comprador@ejemplo.com"
    >
      Comprar ahora
    </CheckoutButton>
  );
}