requestAutocomplete

Nimm mein Geld, nicht meine Zeit

Jake Archibald

Einleitung

Ich mag das Web. Alles in allem denke ich, dass es eine gute Idee ist. Es gibt also immer wieder Diskussionen über das Web oder die Natives. Es dauert nicht lange, bis Ihr Gegenüber über die einfachen Zahlungen über native Systeme spricht. Meine übliche Reaktion ist, eine Rauchbombe fallen zu lassen und lachend aus dem Raum wegzurennen, denn das ist kein Argument, das ich gewinnen kann. Die Abbrüche des Einkaufswagens im mobilen Web können bis zu 97%betragen. Stellen Sie sich das in der Praxis vor. Stellen Sie sich vor, 97% der Menschen in einem Supermarkt haben einen Warenkorb voller Dinge, die sie sich wünschen. Sie drehen ihren Warenkorb um und gehen dann raus. Manche von ihnen haben einfach Preise erhöht und hatten nie die Absicht, etwas zu kaufen, aber die schreckliche Nutzererfahrung beim Einkaufen im Web trägt wesentlich dazu bei. Wir stellen unseren Nutzern eine Steuer auf ihre Vernunft raus. Denken Sie an eine angenehme Zahlungserfahrung im Web, die Sie auch auf Mobilgeräten genutzt haben. Es ist ein App-Shop, oder? Oder zumindest ein ähnliches geschlossenes System, in dem Ihre Zahlungsinformationen bereits vorliegen. Das ist ein Problem. Websites müssen sich an einen bestimmten Zahlungsdienstleister binden, bei dem der Nutzer bereits ein Konto haben und bei dem der Nutzer angemeldet sein muss, oder die Nutzung einer Plattform, bei der Nutzer bei einem bestimmten Zahlungsanbieter angemeldet sein müssen, z. B. bei App-Shops, bei denen Sie nur für diese Plattform programmieren müssen. Wenn Sie nichts tun, sind die Nutzenden dazu verleitet, auf ihr Display oder ihre Tastatur zu tippen, bis alle Fingerabdrücke weg sind oder sie aufgeben. Das müssen wir ändern.

requestAutocomplete

Hinweis : Auf unserer neuen Web Fundamentals-Website finden Sie noch mehr aktuelle Anleitungen zu Formularen sowie ausführlichere Informationen zu requestAutocomplete.

In einer Welt von WebGL, WebRTC und anderen Web-APIs, die mit „Web“ beginnen, ist requestAutocomplete ziemlich unbequem. Allerdings ist er ein Superheld in beigefarbener Kleidung. Eine winzige, langweilige API, die das Herzstück des Online-Bezahlungs-Zeitvampirs sichern kann.

Die Website hängt nicht von einem bestimmten Zahlungsdienstleister ab, sondern fordert Zahlungsdetails vom Browser an, der sie im Namen des Nutzers speichert. Die Chrome-Version von requestAutocomplete() kann auch nur für Nutzer in den USA (derzeit) in Google Wallet integriert werden. Probieren Sie es auf unserer Testwebsite aus.

form.requestAutocomplete

Für Formularelemente wird eine einzelne neue Methode namens „requestAutocomplete“ verwendet, mit der der Browser das Formular ausfüllen soll. Der Browser zeigt ein Dialogfeld an, in dem der Nutzer um die Berechtigung gebeten wird und in dem er auswählen kann, welche Informationen er angeben möchte. Sie können diese Funktion nicht jederzeit aufrufen. Sie muss während der Ausführung bestimmter Interaktionsereignisse aufgerufen werden, z. B. der Maus nach oben/unten, ein Klick, eine Taste oder ein Touch-Ereignis. Dies ist eine bewusste Sicherheitsbeschränkung.

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

// TODO: listen for autocomplete events on the form

Hinweis : Wenn Sie Ereignisse über eine JavaScript-Bibliothek hinzufügen, werden Ereignisse so weitergeleitet, dass die Verknüpfung mit der ursprünglichen Interaktion verloren geht. Das bedeutet, dass Ihr Aufruf von „requestAutocomplete“ die Sicherheitsprüfung nicht besteht. Verwenden Sie in diesem Fall addEventListener wie oben beschrieben.

Bevor wir uns die Ereignisse ansehen, müssen wir sicherstellen, dass der Browser Ihre Formularfelder versteht...

Formularanforderungen

Damals war das Internet noch in Schwarz-Weiß. In Internet Explorer 5 wurde deshalb für Formulareingabeelemente das neue Attribut autocomplete eingeführt. Sie könnte auf „Aus“ gestellt sein, damit der Browser keine Vorschläge mehr anzeigt. Das war das. Diese API wurde erweitert, sodass Sie den erwarteten Inhalt des Felds angeben können, ohne das Attribut „name“ zu ändern. Auf diese Weise verknüpft requestAutocomplete Formularfelder mit Nutzerdaten.

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

