Mit der Payment Request API Kunden das Bestellen erleichtern

Bequemer zahlen

Sebastian Springer

Schnell etwas bestellen im Internet? Kaufwillige Kunden scheitern oft an komplizierten Bestellverfahren. Eine JavaScript-API schafft Abhilfe, indem sie Shopbetreibern ein Werkzeug an die Hand gibt, mit dem sich der Bestellvorgang für Käufer und Verkäufer geschmeidiger gestalten lässt.

Jeder kennt diese Situation: Man benötigt etwas, hat aber gerade keine Lust oder Zeit, in einen Laden zu gehen. Also greift man zum Rechner oder Smartphone, besucht den Onlineshop seiner Wahl und kauft das entsprechende Produkt. Online einkaufen ist unheimlich bequem: Keine Menschenaufläufe, keine Wartezeiten und man hat alle Zeit der Welt, sich die Produkte gründlich anzusehen und zu vergleichen. Kein Wunder also, dass der Onlinehandel boomt. Laut einer Statistik des Bundesverbands E-Commerce und Versandhandel Deutschland (bevh) lagen die E-Commerce-Umsätze für Waren im Jahr 2016 bei 52,7 Mrd. Euro. Für 2017 sagen die Prognosen eine Steigerung von 11 Prozent voraus (siehe ix.de/ix1806122).

Trotz aller Relevanz ist der Onlineeinkauf aus Kundensicht noch lange nicht selbstverständlich und meist auch kein reibungsloser Prozess. Zum einen sorgen Kunden sich um die Sicherheit ihrer Daten, vor allem um Kreditkarten- oder Kontoinformationen. Aber auch der mangelnde Bedienkomfort im Bestell- und Bezahlvorgang ist oft ein Problem – nicht nur für den Kunden, sondern auch für den Anbieter. Denn je kürzer und einfacher der Weg zum Kaufabschluss ist, desto wahrscheinlicher ist es, dass der Kunde das Produkt tatsächlich kauft. Bequeme und sichere Bestellprozesse sind umso wichtiger, wenn man sich vor Augen hält, dass immer mehr Kunden mit ihrem Mobiltelefon bestellen. Der Marktanteil mobiler Geräte im E-Commerce stieg 2016 gegenüber dem Vorjahr um zwei Prozentpunkte auf 24 Prozent – ein Viertel aller Onlineeinkäufe. Doch viele Onlineshops sind nach wie vor auf Desktop-Geräte ausgelegt und schaffen damit Hürden für den mobilen Kaufabschluss.

Die kleinere Darstellungsfläche auf Smartphones stellt andere Anforderungen an die Präsentation von Produkten und an den Ablauf des Bestellvorgangs. Außerdem fehlen mobil Maus und Tastatur als Eingabegeräte. Wenn der Shop diese Faktoren nicht berücksichtigt, sehen Kaufwillige nicht selten in letzter Minute vom Kauf ab. Gerade bei mehrstufigen Prozessen mit zahlreichen Pflichtfeldern schmeißen sie die Flinte ins Korn. An dieser Stelle setzt eine neue Schnittstelle an: die Payment Request API.

Einheitlicher und einfacher

Das Ziel der Payment Request API ist es, den Check-out-Prozess komfortabler zu gestalten als bislang. Wie bisher befüllt der Benutzer beim Onlinekauf seinen Warenkorb. Beim Abschluss des Kaufs greifen die Änderungen der Payment Request API und an die Stelle ellenlanger Formulare tritt ein Browserdialog, in dem der Benutzer eine Reihe von Vorschlägen für Liefer- und Zahlungsoptionen erhält, aus denen er auswählen kann. Sobald der Benutzer diese Auswahl bestätigt hat, wird der Kauf getätigt.

Bei der Payment Request API handelt es sich um eine JavaScript-Schnittstelle im Browser. Sie befindet sich im Standardisierungsprozess des W3C und hat aktuell den Status „Candidate Recommendation“. Das bedeutet, dass die API eingehend geprüft wurde und im nächsten Schritt von den Browserherstellern implementiert werden muss, damit sie in der Praxis erprobt werden kann. Schaut man sich die API auf caniuse.com an, zeigt sich, dass sowohl Microsofts Edge als auch Googles Chrome die Schnittstelle bereits eingebaut haben. Mit den neueren Versionen von Safari, auf dem Desktop Version 11.1 und mobil Version 11.3, lässt sich die Payment Request API ebenfalls nutzen. Auch Firefox kennt das Feature, allerdings ist es hinter dem Flag dom.payments.request.enabled verborgen, das standardmäßig deaktiviert ist.

Der Bestellprozess

Abbildung 4 zeigt der Ablauf eines Bestellvorgangs mit der Payment Request API.

Der Benutzer signalisiert, meist über einen Klick auf einen Button, dass er den Bezahlvorgang starten möchte. Der Händler verknüpft auf seiner Seite diesen Button-Klick mit einer Funktion, die die Payment Request API im Browser des Benutzers anspricht. Beim Aufruf der API übergibt der Händler alle für die Bezahlung wesentlichen Angaben wie den Betrag, die Währung und die akzeptierten Zahlungsmethoden. Neben diesen Informationen kann er noch weitere Daten wie die Lieferadresse, den Namen oder die E-Mail-Adresse des Bestellers abfragen. Der Browser zeigt dem Benutzer dann einen Dialog, in dem diese Informationen bereits ausgefüllt sind, sofern er sie in der Vergangenheit schon eingegeben hat.

