запросАвтозаполнение

Возьмите мои деньги, а не мое время

Jake Archibald

Введение

Мне нравится сеть. В целом, я думаю, что это очень хорошая идея. Таким образом, я часто участвую в дебатах о веб-технологиях и нативных технологиях. Другой человек не займет много времени, чтобы начать говорить о простоте платежей через собственные системы. Моя обычная реакция — бросить дымовую шашку и выбежать из комнаты, маниакально смеясь, потому что это не тот спор, который я могу выиграть. Частота отказов от корзины покупок в мобильном Интернете может достигать 97% . Представьте себе это в реальном мире. Представьте себе, что 97% людей в супермаркете с тележкой, доверху наполненной нужными им товарами, переворачивают тележку и уходят. Некоторые из этих людей просто завышают цены и никогда не имели намерения покупать, но ужасный пользовательский опыт покупок в Интернете вносит значительный вклад. Мы облагаем налогом на здравомыслие пользователей. Подумайте о приятном опыте оплаты в Интернете, особенно на мобильных устройствах. Это магазин приложений, да? Или, по крайней мере, аналогичная закрытая система, в которой уже есть ваша платежная информация. Это проблема. Он требует, чтобы сайты привязывались к конкретному поставщику платежей, у которого у пользователя уже должна быть учетная запись и он должен быть вошел в систему, или привязывались к платформе, которая требует, чтобы пользователи вошли в систему определенного поставщика платежей, например магазинам приложений, которые требуют, чтобы вы кодировать исключительно для этой платформы. Если вы не сделаете ничего из этого, пользователь обречен стучать по экрану или клавиатуре до тех пор, пока у него не сотрется вся кожа на пальцах, или он не сдастся. Нам нужно это исправить.

запросАвтозаполнение

Примечание. На нашем новом сайте Web Fundamentals есть еще более актуальные руководства по формам, а также более подробная информация о requestAutocomplete .

В мире WebGL, WebRTC и других причудливых веб-API, которые начинаются с «Web», requestAutocomplete выглядит довольно непривлекательно. Однако это супергерой в бежевой одежде. Крошечный, скучный API, который может пронзить сердце вампира времени веб-платежей.

Вместо того, чтобы сайт полагается на конкретного поставщика платежей, он запрашивает платежные данные у браузера, который сохраняет их от имени пользователя. Версия requestAutocomplete() в Chrome также интегрируется с Google Wallet только для пользователей из США (на данный момент) . Попробуйте это на нашем тестовом сайте .

form.requestAutocomplete

Элементы формы содержат единственный новый метод requestAutocomplete, который просит браузер заполнить форму. Браузер отобразит пользователю диалоговое окно с запросом разрешения и позволит пользователю выбрать, какие данные он хочет предоставить. Вы не можете вызывать это, когда захотите, его необходимо вызывать во время выполнения определенных событий взаимодействия, таких как перемещение мыши вверх/вниз, щелчок, нажатие клавиши и события касания. Это преднамеренное ограничение безопасности.

button.addEventListener('click', function(event) {
  form.requestAutocomplete();
  event.preventDefault();
});

// TODO: listen for autocomplete events on the form

Примечание. Если вы добавляете события с помощью библиотеки JavaScript, имейте в виду, что некоторые из них будут пересылать события таким образом, что потеряется связь с исходным взаимодействием, а это означает, что ваш вызов requestAutocomplete не пройдет проверку безопасности. Если это произойдет с вами, используйте addEventListener напрямую, как указано выше.

Прежде чем мы посмотрим на события, нам нужно убедиться, что браузер понимает поля вашей формы…

Требования к форме

Когда Интернет был черно-белым, Internet Explorer 5 принял новый атрибут autocomplete для элементов ввода формы. Его можно было установить в положение «выкл.», чтобы браузер не предлагал предложения, и все. Этот API был расширен, поэтому вы можете указать ожидаемое содержимое поля без изменения атрибута «имя», и это то, что requestAutocomplete использует для связи полей формы с пользовательскими данными.

