Skip to content
UX Atlas
PatternCraft conventionIntermediate

Payments and Checkout

The most scrutinised form in any product: total cost visible early, card entry forgiving, and failure states specific.

Definition

Payment covers card entry, alternative methods, billing details and the confirmation that follows. It is the surface where small friction is most expensive and where trust signals are read most carefully.

Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.

On this page
  1. Definition
  2. Where checkouts lose people
  3. Card entry
  4. Decline messages that can be acted on
  5. In practice
  6. Continue from here

Where checkouts lose people

Abandonment surveys repeatedly surface the same causes, and most are not about the form itself.

  • Extra costs revealed late: shipping, tax or fees added at the final step.
  • Forced account creation before purchase.
  • A long or repetitive form asking for the same address twice.
  • No visible indication of total before committing.
  • Payment method the reader wanted not offered.
  • Declined cards with no explanation of what to do next.

Card entry

Do

  • Use one field for the card number with automatic spacing, and accept spaces, dashes and pasted values.
  • Set the right input mode so mobile keyboards show digits.
  • Use autocomplete attributes so the platform can fill saved cards.
  • Detect the card type from the number rather than asking for it.
  • Keep the entered values on a failed payment.

Do not

  • Do not split the card number across four inputs.
  • Do not reject a valid number because of formatting.
  • Do not clear the form after a decline.
  • Do not show a generic 'payment failed' when the processor told you the reason.

Decline messages that can be acted on

What happenedWhat to sayWhat to offer
Insufficient fundsYour card was declined for insufficient funds.Another card, or a saved method.
Expired cardThis card expired in 03/25.Update the expiry inline, without re-entering the number.
Address mismatchThe billing address does not match your card.Edit the billing address, keeping the order intact.
Bank declined, reason unknownYour bank declined the payment. They can say why.Retry, a different method, and the order held.

In practice

Total before commitment

Showing shipping and tax on the cart, before any details are entered, moves the abandonment earlier and lowers it overall. People leave a checkout they feel misled by and remember it.

Subscription changes as a trust surface

A product that makes upgrading easy and cancelling hard converts once and is distrusted afterwards. Symmetry between the two paths is the clearest honesty signal in a paid product.

Continue from here

Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.

Principles behind this

The reasoning this solution is an application of.

Often used with

These usually appear in the same screen or the same decision.

Practical example

A worked decision where this was the deciding factor.

Check your work

Review passes that test whether this was done properly.

Related concept

Connected closely enough to change how you apply this.