10 Mobile App Checkout Design Examples

01. Order summary

Let the summary answer what changed.

A cart snapshot is useful only when it reflects the current address, delivery, promotion, tax, and payment state.

adidas combines shipping, delivery timing, address information, optional tax identification, payment, totals, and the final order action in one checkout view. Hollister keeps the bag, promotions, item total, shipping, tax, and payment options together. Both approaches give the customer a place to verify the current commercial state.

Make item name, variant, quantity, price, discount, fulfillment, and return constraints inspectable without losing form input. When a customer edits the cart, announce the revised total and preserve their position. If inventory or price changes, explain the affected item instead of silently replacing the value.

Do not calculate totals independently in multiple components. Render subtotal, item discounts, order discounts, delivery, duties, tax, credit, and final total from the same priced order response used for payment authorization. A stale visual total followed by a different store or processor amount is a checkout failure.

02. Fulfillment

Ask for address and delivery in the order that changes availability.

A fulfillment choice can change stock, date, price, and required fields.

FARFETCH presents delivery address, delivery method, payment, promo code, and order total as a checklist of unresolved checkout sections. Macy's separates pickup and shipping, labels required details, and explains that delivery scheduling becomes available after earlier sections are complete. The dependency between fields is visible rather than mysterious.

Request only the information needed for the chosen fulfillment path. Pickup may need a store, pickup person, and contact method, while shipping needs a serviceable address and delivery option. Validate progressively, preserve partial input, and explain why a date or method disappears after an address change.

Keep serviceability, inventory reservation, delivery estimate, and price on the server-owned order. When network validation is slow, show which section is being checked without clearing the form. If no method is available, offer an address edit, pickup alternative, or cart change instead of a generic cannot continue message.

03. Progress and review

Use steps to communicate dependencies, not ceremony.

A progress label should tell the customer what remains and where a correction belongs.

Zalando displays Sign in, Address, Payment, Confirm, and Done, then lets the customer review delivery and billing addresses. Under Armour uses a compact summary with delivery, shipping method, payment, promo code, and totals. One approach distributes work across stages; the other keeps the review together.

Choose stages when each step contains meaningful input or validation. Keep previously completed values summarized and editable. Do not mark a stage complete until its server validation and dependencies are current. If the customer moves backward, preserve later data when it remains compatible and clearly invalidate only what changed.

The final review should repeat items, fulfillment, contact, address, payment summary, promotion, tax, and total. Mask sensitive payment information while keeping the method identifiable. The action label should describe authorization or order placement, not a vague Continue that conceals the financial event.

04. Express checkout

Make the shortcut and its consequences visible.

Express payment can remove typing, but it should not remove order understanding.

Magnolia shows the order amount before Shop Pay, PayPal, and another express option, then keeps a standard contact and delivery route. Houzz similarly offers PayPal before its regular shipping-address form. These screens let a customer choose convenience without implying that express payment skips fulfillment review.

Explain which address and contact information the wallet will supply, and provide a review before final authorization when the order can still change. If the wallet is unavailable, return to the standard form with the cart intact. Never disable the non-express path simply because a wallet was detected.

Treat express checkout as a branch of the same order state, not a separate pricing implementation. Shipping, tax, promotions, inventory, and final total should reconcile after wallet data returns. Test cancellation from the wallet sheet, authentication failure, changed address, and a total that must be recalculated.

05. Total details

Put promotions, tax, delivery, and authorization in one calculation.

Small commercial details become large trust problems when they appear only at the last tap.

ASOS gives promo, student code, gift voucher, shipping, and payment distinct positions in checkout. ZARA displays delivery dates, item count, address, a state-specific retail delivery fee note, shipping discount, total tax, final total, and an Authorise payment action. Both make adjustments inspectable before money moves.

Show why every line appears and what can change it. A promo code should display the applied benefit and removal path. Tax and duties need the best available certainty, with estimates labeled. Delivery thresholds should state eligible items and destinations. Gift options should not silently change return or receipt behavior.

ScreensDesign Pro can help teams compare these full checkout paths and ask how real apps handle an exact state. Use that evidence to formulate requirements, then validate them against your inventory, tax, fulfillment, and payment systems.

Implementation

Build checkout around a versioned order.

Every screen should read and update one priced, reservable commercial object.

Represent items, variants, quantities, availability, prices, promotions, credits, fulfillment, address, duties, tax, payment selection, consent, and totals in a versioned order. Each mutation should return the recalculated order and any invalidated choices. Use idempotency for order placement and payment creation so retries cannot produce duplicate charges.

Define empty cart, changed inventory, changed price, invalid promotion, unserviceable address, unavailable delivery, tax pending, wallet cancelled, payment declined, authorization pending, duplicate submission, order accepted, and confirmation delayed states. Preserve valid input and place recovery beside the affected field or summary line.

Accessibility testing should cover logical field order, explicit labels, error association, keyboard type, address autocomplete correction, screen-reader announcements for total changes, large text, focus after validation, and buttons that do not rely on color. Protect payment and address data in logs, analytics, screenshots, and replay tooling.

• ✓The cart and checkout render one authoritative order.
• ✓Every change explains its effect on total and fulfillment.
• ✓Express and standard checkout converge on the same review.
• ✓Order placement and retries are idempotent.
• ✓Errors preserve valid input and identify the affected section.
• ✓Sensitive address and payment data stay out of routine telemetry.

Measurement

Measure a correct order, not the shortest form.

Completion matters only when the authorized amount and resulting order are right.

Track checkout started, order version, section viewed, validation result, address accepted, fulfillment selected, promotion applied, total changed, payment method selected, authorization attempted, order accepted, confirmation shown, and recovery. Use privacy-safe values and never record full addresses, card details, or private order notes.

Segment by cart complexity, fulfillment route, payment method, guest or signed-in state, locale, device, and error type. Review guardrails such as duplicate orders, price mismatch, unavailable inventory, promotion failure, payment decline, address correction, support contact, cancellation, refund, and a customer returning repeatedly to the same step.

A smaller number of steps does not automatically mean a better checkout. Compare whether customers understand totals, recover from errors, and receive the correct order. Recorded examples can suggest patterns, but only your data can describe their effect.

Review checklist

Test the order through every recalculation.

Use carts with one item, variants, mixed fulfillment, promotion, gift value, tax, duties, age restriction, and unavailable stock. Change the address and delivery method late, then verify every summary and total.

Repeat with slow networks, app relaunch, wallet cancellation, declined payment, duplicated taps, large text, screen reader, and localized currency. The final confirmation must match the accepted order and authorized amount.

• ✓Items, variants, quantities, and restrictions remain inspectable.
• ✓Address and fulfillment changes recalculate dependent values.
• ✓Promotions show application and removal results.
• ✓Tax, duties, fees, delivery, and total are distinguishable.
• ✓The final action names the financial consequence.
• ✓Confirmation matches the exact authorized order.

Related design decisions

Continue through payment and failure recovery.

Design the method-selection step with mobile payment method screen examples.

Plan the declined transaction with failed payment recovery screen examples.