# Order Summary

Checkout totals with subtotal, discount, shipping and tax, and a big total that counts to each new value. Applied promo codes show as removable chips.

> Composed · Pro · Data Display — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/order-summary
```

## Import

```tsx
import { OrderSummary } from "@/components/ui/order-summary/order-summary";
```

## Variants

- `booking` — Booking: `npx @lumioui/cli add pro/order-summary-booking`
- `checkout` — Checkout: `npx @lumioui/cli add pro/order-summary-checkout`

## Props

### OrderSummary

| Prop | Type | Notes |
| --- | --- | --- |
| `format?` | `FormatPriceOptions` | Money formatting shared by every row and the total. |
| `title?` | `string` | Optional heading — "Order summary". |
| `savingsLight?` | `boolean` | A saving performs: a discount row that arrives holds lit in the accent  while the total rolls down per digit, then the total line sheens.  Default false (the total counts on a spring). |
| `className?` | `string` | — |
| `children?` | `React.ReactNode` | — |

### OrderSummaryRow

| Prop | Type | Notes |
| --- | --- | --- |
| `label` | `string` | Left label — "Subtotal", "Shipping", "Estimated tax". |
| `amount?` | `number` | Amount in major units. Negative for discounts/credits. Omit with `value` for text. |
| `value?` | `string` | Text instead of an amount — "Calculated at next step". |
| `hint?` | `string` | Second line under the label — "Standard · 3–5 business days". |
| `tone?` | `"default" | "discount" | "muted"` | "discount" renders the amount in the success colour; "muted" dims the whole row. Default "default". |
| `badge?` | `string` | Small code chip after the label, e.g. the promo code that produced a discount. |
| `freeLabel?` | `string` | Label shown when amount is 0. Default "Free". |
| `onInfoPress?` | `() => void` | Info-glyph press handler (tax / fee explanation). |
| `className?` | `string` | — |

### OrderSummaryTotal

| Prop | Type | Notes |
| --- | --- | --- |
| `amount` | `number` | Total in major units — counts to each new value. |
| `label?` | `string` | Label. Default "Total". |
| `note?` | `string` | Small line under the label — "Including $18.40 in taxes", "USD". |
| `separator?` | `boolean` | Draw the hairline above the total. Default true. |
| `size?` | `"md" | "hero"` | "md" — 24pt figure (default). "hero" — 34pt with the cents set smaller. |
| `className?` | `string` | — |

### OrderSummaryPromo

| Prop | Type | Notes |
| --- | --- | --- |
| `appliedCode?` | `string | null` | The code currently applied (controlled by the parent). null/undefined = none. |
| `onApply` | `(code: string) => boolean | string | Promise<boolean | string>` | Validate + apply a code. Return true (or resolve true) to accept; return a string to reject with that message; false rejects with `invalidMessage`. |
| `onRemoveCode?` | `() => void` | Remove the applied code. |
| `savings?` | `string` | Savings shown on the applied chip, e.g. "−$24.00". |
| `label?` | `string` | Collapsed link label. Default "Add promo code". |
| `placeholder?` | `string` | Field placeholder. Default "Promo code". |
| `invalidMessage?` | `string` | Message when onApply returns false. Default "That code isn't valid". |
| `defaultOpen?` | `boolean` | Start with the field open. Default false. |
| `className?` | `string` | — |

## Icons rendered

- `tag` — /icons.html?i=tag
- `info` — /icons.html?i=info
- `x` — /icons.html?i=x
- `plus` — /icons.html?i=plus

Source: https://lumioui.com/components/order-summary