Live checkoutPro

• Type: Block

• Page: https://ui.xzero.co.uk/components/blocks/checkout-live

• Markdown: https://ui.xzero.co.uk/components/blocks/checkout-live/markdown

• Access: Xzero Pro

• Registry id: checkout-live

• Source file: registry/blocks/checkout-live/checkout-live.tsx

• Built from: Segmented control, Checkbox, Input, Button, Animated counter

• Keywords: checkout, subscription, billing, payment form, order summary, coupon, receipt, seats, saas upgrade

Use this as the paid signup or upgrade step of a SaaS app. Load plans, add-ons and tax rates from your billing provider, check coupons on your server through validateCoupon, and charge through onPay with your payment SDK; the preview simulates payment.

When to use

• Upgrade from a free plan to a paid team plan.
• Paid signup where seats and add-ons change the price.
• A self serve checkout that needs coupons and tax by country.

When not to use

• A physical goods cart with shipping; use checkout-flow.
• Only showing totals without payment; use checkout-summary.
• Comparing plans before choosing; use plan-comparison.

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-live

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 { CheckoutLive } from "@/components/xzero/blocks/checkout-live/checkout-live";

export function UpgradePage() {
  return (
    <CheckoutLive
      defaultPlan="team"
      defaultSeats={12}
      validateCoupon={code => fetch(`/api/coupons/${code}`).then(r => r.json())}
      onPay={async order => {
        const res = await fetch("/api/subscribe", { method: "POST", body: JSON.stringify(order) });
        if (!res.ok) throw new Error("Your card was declined. Try another card.");
      }}
    />
  );
}

API reference

CheckoutLive

A subscription checkout with a live order summary. Plan, seats, billing period, add-ons, coupon and country recompute every line and the tax as you edit, and every amount rolls to its new value. On success the form steps aside and the summary glides to the centre and unfolds into a receipt.

Prop	Type	Default	Description
plans	Plan[]	sample plans	Plans with an id, name, monthly seat price in cents, and a short blurb.
addons	Addon[]	sample add-ons	Optional add-ons with a flat monthly price in cents.
countries	Country[]	sample countries	Billing countries with a tax rate, tax label, postal code pattern, and a hint shown when the postal code does not match.
defaultPlan	PlanId	"team"	Plan selected on mount.
defaultSeats	number	8	Seats on mount, from 1 to 500.
defaultBilling	"monthly" | "yearly"	"yearly"	Billing period on mount.
defaultAddons	string[]	["support"]	Add-on ids selected on mount.
yearlyDiscount	number	0.2	Discount for yearly billing, from 0 to 1. Shown on the billing toggle.
currency	string	"USD"	ISO currency code used to format every amount.
validateCoupon	(code: string) => CouponResult | Promise<CouponResult>	sample rules	Checks a coupon. Return { ok: true, code, percent } or { ok: false, message }. The sample accepts LAUNCH20 and TEAM10.
onPay	(order: CheckoutOrder) => void | Promise<void>	–	Charges the order. Throw an Error to show its message above the pay button. Without it the preview simulates payment and declines 4000 0000 0000 0002.
className	string	–	Extra class on the root.

Keyboard interactions

Keys	Action
Tab	Moves through express pay, plan, seats, add-ons, fields and pay.
Arrow keys	Move between plans inside the plan group.
Enter	Submits the form, or applies the coupon from the coupon field.
Escape	Closes the coupon field.

Accessibility

• Plans and billing period are radio groups with aria-checked; add-ons are real checkboxes.
• Errors are tied to their inputs with aria-describedby and aria-invalid, and a failed submit focuses the first invalid field.
• Rolling amounts keep the full value in visually hidden text, so screen readers never hear single digits.
• On success focus moves to the receipt heading; payment errors use role alert.

Motion

• Every amount rolls digit by digit on the snappy spring; add-on and discount lines open and close their height on the smooth spring.
• On success the form fades aside and the summary glides to the centre with one position spring, while the coupon folds away and receipt details unfold.
• The selected plan ring and billing pill travel between options as shared layout highlights.
• Reduced motion keeps every state and swaps travel for instant changes.

Responsive behavior

• Two columns with a sticky summary from 760px of frame width.
• Below that the summary sits on top as a collapsible total; plans stack below 520px.
• The receipt is a single centred column at every width.

Performance

• Only the changed digits animate; lines are plain DOM.
• Validation runs on each change for a handful of fields, so it stays cheap.

Notes for AI

• Choose this for a SaaS upgrade or paid signup where plan, seats and add-ons are chosen on the same page as payment.
• Prices are cents per month; yearly totals are derived with yearlyDiscount. Keep tax and coupon math on your server and treat the client numbers as a preview.
• Replace the card inputs with your payment provider's hosted fields in production; keep the layout and validation feedback.
• Below 760px of frame width the summary moves above the form and collapses to a total you can expand.

Related

• Checkout summary: An order summary with a promo code that becomes a chip, discount and tax lines, and pay button states.
• Pricing calculator: A seat slider and billing toggle drive plan cards with rolling prices and a moving recommended badge.
• Plan comparison: Compare meaningful differences between plans and billing periods.

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