Лаборатория рекомендаций по использованию платежных форм

Sam Dutton

В этом практическом занятии вы узнаете, как создать безопасную, доступную и удобную в использовании форму оплаты.

Внимание: Мы делимся лучшими практиками фронтенд-разработки форм оплаты. Однако мы не объясняем, как реализовать транзакции на вашем сайте. Чтобы узнать больше о добавлении функциональности оплаты на ваш сайт, см. раздел «Веб-платежи» .

Внимание: на этой странице отображается одна или несколько неработающих демоверсий, так как Glitch прекратил предоставление хостинга .

Шаг 1: Используйте HTML по назначению.

Используйте элементы, специально разработанные для этой задачи:

• <form>
• <section>
• <label>
• <input> , <select> , <textarea>
• <button>

Как вы увидите, эти элементы обеспечивают работу встроенных функций браузера, улучшают доступность и придают смысл вашей разметке.

• Нажмите кнопку «Ремикс», чтобы сделать проект доступным для редактирования.

Ознакомьтесь с HTML-кодом вашей формы в index.html .

<form action="#" method="post">

  <h1>Payment form</h1>

  <section>
    <label>Card number</label>
    <input>
  </section>

  <section>
    <label>Name on card</label>
    <input>
  </section>

  <section id="cc-exp-csc">
    <div>
      <label>Expiry date</label>
      <input>
    </div>
    <div>
      <label>Security code</label>
      <input>
      <div class="explanation">Last 3 digits on back of card</div>
    </div>
  </section>

  <button id="complete-payment">Complete payment</button>

</form>

Здесь есть элементы <input> для номера карты, имени владельца карты, срока действия и защитного кода. Все они заключены в элементы <section> , и каждый из них имеет метку. Кнопка «Завершить оплату» представляет собой HTML-элемент <button> . Позже в этом практическом занятии вы узнаете о функциях браузера, к которым можно получить доступ с помощью этих элементов.

Примечание: элементы <input> не имеют закрывающих тегов. Это потому, что они являются пустыми (void) элементами: сами по себе они не содержат никакого содержимого. Символ "/" в конце пустого элемента необязателен: допустимы как <input> , так и <input /> .

Нажмите «Просмотреть приложение» , чтобы предварительно просмотреть форму оплаты.

• Достаточно ли хорошо работает данная форма в её нынешнем виде?
• Что бы вы изменили, чтобы это работало лучше?
• А как насчёт мобильного устройства?

Нажмите «Просмотреть исходный код» , чтобы вернуться к исходному коду.

Шаг 2: Разработка дизайна для мобильных и настольных устройств.

Добавленный вами HTML-код действителен, но стандартные стили браузера затрудняют использование формы, особенно на мобильных устройствах. Выглядит она тоже не очень хорошо.

Необходимо обеспечить корректную работу форм на различных устройствах, отрегулировав отступы, поля и размеры шрифта.

Скопируйте весь CSS-код и вставьте его в свой файл css/main.css .

Это очень много CSS! Главное, на что следует обратить внимание, это изменения размеров:

• К полям ввода добавляются padding и margin .
• font-size и другие значения различаются для разных размеров области просмотра.

Когда будете готовы, нажмите «Просмотреть приложение» , чтобы увидеть отформатированную форму. Границы были скорректированы, для меток используется display: block; , чтобы они располагались на отдельной строке, а поля ввода могли занимать всю ширину. В разделе «Рекомендации по созданию форм входа» более подробно объясняются преимущества такого подхода.

Селектор :invalid используется для обозначения недопустимого значения во входных данных. (Вы будете использовать его позже в практическом задании.)

CSS-код ориентирован на мобильные устройства:

• Стандартные настройки CSS применяются к областям просмотра шириной менее 400px .
• Медиа-запросы используются для переопределения значений по умолчанию для областей просмотра шириной не менее 400px , а затем еще раз для областей просмотра шириной не менее 500px . Это должно хорошо работать на небольших телефонах, мобильных устройствах с большими экранами и на настольных компьютерах.