<input name="fullname" autocomplete="name">

Согласно спецификации, requestAutocomplete не привязан к платежам, но текущая реализация Chrome в значительной степени такова. Ожидается, что в будущем браузеры смогут обрабатывать и другие виды данных, например, данные для входа в систему и генератор паролей, паспортные данные и даже загрузку аватара.

В настоящее время в Chrome requestAutocomplete распознает следующее:

Оплата

• электронная почта
• cc-name - имя на карте
• cc-number - номер карты
• cc-exp-month — месяц окончания срока действия карты в виде двух цифр
• cc-exp-year — год истечения срока действия карты в четырехзначном формате.
• cc-csc — 3-4-значный код безопасности карты

<input type="email" autocomplete="email" name="email">
<input type="text" autocomplete="cc-name" name="card-name">
<input type="text" autocomplete="cc-number" name="card-num">
<input type="text" autocomplete="cc-exp-month" name="card-exp-month">
<input type="text" autocomplete="cc-exp-year" name="card-exp-year">
<input type="text" autocomplete="cc-csc" name="card-csc">

Атрибуты «имя», которые я использовал выше, являются только примерами, нет необходимости использовать определенные значения. Если вы собираетесь повторно использовать эту форму для пользователей без requestAutocomplete , что является идеальным вариантом, вам потребуется добавить метки, макет и базовую проверку HTML5.

Вы также не ограничены элементами ввода: вы можете использовать любой тип ввода формы. Например, вы можете использовать <select> для полей срока действия карты.

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

и работает только на страницах, зашифрованных с помощью SSL . Чтобы помочь разработчикам ускорить работу своего кода, Chrome записывает точную причину сбоя requestAutocomplete в консоль разработчика.

Подробное консольное сообщение

Адрес

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

• tel – полный номер телефона, включая код страны, альтернативно может быть разбит на

  • телефонный код страны - например, +44
  • тел-национальный - остальное

• street-address - полный адрес с компонентами, разделенными запятыми, может быть разбит на

  • Адресная строка 1
  • адресная строка2 — может быть пустой

• location - город/поселок

• регион – код штата, округа или кантона.

• postal-code - Почтовый индекс, почтовый индекс, почтовый индекс

• страна

Вышеупомянутое следует использовать в сочетании с: - выставлением счетов - доставкой.

<input type="text" autocomplete="billing name" required name="billing-name">
<input type="tel" autocomplete="billing tel" required name="billling-tel">
<input type="text" autocomplete="billing address-line1" required name="billing-address1">
<input type="text" autocomplete="billing address-line2" required name="billing-address2">
<input type="text" autocomplete="billing locality" required name="billing-locality">
<input type="text" autocomplete="billing region" required name="billing-region">
<input type="text" autocomplete="billing postal-code" required name="billing-postal-code">
<select autocomplete="billing country" required name="billing-country">
  <option value="US">United States</option>
  …
</select>

<input type="text" autocomplete="shipping name" name="shipping-name">
…

Еще раз: атрибуты имени являются примерами: вы можете использовать все, что захотите. Очевидно, что не во всех формах следует запрашивать адрес доставки, например, не спрашивайте меня, куда я хочу, чтобы мне доставили мой номер в отеле, его текущее местоположение часто является аргументом в пользу продажи. Итак, у нас есть форма и мы знаем, как запросить autocompletion . Но…

Когда следует вызывать requestAutocomplete?

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

Распространенным шаблоном является наличие страницы корзины с кнопкой «Оформить заказ», которая приведет вас к форме платежных данных. В этой ситуации вы хотите загрузить форму выставления счета на странице корзины, но скрыть ее от пользователя и вызвать в ней requestAutocomplete , когда пользователь нажимает кнопку «Оформить заказ». Помните, что вам нужно будет обслуживать страницу корзины через SSL, чтобы избежать предупреждения Skeletor. Для начала нам следует скрыть кнопку оформления заказа, чтобы пользователь не мог нажать ее, пока мы не будем готовы, но мы хотим сделать это только для пользователей с JavaScript. Итак, в шапке вашей страницы:

