Formularz płatności jest często ostatnim krokiem przed zrealizowaniem zakupu. Aby zmaksymalizować liczbę konwersji, upewnij się, że Twoja forma płatności jest przyjazna i bezpieczna.
Zadbaj o to, by użytkownicy wiedzieli, co wpisać
Postaraj się, aby forma płatności była jak najprostsza. wyświetlam tylko wymagane pola.
Podaj kwotę płatności. Do tego celu idealnie nadaje się przycisk Prześlij.
<button>Pay $300.00</button>
Używaj zrozumiałych sformułowań, których używasz w elementach <label>.
Użyj na przykład „Kodu zabezpieczającego”,
zamiast akronimu „CVV”, który jest używany tylko przez niektóre marki.
Pomóż użytkownikom wpisać dane do płatności
Aby zmaksymalizować liczbę konwersji, zadbaj o to, aby użytkownicy mogli jak najszybciej wypełnić formularz płatności.
W polach numeru karty i kodu zabezpieczającego wpisz inputmode="numeric"
aby wyświetlić zoptymalizowaną klawiaturę ekranową do wpisywania cyfr.
Dodaj odpowiednie wartości autocomplete w ustawieniach formularza płatności, aby mieć pewność, że przeglądarki umożliwiają autouzupełnianie.
Jako nazwy podaj autocomplete="cc-name",
autocomplete="cc-number" jako numer karty i autocomplete="cc-exp" jako datę ważności.
Upewnij się, że użytkownicy wpisują dane w prawidłowym formacie
Użyj atrybutu required dla każdego pola <input>, aby mieć pewność, że użytkownicy wypełnili formularz.
Kody zabezpieczające karty płatniczej mogą być trzy lub cztery cyfry.
Użyj minlength="3" i maxlength="4", by zezwolić tylko na trzy i cztery cyfry.
Upewnij się, że użytkownicy wpisują tylko numer karty i kod zabezpieczający.
Użyj pattern="[0-9 ]+", aby zezwolić użytkownikom na dołączanie spacji podczas wpisywania numeru karty.
Tak wyświetlają się liczby na kartach fizycznych.