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