Order Confirmation

The thank-you page after checkout. A check draws itself in, the order number copies in a tap, and a delivery strip runs from Confirmed to Delivered with the estimated arrival. Items and totals sit beside shipping, delivery and payment details, with Track order and View receipt actions and an optional one-field "save your details" account nudge. Prints as a clean receipt.

Tags: order-confirmation thank-you receipt ecommerce checkout order-status delivery
Dependencies: lucide-react(npm, opens in a new tab)motion(npm, opens in a new tab)

Props

Other props pass through to the root element.

orderNumber*
string
name
string
First name for the greeting.
email
string
lines*
ConfirmationLine[]
totals*
OrderTotals
steps
DeliveryStep[]
Default DEFAULT_DELIVERY_STEPS
status
string
Id of the step the order is at. Defaults to the first.
estimatedDelivery
React.ReactNode
shippingMethod
React.ReactNode
shippingAddress
string[]
Address lines, name first.
billingAddress
string[]
Address lines, or leave out for "Same as shipping address".
payment
{ brand: string; last4: string }
trackHref
string
onTrack
() => void
receiptHref
string
onViewReceipt
() => void
Called by View receipt. Without it or receiptHref, the button prints the page.
continueHref
string
helpHref
string
onCreateAccount
(password: string) => Promise<void> | void
Shows the "Save your details" card for guests. Resolve to confirm, throw an Error to show its message.
currency
string
Default "USD"
locale
string
Default "en-US"

Props
			Description
orderNumber*	string	–
name	string	–	First name for the greeting.
email	string	–
lines*	ConfirmationLine[]	–
totals*	OrderTotals	–
steps	DeliveryStep[]	DEFAULT_DELIVERY_STEPS
status	string	–	Id of the step the order is at. Defaults to the first.
estimatedDelivery	React.ReactNode	–
shippingMethod	React.ReactNode	–
shippingAddress	string[]	–	Address lines, name first.
billingAddress	string[]	–	Address lines, or leave out for "Same as shipping address".
payment	{ brand: string; last4: string }	–
trackHref	string	–
onTrack	() => void	–
receiptHref	string	–
onViewReceipt	() => void	–	Called by View receipt. Without it or `receiptHref`, the button prints the page.
continueHref	string	–
helpHref	string	–
onCreateAccount	(password: string) => Promise<void> \| void	–	Shows the "Save your details" card for guests. Resolve to confirm, throw an Error to show its message.
currency	string	"USD"
locale	string	"en-US"