OrderSummary
Read-only order recap with items, totals, fulfillment details, and addresses.
Best for
Import
import { OrderSummary } from "@enadhq/enad-react-sdk/client/storefront"When to use it
Use OrderSummary when the page should confirm what was bought and how it will be fulfilled, but not let the customer edit anything inline. It works well for review steps, confirmation pages, and receipt-like surfaces.
If the visitor still needs to change quantity, promo codes, or items, use CartSummary instead.
Composition notes
This component is intentionally read-only. Feed it the final order state: items, totals, shipping details, payment method, and addresses.
Keep the data complete and already formatted at the domain level. The summary should explain the order, not become the place where business logic is reconstructed.
Behavior and theming guidance
Because the component is confirmation-focused, clarity matters more than density. Group related information and keep naming consistent with the rest of checkout.
A receipt or confirmation surface should feel stable and trustworthy, so prefer calm styling and avoid adding extra promotional content inside the summary itself.
Examples
Live examples you can edit directly in the sandbox.
Minimal order review
A compact summary for review and confirmation screens where the billing address matches shipping.
Full order summary
Include both addresses and all order metadata when the summary needs to double as a receipt-style confirmation.
Component Sets
Preview the first example across the available component-set presets to compare tone, spacing, and structural defaults.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | CartLineItem[] | — | Purchased line items to display in the receipt-style summary |
| subtotal | number | — | Merchandise subtotal before shipping and tax |
| tax | number | — | Optional tax amount shown in the totals section |
| shipping | number | — | Optional shipping amount shown in the totals section |
| total | number | — | Final order total shown at the bottom of the summary |
| currency | string | SEK | ISO 4217 currency code used for all monetary rows in the order summary |
| locale | string | — | BCP 47 locale string used for price formatting |
| shippingAddress | string | — | Shipping destination rendered in the address section |
| billingAddress | string | — | Billing destination rendered alongside the shipping address when it differs |
| shippingMethodName | string | — | Customer-facing label for the chosen delivery method |
| paymentMethodName | string | — | Customer-facing label for the chosen payment method |
| className | string | — | Additional classes applied to the root wrapper around the order summary |
| labels | string | {} | Override strings for section headings and totals labels |