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.