@rebornpay/elements-remix

Remix helpers for Reborn Elements — re-exports @rebornpay/elements-react plus loader utilities.

Docs: docs.rebornpay.io/guides/elements

Install

npm install @rebornpay/elements-remix

Peer dependencies: react, react-dom.

Quick start

// app/routes/checkout.tsx
import { json, type LoaderFunctionArgs } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";
import {
  ElementsProvider,
  PaymentElement,
  parseRebornCheckoutLoaderData,
  toElementsProviderOptions,
  toPaymentElementProps,
} from "@rebornpay/elements-remix";

export async function loader({ request }: LoaderFunctionArgs) {
  const session = await createCheckoutSessionOnYourBackend(request);
  return json({
    publishableKey: process.env.REBORN_PUBLISHABLE_KEY,
    clientSecret: session.clientSecret,
    sessionId: session.sessionId,
  });
}

export default function CheckoutRoute() {
  const data = parseRebornCheckoutLoaderData(useLoaderData());
  return (
    <ElementsProvider options={toElementsProviderOptions(data)}>
      <PaymentElement {...toPaymentElementProps(data)} />
    </ElementsProvider>
  );
}

Loader helpers

| Helper | Purpose | |--------|---------| | parseRebornCheckoutLoaderData | Validate + parse loader JSON | | isRebornCheckoutLoaderData | Type guard | | toElementsProviderOptions | Map to ElementsProvider props | | toPaymentElementProps | Map to PaymentElement props | | RebornCheckoutLoaderData | Loader shape type |

Snippets

import {
  INSTALL,
  REMIX_CHECKOUT_ROUTE_SNIPPET,
  parseRebornCheckoutLoaderData,
  toElementsProviderOptions,
  toPaymentElementProps,
} from "@rebornpay/elements-remix/snippets";

React exports

All @rebornpay/elements-react components and hooks are re-exported from the main entry.