PayPal Card Fields in React

app/pay/page.tsx

import { browserSafeClientToken } from "@/lib/paypal";
import Checkout from "./checkout";

// A fresh client token for every visit, so render this page on request.
export const dynamic = "force-dynamic";

export default async function PayPage() {
  const clientToken = await browserSafeClientToken();
  return (
    <main className="grid min-h-dvh place-items-center overflow-hidden bg-[#0b0a14] p-4">
      {/* what the card shows; PayPal charges the amount set in the order route */}
      <Checkout clientToken={clientToken} amount={10} />
    </main>
  );
}

lib/paypal.ts

// Server only. PayPal's v6 Card Fields guide uses these two token requests.
const BASE = process.env.PAYPAL_API_BASE ?? "https://api-m.sandbox.paypal.com"; // https://api-m.paypal.com when live

async function token(form: string) {
  const basic = Buffer.from(`${process.env.PAYPAL_CLIENT_ID}:${process.env.PAYPAL_CLIENT_SECRET}`).toString("base64");
  const res = await fetch(`${BASE}/v1/oauth2/token`, {
    method: "POST",
    headers: { Authorization: `Basic ${basic}`, "Content-Type": "application/x-www-form-urlencoded" },
    body: form,
    cache: "no-store",
  });
  if (!res.ok) throw new Error(`PayPal token request failed (${res.status})`);
  return ((await res.json()) as { access_token: string }).access_token;
}

/** Browser-safe token for <PayPalProvider clientToken>. */
export const browserSafeClientToken = () =>
  token("grant_type=client_credentials&response_type=client_token&intent=sdk_init");

/** POST to the Orders v2 API with a full-scope token. */
export async function paypalPost(path: string, body?: unknown) {
  const access = await token("grant_type=client_credentials&response_type=token");
  const res = await fetch(`${BASE}${path}`, {
    method: "POST",
    headers: { Authorization: `Bearer ${access}`, "Content-Type": "application/json" },
    body: body === undefined ? undefined : JSON.stringify(body),
    cache: "no-store",
  });
  return { ok: res.ok, data: await res.json() };
}

app/api/paypal/orders/route.ts

import { paypalPost } from "@/lib/paypal";

export async function POST() {
  // The amount is set here on the server, never by the browser.
  const { ok, data } = await paypalPost("/v2/checkout/orders", {
    intent: "CAPTURE",
    purchase_units: [{ amount: { currency_code: "USD", value: "10.00" } }],
  });
  return Response.json(ok ? { id: data.id } : { error: "order_create_error" }, { status: ok ? 200 : 502 });
}

app/api/paypal/orders/[orderId]/capture/route.ts

import { paypalPost } from "@/lib/paypal";

export async function POST(_req: Request, { params }: { params: Promise<{ orderId: string }> }) {
  const { orderId } = await params;
  const { ok, data } = await paypalPost(`/v2/checkout/orders/${encodeURIComponent(orderId)}/capture`);
  // Fulfil from data.status === "COMPLETED" here, or from PayPal's webhook.
  return Response.json(data, { status: ok ? 200 : 502 });
}

app/pay/braintree-checkout.tsx (Braintree Hosted Fields, see the section below)

"use client";
import { useEffect, useRef } from "react";
import { client, hostedFields, type HostedFields } from "braintree-web";
import CardCheckout, { type CardFieldsSlot } from "@/components/CardCheckout";

function BraintreeFields({ slot, authorization, onReady }: { slot: CardFieldsSlot; authorization: string; onReady: (hf: HostedFields | null) => void }) {
  useEffect(() => {
    let hf: HostedFields | undefined;
    let gone = false;
    (async () => {
      const created = await hostedFields.create({
        client: await client.create({ authorization }),
        styles: { input: { color: "#F4F4F6", "font-size": "19px", "font-family": "monospace" }, "::placeholder": { color: "#4a4f61" } },
        fields: {
          number: { container: "#bt-number", placeholder: "Card number" },
          expirationDate: { container: "#bt-expiry", placeholder: "MM/YY" },
          cvv: { container: "#bt-cvv", placeholder: "123" },
        },
      });
      if (gone) return void created.teardown();
      hf = created;
      hf.on("cardTypeChange", (e) => {
        const type = e.cards.length === 1 ? e.cards[0].type : null;
        slot.onChange({ brand: type === "master-card" ? "mastercard" : type });
      });
      hf.on("validityChange", (e) => slot.onChange({ complete: e.fields.number.isValid && e.fields.expirationDate.isValid && e.fields.cvv.isValid }));
      hf.on("focus", (e) => slot.onChange({ focus: e.emittedBy === "cvv" ? "cvc" : null }));
      hf.on("blur", () => slot.onChange({ focus: null }));
      onReady(hf);
    })();
    return () => {
      gone = true;
      onReady(null);
      void hf?.teardown();
    };
  }, [authorization, slot, onReady]);

  return (
    <div className="grid gap-[15px]">
      <div>
        <label className={slot.labelClassName}>Card number</label>
        <div id="bt-number" className={slot.fieldClassName} />
      </div>
      <div className="flex gap-[14px]">
        <div className="flex-1">
          <label className={slot.labelClassName}>Expiry</label>
          <div id="bt-expiry" className={slot.fieldClassName} />
        </div>
        <div className="flex-1">
          <label className={slot.labelClassName}>CVV</label>
          <div id="bt-cvv" className={slot.fieldClassName} />
        </div>
      </div>
    </div>
  );
}

// authorization: a client token from your server (the braintree Node SDK's clientToken.generate) or a tokenization key
export default function BraintreeCheckout({ authorization, amount }: { authorization: string; amount: number }) {
  const fields = useRef<HostedFields | null>(null);
  const setFields = useRef((hf: HostedFields | null) => (fields.current = hf)).current;

  return (
    <CardCheckout
      amount={amount}
      currency="USD"
      resetAfter={null}
      renderCardFields={(slot) => <BraintreeFields slot={slot} authorization={authorization} onReady={setFields} />}
      onConfirm={async ({ name }) => {
        if (!fields.current) throw new Error("The card fields haven't loaded yet.");
        const { nonce } = await fields.current.tokenize({ cardholderName: name });
        // Your route calls gateway.transaction.sale({ amount, paymentMethodNonce: nonce }) with the server SDK.
        const res = await fetch("/api/braintree/checkout", { method: "POST", body: JSON.stringify({ nonce }) });
        if (!res.ok) throw new Error("That card didn't go through.");
      }}
    />
  );
}