Formularz płatności jest często ostatnim krokiem przed dokonaniem zakupu. Aby zmaksymalizować liczbę konwersji, zadbaj o to, aby forma płatności była bezpieczna i przyjazna dla użytkownika.
Upewnij się, że użytkownicy wiedzą, co wpisać
Forma płatności powinna być jak najprostsza i zawierać tylko wymagane pola.
Podaj kwotę płatności. Do tego celu można użyć przycisku Prześlij.
<button>Pay $300.00</button>
W elementach <label>
używaj zrozumiałych sformułowań.
Wpisz np. „Kod zabezpieczający” zamiast
akronimu „CVV”, który jest używany tylko przez niektóre marki.
Pomóż użytkownikom podać dane do płatności
Aby zmaksymalizować liczbę konwersji, zadbaj o to, aby użytkownicy mogli jak najszybciej wypełnić formularz płatności.
Wpisz inputmode="numeric"
w polach numeru karty i kodu zabezpieczającego, aby wyświetlić zoptymalizowaną klawiaturę ekranową do wpisywania cyfr.
Dodaj odpowiednie wartości parametru autocomplete
w elementach sterujących formularza płatności, aby mieć pewność, że przeglądarki będą obsługiwać autouzupełnianie.
Wpisz autocomplete="cc-name"
jako nazwę, autocomplete="cc-number"
jako numer karty, a autocomplete="cc-exp"
jako datę ważności.
Upewnij się, że użytkownicy wpisują dane w prawidłowym formacie
Używaj atrybutu required
w przypadku każdego elementu <input>
, aby mieć pewność, że użytkownicy wypełnili pełny formularz.
Kody zabezpieczające karty płatniczej mogą mieć trzy lub cztery cyfry.
Użyj minlength="3"
i maxlength="4"
, aby umożliwić użycie tylko 3 i 4 cyfr.
Upewnij się, że użytkownicy wpisują tylko numer karty i kod zabezpieczający.
Użyj operatora pattern="[0-9 ]+"
, aby zezwolić użytkownikom na dodawanie spacji przy wpisywaniu numeru karty, ponieważ tak są one wyświetlane na fizycznych kartach.