Checkout page in Tailwind CSS, with a 3D card for the payment step

A checkout page in Tailwind with the card as the last step

app/checkout/page.tsx

import PaymentStep from "./payment-step";

const items = [
  { id: "lamp", name: "Walnut desk lamp", note: "Warm white", qty: 1, price: 128 },
  { id: "shade", name: "Linen shade", note: "Sand", qty: 2, price: 24 },
];
const shipping = 8;
const money = (n: number) => new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" }).format(n);

const input = "h-11 w-full rounded-lg border border-zinc-300 bg-white px-3 text-sm outline-none focus:border-zinc-900";
const label = "mb-1.5 block text-sm font-medium text-zinc-700";

export default function CheckoutPage() {
  const subtotal = items.reduce((sum, i) => sum + i.qty * i.price, 0);
  const total = subtotal + shipping;

  return (
    <main className="min-h-dvh bg-zinc-50 text-zinc-900">
      <div className="mx-auto max-w-6xl px-4 py-10">
        <ol className="flex gap-6 text-sm text-zinc-500">
          <li>Cart</li>
          <li className="font-medium text-zinc-900">Details</li>
          <li>Payment</li>
        </ol>

        <div className="mt-8 grid gap-8 lg:grid-cols-[1fr_360px]">
          {/* Plain Tailwind: contact, address, delivery. Swap in a free block here if you like. */}
          <form id="details" className="grid gap-8">
            <section className="grid gap-4">
              <h2 className="text-lg font-semibold">Contact</h2>
              <div>
                <label htmlFor="email" className={label}>Email</label>
                <input id="email" type="email" autoComplete="email" className={input} />
              </div>
            </section>
            <section className="grid gap-4 sm:grid-cols-2">
              <h2 className="text-lg font-semibold sm:col-span-2">Shipping address</h2>
              <div>
                <label htmlFor="first" className={label}>First name</label>
                <input id="first" autoComplete="given-name" className={input} />
              </div>
              <div>
                <label htmlFor="last" className={label}>Last name</label>
                <input id="last" autoComplete="family-name" className={input} />
              </div>
              <div className="sm:col-span-2">
                <label htmlFor="street" className={label}>Address</label>
                <input id="street" autoComplete="street-address" className={input} />
              </div>
              <div>
                <label htmlFor="city" className={label}>City</label>
                <input id="city" autoComplete="address-level2" className={input} />
              </div>
              <div>
                <label htmlFor="zip" className={label}>Postal code</label>
                <input id="zip" autoComplete="postal-code" className={input} />
              </div>
            </section>
            <fieldset className="grid gap-3">
              <legend className="mb-3 text-lg font-semibold">Delivery</legend>
              {["Standard, 3 to 5 days", "Express, next day"].map((d, i) => (
                <label key={d} className="flex items-center gap-3 rounded-lg border border-zinc-300 bg-white p-4 text-sm has-[:checked]:border-zinc-900">
                  <input type="radio" name="delivery" defaultChecked={i === 0} />
                  {d}
                </label>
              ))}
            </fieldset>
          </form>

          <aside className="h-fit rounded-2xl border border-zinc-200 bg-white p-6 lg:sticky lg:top-6">
            <h2 className="text-lg font-semibold">Order summary</h2>
            <ul className="mt-4 divide-y divide-zinc-100">
              {items.map((i) => (
                <li key={i.id} className="flex justify-between py-3 text-sm">
                  <span>
                    {i.name} <span className="text-zinc-500">x{i.qty}</span>
                    <span className="block text-zinc-500">{i.note}</span>
                  </span>
                  <span className="font-medium">{money(i.qty * i.price)}</span>
                </li>
              ))}
            </ul>
            <dl className="mt-4 grid gap-2 border-t border-zinc-200 pt-4 text-sm">
              <div className="flex justify-between"><dt className="text-zinc-500">Subtotal</dt><dd>{money(subtotal)}</dd></div>
              <div className="flex justify-between"><dt className="text-zinc-500">Shipping</dt><dd>{money(shipping)}</dd></div>
              <div className="flex justify-between text-base font-semibold"><dt>Total</dt><dd>{money(total)}</dd></div>
            </dl>
          </aside>
        </div>

        {/* The one step the card piece covers. */}
        <section className="mt-12">
          <h2 className="mb-4 text-lg font-semibold">Payment</h2>
          <PaymentStep amount={total} />
        </section>
      </div>
    </main>
  );
}

"use client";
import { useEffect, useRef, useState } from "react";
import CardCheckout from "@/components/CardCheckout";

// The card is drawn on a fixed 1000 x 660 stage. Scale it down to the column.
const W = 1000;
const H = 660;

export default function PaymentStep({ amount }: { amount: number }) {
  const box = useRef<HTMLDivElement>(null);
  const [scale, setScale] = useState(1);

  useEffect(() => {
    const el = box.current;
    if (!el) return;
    const ro = new ResizeObserver(([entry]) => setScale(Math.min(1, entry.contentRect.width / W)));
    ro.observe(el);
    return () => ro.disconnect();
  }, []);

  return (
    <div ref={box} className="mx-auto w-full max-w-[1000px] overflow-hidden rounded-3xl" style={{ height: H * scale }}>
      <div style={{ width: W, transform: `scale(${scale})`, transformOrigin: "top left" }}>
        <CardCheckout
          amount={amount}
          currency="USD"
          productName="Your order"
          title="Pay by card"
          subtitle="Last step. Your details are saved above."
          resetAfter={null}
          // Demo mode: with no renderCardFields the card fakes the payment.
          // Before you take money, pass your provider's hosted fields in
          // renderCardFields and confirm in onConfirm (see the provider guides).
        />
      </div>
    </div>
  );
}

import type { ReactNode } from "react";
import "./globals.css";

// The card's CSS names "Space Grotesk" and "JetBrains Mono" directly,
// so load them under those names, as the zip's index.html does.
export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="en">
      <head>
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link
          rel="stylesheet"
          href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap"
        />
      </head>
      <body>{children}</body>
    </html>
  );
}

@import "tailwindcss";

/* Credit Card Checkout V1 on Tailwind v4. v4 skips the zip's
   tailwind.config.js, so pin the card's two fonts here, inside the card
   only. The utilities layer plus !important is what reaches the
   cardholder name field, which carries !font-sans. */
@layer utilities {
  .qcc-root .font-sans,
  .qcc-root .\!font-sans {
    font-family: "Space Grotesk", system-ui, sans-serif !important;
  }
  .qcc-root .font-mono {
    font-family: "JetBrains Mono", ui-monospace, monospace;
  }
}