Mobile checkout: practical tips for online stores

The short answer

To improve mobile checkout, remove every field you do not need to ship and charge the order, set the right field types and autofill hints so the phone does the typing, show the full total early, and add wallet payments if your payment provider supports them. Then test the whole purchase on real phones, not a resized desktop window.

How mobile checkout differs from paying on a laptop

Mobile checkout asks more of the shopper than checkout on a laptop. The on-screen keyboard covers half the display, so the shopper cannot see the field they are filling in. Typing is slow and error-prone, and a card number is long. People switch to a banking app or a messages app to find a code, then come back. Connections drop, calls arrive and the page may reload. A checkout that feels fine on a laptop can feel punishing here.

That gives you one principle for this whole guide: each field, tap and screen has a price, so ask what you get in return. The sections below follow the order a shopper meets things, starting with the form itself. The wider subject of checkout design sits elsewhere. This page goes deeper on the phone.

Which form fields to cut

Ask of every field: what breaks if we remove it? If the answer is nothing, remove it. If the answer is a legal, tax or carrier need, keep it and explain it. The table gives a starting point, but your own carriers, payment provider and tax rules decide the final list.

If you sell abroad, address formats differ. A Japanese address runs in a different order from a British one, and some countries use no postcode at all. A form built for one country will frustrate customers in another.

Set up the forms so the phone does the typing

Browsers can fill a form from details the shopper has already saved, but only if the form tells them what each field is. The HTML standard has a set of autocomplete hints for exactly this: name, email, telephone, street address, postcode, card number and so on. If your checkout is built from standard hints, many shoppers can fill the form in a few taps. Check that your platform or theme uses them, and ask your developer if it is a custom build.

The field type also chooses the keyboard.

• An email field should bring up the keyboard with the @ sign close to hand.
• A telephone field should bring up the number pad.
• A numeric keyboard is right for card numbers and for postcodes that are only digits. Do not force it on postcodes that contain letters, as British ones do.

Other details matter just as much. Put labels above the fields and keep them visible, because a hint that vanishes once typing begins leaves people guessing. Use one column. Show an error beside the field it concerns, in plain words, and keep what the shopper already typed. Allow pasting. If tapping a field makes the page zoom in, the text size in the field is too small for the browser's comfort, so raise it. An address lookup can save typing in some countries, but it depends on the provider and adds a script, so test its effect on page speed.

Should you offer wallet payments?

A wallet payment lets a shopper pay with a card and address already stored on their device, usually confirming with a fingerprint, face or passcode. Apple Pay and Google Pay are two common examples. On a phone it removes most of the typing, which is why it suits mobile checkout.

What you can offer depends on your payment provider and your platform, and what a shopper sees depends on their device, browser and country. Check your provider's current documentation for what is supported and what it costs. If your provider supports it, adding it is a low-risk change for many stores. It is not a substitute for a good card form, because plenty of shoppers will still choose to pay by typing a card number.

If you add it, place the wallet button early. A wallet option on the product page or in the cart lets a shopper skip the whole form. Keep a normal card option beside it. Then test the parts that differ: how the delivery address from the wallet appears on the order, whether shipping and tax are worked out correctly, how a refund shows, and what receipt the shopper gets. Which methods people prefer also differs between countries, so compare your own orders by market and read the guide to payment methods for online stores before you decide.

Layout, buttons and the steps

One page or several steps both work on a phone. What matters is that the shopper always knows where they are, what the total is and what happens next.

• Keep the total visible, or one tap away, on every step. A collapsed order summary with the total in its heading does this well.
• Name the button for its action, such as "Pay now" or "Place order", and keep it within thumb reach. A fixed bar at the bottom helps, but check that it does not cover the field being filled in when the keyboard opens.
• Make tappable things large and spaced apart. WCAG 2.2 includes criteria on target size, so check the current wording on the W3C site.
• Strip the distractions. The full site menu, promotional banners and links out of checkout invite shoppers to leave.
• Make the back button safe. It should not wipe what has been entered.
• Show a small thumbnail in the summary so the shopper can check the item, and make sure it shows the variant they chose. The advice in product photography for online stores helps here, because a thumbnail in the wrong colour causes doubt at the worst moment.

Offers belong earlier. Extra items and upgrades are best shown on the product page or in the cart, as the guide to upselling and cross-selling explains, and not on the payment screen where they interrupt the final step. If you sell subscription products, say plainly at checkout what renews, when, and how to cancel. Rules on this differ by country, so ask a lawyer if you are unsure.

Failed payments and interruptions

Many card payments need an extra check with the shopper's bank. The step differs by bank and country, and it may open a banking app or a new screen. Test that the shopper returns to your store afterwards and that the order is recorded. A shopper who completes the check and lands on an error page will not know whether they paid.

Write the failure messages in plain words. "Your bank declined the payment" with a prompt to try another card is better than a code. Keep the cart and the entered details for returning visitors. If the session times out, restore what you can.

Test on real phones

1. Buy as a first-time guest on at least one iPhone and one Android phone, on a normal mobile connection rather than office wi-fi.
2. Run it once with autofill from a saved address and once typing everything by hand.
3. Pay with a card, with a wallet if you offer one, and with a deliberately failed card.
4. Try an address from each country you ship to, including one with no postcode.
5. Turn on large text and rotate the phone, to see whether any field is hidden.
6. Compare mobile and desktop funnel steps in your analytics separately, so a mobile problem is not averaged away.

For help with building or improving the checkout itself, the ecommerce solutions page outlines the store development Liftup Technologies offers.

Related guides

• Ecommerce solutions
• Product photography for online stores basics
• Upselling and cross selling for online stores
• Dropshipping vs holding stock
• Ecommerce checkout optimisation
• Ecommerce product page checklist

Questions and answers

How do I improve checkout on mobile?

Cut every field you do not need, use the right field types and autofill hints, show the total early, offer guest checkout, and add wallet payments if your provider supports them. Then test the purchase on real phones, on a normal mobile connection, with a failed payment included.

Which form fields should I cut at checkout?

Remove confirm email, confirm password, title and company name unless you need them. Collapse the second address line and the discount code box behind links, make the phone number optional unless a carrier needs it, and default billing to the delivery address.

Should I offer wallet payments?

Often it is worth it, because wallets remove most of the typing on a phone. It depends on your payment provider, platform and customers' devices, so check what is supported and any costs. Keep a normal card option too, and test refunds and receipts.

How do I make autofill work at checkout?

Use the standard autocomplete hints on each field so browsers know what it holds, and pick the correct field type for email and telephone. Test with a saved address on a real phone. If you use a custom build, ask your developer to confirm the hints.

Should I ask for a phone number at checkout?

Only if you need it. Some couriers use it to arrange delivery, and a supplier that ships directly may require it. If neither applies, make it optional and say what it is used for.

Why does the page zoom or jump when someone taps a field?

On some phones the browser zooms in when the text in a field is too small. Pages can also jump when a keyboard opens or a fixed bar changes size. Raise the text size in fields, and test fixed bars with the keyboard open.