A shadcn checkout page with Stripe

Q: Does shadcn/ui have a checkout component?

Not as of October 26, 2026. Its registry has login, signup, dashboard and sidebar blocks but nothing for checkout or payments, so you build the page from Card, Button and Stripe's own fields, as above.

Q: Why doesn't the Payment Element pick up my shadcn theme?

It runs in Stripe's iframe, which can't read your CSS variables. Pass colours through Stripe's Appearance API; the helper above converts shadcn's tokens to rgb() for that.

Q: Do I need to create a PaymentIntent when the page loads?

No. Elements can render from mode, amount and currency, and the Server Action creates the intent when the buyer presses Pay.

Q: Is Receipt Morph Checkout a shadcn component?

No. You copy it from the zip into your project. In a shadcn app, scope its stylesheet first with the edit on its own guide.

Q: Does Receipt Morph Checkout work in Next.js?

Yes, as a client component. Keep "use client" at the top of the file that renders it, as in the snippet above. App Router and Pages Router both work.

Q: Can Cursor or v0 add it for me?

Yes. Each download has a PROMPT.md. Paste it into Cursor, Lovable, v0 or Claude Code and it fits the piece into your app.

Q: Can I use it in client work?

Yes, in personal and client projects. You can't resell the code itself as a kit.

shadcn/ui ships login and dashboard blocks but no checkout. Here's one for Next.js: an order summary in shadcn's Card, Stripe's Payment Element themed from your shadcn colours, and a Server Action that creates the payment when the buyer presses Pay.

One payment$3

By buying you agree to the Terms.

One payment, no subscription
Download right after paying
Use it in client projects
Won't run on the listed stack? We fix it or refund you

Ready forCursorv0Lovableshadcn CLI

Full product pageReact · Tailwind · TypeScript

The checkout page

app/checkout/page.tsx

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { CheckoutForm } from "@/components/checkout-form";
import { getCart } from "@/lib/cart";

function money(amount: number, currency: string) {
  const fmt = new Intl.NumberFormat("en", { style: "currency", currency });
  return fmt.format(amount / 10 ** (fmt.resolvedOptions().maximumFractionDigits ?? 2));
}

export default async function CheckoutPage() {
  const cart = await getCart();
  return (
    <main className="mx-auto grid max-w-4xl gap-6 px-4 py-10 md:grid-cols-[1fr_380px]">
      <Card>
        <CardHeader>
          <CardTitle>Payment</CardTitle>
          <CardDescription>Card, wallets and local methods, as enabled in your Stripe Dashboard.</CardDescription>
        </CardHeader>
        <CardContent>
          <CheckoutForm amount={cart.total} currency={cart.currency} />
        </CardContent>
      </Card>

      <Card className="h-fit">
        <CardHeader>
          <CardTitle>Order summary</CardTitle>
        </CardHeader>
        <CardContent className="grid gap-3 text-sm">
          {cart.items.map((item) => (
            <div key={item.id} className="flex justify-between gap-4">
              <span>
                {item.name} <span className="text-muted-foreground">x {item.quantity}</span>
              </span>
              <span className="tabular-nums">{money(item.amount * item.quantity, cart.currency)}</span>
            </div>
          ))}
          <div className="flex justify-between border-t pt-3 font-medium">
            <span>Total</span>
            <span className="tabular-nums">{money(cart.total, cart.currency)}</span>
          </div>
        </CardContent>
      </Card>
    </main>
  );
}

components/checkout-form.tsx (Payment Element + shadcn Button)

"use client";
import { useEffect, useState, type FormEvent } from "react";
import { loadStripe, type Appearance } from "@stripe/stripe-js";
import { Elements, PaymentElement, useElements, useStripe } from "@stripe/react-stripe-js";
import { Button } from "@/components/ui/button";
import { shadcnAppearance } from "@/lib/stripe-appearance";
import { createPaymentIntent } from "@/app/checkout/actions";

const stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY!);