Liegen mehrere Informationen vor, hat der Benutzer die Möglichkeit, die jeweils passende Option auszuwählen. Akzeptiert der Händler beispielsweise die Bezahlung über Kreditkarte und lässt Visa und Mastercard zu, kann der Nutzer, wenn er beide Karten besitzt, eine Auswahl treffen. Sind nur Informationen zu einer Karte hinterlegt, wird nur diese eine Karte angezeigt. Sind keine Informationen vorhanden, muss der Benutzer die entsprechenden Daten angeben. Diese werden dann zur künftigen Verwendung im Browser gespeichert.

Noch steht die Entwicklung der Payment Request API am Anfang, jedoch wurde die Schnittstelle so generisch entwickelt, dass nicht nur Kreditkartenzahlungen möglich sind, sondern sich auch Drittanbieter beteiligen können. Die wichtigsten Drittanbieterlösungen sind derzeit Google Pay und Apple Pay, auf die später noch eingegangen wird. Hat der Benutzer alle erforderlichen Angaben gemacht, kann er den Kauf abschließen und die Informationen werden an den Händler weitergegeben. Dieser wickelt den Kauf ab und sendet dem Benutzer eine Bestätigung.

Bei der Integration der Payment Request API in einen Webshop ist noch zu beachten, dass es sich bei der Schnittstelle um eine reine JavaScript-API handelt. Es sind in der Regel nur geringe Anpassungen am Backend erforderlich, da die Informationen bereits in einer strukturierten Form vorliegen. Diese müssen gegebenenfalls an das bisherige Format angepasst werden, das im Standard-Check-out-Prozess verwendet wird. Die folgenden Abschnitte zeigen den Einsatz der Payment Request API im Detail.

Einbindung und erste Schritte

Die meisten Anpassungen nimmt man in den Templates der Applikation vor. Wie bei den meisten JavaScript-Schnittstellen hat man als Anbieter nur wenig Einfluss auf die Client-Seite. So ist die API nicht zwangsweise auf jedem Client verfügbar. Die Verwendung der PaymentRequest-Klasse in einem Firefox mit nicht aktiviertem Payment Request oder in einem älteren Safari-Browser führt zu einem ReferenceError, da die verwendete Klasse nicht existiert. Eine solche Ausnahme terminiert, wenn sie nicht abgefangen wird, die Ausführung des aktuellen Skripts. Beim Einkaufsprozess in einem Webshop bedeutet das, dass der Nutzer den Einkauf nicht abschließen kann und für den Anbieter kein Geld fließt. Gerade an solchen kritischen Punkten muss der Quellcode fehlertolerant ausgelegt werden.

if (window.PaymentRequest) {
  // PaymentRequest verwenden
} else {
  // Weiterleitung zum alternativen Checkout-Prozess
  window.location.href = '/cart/go-to-checkout.html';
}.

Zahlreiche Webshops funktionieren sogar mit komplett abgeschaltetem JavaScript, was allerdings auf Kosten des Bedienkomforts geht. Bei der Verwendung moderner JavaScript-Schnittstellen wird aus diesem Grund ein progressiver Ansatz empfohlen: Wenn die Features vorhanden sind, werden sie genutzt. Wenn sie nicht zur Verfügung stehen, greift ein alternativer Workflow. Bei der Payment Request API sieht eine solche Feature Detection wie in Listing 1 aus.

Die Abfrage bewirkt, dass bei Vorhandensein der Schnittstelle diese genutzt wird, ältere Browser jedoch auf eine alternative Variante des Check-out-Prozesses umgeleitet werden.

Die konkrete Implementierung des Payment Request verläuft in mehreren Stufen. Zunächst wird eine Instanz der PaymentRequest-Klasse erzeugt, anschließend wird die konkrete Anfrage dem Benutzer präsentiert. Nach der Bestätigung beziehungsweise der Verweigerung der Zahlung werden entsprechende Callback-Funktionen aufgerufen und die Information kann an den Server des Händlers übermittelt werden. Wie die einzelnen Schritte der Implementierung konkret aussehen, zeigt ein Beispiel.

Die Payment Request API in einem Praxisbeispiel

In diesem Szenario hat ein Benutzer in einer Onlinebäckerei eingekauft und möchte seine Bestellung nun abschließen. In seinem Warenkorb liegen ein Brot zum Preis von 4 Euro und zwei Baguettes mit einem Gesamtwert von 6 Euro. Der Shop bietet Visa und Mastercard als Zahlungsmöglichkeiten an.

Bei der Instanziierung der PaymentRequest-Klasse werden alle Informationen übergeben, die dem Benutzer im Browserdialog angezeigt werden. Diese sind in drei Gruppen unterteilt: Zahlungsmethoden, Zahlungsdetails und weitere Optionen.