# One-Page Checkout block

> Two-column checkout with order summary and payment form

Ecommerce checkout with order summary and payment form. Product list with totals, shipping details, card input with Apple Pay button and payment brand logos. Uses ReUI Badge; shadcn Button, Card, Checkbox, Field, Input, Item, Select, Separator, Tooltip.

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

## Best for

A single page of cards with Apple Pay over a card form, 5 payment brand logos, help tooltips and a delivery method select

## Agent notes

- `CHECKOUT_ITEMS`, `SUMMARY_ROWS` and `ORDER_TOTAL` are fixed demo values and the total is not computed from the rows, so derive it from your cart
- The Pay and Apple Pay buttons have no handler and the fields use `defaultValue` with no state, so add submit logic and controlled values
- The delivery `Select` from `SHIPPING_OPTIONS` is not wired to `SUMMARY_ROWS`, so changing the method leaves the Delivery price and total unchanged

## When not to use

- A returning buyer with saved contact, address and card who only confirms a CVV: use [Express Checkout](https://web.dev.reui.io/blocks/ecommerce/checkout/checkout-4.md) (`get_block("checkout-4")`)
- Configuring a hosted checkout's options as a merchant, with no order to pay: use [Checkout Setup](https://web.dev.reui.io/blocks/application/form/form-2.md) (`get_block("form-2")`)

## Install

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

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