export function CheckoutForm({ amount, currency }: { amount: number; currency: string }) {
  const [appearance, setAppearance] = useState<Appearance>();
  useEffect(() => setAppearance(shadcnAppearance()), []); // tokens are only readable in the browser

  if (!appearance) return <div className="h-56 animate-pulse rounded-md bg-muted" />;
  return (
    // No PaymentIntent yet: Elements renders from the amount, the intent is made on submit.
    <Elements stripe={stripePromise} options={{ mode: "payment", amount, currency, appearance }}>
      <PayForm />
    </Elements>
  );
}

function PayForm() {
  const stripe = useStripe();
  const elements = useElements();
  const [error, setError] = useState<string>();
  const [busy, setBusy] = useState(false);

  async function onSubmit(e: FormEvent) {
    e.preventDefault();
    if (!stripe || !elements) return;
    setBusy(true);
    setError(undefined);

    const { error: fieldError } = await elements.submit(); // validates the fields first
    if (fieldError) {
      setError(fieldError.message);
      setBusy(false);
      return;
    }
    const { clientSecret } = await createPaymentIntent();
    const { error: payError } = await stripe.confirmPayment({
      elements,
      clientSecret,
      confirmParams: { return_url: `${window.location.origin}/checkout/complete` },
    });
    // Only reached on an error: on success Stripe sends the buyer to return_url.
    setError(payError?.message);
    setBusy(false);
  }

  return (
    <form onSubmit={onSubmit} className="grid gap-4">
      <PaymentElement options={{ layout: "tabs" }} />
      {error && <p className="text-sm text-destructive">{error}</p>}
      <Button type="submit" size="lg" disabled={!stripe || busy}>
        {busy ? "Paying..." : "Pay now"}
      </Button>
    </form>
  );
}

