# Order Review Checkout block

> Four-step ecommerce checkout with stepper and order summary sidebar

Four-step ecommerce checkout (contact, delivery, payment, review) with animated stepper, saved addresses, delivery and payment options, and promo codes. ReUI Frame, Stepper, Badge; shadcn Button, Combobox, RadioGroup. Use for: payment flow, checkout.

- Type: Pro block
- Category: [Checkout](https://web.dev.reui.io/blocks/ecommerce/checkout.md)
- Page: https://web.dev.reui.io/blocks/ecommerce/checkout/checkout-5
- MCP: `get_block("checkout-5")`
- Built with: Alert, Badge, Button, Checkbox, Combobox, Field, Frame, Input, Item, Radio Group, Separator, Spinner, Stepper
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## Best for

An order summary in a Frame whose footer badge counts the steps, then reads Ready to place and Order placed, beside sign in panels

## Agent notes

- The Sign In and Create Account buttons call `handleSignIn` and `handleCreateAccount`, which only show toasts and set local state, so connect your auth there
- `TotalSummaryPanel` shows Order placed from `orderComplete`, which `handleSubmit` sets after a `window.setTimeout`, so set it from your order result
- `SAVED_ADDRESSES`, `DELIVERY_OPTIONS` and `CHECKOUT_ITEMS` are demo data; replace them with the customer's addresses, rates and bag

## When not to use

- A finished order laid out as a statement style page with itemized line totals: use [Statement Receipt](https://web.dev.reui.io/blocks/ecommerce/receipt/receipt-5.md) (`get_block("receipt-5")`)

## Third-party libraries

- Motion v12: [API reference](https://motion.dev/docs/react-motion-component), [docs](https://motion.dev/docs/react) (the docs follow the latest Motion, with no React API break since v12)
- Sonner v2: [API reference](https://sonner.emilkowal.ski/toast), [docs](https://sonner.emilkowal.ski/getting-started)

## Install

```bash
npx shadcn@latest add @reui/checkout-5
```

## About Checkout blocks

### When to use

- A storefront checkout that takes a shopper from contact and shipping to payment beside the order total
- A one page pay screen, with typed shipping and card fields or a saved card confirmed by its CVV
- A prepaid AI token or usage credit purchase for a workspace, with billing details and no shipping

### When not to use

- A business task in numbered steps, such as vendor intake or an invoice, with no cart: use the [Wizard blocks](https://web.dev.reui.io/blocks/application/wizard.md)
- Step markers and panel switching alone, wrapped around a form you already built: use [Stepper](https://web.dev.reui.io/components/stepper.md) (`get_component("stepper")`)
- First run account or workspace setup right after signup, with nothing to pay for: use the [Onboarding blocks](https://web.dev.reui.io/blocks/application/onboarding.md)

### Agent notes

- No block calls a payment API: the final button fakes success with `window.setTimeout` or has no handler, so submit the order from there
- Card number and CVC are plain inputs with `cc-number` and `cc-csc` autofill; swap in your processor's hosted fields so raw card data stays off your app
- Each page.tsx wraps the block in a `min-h-svh` element and the root component sets its own max width; remove both inside your own layout

Every ReUI item has a twin like this one; the index is https://web.dev.reui.io/llms.txt. Agents with the ReUI MCP (https://web.dev.reui.io/docs/mcp) get the same guidance from the getters named above.