Order Confirmation
订单确认页
Aliases:订单确认页下单成功页付款成功页订单提交成功支付成功页面谢谢购买页订单完成页购买成功页
What is it
The closing screen after a successful purchase: a clear success state, order number and delivery estimate give certainty first, then item details, totals and next actions such as invoice, tracking or continue shopping. It collects nothing new — it exists to make paid-and-on-its-way unmistakable.
Interactive playground
Try it. Make an informed choice.Loading lab…
✓ When to use
- Shown immediately after a successful payment or order
- The order number and delivery estimate must be stated
- Users should be guided to tracking, invoice or more shopping
✕ When not to use
- Payment failed or pending review — use a status or error page
- Only a saved draft, not a real placed order
- More user input is still required
Variants
Receipt
收据式
Full line items and totals, like a digital receipt
Celebratory
庆祝式
Success motion with a short summary, for consumer brands
Tracking-first
物流优先
Delivery timeline and tracking entry come first
Page structure
- 01
Success banner
Icon plus one confirmation line so success reads instantly.
- 02
Order summary
Order number, timestamp and ETA, copyable in one click.
- 03
Item list
Each item with thumbnail, variant, quantity and unit price.
- 04
Delivery timeline
Progress through placed, paid, shipped and delivered.
- 05
Next actions
View order, download invoice, continue shopping — ranked clearly.
Implementation
flexgridcounter-reset: stepposition: relative@media printAnnounce the result with role="status" on the banner; give the order number a copy button with copied feedback. List or table line items with right-aligned tabular numerals for totals. Build the delivery timeline from an ordered list with pseudo-element connectors; celebratory motion must respect prefers-reduced-motion and scale with --demo-speed.
Related concepts
A display that orders events by time, using timestamps, markers and content to explain sequence. It works for activity logs, project journals or order history. Unlike a stepper, which emphasizes task stages to complete, a timeline tells an event story. Keep titles and times visible when details expand.
ComponentsContainsA self-contained rectangular container outlined by rounded borders or a surface colour, aggregating related content: cover, title, excerpt and actions. The universal display unit of content feeds, dashboards and commerce lists.
ComponentsContainsA clickable block that triggers one clear action — the most basic interactive element of any interface. Fill, outline and ghost styles rank primary against secondary actions; presses give instant sink-in feedback, and a busy state disables further clicks to prevent double submission.
ComponentsContainsOn completing a key action, a burst of coloured pieces erupts and falls — a one-shot, high-energy celebration. It belongs only to milestones: submission success, task done, subscription reached. Rarity is what gives it weight.
MotionUsed withThe last mile of e-commerce conversion: shipping info, delivery method, payment and the order summary are arranged into one short forward-only flow — a stepper marks progress, forms are prefilled and auto-corrected, and the summary keeps totals always visible. Ask only what is necessary per step, and surface hesitation points (shipping cost, total) before they become objections.
PagesSimilar