Checkout with Payment Method Selection (iOS)

Based on real screens from Zalando, Etsy, Woolworths, Warby Parker, UNIQLO, and Houzz on Mobbin.

Zalando shows a 5-node horizontal stepper under the nav bar: "Sign in ✓ — Address ✓ — Payment (3) — Confirm — Done!" with completed steps as checkmarks, the current step as a filled numbered circle, and future steps grayed.
Etsy uses a lighter 3-dot stepper (Shipping ✓ — Payment ● — Review ○) beneath a "Cancel | Checkout" nav bar.
Woolworths shows pill steps with green checks (Details ✓ Products ✓ Summary ✓ | 4 Pay), and Houzz simply titles the screen "2 of 3: Billing & Payment". Every app tells the user where they are and what remains.

Etsy: "Choose a payment method" section header, then radio rows — "Card" with Visa/Mastercard/Amex/Discover logos right-aligned, "Pay with PayPal" + PayPal wordmark, "Pay with Apple Pay" + Apple Pay mark. One radio row per method; logos always trail on the right.
Zalando (payment step): filled black radio for the selected "PayPal" with an inline explanation underneath ("You'll be forwarded to PayPal to complete your payment"); the "Credit/Debit Card" row shows the four network badges. Zalando's saved-card variant nests a masked saved Visa card (blurred number, trash icon to delete) plus a "New Credit or Debit Card" radio under the card method — method first, instrument second.
Warby Parker strips it to a single white card: question-style headline ("How do you want to pay?") with "Order total: $120" directly under it, two radio rows (card / PayPal) with trailing glyphs, a separate "(+) Check and apply benefits" row, and a full-width blue "Review your order" pill.
UNIQLO uses numbered sections ("2. Payment option") with big outlined selectable rows (Credit card / PayPal / Apple Pay) — same list idea, checkbox-free tap-to-select rows.

Etsy grays out Klarna and prints the rule inline: "$50.00 product minimum applies" + Klarna badge. The option is discoverable but clearly not tappable.

Zalando places a gray summary block (Subtotal £7.97 / Delivery £3.99 / Total VAT included £11.96) directly above a full-width black "Next" button, with the note "You can review and confirm your order in the next step."
Woolworths uses a sticky bottom bar: expandable "Total (Incl. GST) $34.00" on the left, "Place Order" button right — the button rendered disabled until the payment step is valid.
The total is always visible on the same screen where a payment decision is made (Warby Parker puts it right in the header).

Etsy: "You will not be charged until you review this order on the next page" under the section title.
UNIQLO: a security footnote ("We protect all your sensitive information with TLS encryption technology") and an embedded help entry ("Having issues with checkout? IQ chat can help").
Zalando/Etsy: voucher & gift card entry lives in its own labeled section with chevron rows, kept out of the payment radio list.
Every screen keeps an exit: X (Zalando), "Cancel" (Etsy, Woolworths), or back chevron (Houzz, UNIQLO).

Houzz shows inline card fields: labeled inputs with red asterisks for required (Name on Card, Card Number with network icons that light up as detected, MM/YY dropdowns, Security Code with a CVV hint illustration) — labels above fields, one column.

Show a stepper (checkmark for done, highlighted current, gray future) or an "N of M" title on every checkout screen.
Present payment methods as a single-select radio/tap list — one row per method, method name left, brand logos right-aligned.
Nest saved instruments (masked card + delete) under their method; default-select the user's last-used or saved option.
Keep unavailable methods visible but disabled with the reason inline (Etsy/Klarna pattern).
Show the order total on the payment screen — either a summary block above the CTA (Zalando) or a sticky bottom bar with total-left, CTA-right (Woolworths).
Label the CTA by what happens next: "Next" / "Review your order" when a review step follows; "Place Order" only on the final commit, and disable it until valid.
Add a no-surprise line ("You won't be charged until you review…") whenever the CTA does not immediately charge.
Offer Apple Pay as a first-class listed method on iOS.
Separate promo/gift-card entry into its own section — never as a competing field inside the payment list.
For card forms: labels above fields, required markers, network auto-detection, and a CVV location hint.

Don't

Don't hide the total behind a later step; price uncertainty is the top abandonment driver and every strong screen surfaces it.
Don't use brand logos as the tap target by themselves — the row label carries the meaning, logos are recognition support.
Don't remove the escape hatch; Cancel/X was present in all seven screens.
Don't mix selection paradigms on one screen (radios + tappable cards + toggles).

Redirect surprise: sending users to PayPal without warning; Zalando neutralizes it with the inline "You'll be forwarded…" note — omit that note and trust drops.
Long single-scroll payment + address + billing forms (Houzz): stacking card entry and full billing address on one screen makes the CTA fall far below the fold; the stepper-split apps read as lighter.
CTA below the fold (Zalando's second variant): when the summary grows (vouchers, saved cards), "Next" slips off-screen — the sticky bottom bar (Woolworths) is the safer construction.
Dropdowns for expiry date (Houzz MM/YY selects): slower than a masked text input with auto-advance on mobile.