E-commerce Checkout Flow

UX approach: keep the buyer oriented with visible step progress and a persistent order summary, and reduce a step to a single clear decision.

Card details

Or use a saved card

Back to shipping

UX notes — design rationale

  • Visible step progress keeps the buyer oriented; done steps checked, current in accent.
  • Order summary is persistent (sticky) so cost stays in view while paying.
  • One primary action per step — a single accented "Pay now" removes ambiguity.
  • Inline labels, logical field order (number → expiry → CVC → name); autocomplete on.
  • Trust cues sit near the payment total to reassure at the moment of commitment.
  • "Back to shipping" is a low-emphasis text link so it never competes with pay.