Формы оплаты – это самая важная часть процесса оформления заказа. Плохой дизайн платежной формы – распространенная причина отказа от покупки.
Создайте форму, которая максимально упростит ввод платежных данных на компьютерах и мобильных устройствах. Убедитесь, что форма максимально использует встроенные функции браузера для автозаполнения, проверки и ограничений на ввод данных.
Рекомендации по внедрению
Ниже приведены наиболее важные рекомендации по созданию успешных платежных форм.
Используйте понятный и корректный HTML-код
Используйте элементы и атрибуты, предназначенные для создания форм:
<form>,<input>,<label>и<button>type,autocompleteиinputmode.
Они активируют встроенные функции браузера, улучшают доступность и добавляют смысл в разметку.
Используйте элемент <label> для обозначения полей ввода данных в форме
Чтобы добавить ярлык к <input>, <select> или <textarea>, используйте <label>. Свяжите ярлык с полем ввода, присвоив атрибуту for ярлыка то же значение, что и у атрибута id поля ввода.
Как использовать HTML-атрибуты
Чтобы пользователям было проще вводить данные, используйте подходящий атрибут <type> элемента <input>. Это позволит показывать нужную клавиатуру на мобильных устройствах и включить базовую встроенную проверку в браузере.
Всегда используйте type="email" для адресов электронной почты и type="tel" для номеров телефонов.
<!-- 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">
Каждый элемент <input>, <select> и <textarea> ДОЛЖЕН иметь соответствующий атрибут autocomplete, чтобы улучшить доступность и помочь пользователям избежать повторного ввода данных.
Добавьте полезные кнопки
Используйте <button> для кнопок. Вы также можете использовать <input type="submit">, но не div или другие элементы, которые не предназначены для создания кнопок. Элементы кнопок обеспечивают доступное поведение, встроенную функцию отправки формы и могут быть легко стилизованы.
Укажите для каждой кнопки отправки формы значение, которое описывает ее действие. Для каждого шага на пути к покупке используйте описательный призыв к действию, который показывает прогресс и делает следующий шаг очевидным. Например, назовите кнопку отправки формы с адресом доставки Перейти к оплате, а не Продолжить или Сохранить.
По возможности используйте одно поле для ввода имени
Позвольте пользователям вводить имя в одном поле, если у вас нет веских причин хранить отдельно имена, фамилии, обращения и другие части имени. Использование одного поля для ввода имени упрощает форму, позволяет вырезать и вставлять текст, а также упрощает автозаполнение.
Разрешить международные имена. Для проверки не используйте регулярные выражения, которые соответствуют только латинским символам. Если вы выберете вариант "Только латиница", пользователи, в именах или адресах которых есть символы не из латинского алфавита, не смогут отправлять письма в ваш домен. Вместо этого разрешите сопоставление букв Unicode и убедитесь, что ваш бэкенд поддерживает Unicode как для ввода, так и для вывода. Современные браузеры поддерживают Unicode в регулярных выражениях.
Поддержка разных форматов адресов
Добавляя поля для адреса в платежную форму, помните, что форматы адресов могут быть разными даже в пределах одной страны. Не делайте предположений о том, как должен выглядеть "нормальный" адрес.
Если это возможно в рамках ваших требований к данным, используйте для адреса один элемент <textarea>. Это наиболее гибкий вариант, который подходит для различных форматов местных и международных адресов.
Используйте автозаполнение для платежного адреса
По умолчанию платежный адрес совпадает с адресом доставки. Чтобы не загромождать страницу, не показывайте платежный адрес в форме, а добавьте ссылку на его изменение или используйте элементы summary и details.
Используйте подходящие значения автозаполнения для платежного адреса, как и для адреса доставки, чтобы пользователю не приходилось вводить данные несколько раз. Если у вас есть разные значения для полей ввода с одинаковым названием в разных разделах, добавьте префикс к атрибутам автозаполнения. Пример:
<!-- 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" ...>
Показывать прогресс оформления заказа
Используйте заголовки страниц и описательные значения кнопок, чтобы пользователю было понятно, что нужно сделать на текущем этапе и что будет дальше.
Используйте атрибут enterkeyhint в полях ввода формы, чтобы задать метку для клавиши ввода на мобильной клавиатуре. Например, используйте enterkeyhint="previous" и enterkeyhint="next" в многостраничной форме, enterkeyhint="done" – для последнего поля в форме, а enterkeyhint="search" – для поля поиска.
Помогите пользователям избежать повторного ввода платежных данных
Убедитесь, что в формах платежных карт указаны правильные значения autocomplete. Без автозаполнения пользователи могут записывать данные платежных карт на бумаге или хранить их в небезопасном месте.
<!-- 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>
Показывать подсказки по формату над полем ввода
Если поле имеет обязательный формат (например, срок действия MM/YY), поместите подсказку в видимый элемент над полем ввода и свяжите их с помощью aria-describedby, как в примере cc-exp выше. Подсказки, расположенные под полем ввода, легко скрываются мобильной клавиатурой или всплывающим окном автозаполнения в тот момент, когда они нужны пользователю.
Не полагайтесь на атрибут placeholder как на единственную подсказку по формату и никогда не используйте его вместо элемента <label>. Текст-плейсхолдер скрывается, как только пользователь начинает вводить данные, поэтому его нельзя использовать для проверки во время редактирования. Плейсхолдер можно использовать в качестве дополнительной подсказки наряду с ярлыком и постоянной подсказкой.
Не скрывать защитный код
Для защитного кода карты используйте type="text" с inputmode="numeric", а не type="password". Пользователи не могут проверить скрытый трех- или четырехзначный код на наличие опечаток, поэтому неправильно введенная цифра не обнаруживается до тех пор, пока платеж не будет отклонен. Кроме того, скрытие кода не обеспечивает достаточной защиты, поскольку он напечатан на карте, которая находится у пользователя.
Используйте одно поле для ввода номера платежной карты и телефона
Для номеров платежных карт и телефонов используйте одно поле ввода, не разбивайте номер на части. Это упрощает ввод данных, их проверку и автозаполнение в браузере. То же самое можно сделать и для других числовых данных, например PIN-кодов и кодов банков.
Тщательно проверяйте данные
Проверяйте данные как в реальном времени, так и перед отправкой формы. Один из способов сделать это – добавить атрибут pattern в поле ввода платежной карты. Если пользователь попытается отправить платежную форму с недопустимым значением, браузер покажет предупреждение и установит фокус на поле ввода.
Однако регулярное выражение должно быть достаточно гибким, чтобы обрабатывать номера платежных карт разной длины: от 14 цифр (или меньше) до 20 (или больше). Защитный код карты (также известный как CSC, CVC, CVV и т. д.) состоит из трех или четырех цифр.
Разрешите пользователям вводить пробелы при указании номера новой платежной карты, поскольку именно так номера отображаются на физических картах. Это удобнее для пользователя (ему не придется исправлять ошибку), снижает вероятность прерывания конверсии и позволяет легко удалить пробелы в номерах перед обработкой.
Помогите пользователям не пропустить поля данных
Добавьте атрибут required к обязательным полям. Современные браузеры автоматически запрашивают недостающие данные и устанавливают фокус на них.
Резервные стратегии
Автозаполнение – это прогрессивное улучшение. В браузерах, которые не поддерживают автозаполнение, пользователям нужно будет вводить платежные данные вручную. Ограничения семантического HTML (такие как type, inputmode, pattern и required) по-прежнему будут работать должным образом, чтобы проверять вводимые пользователем данные и предоставлять правильные виртуальные клавиатуры.