Basis Theory React Elements card form

Use it in Next.js

app/pay/basis-theory-checkout.tsx

"use client";
import { useRef } from "react";
import {
  BasisTheoryProvider,
  CardNumberElement,
  ExpiryElement,
  CVVElement,
  useBasisTheory,
  type CardNumberElementRef,
  type ExpiryElementRef,
  type CVVElementRef,
} from "@basis-theory/react-elements";
import CardCheckout, { type CardFieldsSlot } from "@/components/CardCheckout";

type Field = "number" | "expiry" | "cvc";
type Refs = {
  number: React.RefObject<CardNumberElementRef | null>;
  expiry: React.RefObject<ExpiryElementRef | null>;
  cvc: React.RefObject<CVVElementRef | null>;
};

// The card draws Visa and Mastercard. Anything else shows the plain front.
// The exact brand words come from Basis Theory's iframe, so match loosely.
const brandOf = (b?: string) => {
  const s = (b ?? "").toLowerCase();
  return s.includes("visa") ? "visa" : s.includes("master") ? "mastercard" : null;
};

function BasisTheoryFields({ slot, refs }: { slot: CardFieldsSlot; refs: Refs }) {
  // each iframe only knows about itself, so keep the three valid flags here
  const valid = useRef<Record<Field, boolean>>({ number: false, expiry: false, cvc: false });
  const setValid = (field: Field, ok: boolean) => {
    valid.current[field] = ok;
    const v = valid.current;
    slot.onChange({ complete: v.number && v.expiry && v.cvc });
  };
  const focus = (field: Field | null) => () => slot.onChange({ focus: field });

  return (
    <div className="grid gap-[15px]">
      <div>
        <span className={slot.labelClassName}>Card number</span>
        <div className={slot.fieldClassName}>
          <CardNumberElement
            ref={refs.number}
            ariaLabel="Card number"
            placeholder="1234 5678 9012 3456"
            iconPosition="none"
            onChange={(e) => {
              slot.onChange({ brand: brandOf(e.detail.cardBrand) });
              setValid("number", e.detail.isValid);
            }}
            onFocus={focus("number")}
            onBlur={focus(null)}
          />
        </div>
      </div>
      <div className="flex gap-[14px]">
        <div className="flex-1">
          <span className={slot.labelClassName}>Expiry</span>
          <div className={slot.fieldClassName}>
            <ExpiryElement
              ref={refs.expiry}
              ariaLabel="Expiry date"
              placeholder="MM/YY"
              onChange={(e) => setValid("expiry", e.detail.isValid)}
              onFocus={focus("expiry")}
              onBlur={focus(null)}
            />
          </div>
        </div>
        <div className="flex-1">
          <span className={slot.labelClassName}>CVC</span>
          <div className={slot.fieldClassName}>
            <CVVElement
              ref={refs.cvc}
              ariaLabel="Security code"
              placeholder="123"
              onChange={(e) => setValid("cvc", e.detail.isValid)}
              onFocus={focus("cvc")}
              onBlur={focus(null)}
            />
          </div>
        </div>
      </div>
    </div>
  );
}

function Checkout({ amount }: { amount: number }) {
  const { bt, error } = useBasisTheory();
  const refs: Refs = {
    number: useRef<CardNumberElementRef | null>(null),
    expiry: useRef<ExpiryElementRef | null>(null),
    cvc: useRef<CVVElementRef | null>(null),
  };

  if (error) return <p>The card form didn't load. Refresh and try again.</p>;

  return (
    <CardCheckout
      amount={amount}
      currency="USD"
      resetAfter={null}
      renderCardFields={(slot) => <BasisTheoryFields slot={slot} refs={refs} />}
      onConfirm={async ({ name }) => {
        const number = refs.number.current;
        const expiry = refs.expiry.current;
        const cvc = refs.cvc.current;
        if (!bt || !number || !expiry || !cvc) throw new Error("The card fields haven't loaded yet.");

        // The element refs go in, Basis Theory swaps in the real values inside its own frames.
        // Same shape as the package README: the expiry ref fills both month and year.
        const token = await bt.tokens.create({
          type: "card",
          data: { number, expiration_month: expiry, expiration_year: expiry, cvc },
        });

        // Only the token id reaches your server. Charging it is server work (see below).
        const res = await fetch("/api/pay", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ tokenId: token.id, name }),
        });
        if (!res.ok) throw new Error("That card didn't go through.");
      }}
    />
  );
}

export default function BasisTheoryCardCheckout({ amount }: { amount: number }) {
  return (
    <BasisTheoryProvider
      apiKey={process.env.NEXT_PUBLIC_BASIS_THEORY_KEY!}
      errorFallback={<p>The card form didn't load. Refresh and try again.</p>}
    >
      <Checkout amount={amount} />
    </BasisTheoryProvider>
  );
}