Stripe Elements With a Custom Card Design in React and Next.js

"use client";

import { useState, type ReactNode } from "react";

export type FieldState = {
  complete: boolean; // provider says number, expiry and CVC are all valid
  brand: string | null; // provider's brand word: "visa", "mastercard", "amex", "unknown"
  focus: "number" | "expiry" | "cvc" | null;
};

export type CardFieldsSlot = {
  onChange: (next: Partial<FieldState>) => void;
  fieldClassName: string;
};

type Props = {
  amountLabel: string;
  // Your provider's hosted fields go here. The shell never sees a card number.
  renderCardFields: (slot: CardFieldsSlot) => ReactNode;
  // Called on Pay once the fields are complete. Gets the name and brand only.
  onConfirm: (info: { name: string; brand: string | null }) => Promise<void>;
};

const field = "rounded-xl border border-white/15 bg-white/5 px-4 py-3 focus-within:border-lime-300";

export default function CardShell({ amountLabel, renderCardFields, onConfirm }: Props) {
  const [fields, setFields] = useState<FieldState>({ complete: false, brand: null, focus: null });
  const [name, setName] = useState("");
  const [status, setStatus] = useState<"idle" | "paying" | "paid">("idle");
  const [error, setError] = useState<string | null>(null);

  const ready = fields.complete && name.trim().length > 1 && status === "idle";
  const flipped = fields.focus === "cvc";
  const brand = fields.brand && fields.brand !== "unknown" ? fields.brand.toUpperCase() : "CARD";

  async function pay() {
    if (!ready) return;
    setStatus("paying");
    setError(null);
    try {
      await onConfirm({ name: name.trim(), brand: fields.brand });
      setStatus("paid");
    } catch (e) {
      setError(e instanceof Error ? e.message : "Payment failed");
      setStatus("idle");
    }
  }

  return (
    <div className="grid gap-8 md:grid-cols-2">
      <div className="[perspective:1000px]">
        <div
          data-testid="card"
          data-flipped={flipped}
          className={`relative aspect-[1.586] w-full transition-transform duration-500 [transform-style:preserve-3d] ${
            flipped ? "[transform:rotateY(180deg)]" : ""
          }`}
        >
          <div className="absolute inset-0 flex flex-col justify-between rounded-2xl bg-gradient-to-br from-neutral-800 to-neutral-900 p-6 [backface-visibility:hidden]">
            <span data-testid="brand" className="self-end text-sm font-bold tracking-widest text-lime-300">
              {brand}
            </span>
            <span className="font-mono text-xl tracking-widest text-white/80">•••• •••• •••• ••••</span>
            <span className="truncate text-sm uppercase text-white/70">{name || "Your name"}</span>
          </div>
          <div className="absolute inset-0 rounded-2xl bg-neutral-800 [backface-visibility:hidden] [transform:rotateY(180deg)]">
            <div className="mt-8 h-10 bg-black/70" />
            <div className="mx-6 mt-6 rounded bg-white/90 px-3 py-2 text-right font-mono text-neutral-900">•••</div>
          </div>
        </div>
      </div>

      <form
        className="flex flex-col gap-3"
        onSubmit={(e) => {
          e.preventDefault();
          void pay();
        }}
      >
        <label className="text-sm text-white/60" htmlFor="cc-name">
          Name on card
        </label>
        <input
          id="cc-name"
          autoComplete="cc-name"
          className={`${field} outline-none`}
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
        {renderCardFields({ onChange: (next) => setFields((f) => ({ ...f, ...next })), fieldClassName: field })}
        <button
          type="submit"
          disabled={!ready}
          className="mt-2 rounded-xl bg-lime-300 px-4 py-3 font-semibold text-neutral-950 disabled:opacity-40"
        >
          {status === "paying" ? "Paying..." : status === "paid" ? "Paid" : `Pay ${amountLabel}`}
        </button>
        <p role="status" className="min-h-5 text-sm text-red-300">
          {error}
        </p>
      </form>
    </div>
  );
}

"use client";

