Reborn
Docs

Reborn Elements

@rebornpay/elements — SDK browser para PIX, cartão, parcelas e checkout hospedado.

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 — transactions.runThreeDs após POST /v1/transactions no servidor

Browser
<script src="https://js.rebornpay.io/v1/elements.js"></script>
<script>
  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, 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 }: { clientSecret: string; sessionId: string }) {
  return (
    <ElementsProvider options={{ publishableKey: "pk_test_..." }}>
      <PaymentElement
        clientSecret={clientSecret}
        sessionId={sessionId}
        paymentMethodOrder={["pix", "card"]}
      />
    </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).