lib/stripe-appearance.ts (shadcn tokens to Stripe's Appearance API)

"use client";
import type { Appearance } from "@stripe/stripe-js";

// The Payment Element renders inside Stripe's iframe, so it can't read your CSS variables.
// Resolve shadcn's tokens to plain rgb() strings in the browser and hand those to Stripe.
function token(name: string) {
  const raw = getComputedStyle(document.documentElement).getPropertyValue(name).trim();
  if (!raw) return undefined;
  // shadcn's Tailwind v3 themes store bare HSL parts ("222.2 47.4% 11.2%"); v4 themes store oklch(...).
  const color = raw.includes("(") || raw.startsWith("#") ? raw : `hsl(${raw})`;
  const ctx = document.createElement("canvas").getContext("2d");
  if (!ctx) return undefined;
  ctx.fillStyle = color;
  ctx.fillRect(0, 0, 1, 1);
  const [r, g, b, a] = ctx.getImageData(0, 0, 1, 1).data;
  return a === 255 ? `rgb(${r}, ${g}, ${b})` : `rgba(${r}, ${g}, ${b}, ${(a / 255).toFixed(2)})`;
}

export function shadcnAppearance(): Appearance {
  const radius = getComputedStyle(document.documentElement).getPropertyValue("--radius").trim() || "0.625rem";
  return {
    theme: "stripe",
    variables: {
      colorPrimary: token("--primary"),
      colorBackground: token("--background"),
      colorText: token("--foreground"),
      colorTextSecondary: token("--muted-foreground"),
      colorDanger: token("--destructive"),
      borderRadius: radius,
      fontFamily: "system-ui, sans-serif", // the iframe can't see next/font; pass a font via Elements' fonts option if you need yours
    },
    rules: {
      ".Input": { borderColor: token("--input") ?? "", boxShadow: "none" },
      ".Input:focus": { borderColor: token("--ring") ?? "", boxShadow: `0 0 0 3px ${token("--ring") ?? "transparent"}` },
    },
  };
}

app/checkout/actions.ts (Server Action, creates the PaymentIntent)

"use server";
import Stripe from "stripe";
import { getCart } from "@/lib/cart";

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

// Runs on the server when the buyer presses Pay. The amount comes from your cart, never from the browser.
export async function createPaymentIntent() {
  const cart = await getCart();
  const intent = await stripe.paymentIntents.create({
    amount: cart.total, // in the currency's smallest unit (cents for USD)
    currency: cart.currency,
    automatic_payment_methods: { enabled: true },
    metadata: { cartId: cart.id },
  });
  return { clientSecret: intent.client_secret! };
}

Good to know

shadcn/ui has no checkout block to add. We read its new-york-v4 registry on October 26, 2026: 471 items, with login-01 to login-05, signup blocks, dashboard-01 and the sidebar blocks, and none with checkout, payment, cart or order in its name. So the page above is assembled from shadcn's Card and Button plus Stripe's own fields.
The Payment Element renders in Stripe's iframe, so it can't see your CSS variables. shadcnAppearance() reads --primary, --background, --foreground, --muted-foreground, --destructive, --input, --ring and --radius in the browser and turns each colour into rgb() before Stripe gets it. It handles both theme formats: Tailwind v4 shadcn themes store oklch(...), older v3 themes store bare HSL parts. In our test the new-york-v4 --primary, oklch(0.205 0 0), came out as rgb(23, 23, 23).
Elements starts without a PaymentIntent: it renders from mode, amount and currency. The intent is created only when the buyer presses Pay, after elements.submit() has validated the fields, so a page view never creates one. Pass Elements the same amount and currency your Server Action charges.
The amount comes from getCart() on the server, both for the summary and for the Server Action. getCart stands for your own cart lookup; never take the amount from the browser.
On success, confirmPayment sends the buyer to return_url. Per Stripe's confirmPayment docs, that URL gets payment_intent and payment_intent_client_secret query parameters you can use to look up the PaymentIntent's status. Record the order from Stripe's payment_intent.succeeded webhook as well, not only from that page.
The iframe can't use fonts loaded with next/font. The snippet passes a system font; to use your own, give Elements a fonts entry (a cssSrc URL or a font file) and name it in fontFamily.
To follow a dark mode switch, call elements.update({ appearance: shadcnAppearance() }) after the theme class changes; Stripe's Elements object accepts appearance as an update.

Make the receipt the success state instead of a redirect

With the form above, a successful payment ends on your return_url. If you only take cards, you can keep the buyer on the page and make the payment moment itself the thing they see.
Receipt Morph Checkout is our paid piece for that. Its renderCardFields slot takes your provider's hosted fields (its prop docs name Stripe's card Elements and the Payment Element), so card digits never reach the component or your code. Your onConfirm runs stripe.confirmPayment with redirect: "if_required". When a card payment confirms, the card splits, unrolls into a paper receipt and gets stamped PAID. Methods that need a redirect still go to return_url.
ReceiptPay below sits inside the same Elements provider as the form above and reuses the same Server Action. It hides Apple Pay and Google Pay inside the card slot; keep wallets in the normal form if you want them.
It isn't a shadcn component and doesn't install with the shadcn CLI: you copy its files from the zip. Its stylesheet is written for a full page and, as shipped, changes shadcn's body colour, --muted, Button and Input text and your h1 and h2. The scoping edit we measured on a shadcn test page is on the Receipt Morph guide, linked below; the qd-rcpt wrapper in the snippet is part of that edit.

Scope Receipt Morph's CSS in a shadcn app

components/receipt-pay.tsx (Receipt Morph Checkout)

"use client";
import { PaymentElement, useElements, useStripe } from "@stripe/react-stripe-js";
import type { StripePaymentElementChangeEvent } from "@stripe/stripe-js";
import { CheckoutReceiptMorph } from "@/components/CheckoutReceiptMorph";
import { createPaymentIntent } from "@/app/checkout/actions";

