Why checkouts get abandoned, and which fixes belong in the build

Show the total cost before the last step

A customer who sees a total at step one and a different total at step four does not conclude that shipping is expensive. They conclude that you were hiding something, and the trust cost outlasts the sale.

Show shipping cost, or a shipping estimator, on the cart page. Show tax treatment explicitly. If there is a minimum order value or a surcharge, say so where the customer first sees a price, not where they first enter a card number.

Guest checkout, always

Forcing account creation before purchase is asking a stranger for a commitment in exchange for nothing. Offer the account after the order is placed, when you can populate it with their order and the value is obvious.

The mobile details that quietly cost sales

• Correct input types, so the numeric keypad appears for card and postcode fields
• autocomplete attributes on every field, so the browser can fill the form in one tap
• Tap targets of at least 44 by 44 pixels, with real spacing between them
• Errors shown next to the field, in text, not as a colour change or a banner that scrolls off screen
• No layout shift when validation messages appear — the button must not move under a thumb
• A form that survives rotation and a backgrounded browser without losing entered data

Fail loudly, and never lose the order

When a payment fails, the customer must be told what happened in plain language and what to do next. A spinner that stops, a page that reloads empty, or a generic "something went wrong" all read as "this shop is broken", and the customer leaves rather than retries.

Behind that, the order must survive. Create your order row before redirecting to the payment provider, and reconcile it from the webhook — the same discipline described in the Stripe guide. A failed payment should leave a recoverable pending order, not nothing at all.

The trust block that belongs on the checkout page

• Delivery timeframe stated as a date range, not "fast dispatch"
• Returns policy in one sentence, linked to the full version
• A real contact route — phone or email — visible without leaving checkout
• Payment methods shown as recognisable marks, above the fold
• For a small or new store: who you are and where you are, because an unknown brand asking for card details is the actual objection

Questions people ask about this

What abandonment rate is normal?

Published industry figures cluster around 70%, but the number is only useful as a trend on your own store. What matters is which step people leave at, and that is a question your own analytics answers and a benchmark never will.

Do abandonment emails work?

They recover some orders, and they are downstream of the problem. Fix the reason people leave first, or you are paying to email people about a checkout that will fail them again.

Is a one-page checkout better than multi-step?

Neither wins universally. A short single page suits a simple order; multi-step suits a longer form, because progress is visible and errors are isolated. What always loses is a checkout that hides cost until the end, in either layout.

Who wrote this

Anas Bin Masud builds e-commerce sites and does technical SEO for businesses in the UK, Canada and Pakistan — fifteen live client sites, six of them stores taking real payments. The examples in these guides come from those builds and from the audit that rebuilt this site, not from a content brief. More about how I work, or read the case studies.