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 plate
Reach for this when
- Designing checkout, billing or subscription management.
- Payment failure rates or checkout abandonment are high.
- Checkout abandonment is concentrated at one step and nobody has looked at what that step asks for.
Common mistakes
- Costs revealed at the last step.
- Card fields that reject valid input.
- Decline messages that do not say what to try next.
- Cancellation buried while upgrading is one click.
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 happened | What to say | What to offer |
|---|---|---|
| Insufficient funds | Your card was declined for insufficient funds. | Another card, or a saved method. |
| Expired card | This card expired in 03/25. | Update the expiry inline, without re-entering the number. |
| Address mismatch | The billing address does not match your card. | Edit the billing address, keeping the order intact. |
| Bank declined, reason unknown | Your bank declined the payment. They can say why. | Retry, a different method, and the order held. |
The order that loses fewest people
- 1
Show the full cost before asking for anything
Delivery, tax and fees included. Unexpected cost at the end is the most cited reason for abandonment.
- 2
Let them buy as a guest
Account creation belongs after payment, prefilled from the order.
- 3
Ask for the minimum
Every field is a chance to leave. Derive what you can, including address from a postcode lookup.
- 4
Make card entry forgiving
Accept spaces, detect the card type, use numeric input modes, allow autofill.
- 5
Confirm properly
What was bought, what was charged, when it arrives, and how to change it. This screen is the ending people remember.
In practice
- i.
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.
- ii.
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.
- iii.
The decline that said nothing
Payment failurePayment failed, with no reason, leaves the reader to guess between a typo, a limit and a blocked card. Where the provider gives a reason that is safe to share, sharing it is the difference between a retry and an abandoned basket.
Local chart
PAT·024 · Region III · Grid E2
This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.
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.
- Postel's LawLAW·012 · Law
- Deceptive PatternsPRIN·011 · Principle
Often used with
These usually appear in the same screen or the same decision.
- Input ValidationPAT·007 · Pattern
Practical example
A worked decision where this was the deciding factor.
- Building Trust on a Payment ScreenCASE·002 · Case study
- Whether to Require an Account at CheckoutCASE·001 · Case study
Check your work
Review passes that test whether this was done properly.
- Ecommerce ChecklistCHK·006 · Checklist
Related concept
Connected closely enough to change how you apply this.
- Error MessagesWRT·002 · UX writing
- Form Labels and Help TextWRT·009 · UX writing