Custom Stripe card form for Next.js

Use it in Next.js

app/pay/checkout.tsx

"use client";
import { useRef } from "react";
import { useRouter } from "next/navigation";
import { loadStripe } from "@stripe/stripe-js";
import { Elements, CardNumberElement, CardExpiryElement, CardCvcElement, useStripe, useElements } from "@stripe/react-stripe-js";
import CardCheckout from "@/components/CardCheckout";

const stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY!);
const cardStyle = { base: { color: "#F4F2FF", fontFamily: "JetBrains Mono, monospace", fontSize: "18px", "::placeholder": { color: "#6E6A8A" } } };

function CardForm({ clientSecret, amount }: { clientSecret: string; amount: number }) {
  const stripe = useStripe();
  const elements = useElements();
  const router = useRouter();
  // a ref, so a re-render can't forget what Stripe already reported
  const done = useRef({ number: false, expiry: false, cvc: false }).current;

  return (
    <CardCheckout
      amount={amount}
      currency="USD"
      productName="Pro plan"
      resetAfter={null}
      renderCardFields={(slot) => {
        const track = (k: keyof typeof done) => (e: { complete: boolean; brand?: string }) => {
          done[k] = e.complete;
          slot.onChange({ complete: done.number && done.expiry && done.cvc, ...(e.brand ? { brand: e.brand } : {}) });
        };
        return (
          <div className="grid gap-[15px]">
            <div>
              <label className={slot.labelClassName}>Card number</label>
              <div className={slot.fieldClassName}><CardNumberElement options={{ style: cardStyle }} onChange={track("number")} /></div>
            </div>
            <div className="flex gap-[14px]">
              <div className="flex-1">
                <label className={slot.labelClassName}>Expiry</label>
                <div className={slot.fieldClassName}><CardExpiryElement options={{ style: cardStyle }} onChange={track("expiry")} /></div>
              </div>
              <div className="flex-1">
                <label className={slot.labelClassName}>CVC</label>
                <div className={slot.fieldClassName}>
                  <CardCvcElement
                    options={{ style: cardStyle }}
                    onChange={track("cvc")}
                    onFocus={() => slot.onChange({ focus: "cvc" })}
                    onBlur={() => slot.onChange({ focus: null })}
                  />
                </div>
              </div>
            </div>
          </div>
        );
      }}
      onConfirm={async ({ name }) => {
        if (!stripe || !elements) throw new Error("Stripe hasn't loaded yet.");
        const card = elements.getElement(CardNumberElement);
        if (!card) throw new Error("Card field missing.");
        const { error, paymentIntent } = await stripe.confirmCardPayment(clientSecret, {
          payment_method: { card, billing_details: { name } },
        });
        if (error) throw error; // the card shows Stripe's message and Pay comes back
        setTimeout(() => router.push(`/thanks?pi=${paymentIntent.id}`), 1200); // let the success state play
      }}
    />
  );
}

export default function Checkout({ clientSecret, amount }: { clientSecret: string; amount: number }) {
  return (
    <Elements stripe={stripePromise} options={{ clientSecret }}>
      <CardForm clientSecret={clientSecret} amount={amount} />
    </Elements>
  );
}

import Stripe from "stripe";
import Checkout from "./checkout";

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!);

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

export default async function PayPage() {
  // The amount is set here on the server. The browser only gets the client secret.
  const intent = await stripe.paymentIntents.create({
    amount: 2900, // $29.00, in cents
    currency: "usd",
    allowed_payment_method_types: ["card"], // card only: the form below collects cards
    metadata: { plan: "pro" },
  });

  return (
    <main className="grid min-h-dvh place-items-center overflow-hidden bg-[#0b0a14] p-4">
      <Checkout clientSecret={intent.client_secret!} amount={29} />
    </main>
  );
}