Exact exports, props, slots, hooks, and runtime behavior belong to SDK package reference. Examples are guidance unless explicitly marked copy-paste-safe.

Review component intent and composition guidance before wiring this component into an app. Then use the live playground to confirm the rendered behavior.

Playground

• Import path: @enadhq/enad-react-sdk/client/storefront.
• Live playground: /components/commerce/order-summary.

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.

Contract scope

• Use SDK package reference for exact props, exports, slots, hooks, and runtime behavior.
• Public import: @enadhq/enad-react-sdk/client/storefront.
• Playground route: /sandbox?component=OrderSummary.
• Copy/paste scope: guidance-only. Treat examples as guidance until checked against SDK package reference.

Implementation notes