При разработке веб-сайтов необходимо тестировать их на разных устройствах и при различных размерах области просмотра. Это особенно важно для форм, поскольку даже небольшая ошибка может сделать их непригодными для использования. Всегда корректируйте контрольные точки CSS , чтобы убедиться, что они корректно работают с вашим контентом и целевыми устройствами.

• Видна ли вся форма?
• Достаточно ли большие поля ввода в форме?
• Весь ли текст читаем?
• Вы заметили какие-либо различия между использованием реального мобильного устройства и просмотром формы в режиме устройства в инструментах разработчика Chrome?
• Вам потребовалось скорректировать точки останова?

Существует несколько способов проверить вашу форму на разных устройствах:

• Используйте режим «Устройство» в инструментах разработчика Chrome , чтобы имитировать мобильные устройства.
• Отправьте URL-адрес со своего компьютера на свой телефон .
• Используйте такой сервис, как BrowserStack , для тестирования на различных устройствах и браузерах.

Шаг 3: Добавьте атрибуты, которые помогут пользователям вводить данные.

Разрешите браузеру сохранять и автоматически заполнять значения во входных данных, а также предоставьте доступ к встроенным функциям безопасной оплаты и проверки.

Добавьте атрибуты к форме в файле index.html , чтобы она выглядела следующим образом:

<form action="#" method="post">

  <h1>Payment form</h1>

  <section>
    <label for="cc-number">Card number</label>
    <input id="cc-number" name="cc-number" autocomplete="cc-number" inputmode="numeric" pattern="[\d ]{10,30}" required>
  </section>

  <section>
    <label for="cc-name">Name on card</label>
    <input id="cc-name" name="cc-name" autocomplete="cc-name" pattern="[\p{L} \-\.]+" required>
  </section>

  <section id="cc-exp-csc">
    <div>
      <label for="cc-exp">Expiry date</label>
      <input id="cc-exp" name="cc-exp" autocomplete="cc-exp" placeholder="MM/YY" maxlength="5" required>
    </div>
    <div>
      <label for="cc-csc">Security code</label>
      <input id="cc-csc" name="cc-csc" autocomplete="cc-csc" inputmode="numeric" maxlength="3" required>
      <div class="explanation">Back of card, last 3 digits</div>
    </div>
  </section>

  <button id="complete-payment">Complete payment</button>

</form>

Снова откройте приложение и нажмите или щелкните в поле «Номер карты» . В зависимости от устройства и платформы вы можете увидеть окно выбора способов оплаты, сохраненных в браузере.

Встроенный в браузер инструмент выбора способа оплаты и автозаполнения.

После выбора способа оплаты и ввода защитного кода браузер автоматически заполнит форму, используя значения autocomplete платежной карты, которые вы добавили в форму:

• cc-number
• cc-name
• cc-exp
• cc-csc

Многие браузеры также проверяют и подтверждают действительность номеров кредитных карт и защитных кодов.

Примечание: Не пугайтесь! Ваш браузер может автоматически заполнить форму сохраненными данными платежной карты, но оплата не будет произведена, и данные не будут переданы или сохранены.

На мобильном устройстве вы также заметите, что сразу после ввода номера карты появляется цифровая клавиатура. Это происходит потому, что вы использовали inputmode="numeric" . Для числовых полей это упрощает ввод чисел и делает невозможным ввод нечисловых символов, а также помогает пользователям запомнить тип вводимых данных.

Крайне важно правильно добавить все доступные значения autocomplete в платежные формы. Довольно часто сайты пропускают значение для autocomplete , например, для срока действия карты и других полей. Если хотя бы одно значение autofill неверно или отсутствует, пользователям придется искать данные своей карты и вводить их вручную, а вы можете потерять продажу. Если автозаполнение в платежных формах работает некорректно, пользователи также могут записать данные платежной карты на свой телефон или компьютер, что крайне небезопасно.

