The checkout fields that cost the sale

Checkout UX best practices come down to three decisions a founder can make this week: ask for fewer facts, show the full cost before the card number, and let a guest finish when the brand does not need an account. The fields that cost the sale are the ones that repeat something you already know, hide shipping until the last step, or stop the purchase so someone can invent a password.

Most abandoned carts are not a broken shop. Baymard Institute’s compilation of fifty studies, last updated in 2025, puts the average documented cart abandonment rate at 70.22 percent. The same page is careful about the cause. In Baymard’s quantitative study, 42 percent of US online shoppers had abandoned a cart because they were just browsing or not ready to buy. That share is mostly unavoidable. The form earns its keep on what remains.

What the research actually separates

Treat the average as a ceiling full of window shopping. Baymard then lists other reasons people give, and a shopper can name more than one. Extra costs such as shipping, tax, and fees sit at 40 percent. Delivery that felt too slow sits at 20 percent. Not trusting the site with a card sits at 19 percent. Being told to create an account sits at 18 percent. A checkout that felt too long or complicated sits at 17 percent of US online shoppers. Being unable to see the total up front sits at 12 percent. A returns policy that did not satisfy sits at 13 percent.

The design response follows those lines. Show shipping and tax before payment. Say when the order arrives in the same place you ask for the address. Offer a guest path unless the product truly needs an account. Keep the path short enough that a person can see the end of it.

Baymard’s checkout benchmark is specific about length. An ideal flow can be as short as 12 to 14 form elements, or 7 to 8 if you count only the fields. The average US checkout in that benchmark shows 23.48 elements by default, and 14.88 fields. You do not need a magic number on a brand shop. You need to know which of your fields exist because a plugin added them.

Fields worth keeping

A small brand shop is a quieter counter than a marketplace. Keep the fields that change fulfillment or the charge.

• Email, so the receipt has somewhere to go
• Name and the shipping address the carrier will use
• A shipping method with a price and a window
• Payment
• A phone number only if someone on your side will actually call or text

Country and postal code stay when they change tax or delivery. Company name, a second address line, and “how did you hear about us” can wait. Show the second line as an optional disclosure, or ask for it only when the first address fails. Marketing consent belongs after the purchase is possible, and the box stays unchecked until the shopper checks it.

The guest path

An account is a second product. The shoppers Baymard groups under a forced account are telling you the login was the friction, not the object they came to buy. If you sell a physical good a person may buy once, guest checkout is the default. Offer to save details after payment, when there is a reason to return.

Create an account when the relationship needs one: wholesale terms, a repair history, a subscription, store credit that must be tied to a person. Say that reason on the page. “Create an account to check out” is a wall. “Save this order so you can reorder the same size” is an offer, and it can wait until the payment has succeeded.

Password rules, a confirmation email, and a captcha in the middle of payment are how a guest path quietly dies. If you create an account after purchase, send a link the buyer can set later. The card should not wait on a password.

Visible cost

The largest fixable reason on Baymard’s list is extra cost. Shoppers know that shipping can exist. They leave when the number appears after they have typed an address, or when it never appears in a form they can trust.

Put an estimate where the bag is. “Shipping calculated at checkout” is acceptable only if the next screen shows the number before more typing. If you ship free over a threshold, say the threshold on the bag, in the brand’s ordinary voice. If tax depends on region, say so, then show the tax as soon as the postal code is known. A total that changes on the payment screen feels like a different price, even when the math is honest.

Returns belong next to that total. A short line — how many days, who pays return postage — answers the policy question before someone opens another tab to hunt for it. If you cannot summarize the policy in a sentence, the policy is not ready for the checkout.

Delivery speed is the same kind of fact. “Standard shipping” is not a window. “Leaves in two business days, arrives in four to six” is a window. If you do not know, say what you do know: when it leaves your studio or your warehouse. Baymard’s slow-delivery reason is often a missing sentence, not a slow carrier.

Errors, labels, and the card field

A field costs the sale when a person cannot complete it. Labels should stay visible while someone types. Placeholder text that vanishes is not a label. Group the address so the eye moves in one direction, in the order the postal service expects. When a field fails, name it and say how to fix it in the same glance. A red border with no sentence makes people hunt, and on a phone the hunt is the exit.

The W3C’s WCAG 2 overview is the reference for that quality bar, not a badge to paste in the footer. The guidelines sit under four principles: perceivable, operable, understandable, and robust. WCAG also covers mobile. A checkout is understandable when the error says what is wrong. It is operable when it works with a keyboard and on a phone, without a tiny control buried under a sticky header. Hanabi does not certify a checkout against WCAG. The principles are still the right test for whether a stranger can finish.

Trust in the card field is its own reason on Baymard’s list. Use a payment provider the buyer can recognize. Show which cards and wallets you take before you ask for the number. If a wallet already returned the details, do not ask for them again. The padlock icon is not a sentence. “Payment is processed by …” is a sentence.

If the form is the part of the shop you want rebuilt with the rest of the storefront, the ecommerce work in Hanabi’s services is design and production code together, including the checkout a small team can still edit after launch.

A clean form can still fail on the next screen. The page and the email after purchase picks up there, because the buyer needs the same facts again once the payment has gone through.

A review you can do on a phone

Open the checkout as a guest, with a real product in the bag, on the phone you actually carry.

1. Count the fields you must touch before paying.
2. Note the first moment the full total, including shipping, is visible.
3. Try to finish without creating a password.
4. Trigger one error and see whether the message names the field.
5. Read the delivery window and the returns line without opening another page.

If the total appears late, the account is mandatory, or the error is only a color, you have found the fields that cost the sale. Remove or postpone one of them before you restyle the button. A shorter, clearer form is the change shoppers can feel. A new color on the same wall is not.