# Checkout Page > A React checkout page from the cart to Order placed: an editable cart, four checkout steps and the order confirmation. - Type: React block (Blocks) - Access: Pro (the source needs a Wingo UI Pro plan, see https://wingo-ui.com/pricing) - Version: 1.0.0 - Install: `npx wingo-ui@latest add checkout-page` - Docs: https://wingo-ui.com/components/checkout-page ## Interaction A slim three step bar under the header shows where you are (Cart, Delivery and payment, Confirmation). In the cart the steppers change quantities (hold to repeat, a stock hint at the limit, the trash at 1), the × or a swipe left on touch removes a line and leaves an undo row that counts down for 5 seconds, and Save for later moves a line to a saved list below with Move to cart and Delete. The free delivery bar fills as the cart grows and turns green at the threshold. Have a coupon? opens the code field: FALL15, FREESHIP, SAVE50 and BIG200 apply after a short check with a popping tick, EXPIRED is rejected with its date, and a code that stops applying after a quantity change is removed with a note. The summary, the savings badge and the total follow every change. Continue to delivery (or the phone bar with the total, shown while the summary button is off screen) opens the checkout: saved addresses or a new one with the state picker (Romanian counties and localities under a ro locale), a company invoice with the tax ID check, the delivery methods with the locker list, the payment methods, and the review with the terms. Back to cart returns with everything kept. Place order places it; the card ending 0002 is refused with the bank's message on the review step. The button turns into a check, the confirmation slides in with a bouncy tick, the thank you, the email, Track order, Continue shopping, an account hint for guests and the order tracker. You might also like is a swipeable rail whose Add to cart buttons add to the cart. Every stage change moves focus to its heading and is announced; stages slide in the direction you go, a fade under reduced motion. On phones the cart is one column, the checkout is a full screen app with its own footer and the confirmation buttons are full width. ## Installation ```bash npx wingo-ui@latest add checkout-page ``` Pro item: run `npx wingo-ui@latest login` once with a Pro account. The CLI adds the files, their dependencies and a version record for updates. With shadcn: `npx shadcn@latest add @wingo-ui/checkout-page` (needs the @wingo-ui registry with your API key in components.json) Files: - `components/blocks/checkout-page.tsx` - `components/blocks/checkout-page-data.ts` npm dependencies: `npm i motion lucide-react` Wingo UI dependencies (installed automatically): - [Alert](https://wingo-ui.com/components/alert) ([Markdown](https://wingo-ui.com/components/alert.md)) - [Badge](https://wingo-ui.com/components/badge) ([Markdown](https://wingo-ui.com/components/badge.md)) - [Button](https://wingo-ui.com/components/button) ([Markdown](https://wingo-ui.com/components/button.md)) - [Carousel](https://wingo-ui.com/components/carousel) ([Markdown](https://wingo-ui.com/components/carousel.md)) - [Cart drawer](https://wingo-ui.com/components/cart-drawer) ([Markdown](https://wingo-ui.com/components/cart-drawer.md)) - [Checkout steps](https://wingo-ui.com/components/checkout-steps) ([Markdown](https://wingo-ui.com/components/checkout-steps.md)) - [Coupon input](https://wingo-ui.com/components/coupon-input) ([Markdown](https://wingo-ui.com/components/coupon-input.md)) - [Empty State](https://wingo-ui.com/components/empty-state) ([Markdown](https://wingo-ui.com/components/empty-state.md)) - [Listing card](https://wingo-ui.com/components/listing-card) ([Markdown](https://wingo-ui.com/components/listing-card.md)) - [Order tracker](https://wingo-ui.com/components/order-tracker) ([Markdown](https://wingo-ui.com/components/order-tracker.md)) - [Progress](https://wingo-ui.com/components/progress) ([Markdown](https://wingo-ui.com/components/progress.md)) - [Quantity stepper](https://wingo-ui.com/components/quantity-stepper) ([Markdown](https://wingo-ui.com/components/quantity-stepper.md)) - [Skeleton](https://wingo-ui.com/components/skeleton) ([Markdown](https://wingo-ui.com/components/skeleton.md)) - [Sticky CTA Bar](https://wingo-ui.com/components/sticky-cta-bar) ([Markdown](https://wingo-ui.com/components/sticky-cta-bar.md)) - [Toast](https://wingo-ui.com/components/toast) ([Markdown](https://wingo-ui.com/components/toast.md)) - [Commerce](https://wingo-ui.com/components/commerce) ([Markdown](https://wingo-ui.com/components/commerce.md)) - [Date utils](https://wingo-ui.com/components/date-utils) ([Markdown](https://wingo-ui.com/components/date-utils.md)) - [Motion presets](https://wingo-ui.com/components/motion) ([Markdown](https://wingo-ui.com/components/motion.md)) - [Navigation](https://wingo-ui.com/components/navigation) ([Markdown](https://wingo-ui.com/components/navigation.md)) - [Number format](https://wingo-ui.com/components/number-format) ([Markdown](https://wingo-ui.com/components/number-format.md)) - [Relative time](https://wingo-ui.com/components/relative-time) ([Markdown](https://wingo-ui.com/components/relative-time.md)) - [Romanian locations](https://wingo-ui.com/components/ro-locations) ([Markdown](https://wingo-ui.com/components/ro-locations.md)) - [Tones](https://wingo-ui.com/components/tones) ([Markdown](https://wingo-ui.com/components/tones.md)) - [UIProvider](https://wingo-ui.com/components/ui-config) ([Markdown](https://wingo-ui.com/components/ui-config.md)) ## Usage ```tsx // app/(market)/cart/page.tsx (the shell lives in app/(market)/cart/layout.tsx as ; mount once there) "use client" import { useRouter } from "next/navigation" import { CheckoutPage } from "@/components/blocks/checkout-page" export default function CartPage() { const router = useRouter() return ( fetch("/api/cart", { method: "PUT", body: JSON.stringify(items) })} onPlaceOrder={async (value, totals) => { const response = await fetch("/api/orders", { method: "POST", body: JSON.stringify({ value, total: totals.total }) }) if (!response.ok) throw new Error(await response.text()) return (await response.json()) as { orderNumber: string } }} onTrackOrder={(orderNumber) => router.push(`/account/orders/${orderNumber}`)} onContinueShopping={() => router.push("/")} /> ) } ``` ## Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `items?` | `CartItem[]` | | The cart lines, controlled; pair with onItemsChange. CartItem comes from cart-drawer (price, compareAtPrice, quantity, maxQuantity, taxRate, image, variant, href). | | `defaultItems?` | `CartItem[]` | | The starting cart, uncontrolled (CHECKOUT_PAGE_SAMPLE.items: the city bike $1,199, was $1,399, 2 × iPhone 14 case $79.90, the laptop stand $149 and the trail guide $64.90 at an 11% reduced tax rate). | | `onItemsChange?` | `(items: CartItem[]) => void` | | Every quantity change, removal, save for later and add; the cart empties after an order. | | `stage?` | `"cart" \| "checkout" \| "confirmation"` | | The stage, controlled; pair with onStageChange. | | `defaultStage?` | `"cart" \| "checkout" \| "confirmation"` | `"cart"` | The stage the page opens on. confirmation without a placed order shows order. | | `onStageChange?` | `(stage: CheckoutStage) => void` | | Continue to delivery, Back to cart and a placed order. | | `checkout?` | `CheckoutValue` | | The checkout form value, controlled (checkout-steps' CheckoutValue without the coupons, which come from the cart). | | `defaultCheckout?` | `CheckoutValue` | | The starting form value. The signed-in buyer's email is prefilled unless guest. | | `onCheckoutChange?` | `(value: CheckoutValue) => void` | | Every field of the checkout. | | `checkoutStep?` | `"address" \| "delivery" \| "payment" \| "review"` | | The checkout's step, controlled. | | `defaultCheckoutStep?` | `"address" \| "delivery" \| "payment" \| "review"` | `"address"` | The step the checkout opens on (the demo fills the steps before it). | | `onCheckoutStepChange?` | `(step: CheckoutStepId) => void` | | Continue, Back and the stepper. | | `coupons?` | `Coupon[]` | | The valid codes (CHECKOUT_PAGE_SAMPLE.coupons: FALL15 15% up to $150, FREESHIP, SAVE50 from $300, BIG200 from $2,000), checked locally and rechecked when the cart changes. | | `onApplyCoupon?` | `(code: string) => (CouponResult \| Promise)` | | The server check of a typed code. Default: a pretend 600 ms request over coupons that rejects EXPIRED with This coupon expired on August 31, 2026. | | `savedAddresses?` | `CheckoutAddress[]` | | The buyer's addresses (Home: 1200 Market St, Apt. 4, San Francisco; Office: Summit Software Inc., 500 Howard St). Ignored for a guest. | | `deliveryMethods?` | `DeliveryMethod[]` | | UPS Ground $19.99, Parcel locker $12.99, FedEx Home Delivery $17.99 and a free pickup in San Francisco. The cheapest paid one is the cart's delivery estimate. | | `lockers?` | `CheckoutLocker[] or (methodId: string) => Promise` | | The locker list (Civic Center, Westfield Centre, Hayes Valley, Union Square), or a loader per locker method. | | `paymentMethods?` | `PaymentMethod[]` | | Visa •••• 4242, Mastercard •••• 0002, Cash on delivery (+$4.99), Bank transfer (with the account) and 3 installments from $600. Methods without an icon get one by id (card, cash or ramburs, transfer, rate). | | `freeShippingThreshold?` | `number` | `250` | Courier and locker delivery are free from this much, after coupons; 0 hides the free delivery bar. | | `recommended?` | `ListingData[]` | | The You might also like rail (CHECKOUT_PAGE_SAMPLE.recommended, 4 shop products with an add button). [] hides it. | | `guest?` | `boolean` | `false` | No saved addresses and no prefilled email; the confirmation adds the Create an account hint. | | `customerEmail?` | `string` | `"anna.price@summitcrm.com"` | The signed-in buyer's email, prefilled in the checkout. | | `onPlaceOrder?` | `(value: CheckoutValue, totals: CartTotals) => (Promise \| CheckoutPlaceResult \| void)` | | Places the order (CheckoutPlaceResult = { orderNumber: string }; totals.total includes delivery and the payment fee). A rejection shows its message on the review step. Default: a pretend 1.4 s request that returns #1042 and refuses the card ending 0002 with The bank declined the payment. | | `order?` | `CheckoutOrder` | | What the confirmation shows when the page opens on it (CHECKOUT_PAGE_SAMPLE.order, #1042 with UPS Ground). A placed order replaces it. | | `onContinueShopping?` | `() => void` | | Continue shopping on the confirmation. Default: a toast. | | `onTrackOrder?` | `(orderNumber: string) => void` | | Track order on the confirmation. Default: a toast. | | `shopHref?` | `string` | `"/"` | Browse listings in the empty cart. | | `termsHref?` | `string` | `"/terms"` | The terms link of the review step's checkbox. | | `privacyHref?` | `string` | `"/privacy"` | The privacy link of the review step's checkbox. | | `registerHref?` | `string` | `"/register"` | Create account in the guest's account hint. | | `stickyBar?` | `boolean` | `true` | Below 1024px in the cart, a bottom bar with the total and Continue while the summary's button is off screen. | | `ctaTone?` | `"neutral" \| "brand" \| "success" \| "warning" \| "danger" \| "info"` | `"neutral"` | Continue to delivery, the checkout's Continue and Place order, the phone bar and Track order. | | `labels?` | `Partial` | | Every visible string, English by default (DEFAULT_CHECKOUT_PAGE_LABELS; CHECKOUT_PAGE_LABELS_EN is the same set), counted ones as functions; nested cart, stepper, coupon, checkout, tracker, listingCard, carousel and stickyBar for the composed items. | | `locale?` | `string` | `"en-US"` | Intl locale for prices, counts and dates. A ro locale switches the address region to Romanian counties with their localities. | | `currency?` | `string` | `"USD"` | The currency of every amount (the demo converts the sample to EUR). | | `now?` | `Date \| number` | | The confirmation's clock (the order time, the arrival days). Default: the live clock; the demo passes September 24, 2026, 4:40 PM. | | `tone?` | `"neutral" \| "brand" \| "success" \| "warning" \| "danger" \| "info"` | `"neutral"` | The stage bar, the free delivery bar and the order tracker's milestones. | | `radius?` | `"sm" \| "md" \| "lg"` | `"md"` | The panels 12 / 16 / 24px and the buttons, steppers and fields with them. | | `loading?` | `boolean` | `false` | The cart, the summary and the rail as skeletons of their real shape. | | `animateIn?` | `boolean` | `true` | Sections rise in once when the page mounts on the client (never over server HTML, never with reduced motion). | | `linkComponent?` | `(props: LinkComponentProps) => ReactNode` | | The router link for the empty cart's action, the terms links and the account hint. Default: the provider's (the shell's), then . | | `className?` | `string` | | Classes for the root. | | `classNames?` | `Partial>` | | Classes for the sections. | ## Parts ### DEFAULT_CHECKOUT_PAGE_LABELS (constant) Every English string of the cart, the four checkout steps and the confirmation. Spread it and override what you translate. ### CHECKOUT_PAGE_LABELS_EN (constant) An alias of DEFAULT_CHECKOUT_PAGE_LABELS, kept so older imports keep working. ### createCheckoutPageSample (function) Builds the demo shop in USD or EUR: cart items, coupons, saved addresses, delivery methods, lockers, payment methods, recommendations, the customer and the placed order. ### CHECKOUT_PAGE_SAMPLE (constant) The demo shop in USD. Replace it with your cart and checkout data. ### CHECKOUT_PAGE_SAMPLE_EUR (constant) The same demo shop with prices in EUR. ### CHECKOUT_PAGE_EUR_PER_USD (constant) The rounded euros per dollar rate the EUR sample is converted with. ### CHECKOUT_PAGE_NOW (constant) The fixed "now" of the sample (September 24, 2026, 4:40 PM), so dates render the same on the server and the client. ## Examples - **Delivery step with a parcel locker**: The checkout at its delivery step with Parcel locker picked and the locker list open. - **Order placed**: The bouncy check, the thank you and order #1042 tracked from Placed. - **Empty cart**: Your cart is empty with one action and the recommended products to start again. - **Payment refused**: Place the order with the Mastercard ending 0002: the bank refuses it and the review step shows why. - **Guest, brand actions**: No saved addresses, brand continue buttons and the account hint after the order. - **Loading**: The cart, the summary and the rail as skeletons of their real shape. - **en-GB, EUR prices**: en-GB formatting, euro prices and free delivery from €230. ## See also - [Checkout steps](https://wingo-ui.com/components/checkout-steps) ([Markdown](https://wingo-ui.com/components/checkout-steps.md)) - [Cart drawer](https://wingo-ui.com/components/cart-drawer) ([Markdown](https://wingo-ui.com/components/cart-drawer.md)) - [Coupon input](https://wingo-ui.com/components/coupon-input) ([Markdown](https://wingo-ui.com/components/coupon-input.md)) - [Order tracker](https://wingo-ui.com/components/order-tracker) ([Markdown](https://wingo-ui.com/components/order-tracker.md)) - [Marketplace Shell](https://wingo-ui.com/components/marketplace-shell) ([Markdown](https://wingo-ui.com/components/marketplace-shell.md)) - [Listing Detail Page](https://wingo-ui.com/components/listing-detail-page) ([Markdown](https://wingo-ui.com/components/listing-detail-page.md)) --- Canonical: https://wingo-ui.com/components/checkout-page More components: https://wingo-ui.com/components · Index for agents: https://wingo-ui.com/llms.txt