<script>document.documentElement.className += ' js';</script>

И в вашем CSS:

.js #checkout-button,
#checkout-form.for-autocomplete {
  display: none;
}

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

<form id="checkout-form" class="for-autocomplete" action="/checkout" method="post">
  …fields for payment, billing address &amp; shipping if relevant…
</form>

Теперь наш JavaScript может начать все настраивать:

function enhanceForm() {
  var button = document.getElementById('checkout-button');
  var form = document.getElementById('checkout-form');

  // show the checkout button
  button.style.display = 'block';

  // exit early if there's no requestAutocomplete support
  if (!form.requestAutocomplete) {
    // be sure to show the checkout button so users can
    // access the basic payment form!
    return;
  }

  button.addEventListener('click', function(event) {
    form.requestAutocomplete();
    event.preventDefault();
  });

  // TODO: listen for autocomplete events on the form
}

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

Вы вызвали requestAutocomplete, что теперь?

Процесс автозаполнения асинхронный, requestAutocomplete возвращает результат сразу. Чтобы узнать, как все прошло, послушаем пару новых событий:

form.addEventListener('autocomplete', function() {
  // hurrah! You got all the data you needed
});

form.addEventListener('autocompleteerror', function(event) {
  if (event.reason == 'invalid') {
    // the form was populated, but it failed html5 validation
    // eg, the data didn't match one of your pattern attributes
  }
  else if (event.reason == 'cancel') {
    // the user aborted the process
  }
  else if (event.reason == 'disabled') {
    // the browser supports requestAutocomplete, but it's not
    // available at this time. Eg, it wasn't called from an
    // interaction event or the page is insecure
  }
});

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

form.addEventListener('autocomplete', function() {
  form.submit();
});

form.addEventListener('autocompleteerror', function(event) {
  if (event.reason == 'invalid') {
    form.submit();
  }
  else if (event.reason != 'cancel') {
    window.location = '/checkout-page/';
  }
});

Где браузер хранит мои данные?

Спецификация не определяет, где хранить данные, что позволяет браузерам внедрять инновации. Если вы вошли в Chrome, у вас есть возможность хранить данные в Google Кошельке, что делает их доступными на других устройствах, на которых вы вошли. Если вы храните свои данные в Wallet, реальный номер вашей карты не будет выдаваться с помощью requestAutocomplete , что повышает безопасность. Если вы не вошли в Chrome или решили не использовать Google Кошелек, ваши данные могут храниться локально в браузере для повторного использования. Сейчас ситуация такова, но в будущем Chrome и другие браузеры могут использовать дополнительных поставщиков платежей.

Делаем платежи простыми

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

Бонусный раунд: обработка многостраничных форм.

Гораздо лучше один раз вызвать requestAutocomplete и собрать все необходимые данные. Если вы не можете изменить свой сервер для получения всех этих данных одновременно, ничего страшного. Возьмите данные из заполненной формы и отправьте их, как вам удобнее. Вы можете использовать эту изящную небольшую функцию для сбора всех поддерживаемых на данный момент данных в виде простого объекта без необходимости создавать форму самостоятельно. Получив данные, вы можете преобразовать их в любой формат, необходимый вашему серверу, и опубликовать их в несколько этапов.

checkoutButton.addEventListener('click', function() {
  requestUserData({
    billing: true,
    shipping: true
  }, function(response) {
    if (response.err == 'cancel') {
      // exit silently
      return;
    }
    if (response.err) {
      // fall back to normal form
      window.location.href = '/normal-checkout-form/';
      return;
    }

    // the rest is just made-up pseudo code as an example
    postToServer(data.shipping).then(function() {
      return postToServer(data.billing);
    }).then(function() {
      return postToServer(data.cc);
    }).catch(function() {
      // handle error
    });
  });
});