Checkout page design, field by field

Every field on a checkout page is a place to stop. So the work is subtraction, and it has a floor. For a physical order shipped inside one country you need an email address, a name, a street line, a postal code, a city and a payment method. Seven inputs. Anything past that has to earn its place by naming who reads it and what breaks without it.

The field list, and what each one costs

The second address line deserves a warning that has nothing to do with design. If you collect it, carry it all the way to the shipping label. A flat, apartment or building number captured in a form and dropped between the order record and the carrier produces parcels that scan as delivered and never arrive, and the failure is invisible from inside the shop because the tracking looks perfect. Collect it or do not, but never collect it and drop it.

Guest checkout, and the number worth quoting

Baymard Institute keeps a rolling aggregate of published cart abandonment studies. The figure it reports is 70.19%, and its own survey of why people abandon during checkout puts unexpected extra costs at the top, with being forced to create an account close behind. Both are reproducible: the cart abandonment page shows the underlying studies.

Read the two together. Both of the leading reasons are things the checkout page itself does. Neither is about the product, the price of the product, or the design of the buttons.

Guest checkout is therefore not a feature. It is the removal of a wall you built. Offer account creation on the confirmation page, after payment, where the password field costs you nothing because the money has already moved.

The button label is regulated in Europe

This is the part a coding agent will not invent, and it is worth more than any layout advice on this page.

Article 8(2) of Directive 2011/83/EU requires that when an order is placed by activating a button, that button be labelled in an easily legible manner with the words "order with obligation to pay" or a corresponding unambiguous formulation. The sanction is in the same paragraph. Where the trader has not complied, the consumer is not bound by the contract.

So Continue, Submit, Finish, Complete order and Go are all defective on a European checkout. Buy now, Order with obligation to pay, Pay €48.00 are not. The German market interprets this most strictly, which is why German shops say Zahlungspflichtig bestellen and why a store selling into Germany should not soften it.

The same directive settles the second argument. Article 6(1)(e) requires the total price inclusive of taxes, and all delivery charges, before the consumer is bound. Article 6(6) supplies the teeth. Where the trader failed to give that information, the consumer does not bear those charges. A delivery cost revealed on the last step is a cost you may end up paying yourself.

And Article 22 closes the third. Any payment on top of the main contract needs express consent, and consent inferred from a pre-ticked box does not count. That is the constraint that shapes an order bump that survives contact with European law.

One page or several

The evidence for one-page checkout over multi-step is thinner than the argument about it. What actually matters holds in both shapes:

• The complete total, including delivery, is visible on every step where a decision is made.
• Going back never clears a field.
• The payment step is the last step, and nothing is offered after it that changes the amount.
• On a multi-step flow, each step is a real URL or history entry, so the browser back button behaves.

If you have a cart drawer, the handoff into checkout is the moment the total stops moving. Anything that can still change it, including a shipping threshold nudge, belongs before that door and not after.

Autofill is a specification

WCAG 2.1 added success criterion 1.3.5, Identify Input Purpose, at Level AA. It asks that inputs collecting information about the user carry a programmatic purpose, and in HTML that purpose is the autocomplete token. Getting these right is the single largest reduction in typing you can hand a buyer, and it is free.

<input autocomplete="email"          inputmode="email">
<input autocomplete="given-name">
<input autocomplete="family-name">
<input autocomplete="address-line1">
<input autocomplete="address-line2">
<input autocomplete="postal-code"    inputmode="numeric">
<input autocomplete="address-level2"><!-- city -->
<input autocomplete="country-name">
<input autocomplete="cc-number"      inputmode="numeric">
<input autocomplete="cc-exp">
<input autocomplete="cc-csc"         inputmode="numeric">
<input autocomplete="one-time-code"><!-- SMS confirmation -->

one-time-code is the one people miss. It lets iOS and Android offer the confirmation code from the notification instead of sending the buyer out to their messages app and back, which on a 3D Secure step is where sessions die.

Two more, both cheap. Keep the form to a single column, because a two-column form makes the eye guess the order. And set inputmode alongside autocomplete, since the token tells the browser what the field means and inputmode tells the phone which keyboard to raise.

Errors

Validate on blur, never on every keystroke, and never on submit alone. A postal code marked invalid while the buyer is still typing its third character reads as the form arguing with them.

When an error fires, keep the value in the field. Clearing a card number on a failed check is the fastest way to turn a typo into an abandonment. Put the message next to the input, reference it with aria-describedby, and move focus to the first failing field rather than to the top of the page.

What an agent produces by default

Asked for a checkout page, a coding agent reliably writes a two-column form with twelve fields, a Complete Order button, no autocomplete tokens, an account password field marked required, and the delivery cost appearing only in the final summary. Four of those five are defects, and in Europe two of them are the kind that unwind the contract.

The model is reproducing the median published checkout, and the median published checkout was never audited against the directive. Instructions can tell an agent about Article 8(2) once. A component that takes totalCents and refuses to render a vague label carries the rule every time, which is the difference between telling an agent and handing it a part.

Disclosure. We build uxgen, an MCP server that hands a coding agent the cart and checkout components described here. They are shown running here, and the plans sit in the pricing section.

FAQ

How many fields should a checkout page have?

Seven for a physical order shipped domestically: email, name, street address, postal code, city, country and payment. Add a phone number only when your carrier requires one, and a company field only when you sell business to business. Every other field has to name who reads it before it earns a place.

What must a checkout button say in Europe?

Article 8(2) of Directive 2011/83/EU requires the button to be labelled unambiguously, with "order with obligation to pay" or an equivalent formulation. If it is not, the consumer is not bound by the contract. Labels such as Continue, Submit or Complete order do not satisfy it.

Should I require an account to check out?

No. Baymard's aggregate of published studies puts documented cart abandonment at 70.19%, and forced account creation ranks near the top of its list of reasons people abandon during checkout. Offer the account on the confirmation page instead, once payment has gone through.

When do I have to show shipping costs?

Before the consumer is bound. Article 6(1)(e) of the EU Consumer Rights Directive requires the total price including taxes and all delivery charges up front, and Article 6(6) says a trader who failed to disclose those charges cannot make the consumer pay them.

Is one-page checkout better than multi-step?

The published evidence does not settle it, and the properties that matter hold in both. Show the complete total wherever a decision is made, never clear a field when the buyer goes back, put payment last, and give each step its own history entry.