requestAutocomplete - 请求自动完成

Question

我喜欢网络。 总而言之，我认为这是个不错的主意。 因此，我陷入了很多网络与本地辩论。 没过多久对方就开始谈论通过本机系统支付的便利性。 我通常的反应是扔下烟雾弹然后疯狂地笑着跑出房间，因为这不是我能赢的争论。

移动网络上的购物车放弃 率可高达 97% 。 想象一下，在现实世界中。 想象一下，超市里 97% 的人推着推车，里面装满了他们想要的东西，他们翻了个身就走了出去。

现在，这些人中的一些人只是将东西定价并且从未打算购买，但是在网络上购买的可怕用户体验是一个重要的贡献者。 我们正在对用户的理智征税。

想一想您在网络上的愉快支付体验，尤其是在移动设备上。 这是一个应用程序商店，对吧？ 或者至少是一个已经有你的支付信息的类似封闭系统。

这是个问题。 它要求网站承诺用户必须已经拥有帐户并登录的特定支付提供商，或者承诺要求用户登录特定支付提供商的平台，例如需要您的应用程序商店仅为该平台编写代码。 如果您不做其中任何一件事情，用户注定要在他们的屏幕或键盘上敲击，直到他们所有的手指皮肤都消失，或者他们放弃。

我们需要解决这个问题。

请求自动完成

站点上有更多最新的表单教程 在我们新的Web Fundamentals 以及关于 requestAutocomplete 的更多深入信息。

在 WebGL、WebRTC 和其他以“Web”开头的精美 Web API 的世界中， requestAutocomplete比较不起眼。 然而，它是米色服装的超级英雄。 一个微小、乏味的 API，可以在网络支付时间吸血鬼的心脏插入一根木桩。

它不是依赖特定支付提供商的站点，而是从浏览器请求支付详细信息，浏览器代表用户存储这些详细信息。

Chrome 版本的 requestAutocomplete() 还集成了仅供 美国用户使用的 Google 电子钱包（当前） 。 试一试 在我们的测试网站上 。

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 目前仅适用于支付，它要求您 在 <form>中至少包含一个信用卡相关字段 ，并且仅适用于 SSL 加密页面 。 为了帮助开发人员更快地运行他们的代码，Chrome 将 requestAutocomplete 失败的确切原因记录到开发人员控制台。

详细的控制台消息

地址

• 姓名 - 全名。 将全名作为单个字段远比多个字段好。 名字和姓氏等多个字段显示出西方偏见，可能对其他文化没有意义，而且在单个字段中输入更容易
• 电话 - 包括国家代码的完整电话号码，也可以分解为
  • 电话国家代码 - 例如 +44
  • 国家电话 - 其余
• 街道地址 - 以逗号分隔的完整地址，可以分解为
  • 地址第一行
  • 地址行 2 - 可能为空
• 地点 - 城市/城镇
• 地区 - 州代码、县或州
• 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">

再次重申，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 class="for-autocomplete" action="/checkout" method="post">
  …fields for payment, billing address & 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将获得全新的快速体验，其他浏览器将退回到您的正常付款方式。

对于奖励积分，您可能希望通过 XHR 加载表单 HTML 作为 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 电子钱包中，以便在您已登录的其他设备上访问这些信息。 如果您将您的详细信息存储在钱包中，您的真实卡号将不会被处理 requestAutocomplete，增加安全性。

如果您未登录 Chrome，或选择不使用 Google 电子钱包，您的详细信息可选择存储在浏览器本地以供重复使用。

这是目前的情况，但未来 Chrome 和其他浏览器可能会采用其他支付服务提供商。

轻松付款

每当用户想要购买时，他们必须一次又一次地输入他们的支付信息，这有点荒谬。 当网站存储您的付款详细信息时，事情会变得更容易，我对有多少网站存储我的银行卡详细信息感到有些不安。 这是 Web 标准要解决的完美问题。

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
    });
  });
});