This document provides best practices for sign up, sign in, and checkout forms for e-commerce websites. It recommends using semantic HTML for forms, labeling inputs clearly, giving helpful error messages, and leveraging browser autofill features. Forms should be optimized for both desktop and mobile, including providing the correct keyboard type. The document also discusses options for password management, two-factor authentication, and payment processing to create secure yet user-friendly experiences.

1. Best Practices For E-Commerce with
Identity & Payment
Yohan Totting
Developer Advocate

2. What is this
about?

3. Browse
product
Read about
product
Add to
cart
Sign in /
Sign up
Checkout
E-Commerce Funnel
Thinking to buy
Want to buy

4. Browse
product
Read about
product
Add to
cart
Sign in /
Sign up
Checkout
Sign in & Sign up
Thinking to buy
Want to buy

5. Sign in / Sign up

6. Do you even need
them to sign up?

7. Provide them an easiest way
to sign up

8. Magic link
https://magic.link

9. Federated
identity

10. SMS OTP
(One Time
Password)

11. WebOTP

12. Sign up
form
https://dribbble.com/shots/6240208-Sign-Up-Form-XD-file

13. Form
best practices

14. If yes, then get the
basic right!
<form>
<input>
<label>
<button>

15. <form>
<section>
<label>Email</label>
<input>
</section>
<section>
<label>Password</label>
<input>
</section>
<button>Sign in</button>
</form>

16. Labeling the input

17. https://www.smashingmagazine.com/2018/06/placeholder-attribute/

18. https://www.smashingmagazine.com/2018/06/placeholder-attribute/

19. <label for="email">Email</label>
<input id="email" ...>

20. Google AI blog: bit.ly/label-above
Improved
form
Original
form

21. Don't repeat inputs

22. <button>

23. Android: 7–10 mm
Apple: 48x48 px
W3C: 44x44 CSS pixels

24. Mobile: 15 px
Desktop: 10 px
Padding

25. Give mobile users
the right keyboard

26. <input type="text" inputmode="tel" />
<input type="text" inputmode="email" />

27. Prevent keyboards
obscuring the
submit button

28. Sign in
button
visible
👍

29. Sign in button obscured on iPhone 7 and 8, but not on iPhone 11

31. Enable the browser
to suggest a
strong password

32. <input type=”password” autocomplete=”new-password”>

33. Help users
avoid
re-entering
data with
autocomplete

34. <input type=”email” autocomplete=”username”>

35. <input type=”password” autocomplete=”current-password”>

36. Allow password
manager to fill the
form

37. Support
password
manager

39. Help save
users from
missing inputs

40. foo@example.com

41. togglePasswordButton.addEventListener('click', togglePassword);
function togglePassword() {
if (passwordInput.type === 'password') {
passwordInput.type = 'text';
togglePasswordButton.textContent = 'Hide password';
togglePasswordButton.setAttribute('aria-label',
'Hide password.');
} else {
passwordInput.type = 'password';
togglePasswordButton.textContent = 'Show password';
togglePasswordButton.setAttribute('aria-label',
'Show password as plain text. ' +
'Warning: this will display your password on the screen.');
}
}

42. <input type="password" aria-describedby="password-constraints" ...>
<div id="password-constraints">8+ characters with a mix of letters, numbers and
symbols.</div>
Tell user as early as possible what the
constraint of the input

43. Warn of
invalid
input values

44. <input
required
minlength=”xx” maxlength=”xx”
min=”xx” max=”xx”
type=”email|password|numeric|etc”
pattern=”/regex/”>

45. input[type=email]:invalid {
color: red;
}

47. Suggest them to
enable faster sign in
with
re-authentication

48. Re-authentication
with WebAuthn
What you know What you have What you are
Password Phone Biometric

49. Remind them to
secure their
account

50. Two-Factor Authentication
What you know What you have What you are
Password Phone Biometric

51. Roaming Authenticators
• For two-factor authentication
• "U2F" or "FIDO2"
• Works with USB, BLE, NFC

52. Automatically sign-in
with credential
management API

53. Browse
product
Read about
product
Add to
cart
Sign in /
Sign up
Checkout
Checkout
Thinking to buy
Want to buy

54. Checkout
Shipping info
Payment info

55. Checkout Form

56. Utilize autofill in
checkout form

58. <input list="europe-countries" placeholder="Start
typing...">
<datalist id="europe-countries">
<option>Russia</option>
<option>Germany</option>
<option>United Kingdom</option>
...
</datalist>

59. <input type="text" autocomplete="cc-number" name="cardnumber">
<input type="text" autocomplete="cc-exp-month" name="ccmonth">
<input type="text" autocomplete="cc-exp-year" name="ccyear">
<input type="text" autocomplete="cc-name" name="ccname">

60. Web
payment
Payment
request
App/web
payment
method

61. Payment
request

62. Payment
method

63. Web
payment

64. Wrap up
1. Don’t ask too much data
2. Use input attributes to provide better functionality
3. Use semantic HTML
4. Focus on basic form for better accessibility
5. Don’t let the user keep input the same information
by utilizing autocomplete attribute and modern
payment API.

65. Thanks
1. Check web.dev and wwwid.org
2. Ask me on Twitter @tyohan
3. Join our Telegram group t.me/wwwid_pwa for
udpates or any question about modern web