requestAutocomplete ist nicht zahlungsspezifisch, die aktuelle Implementierung von Chrome ist das jedoch so. In Zukunft sollten Browser auch andere Arten von Daten verarbeiten können, hoffentlich auch Anmeldedaten und Passwortgenerator, Reisepassinformationen und sogar das Hochladen eines Avatars.

Derzeit erkennt requestAutocomplete in Chrome Folgendes:

Zahlung

• E-Mail
• Cc-name: Name auf der Karte
• Cc-Nummer – Kartennummer
• cc-exp-month – Monat des Ablaufdatums als zwei Ziffern
• cc-exp-year – Jahr des Ablaufdatums der Karte als vierstellig
• cc-csc – Sicherheitscode für die 3- bis 4-stellige Karte

<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">

Die Attribute „Name“, die ich oben verwendet habe, sind nur Beispiele. Es gibt keine Notwendigkeit, bestimmte Werte zu verwenden. Ideal ist, wenn Sie dieses Formular für Nutzer ohne requestAutocomplete verwenden möchten, sollten Sie Labels, ein Layout und eine einfache HTML5-Validierung hinzufügen.

Sie sind auch nicht auf Eingabeelemente beschränkt. Sie können jeden beliebigen Formulareingabetyp verwenden. Du kannst beispielsweise <select> für die Felder mit dem Ablaufdatum der Karte verwenden.

Hinweis: Da requestAutocomplete derzeit nur für Zahlungen vorgesehen ist, müssen Sie mindestens ein mit Kreditkarte zusammenhängendes Feld in

aufnehmen. Außerdem funktioniert die Vervollständigung nur auf SSL-verschlüsselten Seiten. Damit Entwickler ihren Code schneller ausführen können, protokolliert Chrome den genauen Grund für das Fehlschlagen von requestAutocomplete in der Entwicklerkonsole.

Detaillierte Konsolennachricht

Adresse

• name: vollständiger Name. Einen vollständigen Namen für ein einzelnes Feld zu verwenden, ist weitaus besser als mehrere Felder. Mehrere Felder wie first-name und last-name weisen eine westliche Voreingenommenheit auf und sind für andere Kulturen möglicherweise nicht sinnvoll. Außerdem ist es einfacher, die Eingabe in ein einzelnes Feld zu schreiben.

• tel: vollständige Telefonnummer einschließlich Landesvorwahl, kann auch aufgeschlüsselt werden in

  • Landesvorwahl – z.B. +44
  • tel-national – der Rest

• street-address - vollständige Adresse mit durch Kommas getrennten Komponenten, kann aufgeschlüsselt werden in

  • Adresszeile1
  • Adresszeile2 – ist möglicherweise leer

• Ort – Stadt/Ort

• Region: Code für Bundesland, Landkreis oder Kanton

• postal-code (Postleitzahl) – Postleitzahl

• country

Das oben Genannte sollte in Kombination mit folgenden Faktoren verwendet werden: - Abrechnung - Versand

<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">
…

Auch hier sind die Namensattribute Beispiele. Sie können alles verwenden, was Sie möchten. Natürlich sollte nicht für jedes Formular eine Versandadresse angefordert werden. Fragen Sie mich z. B. nicht, wohin ich mein Hotelzimmer liefern möchte. Oft ist der aktuelle Standort das Verkaufsargument. Das Formular ist jetzt fertig und wir wissen, wie Sie autocompletion anfordern können. Aber...

Wann soll requestAutocomplete aufgerufen werden?

Idealerweise sollte das requestAutocomplete-Dialogfeld angezeigt werden, anstatt die Seite mit dem Zahlungsformular zu laden. Wenn alles gut läuft, sollte der Nutzer das Formular überhaupt nicht sehen.

Ein gängiges Muster ist eine Einkaufswagenseite mit einer Schaltfläche „Zur Kasse“, über die Sie zum Formular mit den Zahlungsdetails gelangen. In diesem Fall möchten Sie Ihr Abrechnungsformular auf der Einkaufswagenseite laden, aber für den Nutzer ausblenden und requestAutocomplete darauf aufrufen, wenn der Nutzer auf die Schaltfläche „Zur Kasse“ klickt. Denken Sie daran, dass Sie Ihre Einkaufswagenseite über SSL bereitstellen müssen, um die Skeletor-Warnung zu vermeiden. Zuerst sollten wir die Schaltfläche zum Bezahlen ausblenden, damit die Nutzenden nicht darauf klicken können, bis wir bereit sind. Wir möchten das aber nur für Nutzende mit JavaScript machen. Geben Sie in den head-Abschnitt Ihrer Seite Folgendes ein:

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