import { useRef } from "react";
import { loadStripe, type StripeElementStyle } from "@stripe/stripe-js";
import {
  CardCvcElement,
  CardExpiryElement,
  CardNumberElement,
  Elements,
  useElements,
  useStripe,
} from "@stripe/react-stripe-js";
import CardShell from "./CardShell";

const stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY ?? "");

// Card Elements take a style object (the Appearance API is for the Payment Element).
const style: StripeElementStyle = {
  base: {
    color: "#ffffff",
    fontSize: "16px",
    fontFamily: "system-ui, sans-serif",
    "::placeholder": { color: "#737373" },
  },
  invalid: { color: "#fca5a5" },
};

function Form({ clientSecret }: { clientSecret: string }) {
  const stripe = useStripe();
  const elements = useElements();
  // Each Element reports its own `complete`. Pay needs all three.
  const done = useRef({ number: false, expiry: false, cvc: false });

  return (
    <CardShell
      amountLabel="$29.00"
      renderCardFields={({ onChange, fieldClassName }) => {
        const mark = (part: "number" | "expiry" | "cvc", complete: boolean) => {
          done.current[part] = complete;
          const d = done.current;
          onChange({ complete: d.number && d.expiry && d.cvc });
        };
        return (
          <>
            <div className={fieldClassName}>
              <CardNumberElement
                options={{ style }}
                onChange={(e) => {
                  onChange({ brand: e.brand });
                  mark("number", e.complete);
                }}
                onFocus={() => onChange({ focus: "number" })}
              />
            </div>
            <div className="grid grid-cols-2 gap-3">
              <div className={fieldClassName}>
                <CardExpiryElement
                  options={{ style }}
                  onChange={(e) => mark("expiry", e.complete)}
                  onFocus={() => onChange({ focus: "expiry" })}
                />
              </div>
              <div className={fieldClassName}>
                <CardCvcElement
                  options={{ style }}
                  onChange={(e) => mark("cvc", e.complete)}
                  onFocus={() => onChange({ focus: "cvc" })}
                  onBlur={() => onChange({ focus: null })}
                />
              </div>
            </div>
          </>
        );
      }}
      onConfirm={async ({ name }) => {
        const card = elements?.getElement(CardNumberElement);
        if (!stripe || !card) throw new Error("Stripe is still loading");
        const { error } = await stripe.confirmCardPayment(clientSecret, {
          payment_method: { card, billing_details: { name } },
        });
        if (error) throw new Error(error.message ?? "Payment failed");
      }}
    />
  );
}

export default function StripeCheckout({ clientSecret }: { clientSecret: string }) {
  return (
    <Elements stripe={stripePromise}>
      <Form clientSecret={clientSecret} />
    </Elements>
  );
}

import Stripe from "stripe";

// The price lives on the server. The browser never sends an amount or a card number.
export async function POST() {
  const key = process.env.STRIPE_SECRET_KEY;
  if (!key) return Response.json({ error: "STRIPE_SECRET_KEY is not set" }, { status: 500 });

  const stripe = new Stripe(key); // made per request, so `next build` works without the key
  const intent = await stripe.paymentIntents.create({
    amount: 2900,
    currency: "usd",
    allowed_payment_method_types: ["card"],
  });
  return Response.json({ clientSecret: intent.client_secret });
}

"use client";

import { useEffect, useState } from "react";
import StripeCheckout from "@/components/StripeCheckout";

export default function CheckoutPage() {
  const [clientSecret, setClientSecret] = useState<string | null>(null);

  useEffect(() => {
    fetch("/api/payment-intent", { method: "POST" })
      .then((r) => r.json())
      .then((d: { clientSecret: string }) => setClientSecret(d.clientSecret));
  }, []);

  return (
    <main className="mx-auto max-w-4xl px-6 py-16">
      <h1 className="mb-8 text-3xl font-semibold">Checkout</h1>
      {clientSecret ? <StripeCheckout clientSecret={clientSecret} /> : <p className="text-white/60">Loading...</p>}
    </main>
  );
}