Mobile checkout design: fewer taps, more orders

Key takeaways

Mobile checkout design decides whether a phone shopper who has already chosen a product finishes paying. Baymard Institute's long-running research puts average online cart abandonment at about 70%. On a phone, every extra field and every forced step raises it. The aim is the fewest possible taps between basket and confirmation.

• 70.22% is Baymard Institute's average documented online cart abandonment rate.
• Offer guest checkout: do not force account creation before payment.
• Wallet buttons let returning shoppers pay without typing card or address details.
• Show total cost, including delivery, before the final step.

Why is checkout harder on mobile?

Checkout is harder on mobile because it is the most typing-heavy part of any website, done on the smallest keyboard. Name, email, address, phone number and sixteen card digits are tolerable at a desk. On a phone, standing up, with one hand, each field is a chance to give up.

It is also where trust is tested. The shopper is about to hand over card details on a small screen, so any oddity, such as a layout that jumps, an unexpected charge or an unfamiliar payment page, is enough to stop them.

• Why mobile-friendly web design is essential for UK businesses
• Checkout abandonment: fix the last step of the sale

What should a mobile checkout include?

A mobile checkout should include the minimum needed to take payment and deliver the order, arranged in one column, with express options at the top. Most shop platforms support all of the following. The work is switching them on and removing what is not needed.

• Wallet buttons such as Apple Pay and Google Pay above the form.
• Guest checkout as the default, with account creation offered afterwards.
• Postcode lookup so the address is chosen, not typed.
• One column, labels above fields, 16px text and 48px-high fields.
• An order summary that can be expanded, with the total always visible.
• A clear progress indicator if there is more than one step.

• Apple Pay and Google Pay on your website: worth adding?
• Mobile form design: forms people finish on a phone

How do you reduce typing at checkout?

Use the phone's own abilities. Correct input types bring up the number pad for card and phone fields. Autocomplete attributes let the browser fill name, email, address and card details from saved data. Google's web.dev guidance on payment forms recommends both, and they are small code changes.

Then remove fields. A separate billing address is unnecessary when it matches delivery, so default to 'same as delivery'. Company name, second address line and phone number can be optional or dropped. Marketing opt-ins belong after the order, not before.

• Card number, expiry and security code: numeric keyboard and card autocomplete values.
• Email and phone: email and tel input types.
• Address: postcode lookup first, manual entry as a fallback.
• Billing address: same as delivery by default.
• Discount code: collapsed by default so it does not send shoppers hunting.

What must be clear before the final step?

The full price. Unexpected costs at the last step are among the most cited reasons for abandoning a basket in Baymard's research, and UK consumer law is firm on the point. The Digital Markets, Competition and Consumers Act 2024 treats drip pricing, where mandatory fees are added during checkout, as an unfair practice.

Show delivery cost and timing as early as the product or basket page. On mobile, keep the running total visible in a compact summary so the shopper never has to scroll up to check what they are paying.

• Dark patterns: conversion tricks that break UK law
• What a UK e-commerce website needs

How should errors and security checks be handled?

Show errors beside the field, in words, and keep everything already entered. A card declined message that clears the form sends the shopper away. Format card numbers as they are typed so mistakes are visible, and accept postcodes and phone numbers with or without spaces.

Bank verification steps, where the shopper approves the payment in their banking app, are a common drop-off on phones because they mean switching apps. You cannot remove them, but you can prepare the shopper with a short line before payment and make sure the order is not lost if they return a minute later.

What are the trade-offs?

Guest checkout means fewer customer accounts, which some businesses value for repeat marketing. Offer account creation on the confirmation page, when the details are already entered and one password field completes it. You keep most of the sign-ups and lose fewer orders.

Fewer fields means less data. If you drop the phone number, the courier cannot text the customer. Decide which fields serve the customer and keep those. Anything collected only because the form always had it should go.

What does this look like in practice?

A pattern we see in small online shops: mobile brings most of the visits and far fewer of the orders. The checkout requires an account before payment, shows delivery cost only on the final screen and uses a full keyboard for the card number. Each is a default nobody questioned.

Switching on guest checkout and wallet payments, showing delivery cost in the basket and setting the input types are configuration changes on most platforms. Global Bridge Labs (GBL) places a real order on a phone, with a real card, as the first step of any shop review, because it is the only way to feel where shoppers stop.

• See client work
• Website Design & Development for UK businesses
• Make your website work properly on mobile

Mobile checkout checklist

• Place a real order on an iPhone and an Android phone.
• Count the fields and remove any you do not use.
• Enable guest checkout and wallet payments.
• Add postcode lookup and correct input types.
• Show delivery cost before the checkout starts.
• Check errors appear beside fields and nothing is cleared.
• Compare mobile and desktop checkout completion monthly.

• Mobile commerce in the UK: what small online shops need

Next step

Buy something from your own shop on a phone, standing up, using one hand. Count the taps and note every moment you hesitate. That list is your checkout backlog.