Einführung von Web-Zahlungen: Einfachere Online-Käufe mit der Zahlungsanforderungs-API

Dinge online zu kaufen kann ein frustrierender Prozess sein, besonders auf Mobilgeräten. Auch wenn die Seiten gut gestaltet sind, werden viele Informationen benötigt: Unsere Kontaktinformationen, Liefer- und Rechnungsadressen, Versandoption und Kartendetails. Wenn Sie jemals einfach aufgegeben haben, sind Sie in der Mehrheit.

Das Baymard Institute hat einen Durchschnitt aus 37 verschiedenen Studien gezogen und herausgefunden, dass 69 % der Einkaufswagen aufgegeben werden.

Es überrascht nicht, dass die Zahlen auf Mobilgeräten schlechter sind, wo der kleinere Bildschirm und das Fehlen einer physischen Tastatur die Eingabe verlangsamen können. Die Abbruchrate auf Mobilgeräten kann bis zu 84 % oder mehr betragen! Mit dem Aufstieg und Aufstieg des mobilen Surfens in den letzten Jahren bedeutet dies, dass das Gesamtproblem immer schlimmer geworden ist. Für E-Commerce-Websites kosten diese aufgegebenen Warenkörbe eine Menge Geld. Business Insider schätzte, dass Waren im Wert von 4 Billionen US-Dollar in einem Jahr aufgegeben würden.

Zum Glück wehrt sich das Internet gegen dieses Problem. Die W3C-Arbeitsgruppe „Web Payments“ hat fleißig an „einer Revolution bei Zahlungen im Internet“ gearbeitet und neue Standards entwickelt, um Online-Zahlungen viel einfacher zu machen. „Web Payments“ ist nicht nur der Name der Arbeitsgruppe, sondern im Wesentlichen ein Oberbegriff für diese neuen, aufstrebenden Standards.

Die Zahlungsanforderungs-API

Der erste dieser Standards, die Payment Request API , ist ein großer Schritt nach vorne. Es gibt uns die Möglichkeit, eine Zahlung von einem Benutzer anzufordern und den Browser die Benutzeroberfläche bereitstellen zu lassen, um sie zu akzeptieren. Es wird bereits in Chrome, Edge und Samsung Internet unterstützt und befindet sich in Firefox und Safari in der Entwicklung. Viele hochkarätige Unternehmen übernehmen die API, darunter die New York Times, die Washington Post und Monzo.

Das Anfordern dieser Informationen vom Browser bietet einen unmittelbaren, großen Vorteil, da diese Details wahrscheinlich bereits gespeichert sind . Solange wir unsere Daten auf einer anderen Website eingegeben haben, die die API verwendet, und unserem Browser erlaubt haben, sich daran zu erinnern, kann der Browser das Formular vorab ausfüllen, sodass wir viel schneller auschecken können.

Dies ist besser als das standardmäßige automatische Ausfüllen; Indem Sie dem Browser erlauben, die Eingabefelder zu verarbeiten, kann er absolut genau sein – und Probleme mit dem Vorabeinfüllen der falschen Informationen in die falschen Felder werden vermieden. Es bedeutet auch, dass wir ein für Mobilgeräte optimiertes, einseitiges Checkout-Formular haben, ohne dafür unser eigenes HTML und CSS schreiben zu müssen.

Auf Mobilgeräten sind die Vorteile möglicherweise noch deutlicher zu spüren, aber die Zahlungsanforderungs-API ist nicht auf mobile Browser beschränkt. Es wird bereits in den Desktop-Versionen von Chrome, Edge und Samsung Internet for DeX unterstützt. Wir können auch davon ausgehen, dass die Unterstützung später auch für Desktop-Firefox und Safari eintrifft (zum Zeitpunkt des Schreibens war sie kürzlich standardmäßig in Safari Technology Preview 44 aktiviert).

Unsere erste Zahlungsaufforderung

Beginnen wir mit der Erforschung der API mit einem einfachen Beispiel. Wir werden vom Benutzer eine Kartenzahlung anfordern und ihm erlauben, wie folgt auszuchecken:

Im obigen Video werden Sie feststellen, dass der Benutzer die Zahlung mit seinem Fingerabdruck bestätigt. Dies ist nicht Teil des Zahlungsanforderungsstandards selbst, sondern eine Sicherheitsfunktion, die der Samsung-Internetbrowser (zusammen mit dem Iris-Scannen) auf unterstützten Geräten bereitstellt.

Wenn Sie an weiteren Möglichkeiten zur Integration biometrischer Authentifizierung im Web interessiert sind, sollten Sie den kommenden Web-Authentifizierungsstandard im Auge behalten.

