Checkout Summary
The order total, broken into its lines. A charge that is not yet known renders as "calculated at next step" rather than as £0.00 — showing zero for a charge you will apply is a promise you cannot keep.
src/components/ui/checkout-summary.tsxAbout
From the component's own source, where it was written.
The order total, broken into the lines that make it.
Every adjustment is its own row. A total that silently includes tax and shipping is the single most common cause of an abandoned basket, and in several jurisdictions showing tax as a separate line is not optional.
Amounts are integer minor units, and the total is summed here rather than accepted as a prop. A total that disagrees with the rows above it is a customer-service ticket at best.
Unknown values are supported explicitly: shipping that depends on an address not yet given renders as "calculated at next step" rather than as zero. Showing £0.00 for a charge that will be applied is a promise you cannot keep.
Install
npx astralyx-ui add checkout-summary
Usage
import { CheckoutSummary } from '@/components/ui/checkout-summary'
<CheckoutSummary subtotal={176_400} lines={lines} currency="GBP" />Composer
Change the props and the source below follows.
- Subtotal
- £1,764.00
- Discount — WELCOME10
- -£176.40
- DeliveryDepends on your address
- calculated at next step
- VAT (20%)
- £317.52
- Total
- £1,905.12+
Final total confirmed once delivery details are entered.
<CheckoutSummary subtotal={176400} lines={lines} currency="GBP" />Examples
With a discount and an unknown charge
<CheckoutSummary subtotal={193_300} currency="GBP" lines={adjustments} />Nothing added
<CheckoutSummary subtotal={4_900} currency="GBP" />API
Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.
CheckoutSummary
The order total, broken into the lines that make it.
Extends Omit<ComponentProps<'div'>, 'children'>.
| Prop | Type | Default | Description |
|---|---|---|---|
| subtotal | number | required | Minor units, before adjustments. |
| lines | CheckoutLine[] | [] | { id, label, amount, note?, discount? }. Every adjustment gets its own row — a total that silently folds in tax and shipping is the commonest cause of an abandoned basket. |
| currency | string | 'USD' | — |
| locale | string | 'en-GB' | — |
| totalLabel | ReactNode | 'Total' | — |
| subtotalLabel | ReactNode | 'Subtotal' | — |
| pendingLabel | ReactNode | 'calculated at next step' | Stands in for an amount that is not yet known. |
| pendingNote | ReactNode | 'Final total confirmed once delivery details are entered.' | Note shown while any line is still pending. |
| footer | ReactNode | — | Where the continue button goes. |
Types
CheckoutLine
| Field | Type | Description |
|---|---|---|
| id | string | — |
| label | ReactNode | — |
| amount | number | null | Renders as pending and marks the total as provisional. |
| note? | ReactNode | — |
| discount? | boolean | Renders in the discount tone. Inferred from a negative amount otherwise. |
Behaviour
| Topic | Detail | Description |
|---|---|---|
| total | summed here | From the rows shown, so it cannot disagree with them. |