Formularze płatności to najważniejszy element procesu płatności. Słaby projekt formularza płatności jest częstą przyczyną porzucania koszyka.
Utwórz formularz, który maksymalnie ułatwi użytkownikom wpisywanie danych karty na komputerach i urządzeniach mobilnych. Upewnij się, że formularz w pełni wykorzystuje wbudowane funkcje przeglądarki dotyczące autouzupełniania, weryfikacji i ograniczeń wprowadzania danych.
Jak to zrobić?
Poniżej znajdziesz najważniejsze wskazówki dotyczące tworzenia skutecznych formularzy płatności.
Używanie znaczącego, prawidłowego kodu HTML
Wykorzystaj w pełni elementy i atrybuty stworzone do tworzenia formularzy:
<form>,<input>,<label>i<button>type,autocompleteiinputmode
Umożliwiają one korzystanie z wbudowanych funkcji przeglądarki, poprawiają ułatwienia dostępu i nadają znaczenie znacznikom.
Używanie elementu <label> do oznaczania pól formularza do wprowadzania danych
Aby oznaczyć etykietą <input>, <select> lub <textarea>, użyj <label>. Powiąż etykietę z polem wejściowym, nadając atrybutowi for etykiety tę samą wartość co atrybutowi id pola wejściowego.
Wykorzystaj w pełni atrybuty HTML
Ułatw użytkownikom wprowadzanie danych, używając odpowiedniego atrybutu <type> elementu <input>, aby zapewnić odpowiednią klawiaturę na urządzeniach mobilnych i włączyć podstawową weryfikację wbudowaną w przeglądarkę.
Zawsze używaj type="email" w przypadku adresów e-mail i type="tel" w przypadku numerów telefonów.
<!-- type="email"/"tel" gives mobile users the right keyboard and enables built-in validation -->
<input type="email" id="email" name="email" autocomplete="email" required>
<input type="tel" id="phone" name="phone" autocomplete="tel">
Każdy element <input>, <select> i <textarea> POWINIEN mieć odpowiedni atrybut autocomplete, aby poprawić dostępność i pomóc użytkownikom uniknąć ponownego wprowadzania danych.
Użyteczne przyciski
Używaj <button> w przypadku przycisków. Możesz też użyć elementu <input type="submit">, ale nie używaj elementu div ani innego losowego elementu, który działa jak przycisk. Elementy przycisków zapewniają ułatwienia dostępu, wbudowaną funkcję przesyłania formularzy i można je łatwo stylizować.
Nadaj każdemu przyciskowi przesyłania formularza wartość, która opisuje jego działanie. Na każdym etapie procesu płatności używaj opisowego wezwania do działania, które pokazuje postęp i wyraźnie wskazuje następny krok. Na przykład przycisk przesyłania w formularzu adresu dostawy oznacz etykietą Przejdź do płatności, a nie Dalej czy Zapisz.
W miarę możliwości używaj jednego pola do wpisywania imienia i nazwiska.
Zezwalaj użytkownikom na wpisywanie imienia i nazwiska w jednym polu, chyba że masz uzasadniony powód, aby osobno przechowywać imiona, nazwiska, tytuły lub inne części imienia i nazwiska. Użycie jednego pola na imię i nazwisko upraszcza formularze, umożliwia wycinanie i wklejanie oraz ułatwia autouzupełnianie.
Zezwalaj na nazwy międzynarodowe. Do weryfikacji nie używaj wyrażeń regularnych, które pasują tylko do znaków łacińskich. Opcja „Tylko alfabet łaciński” wyklucza użytkowników, których imiona i nazwiska lub adresy zawierają znaki spoza alfabetu łacińskiego. Zamiast tego zezwól na dopasowywanie liter w standardzie Unicode i upewnij się, że Twój backend bezpiecznie obsługuje standard Unicode zarówno w przypadku danych wejściowych, jak i wyjściowych. Unicode w wyrażeniach regularnych jest dobrze obsługiwany przez nowoczesne przeglądarki.
Zezwalaj na różne formaty adresów.
Dodając pola formularza dotyczące adresu w formularzu płatności, pamiętaj o różnych formatach adresów, nawet w obrębie jednego kraju. Nie zakładaj, że adresy są „normalne”.
Jeśli jest to możliwe w ramach wymagań dotyczących danych, rozważ użycie pojedynczego elementu <textarea> dla adresu. To najbardziej elastyczna opcja, która obsługuje różne formaty adresów lokalnych i międzynarodowych.
Używanie autouzupełniania w przypadku adresu rozliczeniowego
Domyślnie ustaw adres rozliczeniowy taki sam jak adres dostawy. Zmniejsz bałagan wizualny, podając link do edycji adresu rozliczeniowego (lub użyj elementów podsumowania i szczegółów), zamiast wyświetlać adres rozliczeniowy w formularzu.
Używaj odpowiednich wartości autouzupełniania dla adresu rozliczeniowego, tak jak w przypadku adresu dostawy, aby użytkownik nie musiał wpisywać danych więcej niż raz. Jeśli masz różne wartości dla danych wejściowych o tej samej nazwie w różnych sekcjach, dodaj prefiks do atrybutów autouzupełniania. Na przykład:
<!-- Prefix with shipping or billing; note that the valid token is address-line1 (no hyphen before the digit) -->
<input autocomplete="shipping address-line1" ...>
...
<input autocomplete="billing address-line1" ...>
Wyświetlanie postępu procesu płatności
Na każdym etapie płatności używaj nagłówków stron i opisowych wartości przycisków, które jasno informują, co należy zrobić teraz i jaki jest następny krok.
Użyj atrybutu enterkeyhint w polach formularza, aby ustawić etykietę klawisza Enter na klawiaturze mobilnej. Na przykład użyj enterkeyhint="previous" i enterkeyhint="next" w formularzu wielostronicowym, enterkeyhint="done" w przypadku ostatniego pola formularza i enterkeyhint="search" w przypadku pola wyszukiwania.
Pomaganie użytkownikom w unikaniu ponownego wpisywania danych karty
Pamiętaj, aby w formularzach kart płatniczych dodać odpowiednie wartości autocomplete. Bez autouzupełniania użytkownicy mogą przechowywać dane kart płatniczych w formie fizycznej lub w niebezpieczny sposób.
<!-- cc-number tells autofill this is a card number, not a generic number field -->
<!-- inputmode="numeric" gives a numeric keyboard without the increment/decrement spinner -->
<!-- DO NOT use type="number" — it adds increment/decrement controls and strips leading zeros -->
<input id="cc-number" name="cc-number" type="text" autocomplete="cc-number"
inputmode="numeric" maxlength="19" pattern="[\d ]{13,19}" required>
<!-- cc-name autofills with the name exactly as it appears on the card; Unicode pattern allows international names -->
<input id="cc-name" name="cc-name" type="text" autocomplete="cc-name"
maxlength="50" pattern="[\p{L} \-\.]+" required>
<!-- cc-exp autofills the full expiry date as MM/YY -->
<!-- MANDATORY: Place format hints above the input so autocomplete popovers or virtual keyboards do not obscure them during editing -->
<span id="exp-hint" class="hint">Format: MM/YY</span>
<input id="cc-exp" name="cc-exp" type="text" autocomplete="cc-exp"
aria-describedby="exp-hint" maxlength="5" required>
<!-- cc-csc autofills the security code; DO NOT use type="password" here -->
<input id="cc-csc" name="cc-csc" type="text" autocomplete="cc-csc"
inputmode="numeric" maxlength="4" pattern="[0-9]{3,4}" required>
Pokaż wskazówki dotyczące formatu nad polem wprowadzania
Jeśli pole ma wymagany format (np. data ważności MM/YY), umieść wskazówkę w widocznym elemencie nad polem wejściowym i połącz je za pomocą atrybutu aria-describedby, jak w przykładzie cc-exp powyżej. Wskazówki, które znajdują się pod polem wprowadzania, są łatwo ukrywane przez klawiaturę mobilną lub wyskakujące okienko autouzupełniania w momencie, gdy użytkownik ich potrzebuje.
Nie polegaj na atrybucie placeholder jako jedynej wskazówce dotyczącej formatu i nigdy nie używaj go zamiast <label>: tekst zastępczy jest ukrywany, gdy tylko użytkownik zacznie pisać, więc nie można go sprawdzić podczas edytowania. Obiekt zastępczy może być dodatkową wskazówką obok etykiety i trwałej podpowiedzi.
Nie maskuj kodu zabezpieczającego
Użyj type="text" z inputmode="numeric" dla kodu zabezpieczającego karty, a nie type="password". Użytkownicy nie mogą sprawdzić, czy w zamaskowanym 3- lub 4-cyfrowym kodzie nie ma literówek, więc błędnie wpisana cyfra nie zostanie wykryta, dopóki płatność nie zostanie odrzucona. Maskowanie zapewnia niewielką ochronę, ponieważ kod jest wydrukowany na karcie, którą użytkownik trzyma w ręku.
Używanie jednego pola do wprowadzania numerów kart płatniczych i telefonów
W przypadku numerów kart płatniczych i numerów telefonów używaj jednego pola wejściowego: nie dziel numeru na części. Ułatwia to użytkownikom wprowadzanie danych, upraszcza weryfikację i umożliwia przeglądarkom autouzupełnianie. Rozważ zrobienie tego samego w przypadku innych danych liczbowych, takich jak kody PIN i kody bankowe.
Dokładna weryfikacja
Dane wejściowe należy sprawdzać zarówno w czasie rzeczywistym, jak i przed przesłaniem formularza. Jednym ze sposobów jest dodanie atrybutu wzorca do pola wprowadzania danych karty płatniczej. Jeśli użytkownik spróbuje przesłać formularz płatności z nieprawidłową wartością, przeglądarka wyświetli komunikat ostrzegawczy i ustawi kursor w polu wprowadzania.
Wyrażenie regularne wzorca musi być jednak na tyle elastyczne, aby obsługiwać zakres długości numerów kart płatniczych: od 14 cyfr (lub mniej) do 20 (lub więcej). Kody zabezpieczające karty (znane też jako CSC, CVC, CVV lub pod innymi nazwami) składają się z 3 lub 4 cyfr.
Zezwalaj użytkownikom na wpisywanie spacji podczas wprowadzania nowego numeru karty płatniczej, ponieważ w ten sposób numery są wyświetlane na fizycznych kartach. Jest to bardziej przyjazne dla użytkownika (nie musisz mu mówić, że „zrobił coś źle”), mniej prawdopodobne jest, że przerwie proces konwersji, a usunięcie spacji w liczbach przed przetworzeniem jest proste.
Pomoc w zapobieganiu przypadkowemu pominięciu pól danych przez użytkowników
Dodaj atrybut required do pól obowiązkowych. Nowoczesne przeglądarki automatycznie wyświetlają prośbę o brakujące dane i ustawiają na nie kursor.
Strategie zastępcze
Autouzupełnianie to progresywne ulepszanie. W przeglądarkach, które nie obsługują autouzupełniania, użytkownicy będą musieli ręcznie wpisać dane karty. Ograniczenia semantyczne HTML (takie jak type, inputmode, pattern i required) będą nadal działać prawidłowo, aby sprawdzać poprawność danych wejściowych użytkownika i zapewniać odpowiednie klawiatury wirtualne.