# Order Summary

> The checkout sidebar. Line items carry quantity badges on their photos, a discount code field checks codes through your handler and shows the one applied as a removable tag (one per order; a bad code shakes), shipping methods are radio cards with arrival dates that turn free above a threshold, and totals roll digit by digit. On phones it folds behind a "Show order summary" bar.

- Slug: `order-summary`
- Category: [Commerce](https://www.assembli.design/category/commerce.md)
- Type: component
- Tags: checkout, order-summary, ecommerce, discount-code, promo-code, shipping, totals, cart
- npm dependencies: lucide-react, motion
- shadcn/ui dependencies: none
- Live preview: https://www.assembli.design/preview/order-summary
- Page: https://www.assembli.design/components/order-summary

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

## Props

Other props pass through to the root element.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `lines` (required) | `OrderLine[]` |  |  |
| `shippingMethods` | `ShippingMethod[]` | `[]` |  |
| `shippingMethod` | `string` |  |  |
| `defaultShippingMethod` | `string` |  |  |
| `onShippingMethodChange` | `(id: string) => void` |  |  |
| `discount` | `OrderDiscount \| null` |  |  |
| `defaultDiscount` | `OrderDiscount \| null` | `null` |  |
| `onDiscountChange` | `(discount: OrderDiscount \| null) => void` |  |  |
| `onApplyCode` | `(code: string) => OrderDiscount \| null \| Promise<OrderDiscount \| null>` |  | Checks a code. Return the discount it gives, or `null` when it isn't valid. Throw an `Error` to show its message instead (for "This code has expired"). Leave out to hide the code field. |
| `taxRate` | `number` |  | Estimated tax as a fraction of the discounted subtotal, e.g. 0.08. Leave out to show "Calculated at next step". |
| `currency` | `string` | `"USD"` |  |
| `locale` | `string` | `"en-US"` |  |
| `collapsible` | `"mobile" \| "always" \| "never"` | `"mobile"` | `mobile` (default) folds the summary behind a "Show order summary" bar below 1024px wide, as checkouts do when the summary sits above the form. `always` folds it at every width; `never` keeps it open. |
| `defaultExpanded` | `boolean` | `false` | Start unfolded where it can fold. |
| `title` | `React.ReactNode` | `"Order summary"` |  |

## 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-summary/order-summary.tsx` and installs dependencies):

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

Registry item JSON: https://www.assembli.design/r/order-summary.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.