Примечание: Исследования показывают, что для выбора месяца и года лучше использовать отдельные элементы select, а не один общий элемент input. Выбор за вами. Проверьте это, изменив и отредактировав HTML-код из нашей полной демонстрационной формы оплаты , которая включает код для обоих типов полей даты истечения срока действия.

Попробуйте отправить форму оплаты с пустым полем. Браузер предложит заполнить недостающие данные. Теперь добавьте букву к значению в поле «Номер карты» и попробуйте отправить форму. Браузер выдаст предупреждение о недопустимом значении. Это происходит потому, что вы использовали атрибут pattern для указания допустимых значений для поля. То же самое работает для maxlength и других ограничений валидации . JavaScript не требуется.

Теперь ваша форма оплаты должна выглядеть так:

• Попробуйте удалить поля autocomplete и заполнить форму оплаты. С какими трудностями вы сталкиваетесь?
• Протестируйте формы оплаты в интернет-магазинах. Проанализируйте, что работает хорошо, а что вызывает проблемы. Есть ли какие-либо распространенные проблемы или лучшие практики, которым следует следовать?

Шаг 4: Отключите кнопку оплаты после отправки формы.

Следует рассмотреть возможность отключения кнопки отправки после того, как пользователь нажал на нее, особенно при совершении платежа. Многие пользователи многократно нажимают на кнопки , даже если они работают исправно. Это может вызвать проблемы с обработкой платежей и увеличить нагрузку на сервер.

Добавьте следующий JavaScript-код в файл js/main.js :

const form = document.querySelector('form');
const completePaymentButton = document.querySelector('button#complete-payment');

form.addEventListener('submit', handleFormSubmission);

function handleFormSubmission(event) {
  event.preventDefault();
  if (form.checkValidity() === false) {
    // Handle invalid form data.
  } else {
    completePaymentButton.textContent = 'Making payment...';
    completePaymentButton.disabled = 'true';
    setTimeout(() => {alert('Made payment!');}, 500);
  }
}

Попробуйте отправить форму оплаты и посмотрите, что произойдет.

Внимание: На некоторых сайтах кнопки отправки формы остаются отключенными до тех пор, пока пользователь правильно не заполнит все поля формы. Лучше этого не делать, так как пользователи могут случайно пропустить обязательное значение или ввести недопустимое значение, а затем нажать на отключенную кнопку отправки и предположить, что ваш сайт не работает! Даже если вы пометите значения формы как недопустимые или отсутствующие, пользователь может не увидеть предупреждения (особенно для длинных форм и на мобильных устройствах). Лучше проверять данные непосредственно во время ввода — и при попытке отправки формы.

Вот как должен выглядеть ваш код на данном этапе, с добавлением комментариев и функции validate() :

• Вы заметите, что в JavaScript есть закомментированный код для проверки данных. Этот код использует API проверки ограничений (который широко поддерживается ) для добавления пользовательской проверки, обращаясь к встроенному интерфейсу браузера для установки фокуса и отображения подсказок. Раскомментируйте код и попробуйте. Вам потребуется установить соответствующие значения для someregex и message , а также задать значение для someField .

• Какие аналитические данные и данные мониторинга реальных пользователей вы бы отслеживали, чтобы выявить способы улучшения ваших форм?

Теперь ваша заполненная форма оплаты должна выглядеть так:

• Протестируйте свою форму на разных устройствах . На какие устройства и браузеры вы ориентируетесь? Как можно улучшить форму?

Идите дальше

Рассмотрим следующие важные особенности формы, которые не рассматриваются в данном практическом занятии:

• Разместите ссылки на ваши Условия предоставления услуг и Политику конфиденциальности: четко объясните пользователям, как вы защищаете их данные.

• Стиль и фирменный стиль: убедитесь, что они соответствуют остальному дизайну вашего сайта. При вводе имен и адресов, а также при совершении платежей пользователи должны чувствовать себя комфортно, будучи уверенными, что они находятся на правильном сайте.

• Аналитика и мониторинг реальных пользователей : позволяют тестировать и отслеживать производительность и удобство использования вашей формы с точки зрения реальных пользователей.