# Social Sign-In Checkout block

> Multi-step checkout with stepper navigation and live order summary

Stepper-driven checkout for contact, shipping, delivery method, and payment, plus promo code discount, tax, and a live order summary. ReUI Stepper, Badge, Alert; shadcn RadioGroup, Select, Input, Button. For checkout page, 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-7
- MCP: `get_block("checkout-7")`
- Built with: Alert, Badge, Button, Checkbox, Field, Input, Item, Radio Group, Select, Separator, Spinner, Stepper
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## Best for

Social sign in with Apple, Google and X, a typed street address form, thin bar progress and a Place order button showing the total

## Agent notes

- The Apple, Google and X buttons and the Sign in link in `ContactSection` have no handler, so connect them to your auth provider
- `handlePlaceOrder` only waits on `window.setTimeout` before showing the Order placed Alert, so submit the order and take payment there
- `DEFAULT_CHECKOUT_VALUES` prefills a typed address, a test card and the `PROMO_CODE` promo, and `CHECKOUT_ITEMS` is a fixed bag with no remove control

## When not to use

- Returning shoppers who pick a saved address and review the order before paying: use [Trust Strip Checkout](https://web.dev.reui.io/blocks/ecommerce/checkout/checkout-2.md) (`get_block("checkout-2")`)

## Third-party libraries

- Sonner v2: [API reference](https://sonner.emilkowal.ski/toast), [docs](https://sonner.emilkowal.ski/getting-started)

## Install

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

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