Zuerst sollten wir wie üblich Progressive Enhancement übernehmen und prüfen, ob dieser Browser die API unterstützt:

 if (window.PaymentRequest) { // We can continue with the Payment Request API } else { // Here we could fall back to a legacy checkout form }

Jetzt können wir die Konfiguration für unsere PaymentRequest einrichten – die Art der Zahlung, die wir akzeptieren, und Details, die über den Kauf angezeigt werden:

 var methodData = [{ // 'basic-card' means standard card payments - credit and debit cards supportedMethods: 'basic-card' }]; var details = { // If we are buying multiple items, each one can be included displayItems: [ { label: 'Some product that we are buying', amount: {currency: 'USD', value: '699.99'} } ], total: { label: 'Total', amount: {currency: 'USD', value: '699.99'} } }; var paymentRequest = new PaymentRequest(methodData, details);

Wenn wir die Zahlungsbenutzeroberfläche anzeigen möchten (z. B. wenn der Benutzer auf „Jetzt kaufen“ klickt), können wir show() aufrufen. Dann verarbeiten wir die Daten, die der Benutzer bei der Lösung des Versprechens angegeben hat:

 // show() makes it actually display the user interface paymentRequest.show() .then(function(paymentResponse) { // User has confirmed. paymentResponse contains the data entered. // Here we would process it server-side... processPaymentDetails(paymentResponse) .then(function(paymentResponse) { // ...Then when processed successfully, this will make the dialog indicate success & then close: paymentResponse.complete('success'); // We could also update the page here appropriately }); }) .catch(function(error) { // Handle error, eg if user clicks the 'cancel' button. });

Wir haben jetzt den UI-Flow am Frontend eingerichtet. Wir können es auch weiter konfigurieren, um es unseren Anforderungen anzupassen. Wenn wir beispielsweise zusätzliche Details vom Kunden anfordern möchten, können wir zusätzliche options an den PaymentRequest-Konstruktor übergeben. Um beispielsweise den Namen, die E-Mail-Adresse, die Telefonnummer und die Lieferadresse des Benutzers anzufordern:

 var options = { requestPayerName: true, requestPayerEmail: true, requestPayerPhone: true, requestShipping: true }; var paymentRequest = new PaymentRequest(methodData, details, options);

Wir können auch mehrere Versandoptionen definieren und sogar steuern, welche Optionen dynamisch angezeigt werden, basierend auf der Adresse des Kunden. Ein Beispiel dafür finden Sie hier auf Glitch.

Benutzererfahrung

Wir beginnen, einige beeindruckende Statistiken über die Vorteile zu sehen, die Zahlungsaufforderungen Unternehmen bringen können. Google teilte kürzlich mit, dass J.Crew, eine Modemarke, festgestellt hat, dass 50 % ihrer Nutzer jetzt den Zahlungsanforderungsablauf durchlaufen und dadurch ihre Transaktionszeit um 75 % verkürzt wird!

Es liegt an Ihnen, wie Sie die Zahlungsanforderung in Ihr Einkaufserlebnis integrieren, aber eine gängige Methode besteht darin, so etwas wie eine „Express-Kaufabwicklung“ oder „Jetzt kaufen“-Option anzubieten, ohne dass sich der Kunde zuerst anmelden muss. Wenn Sie möchten, können Sie die Kontaktdaten des Benutzers über die Zahlungsanforderungs-Benutzeroberfläche sammeln und ihm nach dem Kauf die Möglichkeit bieten, ein Konto für die zukünftige Verwendung zu erstellen.

Wenn Sie möchten, können Sie zuerst prüfen, ob der Kunde bereits eine gültige Zahlungsmethode eingerichtet hat, bevor Sie die Zahlungsanforderungs-Benutzeroberfläche anzeigen. Dazu können Sie canMakePayment :

 if (paymentRequest.canMakePayment) { paymentRequest.canMakePayment().then(function(result) { if (result) { // User has an active payment method } else { // No active payment method yet (but they could add one) } }).catch(function(error) { // Unable to determine }); }

Back-End-Integration

Wir haben gesehen, wie man die Benutzeroberfläche für die Entgegennahme von Zahlungen einrichtet, aber wie verarbeiten wir die Zahlungen tatsächlich im Backend?

Die meisten Websites wickeln Zahlungen nicht selbst ab (was viel Sorgfalt und PCI-DSS-Konformität erfordern würde), sondern verwenden ein Zahlungsgateway (PG) oder einen Zahlungsdienstanbieter (PSP) eines Drittanbieters. Eine Reihe von Payment Gateways haben bereits spezielle Unterstützung für die Payment Request API eingeführt. Sie können die Zahlungsanforderung über ihr eigenes Skript initiieren, das Sie auf Ihrer Seite einfügen, um sicherzustellen, dass die Daten sicher gesendet werden und Sie sich nicht selbst darum kümmern müssen. Sie bieten möglicherweise auch eine iFrame- oder Weiterleitungslösung an. Der beste Weg, um fortzufahren, ist, sich bei Ihrem Payment Gateway zu erkundigen, wie es die Integration von Zahlungsanforderungen empfiehlt.

Zahlungs-App-Integration

Bisher haben wir Kartenzahlungen besprochen. Die Payment Request API unterstützt jedoch auch mobile Zahlungs-Apps wie Samsung Pay, Pay with Google (mit Android Pay) und Apple Pay.

Wenn unsere Kunden mit einer dieser Apps bezahlen, können sie ihre in der App gespeicherte Karte verwenden, ohne die Daten (auch beim ersten Mal) im Browser erneut eingeben zu müssen. Die Verwendung dieser Apps kann auch schneller sein, da der Kunde seinen CVC (Card Verification Code, auch bekannt als CVV) nicht erneut von der Rückseite seiner Karte eingeben muss. Schließlich können sie zusätzliche Sicherheitsvorteile bringen, da sie nicht die ursprünglichen Kartendaten, sondern nur Einweg-Tokens übertragen und uns so vor potenziellen Abhör- und Wiederholungsangriffen schützen.

Wenn der Kunde die Zahlungs-App als Zahlungsmethode auswählt, wechselt der Browser zu einem von der App bereitgestellten Zahlungsformular, um die Zahlung zu bestätigen. Die Drittanbieter-App akzeptiert dann im Allgemeinen den Fingerabdruck oder Iris-Scan des Kunden, um die Zahlung zu bestätigen, wenn das Gerät dies unterstützt.

Jede Zahlungs-App hat ihre eigenen Anweisungen, aber die allgemeine Idee ist dieselbe. Sie können sie anhand ihrer eigenen speziellen URLs als potenzielle Zahlungsmethoden identifizieren und die erforderliche Konfiguration im data übergeben. Um beispielsweise Samsung Pay zu unterstützen, würden Sie Code wie diesen in Ihr methodData Array aufnehmen:

 var methodData = [ { supportedMethods: 'https://spay.samsung.com', data: { // Samsung Pay specific data here } }, … // Other payment methods ];

Im Allgemeinen gibt es zwei Methoden, um diese Apps in Ihr Zahlungsgateway zu integrieren: eine „Gateway Token“-Methode und eine „Network Token“-Methode. Wenn Sie einen Drittanbieterdienst verwenden, der dies unterstützt, verwenden Sie höchstwahrscheinlich den Gateway-Token-Modus, bei dem der Zahlungs-App-Dienst in Ihrem Namen einen Anruf bei Ihrem Payment Gateway tätigt. Alternativ können Sie die Network Token-Methode verwenden, bei der Sie das Token sicher an Ihr Payment Gateway senden, indem Sie dessen SDK verwenden. Ihr Zahlungs-Gateway und/oder Zahlungs-App-Anbieter sollte in der Lage sein, weitere Einzelheiten bereitzustellen.

Google hat kürzlich die Google Payment API angekündigt, die Android Pay sowie in den Google-Konten der Kunden gespeicherte Karten enthält.

Apple Pay verwendet derzeit seine eigene JavaScript-Lösung, Apple Pay JS. Entwickler bei Google haben jedoch einen Wrapper erstellt, mit dem Sie ihn über die Standard-Payment Request API verwenden können.

Was kommt als nächstes?

Die Web Payments Working Group hört nicht bei der Payment Request API auf. Es wird auch an anderen Standards gearbeitet, einschließlich der Payment Handler API, die es Webanwendungen ermöglichen wird, als Zahlungs-App von Drittanbietern zu fungieren. Andere Themen, die diskutiert werden, sind eine mögliche Standardisierung rund um die Tokenisierung und die Möglichkeit, dass Zahlungsanforderungen Dinge wie Geschenkkarten unterstützen. Wenn Sie über die Entwicklungen auf dem Laufenden bleiben möchten, finden Sie hier die öffentliche Mailingliste. Ich hoffe, dass wir gemeinsam die frustrierenden Checkout-Erfahrungen der Vergangenheit lösen und die Vision einer Webzahlungsrevolution verwirklichen können!

Weitere Ressourcen

• „Web Payments Wiki des W3C“, GitHub
• „W3C’s Payment Request API Developer Information“, GitHub siehe auch FAQ
• „Web Payments 101: Ein kurzes Tutorial zur Codierung von Zahlungsanforderungen“, Glitch
• „Tauchen Sie tief in die Zahlungsanforderungs-API ein“, Google Developers
• „Payment Request API Dev Guide“, Microsoft Edge
• „So akzeptieren Sie Samsung Pay auf Ihrer Website mithilfe von Webzahlungen“, Winston Chen, Medium