// Render inside the same <Elements> provider as above. The Payment Element sits in Receipt Morph's
// card slot; a card payment confirms without leaving the page and the card unrolls into the receipt.
export function ReceiptPay() {
  const stripe = useStripe();
  const elements = useElements();

  return (
    <div className="qd-rcpt">
      <CheckoutReceiptMorph
        autoplayDemo={false}
        renderCardFields={(slot) => (
          <div className={slot.fieldClassName}>
            <PaymentElement
              options={{ wallets: { applePay: "never", googlePay: "never" } }}
              onChange={(e: StripePaymentElementChangeEvent) => slot.onChange({ complete: e.complete })}
            />
          </div>
        )}
        onConfirm={async () => {
          if (!stripe || !elements) return { ok: false, message: "Stripe is still loading" };
          const { error: fieldError } = await elements.submit();
          if (fieldError) return { ok: false, message: fieldError.message };
          const { clientSecret } = await createPaymentIntent();
          const { error } = await stripe.confirmPayment({
            elements,
            clientSecret,
            redirect: "if_required", // cards stay on the page; redirect-based methods still go to return_url
            confirmParams: { return_url: `${window.location.origin}/checkout/complete` },
          });
          return error ? { ok: false, message: error.message } : { ok: true };
        }}
      />
    </div>
  );
}

What we checked

Read on October 26, 2026: @stripe/stripe-js 10.1.0 (published October 13, 2026), @stripe/react-stripe-js 7.0.0 (October 1, 2026, peer @stripe/stripe-js >=10.0.0 <11.0.0) and stripe 23.0.1 (October 22, 2026), all MIT. Elements' mode, amount and currency options, elements.submit(), confirmPayment with a clientSecret and redirect: "if_required", and every Appearance variable used above are in stripe-js 10.1.0's types. The return_url parameters are from Stripe's confirmPayment docs, read the same day.
All five files on this page, with shadcn's new-york-v4 card.tsx and button.tsx and the Receipt Morph Checkout source, type-check with TypeScript 5.9.3 strict and build with next build on Next.js 15.5.28 and React 19.1.1. The page rendered at 390 and 1440 px with no sideways scroll, and shadcnAppearance() returned rgb() values for every token in headless Chromium. We didn't run a payment against a live or test Stripe account.

Install

Copy from the zipPut react/src/components + react/src/data into src/, then npm i framer-motion stripe @stripe/stripe-js @stripe/react-stripe-js.
Or ask your AIPaste PROMPT.md into Cursor, Lovable or v0.

Props

order: the order the receipt shows (items, total)
renderCardFields: slot for Stripe's hosted fields; card digits never reach the component
onConfirm: confirm with Stripe, return ok (and last4 if you have it)
onComplete: gets the receipt: orderId, total, last4, paidAt
autoplayDemo: false in a real app
accent / secondary: brand colours

How qodesign compares

qodesign vs 21st.dev21st.dev is best for: browsing a huge marketplace and copying many components a month.
qodesign vs Skiper UISkiper UI is best for: unusual interaction details for landing pages: image reveals, cursor trails, tooltips, drag-and-scroll galleries.

All comparisons, with prices read on each library's own site.

From the blog: Stripe Elements With a Custom Card Design in React and Next.js

Questions

Does shadcn/ui have a checkout component?

Not as of October 26, 2026. Its registry has login, signup, dashboard and sidebar blocks but nothing for checkout or payments, so you build the page from Card, Button and Stripe's own fields, as above.

Why doesn't the Payment Element pick up my shadcn theme?

It runs in Stripe's iframe, which can't read your CSS variables. Pass colours through Stripe's Appearance API; the helper above converts shadcn's tokens to rgb() for that.

Do I need to create a PaymentIntent when the page loads?

No. Elements can render from mode, amount and currency, and the Server Action creates the intent when the buyer presses Pay.

Is Receipt Morph Checkout a shadcn component?

No. You copy it from the zip into your project. In a shadcn app, scope its stylesheet first with the edit on its own guide.

Does Receipt Morph Checkout work in Next.js?

Yes, as a client component. Keep "use client" at the top of the file that renders it, as in the snippet above. App Router and Pages Router both work.

Can Cursor or v0 add it for me?

Yes. Each download has a PROMPT.md. Paste it into Cursor, Lovable, v0 or Claude Code and it fits the piece into your app.

Can I use it in client work?

Yes, in personal and client projects. You can't resell the code itself as a kit.