# Order Confirmation

> The thank-you page after checkout. A check draws itself in, the order number copies in a tap, and a delivery strip runs from Confirmed to Delivered with the estimated arrival. Items and totals sit beside shipping, delivery and payment details, with Track order and View receipt actions and an optional one-field "save your details" account nudge. Prints as a clean receipt.

- Slug: `order-confirmation`
- Category: [Commerce](https://www.assembli.design/category/commerce.md)
- Type: component
- Tags: order-confirmation, thank-you, receipt, ecommerce, checkout, order-status, delivery
- npm dependencies: lucide-react, motion
- shadcn/ui dependencies: none
- Live preview: https://www.assembli.design/preview/order-confirmation
- Page: https://www.assembli.design/components/order-confirmation

![Order Confirmation preview](https://www.assembli.design/thumbnails/order-confirmation-light.png)

## Props

Other props pass through to the root element.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `orderNumber` (required) | `string` |  |  |
| `name` | `string` |  | First name for the greeting. |
| `email` | `string` |  |  |
| `lines` (required) | `ConfirmationLine[]` |  |  |
| `totals` (required) | `OrderTotals` |  |  |
| `steps` | `DeliveryStep[]` | `DEFAULT_DELIVERY_STEPS` |  |
| `status` | `string` |  | Id of the step the order is at. Defaults to the first. |
| `estimatedDelivery` | `React.ReactNode` |  |  |
| `shippingMethod` | `React.ReactNode` |  |  |
| `shippingAddress` | `string[]` |  | Address lines, name first. |
| `billingAddress` | `string[]` |  | Address lines, or leave out for "Same as shipping address". |
| `payment` | `{ brand: string; last4: string }` |  |  |
| `trackHref` | `string` |  |  |
| `onTrack` | `() => void` |  |  |
| `receiptHref` | `string` |  |  |
| `onViewReceipt` | `() => void` |  | Called by View receipt. Without it or `receiptHref`, the button prints the page. |
| `continueHref` | `string` |  |  |
| `helpHref` | `string` |  |  |
| `onCreateAccount` | `(password: string) => Promise<void> \| void` |  | Shows the "Save your details" card for guests. Resolve to confirm, throw an Error to show its message. |
| `currency` | `string` | `"USD"` |  |
| `locale` | `string` | `"en-US"` |  |

## Install

One-time setup (needs a subscription):

1. Add the registry to the project's `components.json`: `{"@assembli":{"url":"https://www.assembli.design/r/{name}.json","headers":{"Authorization":"Bearer ${ASSEMBLI_API_KEY}"}}}` (merge into `"registries"`).
2. Put an API key from https://www.assembli.design/account in `.env.local` as `ASSEMBLI_API_KEY=asm_…`.

Then install with the shadcn CLI (writes `components/order-confirmation/order-confirmation.tsx` and installs dependencies):

```bash
npx shadcn@latest add @assembli/order-confirmation
```

Registry item JSON: https://www.assembli.design/r/order-confirmation.json (send `Authorization: Bearer <api key>`)

## Code

> Component source needs an Assembli subscription ($12/month or $96/year) and an API key sent as `Authorization: Bearer <key>`. To get one without copying anything, POST https://www.assembli.design/api/agent/login (or call the MCP tool connect_account), show the user the link it returns, and poll https://www.assembli.design/api/agent/token for the key. Or subscribe at https://www.assembli.design/pricing and create a key at https://www.assembli.design/account.