Theme Playground

Commerce

OrderConfirmation

Clear post-purchase confirmation block for successful orders.

Best for

thank-you pagespurchase confirmation stepspost-checkout success states

Import

import { OrderConfirmation } from "@enadhq/enad-react-sdk/client/storefront"

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.

Examples

Live examples you can edit directly in the sandbox.

1 example

Order success state

Use the confirmation block to show the order number and reassure the customer that the purchase is complete.

Component Sets

Preview the first example across the available component-set presets to compare tone, spacing, and structural defaults.

Props

PropTypeDefaultDescription
orderNumberstring
No description yet.
titlestring
No description yet.
messagestring
No description yet.
classNamestring
No description yet.