# Express Checkout block

> Two-pane express checkout with saved details and order summary rail

Express checkout with saved contact, address, and card review rows, a CVV security field, and a collapsible new-card form beside a live order summary. ReUI Badge; shadcn Card, Button, Field, InputGroup, Separator. Payment, order review.

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

## Best for

A single product confirmed with only the CVV of a saved Visa, with Edit on each saved row and new card fields under a disclosure

## Agent notes

- The `order` object holds the product, `shipping`, `tax` and `total` as fixed strings, so replace it with real order data
- Saved contact, address and card are literal `ReviewRow` props, not data, so feed them from the customer's account
- The Pay button, the `ReviewRow` Edit buttons and the CVV field have no handler or state, and the `details` new card form has no submit

## When not to use

- A shopper who must type shipping and card details on one page, with an Apple Pay option: use [One-Page Checkout](https://web.dev.reui.io/blocks/ecommerce/checkout/checkout-6.md) (`get_block("checkout-6")`)

## Install

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

## 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.