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

Sam Dutton

Чтобы следовать этой кодовой лаборатории, откройте этот глюк на второй вкладке.

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

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

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

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

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

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

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

Взгляните на 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 DevTools?
• Вам нужно было настроить точки останова?

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

• Используйте режим устройства Chrome DevTools для имитации мобильных устройств.
• Отправьте 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 неверно или отсутствует, пользователям придется получить свою фактическую карту, чтобы вручную ввести данные карты, и вы можете потерять выгоду от продажи. Если автозаполнение платежных форм не работает должным образом, пользователи могут также решить сохранить данные платежной карты на своем телефоне или компьютере, что крайне небезопасно.

Примечание. Исследования показывают, что, возможно, лучше использовать отдельные элементы выбора для месяца и года, а не один вход. Вам решать, что вы считаете лучшим. Проверьте это, изменив и отредактировав 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 .

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

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

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

Идем дальше

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

• Ссылайтесь на свои Условия обслуживания и документы о политике конфиденциальности: объясните пользователям, как вы защищаете их данные.

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

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