Cart & Checkout: UX principle for coding agents

Checkout is where the most motivated visitors are lost. They have already chosen the product; everything that follows is friction you added. Around seven in ten carts are abandoned, and most of that is design, not intent.

The named causes are consistent and each has a fix on this page: unexpected costs appearing late, forced account creation, a flow that feels too long, and a missing payment method. forms.md covers field mechanics. This doc covers the structure of the flow and the decisions specific to buying.

Show the Full Cost Before the Flow Starts

The largest single cause of abandonment is a total that grows after the visitor has committed to it.

Put shipping, tax, and every fee in the cart, before checkout begins. An estimate with its basis stated beats silence.
Never introduce a new charge at the review step. Review confirms what is already known; a number appearing there reads as a bait and switch and costs the order.
Show the change next to the control that caused it. A visitor who picks a shipping method and sees the total update somewhere off screen cannot tell what happened.
If a payment option carries its own fee, interest, or schedule, put that in the payment step where it is chosen, not in the terms.

Make Guest Checkout the Obvious Path

Forced registration is the second named cause of abandonment, and the usual fix is applied so weakly it does not count.

Put the guest option first, above sign in and register, and give it the same visual weight as the primary action. A text link below a sign-in form is functionally hidden.
Use the word guest. A visitor avoiding registration is scanning for it, and a label like "continue with email" does not promise that no password is coming.
Defer account creation to after the order is confirmed, where the visitor already has a reason to accept it.
On a phone, an option below the sign-in field can sit under the keyboard the moment that field takes focus. Top placement is what makes it reachable, not just visible.
If everyone enters a single flow that quietly adds a password only for recognised emails, say at the top that no account is being created.

Keep the Flow Linear

A visitor should never wonder where they are, what comes next, or whether going back will lose their work.

Never show the same page twice. A step that reappears reads as a failure.
If the flow has steps, show an indicator that matches them exactly. Grouping or hiding steps to make the flow look shorter disorients the visitor when reality diverges from the map.
Make completed steps clickable. Visitors use the indicator to navigate backwards whether or not it is built for it.
Strip the site navigation out of checkout, leaving the logo as the only way out. Category links invite the visitor back into browsing.
Cut anything that interrupts: cross-sells, newsletter prompts, overlays. Momentum is the asset.
Support the browser back button and keep every entered value. Returning to a cleared form is an exit.

Name the Next Action on Every Button

A generic label makes the visitor hesitate exactly where hesitation is expensive.

Say where the button goes: continue to payment, continue to review, place order.
At the end, use place order, never continue. A review step with a vague button gets mistaken for a confirmation page, and the visitor leaves believing they have bought something.
If the button leads off site to a payment provider, say so on the button and add a line that they will come back.

Cut the Form to What You Need

Perceived length matters as much as real length. A visitor who sees a wall of fields estimates the work before reading any of it.

Default the billing address to the shipping address, and reveal the separate fields only when that is unchecked.
Put the second address line behind a link. Most orders never need it.
Use one full name field rather than splitting it.
Label which fields are required and which are not. If the visitor has to guess, they hesitate or submit something wrong.
Keep labels above the field and persistent, so they survive typing and small screens.
Offer address lookup, and make every field work with browser autofill.

Do Not Fight How People Type

Accept spaces, dashes, and brackets rather than rejecting them. Reformat quietly afterwards.
Format the card number in groups as it is typed so the field matches the physical card the visitor is reading from.
Format the expiry field the way it appears on the card.
Validate the card number for basic plausibility as it is entered, so a typo surfaces immediately rather than after submission.
Trigger the right keyboard on a phone, and turn autocorrect off for names, addresses, and emails.
Apply changes as they are made. An extra apply button for an ordinary field is a step that does nothing.

Offer Enough Payment Methods, Then Get Out of the Way

A missing payment method is a named cause of abandonment, but so is a wall of choices.

Offer at least one wallet or third-party option beside cards.
Preselect the most common method and show its fields, so the majority proceed without choosing anything.
Never redirect off site without an explicit selection.
Show only the fields for the selected method, update the button label to match, and keep everything entered when the visitor switches method.

Make Errors Recoverable

Never clear a field on error. Card details especially: retyping sixteen digits because of a mistake elsewhere is an exit.
Say what is actually wrong. "Card number is incomplete" is recoverable; "invalid input" makes the visitor diagnose it themselves.
Put the message beside the field and mark the field. For one error, move focus to it. For several, add a summary at the top and keep the inline marks.
Validate a field when the visitor leaves it, not while they are still typing.
Raise a payment problem at the payment step, while the card is still in hand.
Let the visitor fix anything from the review step directly, without walking back through every preceding step.

Cart

Put the cart in the top right of the header with an icon and a count, not a text link.
Show the total item count and the running total wherever the cart is summarised.
Let the visitor change quantity and remove items in the cart without leaving it.
Keep the order summary visible through checkout, so the visitor can confirm what they are buying without navigating away.
Put the return policy within reach of the payment step. Reassurance belongs at the decision, not in the footer.

Cart & Checkout