Xzero UI
Pro library
BlocksCheckout summary

Checkout summaryPro

An order summary with a promo code that becomes a chip, discount and tax lines, and pay button states.

$ pnpm dlx shadcn@4.23.0 add @xzero-ui-pro/checkout-summary
Live · keyboard ready

Use this as a starting point and replace the sample data with your own.

When to use

When not to use

Installation

Register both Xzero UI namespaces in your project's components.json:

{
  "registries": {
    "@xzero-ui": "https://mcp.xzero.co.uk/r/{name}.json",
    "@xzero-ui-pro": "https://mcp.xzero.co.uk/r/pro/{name}.json"
  }
}

npx shadcn@4.23.0 add @xzero-ui-pro/checkout-summary

Install xzero-foundation once, and import @/components/xzero/foundation.css in your app root. No Xzero token is used by this snapshot. For sample portraits, photos, fonts, or logos, download https://mcp.xzero.co.uk/install-assets.mjs and run node xzero-install-assets.mjs <receiving-project>.

Usage

import { CheckoutSummary } from "@/components/xzero/blocks/checkout-summary/checkout-summary";

export function Checkout() {
  return (
    <CheckoutSummary
      item={{ name: "Xzero Pro", description: "All components and blocks", price: 199, period: "one payment" }}
      adjustments={[{ id: "launch", label: "Launch price", amount: -50, note: "38 of 50 left" }]}
      coupon={{
        onApply: async code => {
          const res = await fetch("/api/coupon", { method: "POST", body: JSON.stringify({ code }) });
          return res.json();
        },
      }}
      tax={{ label: "Tax", note: "Calculated at checkout" }}
      form={{ action: "/api/checkout", fields: { plan: "pro" } }}
      payLabel={total => `Continue to payment, ${total}`}
    />
  );
}

API reference

CheckoutSummary

An order summary for the last step before payment, with discount lines, a promo code field, a counting total, and a pay button that moves from idle to processing to paid. Without item it renders a sample order with simulated code and payment.

PropTypeDefaultDescription
itemCheckoutSummaryItem–The product: name, price, and optional description, period, and media. Omit it to render the built-in sample order.
adjustmentsCheckoutSummaryLine[][]Automatic lines, each with id, label, amount (negative for a discount), and optional note.
coupon{ onApply: (code: string) => Promise<CheckoutCouponResult>; placeholder?: string }–Enables the promo code field. onApply resolves { ok: true, code, label?, amount } or { ok: false, message }. Validate on your server.
tax{ label: string; rate?: number; note?: string }–Tax line. With rate the amount is computed from the discounted subtotal; without it note, or Calculated at checkout, is shown.
currencystring"$"Symbol before amounts.
titlestring"Order summary"Heading, also the section's accessible name.
payLabel(total: string) => stringtotal => 'Pay ${total}'Pay button label. Receives the formatted total.
onPay() => Promise<void>–Client-side payment. Resolve to show success, reject to show an error and Try again.
form{ action: string; fields?: Record<string, string> }–Posts a native form instead, such as to a route that creates a hosted checkout session. fields become hidden inputs.
secureNoteReactNode"Encrypted payment"Line beside the lock under the button.
successLabelstring"Paid"Button label once onPay resolves.
disabledbooleanfalseShows the button but blocks payment, such as before checkout opens.
footnoteReactNode–Small print under the button.
classNamestring–Extra class on the root section.

CheckoutSummaryItem

The product being bought.

PropTypeDefaultDescription
name (required)string–Product name, truncated on one line.
descriptionstring–Short line under the name.
price (required)number–Price before adjustments. Shown as the subtotal.
periodstring–Note under the price, such as one payment or per year.
mediaReactNode–Thumbnail or mark in a 44px tile.

CheckoutSummaryLine

An adjustment line.

PropTypeDefaultDescription
id (required)string–Stable key. "coupon" is used by the applied code line.
label (required)string–Line label.
amount (required)number–Amount added to the subtotal. Negative for a discount, which is tinted.
notestring–Short note under the label, such as 38 of 50 left.

Keyboard interactions

KeysAction
EnterIn the promo code field, applies the code. An empty field keeps focus.
Enter / SpaceOn the remove button of an applied code, removes it and returns focus to the field.

Accessibility

Motion

Responsive behavior

Performance

Notes for AI

Guidance for AI tools

Blocks are complete, self-contained screens with sample data. Replace the sample data and connect the callbacks described above. Follow the declared prop types and do not invent props. Keep keyboard access, reduced motion support, and both light and dark themes intact when adapting it.

Full library index: https://ui.xzero.co.uk/llms.txt

Browse all components