# Trust Strip Checkout block

> Multi-step checkout form with stepper and sticky order summary

Four-step checkout (contact, delivery, payment, review) with order summary, promo codes, saved addresses, and card, PayPal, or Apple Pay payment. ReUI Stepper, Badge, Alert; shadcn Card, RadioGroup, Combobox. For e-commerce checkout and payment pages

- Type: Pro block
- Category: [Checkout](https://web.dev.reui.io/blocks/ecommerce/checkout.md)
- Page: https://web.dev.reui.io/blocks/ecommerce/checkout/checkout-2
- MCP: `get_block("checkout-2")`
- Built with: Alert, Badge, Button, Card, Checkbox, Combobox, Field, Input, Input Group, 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

A 4 step flow with one create account checkbox, a tag icon promo field in a Card summary and a returns and free shipping trust strip

## Agent notes

- `CustomerAccountOptions` is a single `createAccount` checkbox that only stores a boolean, so create the account yourself after the order
- `ProtectionStrip` lists free shipping over $150 as static text; `getOrderSummary` has no such rule, so edit the copy or add the rule
- `SAVED_ADDRESSES` and `CHECKOUT_ITEMS` are demo data, and `handleRemoveItem` only drops the item from local `cartItems` state

## When not to use

- Shoppers who type a full street address and sign in with Apple, Google or X: use [Social Sign-In Checkout](https://web.dev.reui.io/blocks/ecommerce/checkout/checkout-7.md) (`get_block("checkout-7")`)

## 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-2
```

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