Checkout
The last stretch: contact, address, shipping choice, payment, confirm. The most expensive place in the store to lose someone.
See it
What it is
Checkout is the flow that turns a cart into an order: contact details, delivery address, a shipping method, payment, confirm. It is the most expensive stretch of the store to lose someone in, because every person standing in it has already decided to buy.
Two shapes dominate. One-page checkout puts everything on one screen with an order summary pinned beside it. Multi-step checkout splits it into information, shipping, and payment, which feels lighter on mobile and gives you clean drop-off numbers per step. Either way, put express wallet buttons (Apple Pay, Shop Pay, PayPal) at the very top for people who never wanted to type an address, and offer guest checkout: forced account creation is a reliable way to lose a sale.
Gotcha: surprise costs kill more checkouts than anything else. If shipping, duties, or tax only appear on the last step, people leave. Show a running total from the first screen. Second trap: custom-built inputs that break browser autofill and mobile keyboards. Use real autocomplete attributes and the right inputmode, or watch completion rates sag on phones.
Ask AI for it
Build a three-step checkout (information, shipping, payment) with a sticky order summary on the right at desktop and a collapsible summary at the top on mobile. Put express wallet buttons above the fold with an 'or pay another way' divider. Use a single-column form, real autocomplete attributes (email, given-name, address-line1, postal-code, cc-number), and inline validation that fires on blur rather than on every keystroke. For the postal code use a text-capable input with autocomplete='postal-code' and locale-aware validation, and only set inputmode='numeric' when the selected country has numeric-only postal codes, so alphanumeric formats like UK and Canadian postcodes still work. Keep inputmode='numeric' on card number, expiry, and CVC. Show a running order total including estimated shipping from step one, a breadcrumb of the three steps, an editable review of previous steps, and a discount code field that is collapsed by default.