Patterns

Field by field.

Most mobile checkout problems come down to a handful of fields. These are the patterns we use for each.

Fields

Email: type=email, autocomplete=email, no confirmation field. Check for common domain typos and suggest, don't correct.
What should we call you?: One field for full name where your systems allow it. If not, two fields with autocomplete given-name and family-name.
Address: Address lookup with a manual option always visible. Autocomplete attributes on every line, so the phone can fill them.
Phone: type=tel, with the country chosen separately. Accept spaces and dashes.
Card number: inputmode=numeric, spaces added as the shopper types, card brand detected and shown.
Expiry: One field, MM / YY, with the slash added automatically.
Errors: Shown next to the field, in text, after the shopper leaves it, not while they're still typing.