Interfaces web
Checkout no browser,
pronto para escalar.
Integre PIX, cartão com 3DS2 e parcelas com o SDK Reborn — hosted, embed, Payment Element ou headless. Uma linha para carregar, você escolhe a superfície.
npm install @rebornpay/elementshttps://js.rebornpay.io/v1/elements.jsQR Code PIX
Aguardando confirmação do PIX
Superfícies
Uma API, várias formas de integrar
Do botão redirect ao Payment Element embutido — escolha o nível de controle que combina com seu produto.
Card Fields
Tokenize no browser, com ou sem componentes
Dois jeitos do merchant integrar os campos da Reborn. O PAN não passa pela API;tokenize() devolve card.token da charge.
Components do @rebornpay/elements-react. tokenize() no ref — o merchant não monta campos de adquirente.
npm install @rebornpay/elements-reactimport { useRef } from "react";
import {
ElementsProvider,
CardFields,
CardNumber,
CardExpiry,
CardCvc,
type CardFieldsHandle,
} from "@rebornpay/elements-react";
export function InternationalCheckout() {
const fieldsRef = useRef<CardFieldsHandle>(null);
async function pay() {
const card = await fieldsRef.current?.tokenize();
const created = await fetch("/api/charge", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ card, amount: 100, currency: "USD" }),
}).then((r) => r.json());
// Se created.status === "PENDING", use reborn.payments.confirm no ElementsProvider
}
return (
<ElementsProvider
options={{ publishableKey: "pk_test_4eC39HqLyjWDarjtT1zdp7dc", apiBaseUrl: "https://sandbox-api.rebornpay.io" }}
>
<CardFields ref={fieldsRef} currency="USD">
<CardNumber />
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
<CardExpiry />
<CardCvc />
</div>
<button type="button" onClick={() => void pay()}>
Pagar
</button>
</CardFields>
</ElementsProvider>
);
}Publishable key
Só a pk_ no browser. A charge com sk_ fica no seu servidor.
Preview · tokenize()
pk_test_4eC3…CardFields
@rebornpay/elements-reactRecursos
Feito para o ecossistema Reborn
O mesmo fluxo de checkout que roda no seller dashboard — tokenização, 3DS2, SEON e confirmação — empacotado para integradores externos.
PIX + cartão + parcelas
Métodos v1 prontos para produção no Brasil, sem débito ou boleto.
pk_ + client_secret
Publishable key no browser; secret key no servidor; cs_ por sessão de checkout.
3DS2 + antifraude
Device collection, challenge e SEON integrados — o mesmo fluxo do seller Reborn.
PCI by design
PAN no iframe pci.rebornpay.io — dados sensíveis nunca no DOM do merchant.
Playground
Escolha sua stack e teste ao vivo
Cada aba traz o comando de install, um snippet pronto para copiar e um preview sandbox — sem precisar rodar o projeto localmente.
React · Vue · Remix · Web Components · Core SDK · CDN
Chaves: pk_ no browser (publishable) · sk_ só no servidor (cria a sessão) · cs_ volta para o frontend montar o checkout
Provider, declarative components, and hooks — ideal for Next.js and SPAs.
npm install @rebornpay/elements-reactimport { ElementsProvider, PaymentElement } from "@rebornpay/elements-react";
export function CheckoutPage({
clientSecret,
sessionId,
requireThreeDs,
}: {
clientSecret: string;
sessionId: string;
requireThreeDs?: boolean;
}) {
return (
<ElementsProvider options={{ publishableKey: "pk_test_..." }}>
<PaymentElement
clientSecret={clientSecret}
sessionId={sessionId}
paymentMethodOrder={["pix", "card"]}
requireThreeDs={requireThreeDs}
/>
</ElementsProvider>
);
}Props · personalizar
R$ 11,50 · 1150 centavos
Ordem: PIX → Cartão
Preview interativo
pk_test_4eC3… · cs_test_a1…QR Code PIX
Aguardando confirmação do PIX
Controles de sandbox · fora do Payment Element
Pronto para integrar?
Gere suas chaves publishable e secret no painel do seller e siga o guia Elements no sandbox.