Hier erfahren Sie, wie die Payment Request API funktioniert.
Payment Request API
Wenn ein Kunde versucht, etwas auf Ihrer Website zu kaufen, muss er auf der Website Zahlungsinformationen und optional weitere Informationen wie Versandpräferenzen angeben. Mit der Payment Request API (PR API) geht das einfach und schnell.
Grundstruktur
Für das Erstellen eines PaymentRequest-Objekts sind zwei Parameter erforderlich: Zahlungsmethoden und Zahlungsdetails. Optional ist außerdem ein dritter Parameter payment options. Eine einfache Anfrage könnte so erstellt werden:
const request = new PaymentRequest(paymentMethods, paymentDetails);
Sehen wir uns an, wie die einzelnen Parameter erstellt und verwendet werden.
Zahlungsmethoden
Der erste Parameter, paymentMethods, ist eine Liste der unterstützten Zahlungsmethoden in einer Arrayvariablen. Jedes Element im Array besteht aus zwei Komponenten: supportedMethods und optional data.
Für supportedMethods muss der Händler eine ID der Zahlungsmethode wie https://bobbucks.dev/pay angeben. Die Existenz und der Inhalt von data hängen vom Inhalt von supportedMethods und dem Design des Zahlungs-App-Anbieters ab.
Beide Informationen sollten vom Anbieter der Zahlungs-App zur Verfügung gestellt werden.
// Supported payment methods
const paymentMethods = [{
supportedMethods: 'https://bobbucks.dev/pay',
data: {
... // Optional parameters defined by the payment app provider.
}
}];
Zahlungsdetails
Der zweite Parameter, paymentDetails, wird als Objekt übergeben und gibt Zahlungsdetails für die Transaktion an. Er enthält den erforderlichen Wert total, der den vom Kunden zu zahlenden Gesamtbetrag angibt. Optional können mit diesem Parameter auch die gekauften Artikel aufgeführt werden.
Im folgenden Beispiel sind die optional gekauften Artikel (in diesem Fall nur ein Artikel) und der erforderliche Gesamtbetrag zu sehen. In beiden Fällen wird mit jedem einzelnen Betrag die Währungseinheit angegeben.
const paymentDetails = {
displayItems: [{
label: 'Anvil L/S Crew Neck - Grey M x1',
amount: { currency: 'USD', value: '22.15' }
}],
total: {
label: 'Total due',
amount: { currency: 'USD', value : '22.15' }
}
};
Prüfen, ob die Zahlungsmethode verfügbar ist
Chrome prüft beim Erstellen eines PaymentRequest-Objekts, ob der Nutzer und die Umgebung für Zahlungen bereit sind.
Rufe canMakePayment() auf, bevor du den Zahlungsvorgang aufrufst, um zu prüfen, ob der Nutzer und die Umgebung für eine Zahlung bereit sind. Der Aufruf von canMakePayment() gibt true zurück, wenn der Browser mindestens eine im Objekt angegebene Zahlungsmethode unterstützt.
request.canMakePayment().then(result => {
if (result) {
// This browser supports the specified payment method.
} else {
// This browser does NOT support the specified payment method.
}
}).catch(e => {
// An exception
});
Weitere Informationen zu PaymentRequest.canMakePayment() auf MDN
Die Methode show()
Nachdem Sie die beiden Parameter festgelegt und das request-Objekt wie oben gezeigt erstellt haben, können Sie die Methode show() aufrufen, wodurch die Benutzeroberfläche der Zahlungs-App angezeigt wird.
request.show().then(response => {
// [process payment]
// send to a PSP etc.
response.complete('success');
});
Wie die Benutzeroberfläche der Zahlungs-App aussieht, liegt im alleinigen Ermessen des Anbieters der Zahlungs-App. Nachdem der Kunde der Zahlung zugestimmt hat, wird ein JSON-Objekt an den Händler übergeben, das alle für die Überweisung erforderlichen Informationen enthält. Der Händler kann sie dann an den PSP senden, um die Zahlung zu verarbeiten.
Schließlich können Sie die Benutzeroberfläche für Zahlungsanfragen schließen. Führen Sie dazu den Vorgang mit response.complete('success') oder response.complete('fail') aus, je nachdem, welches Ergebnis der PSP zurückgibt.