Does applying a promo code change the total?

No. The component just shows the code as applied; it doesn't recalculate subtotal or total. Recompute those values yourself and pass updated subtotal, tax, and total props once you know the discount.

How do I validate a promo code against real data?

Replace the setTimeout in the apply handler with a call to your coupon-validation endpoint, and only mark the code as applied if that call succeeds.

How do I calculate tax before showing this panel?

Compute it server-side, for example with the Stripe Tax API, based on the customer's address, and pass the formatted result as the tax prop.

What happens when I click Complete purchase?

The button shows a spinner for 900ms as a stand-in for a real payment call, then swaps to a confirmation message. Replace that timeout with your actual checkout request and only show the confirmation once it succeeds.

Can I show an urgency message, like a trial ending soon?

Not as a built-in prop. Render your own alert or badge above the heading if you want to add urgency messaging.

When should I use this instead of a plain buy button?

Use it when the order has more than one component, such as a plan plus add-ons plus tax, or when people need a final review before committing to the charge.

Billing Checkout Summary

A final-review panel for checkout flows, listing each line item, subtotal, tax, and total, with a collapsible promo code field and a primary purchase button. Applying a code shows a short loading spinner before marking it applied, and completing the purchase does the same before swapping the button for a confirmation message. Built for SaaS checkout sidebars and subscription upgrade flows.

By Staaarter Team

Billing

Updated April 22, 2026

Docs

Live preview

Docs

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button, input, label dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/billing-checkout-summary.json

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/billing/billing33.tsx instead.

Usage

The file also exports billing33Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Billing33, billing33Demo } from "@/components/blocks/billing/billing33";

export default function Page() {
  return <Billing33 {...billing33Demo} />;
}

Props

Prop	Type	Default	Description
heading	string	"Order summary"	Heading at the top of the panel.
items	SummaryLineItem[]	none	Itemized rows listed above the subtotal.
subtotal	string	none	Preformatted subtotal amount.
tax	string	none	Preformatted tax amount; the tax row is omitted if not passed.
total	string	none	Preformatted total amount shown in the final row.
couponPromptLabel	string	"Have a promo code?"	Label for the link that expands the promo code field.
couponPlaceholder	string	"Enter code"	Placeholder text for the promo code input.
applyLabel	string	"Apply"	Label for the apply-code button.
purchaseLabel	string	"Complete purchase"	Label for the purchase button in its idle state.
purchasingLabel	string	"Processing"	Label shown on the purchase button while it's in its loading state.
purchasedHeading	string	"Purchase complete"	Heading shown in the confirmation panel after purchase.
purchasedMessage	string	none	Supporting text under the purchase confirmation heading.
className	string	none	Extra classes for the outer container.

Types

interface SummaryLineItem {
  label: string;
  amount: string;
}

Behavior notes

The promo code field is collapsed behind a "Have a promo code?" toggle; clicking it swaps the toggle for an input and an Apply button.
Applying a code sets a 600ms loading state on the Apply button, then shows the code as applied with a tag icon; there's no real validation against a coupon list, it always applies whatever was typed.
Once a code is applied, the toggle and input are hidden entirely rather than staying visible in a disabled state.
Clicking Complete purchase sets a 900ms loading state on the button (spinner plus disabled), then replaces the button with a confirmation panel; there's no way to undo a completed purchase from within the component.
Subtotal, tax, and total are all plain strings, so the component performs no arithmetic and applying a promo code doesn't change the displayed total.
The promo code toggle and purchase button are both hidden once the purchase is marked complete.

Frequently asked questions

More Billing Blocks

View all →

Billing Invoice List

Invoice history table with status badges, formatted amounts, and a per-row download link, built with shadcn/ui and Tailwind CSS.

Billing Failed Payment Alert

High-contrast failed-payment alert with a message, a retry button, and an optional update-payment-method button, built with shadcn/ui and Tailwind CSS.

Billing Credit Balance

Compact credit balance card with a large total, an optional purchased-versus-promotional breakdown, a low-balance notice, and a top-up button.

Billing Payment Methods

A saved payment method list for React and Next.js with brand icons, a default badge, near-expiry warnings, and remove/set-default actions per row.

Billing Add Card

A card entry form for React and Next.js with auto-formatted fields, internal brand detection, and per-field validation feedback built with shadcn/ui and Tailwind CSS.

Billing Coupon Code

An inline promo code input for React and Next.js with a simulated loading state, an applied summary showing the discount amount, and an invalid-code message.