OrderConfirmation
Clear post-purchase confirmation block for successful orders.
Best for
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.
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
| Prop | Type | Default | Description |
|---|---|---|---|
| orderNumber | string | — | No description yet. |
| title | string | — | No description yet. |
| message | string | — | No description yet. |
| className | string | — | No description yet. |