Und in Ihrem CSS-Code:

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

Das Abrechnungsformular muss auf unserer Einkaufswagenseite enthalten sein. Der Code kann überall hinzugefügt werden. Mit dem obigen CSS wird sichergestellt, dass es für den Nutzer nicht sichtbar ist.

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

Jetzt kann der JavaScript-Code alles einrichten:

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
}

Sie rufen enhanceForm auf der Einkaufswagenseite auf, einige Zeit nach dem Bezahlvorgang und der Schaltfläche. Browser, die requestAutocomplete unterstützen, profitieren von dem neuen, schnellen Design. Andere Browser verwenden stattdessen dein normales Zahlungsformular. Wenn Sie Bonuspunkte erhalten möchten, können Sie den HTML-Code des Formulars als Teil von enhanceForm über XHR laden. Das bedeutet, dass du das Formular nur in Browsern laden kannst, die requestAutocomplete unterstützen. Du musst nicht daran denken, das Formular jeder Seite hinzuzufügen, über die du enhanceForm aufrufen kannst. So funktioniert die Demowebsite.

Sie haben „requestAutocomplete“ genannt. Wie geht es jetzt weiter?

Die automatische Vervollständigung ist asynchron. requestAutocomplete kehrt sofort zurück. Um herauszufinden, wie das gelaufen ist, hören wir uns einige neue Ereignisse an:

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

Wenn alles funktioniert hat, können Sie mit den Daten machen, was Sie möchten. Am einfachsten ist es, das Formular einzureichen. Der Server kann die Daten dann validieren und dem Nutzer eine Bestätigungsseite mit den Lieferkosten anzeigen. Wenn die Daten ungültig sind, können Sie das Formular einblenden und die Felder hervorheben, die der Nutzer bearbeiten muss. Alternativ können Sie das Formular einfach einreichen und Ihre reguläre serverseitige Validierung übernehmen. Wenn der Nutzer den Vorgang abgebrochen hat, brauchen Sie nichts weiter zu tun. Wenn die Funktion deaktiviert ist, leiten Sie den Nutzer zum regulären Formular weiter. In den meisten Fällen werden deine Zuhörer also sehr ähnlich aussehen...

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

Wo speichert der Browser meine Daten?

Die Spezifikation gibt nicht vor, wo die Daten gespeichert werden, sodass Browser innovativ sein können. Wenn Sie in Chrome angemeldet sind, können Sie Details in Google Wallet speichern und so auf anderen Geräten, auf denen Sie angemeldet sind, darauf zugreifen. Wenn du deine Daten in Wallet speicherst, wird deine echte Kartennummer nicht bis zum requestAutocomplete ausgegeben – das erhöht die Sicherheit. Wenn Sie nicht in Chrome angemeldet sind oder Google Wallet nicht verwenden, werden Ihre Daten optional zur Wiederverwendung lokal im Browser gespeichert. Das ist die aktuelle Situation, aber in Zukunft werden Chrome und andere Browser möglicherweise weitere Zahlungsanbieter einführen.

Bezahlen leicht gemacht

Es ist ein bisschen lächerlich, dass Nutzende ihre Zahlungsinformationen jedes Mal neu eingeben müssen, wenn sie einen Kauf tätigen möchten. Es wird einfacher, wenn eine Website Ihre Zahlungsdetails speichert. Mir ist nicht klar, wie viele Websites meine Kartendetails speichern. Dies ist ein perfektes Problem, das mit Webstandards gelöst werden muss. requestAutocomplete kann Zahlungen mit nur einem Klick im gesamten Web ermöglichen, ohne sich auf bestimmte Dienste oder Plattformen festlegen zu müssen – und das auch nach einiger Zeit!

Bonusrunde: Umgang mit mehrseitigen Formularen

Es ist besser, requestAutocomplete einmal anzurufen und alle benötigten Daten zu erfassen. Wenn Sie Ihren Server nicht so ändern können, dass alle diese Daten auf einmal empfangen werden, ist das kein Problem. Nehmen Sie die Daten aus dem ausgefüllten Formular und senden Sie es so, wie es Ihnen am besten passt. Mit dieser praktischen kleinen Funktion können Sie alle derzeit unterstützten Daten als einfaches Objekt erfassen, ohne selbst ein Formular erstellen zu müssen. Sobald Sie die Daten haben, können Sie sie in ein beliebiges Format umwandeln, das Ihr Server benötigt, und sie in mehreren Schritten veröffentlichen.

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