RebornDocs

Reborn Elements

@rebornpay/elements — SDK browser para PIX, cartão, parcelas, checkout hospedado (Brasil) e Card Fields/3DS internacional.

O Elements cobre o checkout Brasil (PIX, cartão, parcelas) e o fluxo internacional: payments.collect (Card Fields) + payments.confirm. Detalhes em Clientes internacionais. Payment Element e hosted internacionais entram no mesmo pacote depois.

O pacote @rebornpay/elements expõe loadElements com publishableKey (pk_test_ / pk_live_). O backend do merchant usa sk_ para criar sessões e recebe clientSecret (cs_...) para o browser.

  • Hosted redirect — redirectToCheckout → checkout.rebornpay.io
  • Embedded iframe — embedCheckout + postMessage
  • Payment Element — PIX + cartão (iframe PCI) + parcelas + overlay 3DS
  • Headless — checkout.payWithPix / checkout.payWithCard
  • Direct API (BRL) — transactions.runThreeDs após POST /v1/transactions no servidor
  • Internacional — Card Fields via payments.collect.mount + payments.confirm após POST /v1/transactions no servidor. Não use transactions.runThreeDs fora de BRL.

Browser
<script src="https://js.rebornpay.io/v1/elements.js"></script>
<script type="module">
  const reborn = await RebornElements.loadElements({ publishableKey: "pk_live_..." });
</script>

O core @rebornpay/elements é agnóstico de framework. Para React, Vue, Remix e Web Components use os bindings dedicados:

  • @rebornpay/elements-react — ElementsProvider, PaymentElement, CardFields, hooks
  • @rebornpay/elements-vue — plugin + componentes Vue 3
  • @rebornpay/elements-remix — re-export React + helpers de loader
  • @rebornpay/elements-web — <reborn-payment-element> e custom elements
Shell
npm install @rebornpay/elements-react

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

Schemas de checkout sessions e chaves publicáveis em API Reference. Fluxo 3DS detalhado em Checkout.

Use pk_test_ com apiBaseUrl: https://sandbox-api.rebornpay.io e domínios allowlist configurados no painel do seller (Integrações → Publishable key).