Live checkout
ProA subscription checkout whose summary recomputes as you edit, then glides to the centre and unfolds into a receipt.
Live block · sample data
- 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.
- 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
Pro source and install commands unlock with a Pro plan.
Usage
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.
example.tsx
import { CheckoutLive } from "@/components/arc/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."); }} /> );}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.
PropTypeDefaultDescription
plansPlan[]sample plansPlans with an id, name, monthly seat price in cents, and a short blurb.addonsAddon[]sample add-onsOptional add-ons with a flat monthly price in cents.countriesCountry[]sample countriesBilling countries with a tax rate, tax label, postal code pattern, and a hint shown when the postal code does not match.defaultPlanPlanId"team"Plan selected on mount.defaultSeatsnumber8Seats on mount, from 1 to 500.defaultBilling"monthly" | "yearly""yearly"Billing period on mount.defaultAddonsstring[]["support"]Add-on ids selected on mount.yearlyDiscountnumber0.2Discount for yearly billing, from 0 to 1. Shown on the billing toggle.currencystring"USD"ISO currency code used to format every amount.validateCoupon(code: string) => CouponResult | Promise<CouponResult>sample rulesChecks 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.classNamestring–Extra class on the root.- 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.
- 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.
- 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.
- 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.
- 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
Give your coding assistant the Markdown reference instead of screenshots.
- 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.
The full library index for assistants is at /llms.txt.