# Sign-In Checkout block

> Multi-Step Checkout with Stepper Progress and Sticky Order Summary

Four-step purchase flow for contact, address, delivery speed, and card/PayPal/Apple Pay payment, with promo code, validation, and a sticky order summary. Uses ReUI Stepper, Badge, Alert; shadcn Combobox, RadioGroup. For cart, order, checkout 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-1
- MCP: `get_block("checkout-1")`
- Built with: Alert, Badge, Button, Checkbox, Combobox, Field, 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

Sign in and new account panels on the first step, card number and expiry that format as you type, and a New Order reset once placed

## Agent notes

- `handleSignIn`, `handlePasswordReset` and `handleCreateAccount` only raise toasts and set local form state, so call your auth API from them
- `DEFAULT_CHECKOUT_VALUES` prefills contact and a test card, and `CHECKOUT_ITEMS` is the bag; replace both with real customer and cart data
- `handleApplyPromo` only compares the typed code to `PROMO_CODE`, and `getOrderSummary` taxes with a flat `TAX_RATE`, so price on the server

## When not to use

- An owner profile and billing details set up in a narrow card, with no bag to buy: use [Billing Setup](https://web.dev.reui.io/blocks/application/wizard/wizard-1.md) (`get_block("wizard-1")`)

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

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