Order Confirmation UI in Figma

Quick answer

The order confirmation page is the last checkout screen: order number, summary, delivery estimate, and one primary next action—not a marketing landing page. Show success headline, order ID, email receipt note, line items, totals, and shipping address in a scannable receipt layout. Add track order, create account (guest checkout), and optional continue shopping as secondary actions. Post-purchase upsells belong below the receipt, never above the confirmation message. Reuse checkout summary and payment method rows for line-item consistency. Start from the Figma guides hub and templates pillar.

Who this is for

Product designers finishing the checkout funnel after cart, payment, and BNPL redirects.
Design system teams aligning confirmation, email receipt, and account order-detail views.
Engineers wiring order IDs, webhooks, analytics purchase events, and guest-to-account flows.

Confirmation page vs email receipt

Surface	User context	Must include
Thank-you page	Just completed payment	Order number, success state, next steps
Email receipt	Async reference	Same totals; print-friendly
Account order detail	Return visit	Full timeline + actions

Verdict: design the thank-you page first, then derive the email and account views from the same OrderReceipt component set—do not fork totals typography.

Page layout zones

Zone	Priority	Content
Hero confirmation	1	Checkmark, “Thank you, [Name]”, order #
Receipt summary	2	Items, qty, price, tax, shipping, total
Fulfillment block	3	Address, method, estimated delivery
Payment line	4	Card last4, PayPal, or BNPL provider
Primary CTA row	5	Track order OR create account
Secondary zone	6	Continue shopping, help link
Upsell rail	7	Optional recommendations below fold

OrderConfirmationPage
├── Variant: checkoutType=guest | loggedIn
├── Variant: paymentType=card | wallet | bnpl
├── Property: orderNumber=ORD-12345
└── Layers:
    ├── ConfirmationHero
    ├── OrderReceipt
    ├── FulfillmentBlock
    ├── PaymentSummaryLine
    ├── ActionRow
    ├── HelpFooter
    └── PostPurchaseUpsell (optional)

Mobile: single column; keep order number copyable (mono font, tap-to-copy affordance in spec).

ConfirmationHero anatomy

Element	Spec	Notes
Status icon	Success checkmark or animated confirm	Avoid confetti that blocks content
Headline	”Order confirmed”	Not “Payment successful” unless B2B
Subline	”We’ve sent a receipt to email@example.com”	Dynamic email
Order number	`ORD-12345` prominent	Link to order history when logged in
Timestamp	Order placed date/time	Timezone token for localization

ConfirmationHero
├── Variant: density=compact | standard
├── Property: customerName=Alex
├── Property: orderNumber=ORD-12345
└── Layers:
    ├── StatusIcon
    ├── Headline
    ├── EmailSubline
    ├── OrderNumberBlock
    └── Timestamp

For pending payment (bank transfer,某些 BNPL): swap icon and copy to “Order received—complete payment” with a primary pay-now CTA—do not show false success.

OrderReceipt block

Reuse structure from checkout order summary:

Row type	Spec
Line item	Thumbnail 48px, title, variant, qty × unit price
Subtotal	Right-aligned tabular nums
Discounts	Coupon lines in success color
Shipping	Method name + cost or “Free”
Tax	Jurisdiction label if required
Total	Bold, largest number on page
BNPL footnote	”4 payments of $X managed by Klarna”

OrderReceipt
├── Variant: itemDensity=standard | compact
└── Layers:
    ├── LineItemRow (repeat)
    ├── SubtotalRow
    ├── DiscountRow (optional)
    ├── ShippingRow
    ├── TaxRow
    ├── TotalRow
    └── BNPLFootnote (optional)

Link each line item to PDP only when the SKU is still active—annotate 404 fallback in Dev Mode.

FulfillmentBlock

Field	Guest	Logged in
Ship to	Full address	Same + edit in account
Method	Standard / Express
ETA	”Arrives Jun 5–8”	Link to tracking
Pickup	Store name + hours	If BOPIS

Include digital goods branch: “Download link sent to email” instead of shipping block.

ActionRow patterns

User state	Primary CTA	Secondary
Guest	Create account (save order)	Track order via email link
Logged in	Track order	Continue shopping
Subscription order	Manage subscription	View order details
Gift order	Send gift message preview	Track shipment

Use button hierarchy from checkout—one primary only.

Post-purchase upsell (optional)

Pattern	Placement	Risk
Product carousel	Below receipt	Feels spammy if above confirmation
Single add-on	”Complete the look” one SKU	Lower noise
Survey NPS	Modal after 3s delay	Test carefully
Referral invite	Footer card	Good for DTC

Reuse recommendations components but never block receipt visibility. Analytics: fire purchase before upsell_impression.

Guest account creation

Step	UI
Prompt card	”Save order history—create a password”
Email	Pre-filled, read-only
Password	With strength hint
Skip link	”Continue without account”
Success	Merge into account order list

Pair with forms error states; do not force account creation.

Handoff checklist

Item	Dev Mode annotation
Order ID format	Prefix, length, charset
Purchase analytics	`purchase` event payload once per order
Email trigger	Template ID + dynamic fields
BNPL redirect return	Success vs pending states
Copy order number	Clipboard API + toast
Deep link track	`/orders/{id}` auth rules
Print stylesheet	Hide nav, show receipt only
Localization	Currency, date, address order
Accessibility	Success announced to screen readers

Use Dev Mode checklist and progress steppers if confirmation is step 4 of checkout.

Common mistakes

Mistake	Why it hurts	Fix
Marketing hero above order #	User cannot find receipt	Confirmation first
Different totals vs email	Trust loss	Single source component
No guest track path	Support tickets	Email link + lookup form
Upsell modal on load	Blocks success moment	Below fold only
Missing BNPL pending state	False confirmation	Branch on payment status
Order # not copyable	Friction for support	Mono + copy button
Reload creates duplicate anxiety	User thinks double charge	”Already processed” state
Broken back button to payment	Double submit risk	Replace history entry

Recommended workflow

Finalize checkout summary components—extend for read-only receipt mode.
Build ConfirmationHero and OrderReceipt with guest and logged-in variants.
Add FulfillmentBlock and PaymentSummaryLine including BNPL and pickup branches.
Design ActionRow with track, account create, and continue shopping.
Optional: PostPurchaseUpsell rail using recommendation cards.
Document analytics, email fields, and pending-payment states in Dev Mode.

FAQ

Show full cart edit on confirmation?

No—read-only receipt. Link to support for changes before ship.

Include loyalty points earned?

Yes, one line under total—“You earned 120 points” with program link.

Multiple shipments?

Use shipment groups inside receipt—each with its own ETA and track link.

Failed payment redirect back?

Design “Payment failed—try again” with cart preserved, not empty confirmation.

Print order button?

Optional Print receipt secondary—hide upsells in print spec.

Next steps

Design shopping cart and checkout UI in Figma — upstream funnel
Design order history and order tracking UI in Figma — post-confirmation views
Design payment methods UI in Figma — payment line consistency
Design buy now, pay later UI in Figma — BNPL confirmation footnotes
Design product recommendations UI in Figma — post-purchase upsell rail

Designing order confirmation and thank you page UI in Figma: receipts, next steps, and handoff