Mobile Checkout and the Autofill That Fails

An address typed with a thumb

A customer on the bus decides to reorder coffee beans. She adds them to the cart, taps checkout, and taps the first box.

Her phone has her name, address, email and phone number saved, and most checkouts let it fill them in with one tap. This one offers nothing.

So she types eleven fields with her thumbs while the keyboard covers half the screen. The postal code box will not take a letter.

She means to finish at home. Some customers do. The store never hears about the rest.

How autofill decides what goes where

Browsers keep the details people choose to save: names, addresses, phone numbers, email addresses and sometimes cards.

To use them, the browser has to work out what each box is for. It reads the label, the box's name in the page's code, and an attribute called autocomplete, which states the purpose outright.

Where that attribute is present, nothing is left to guess. Without it the browser guesses from the rest, and customised checkouts give it little to go on.

A wrong guess is worse than none: a full name in the first-name box, or the city in the second address line, for the customer to spot and fix.

Where checkouts trip

• Boxes named field_7 or input_3 with no autocomplete attribute.
• A postal code box set up for numbers only, like an American ZIP code.
• A phone number split into three small boxes.
• A province list built from styled boxes instead of a real dropdown.
• Labels written as placeholder text that vanishes once the box is filled.
• A required company name on a store that sells to households.

The second is the one Canadian stores trip over most. A postal code alternates letters and numbers, and a box built for numbers brings up a number pad and refuses or drops the letters.

It usually comes from a template designed around ZIP codes, and the customer has no way round it.

Telling the browser what each box is

The fix is a few words of code per field, usually in the checkout template, and it does not change how the page looks.

Each box gets an autocomplete value naming its purpose: name, email, tel for the phone, address-line1 and address-line2, address-level2 for the city, address-level1 for the province, postal-code and country.

Names split into two boxes use given-name and family-name. With those in place, Chrome and Safari can fill the whole form from one tap on the first field.

The standard checkouts of the main ecommerce platforms generally get this right. Trouble usually starts when a theme or a developer has replaced or renamed the fields.

The right keyboard for each box

The type of each field decides which keyboard appears. An email field brings up a keyboard with the @ sign, and a phone field brings up the number pad.

The postal code should be an ordinary text field, so the full keyboard appears, ideally with capitals switched on.

Accept the postal code with or without the space, in capitals or lower case, and tidy it afterwards. Rejecting a correct code over its formatting turns a right answer into an error.

The same goes for phone numbers typed with brackets, spaces or dashes. Store them however suits you; accept them however people type them.

Card details and wallet buttons

Card fields often sit inside a frame supplied by the payment provider, so the store cannot change them directly.

Check that the provider's fields let the phone offer a saved card. Current versions generally do, and older integrations are worth testing.

Wallet buttons such as Apple Pay and Google Pay skip the typing altogether where the provider supports them. They are worth switching on, but they do not excuse a checkout that fails everyone else.

A worked example

A small coffee roaster sold beans and monthly subscriptions through a store whose theme a previous developer had customised several years earlier.

Customers occasionally emailed to say they could not enter a postal code, and a few orders arrived with codes made only of digits, which caused delivery problems.

On the owner's iPhone, the checkout offered no autofill at all. On an Android phone, it put her full name into the first-name box and left the province blank.

The cause was the customisation. Fields renamed for styling had lost their autocomplete attributes, the postal code had become a number field, and the province list was an imitation dropdown.

The fix took a developer part of a day: proper attributes and types on every field, a real province dropdown, one phone box, and a postal code field that accepts any reasonable typing.

The owner then bought a bag of her own beans on both phones. Each checkout filled itself from one tap, apart from the card.

Fewer boxes to fill

The fastest field is the one that is not there.

Tick billing address same as shipping by default, and show the billing fields only when someone unticks it. Make the company name optional.

A phone number is worth asking for only when the courier uses it, with a short note saying so.

If the store ships only within Canada, set the country to Canada rather than asking.

Testing on a real phone

Save your own details in the phone's browser first, the way your customers have. Then buy something from your store on an iPhone and on an Android phone.

Tap the first field and watch. Note which boxes fill, which fill wrongly, which stay empty, and which keyboard appears for each.

Try an address with a unit number and a postal code typed in lower case. Then make a deliberate mistake and check that the form keeps everything else.

Repeat the test after any theme update or checkout change, since that is when fields get renamed.

The counter-case

A store whose customers are mostly trade buyers ordering from office computers will see less of this, and returning customers with saved accounts skip most of the typing anyway.

None of that helps the new customer on a phone, who is the one the store most needs to win. Label every field, accept Canadian postal codes, and test on a phone.

Before the next order

1. Save your details in your phone's browser.
2. Buy something from your own store.
3. Note every field that stays blank or fills wrongly.
4. Add autocomplete values to every checkout field.
5. Let the postal code take letters and spaces.
6. Merge a split phone number into one box.
7. Retest on iPhone and Android after every change.

Step five matters most for a Canadian store. A customer who cannot type their postal code cannot finish the order at all, however patient they are.

What brings a shopper to the checkout in the first place is covered in product reviews on your own store.

Frequently asked questions

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.