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-confirmation.

When to use it

Use OrderConfirmation at the end of checkout when the page should shift from decision-making to reassurance and next-step clarity.

Composition notes

The component is intentionally focused: orderNumber, title, and message carry the primary content. Keep any extra actions around it, not inside it, so the success state stays clean.

children lets you add a tightly scoped follow-up action such as a “View order” link or account prompt below the main message, but the confirmation block should still read as the page's primary proof that payment succeeded. Put order totals, delivery details, and support content in surrounding sections instead of packing them into the confirmation copy.

Behavior and theming guidance

Treat this as a calm success surface. Customers should be able to confirm the order went through without scanning through extra noise or promotional clutter.

Use a short title and a message that answers the next obvious question, usually when the confirmation email arrives or when shipping updates follow. The built-in icon and centered layout already do the visual work, so avoid adding marketing banners or competing CTAs directly around the block.

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=OrderConfirmation.
• Copy/paste scope: guidance-only. Treat examples as guidance until checked against SDK package reference.

Implementation notes