Wenn ein Kunde versucht, etwas auf Ihrer Website zu kaufen, muss er dort aufgefordert werden, Zahlungsinformationen und optional andere Informationen wie die bevorzugte Versandart anzugeben. Das lässt sich schnell mit der Payment Request API (PR API) erledigen.
Grundlegende Zahlungsstruktur
Zum Erstellen eines PaymentRequest-Objekts sind zwei Parameter erforderlich: Zahlungsmethoden und Zahlungsdetails. Außerdem ist ein dritter Parameter payment options optional. Eine einfache Anfrage könnte so aussehen:
const request = new PaymentRequest(paymentMethods, paymentDetails);
Sehen Sie sich an, wie die einzelnen Parameter erstellt und verwendet werden.
Zahlungsmethoden
Der erste Parameter, paymentMethods, ist eine Liste der unterstützten Zahlungsmethoden in einer Array-Variablen. Jedes Element im Array besteht aus zwei Komponenten: supportedMethods und optional data.
Für supportedMethods muss der Händler eine Zahlungsmethoden-ID wie https://bobbucks.dev/pay angeben. Das Vorhandensein und der Inhalt von data hängen vom Inhalt von supportedMethods und vom Design des Zahlungs-App-Anbieters ab.
Beide Informationen sollten vom Anbieter der Zahlungs-App bereitgestellt 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. Es enthält den erforderlichen Wert total, der den vom Kunden zu zahlenden Gesamtbetrag angibt. Mit diesem Parameter können optional auch die gekauften Artikel aufgeführt werden.
Im folgenden Beispiel wird die optionale Liste der gekauften Artikel (in diesem Fall nur ein Artikel) sowie der erforderliche fällige Gesamtbetrag angezeigt. In beiden Fällen wird die Währungseinheit für jeden einzelnen Betrag 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, ob der Nutzer und die Umgebung für die Zahlung bereit sind, wenn ein PaymentRequest-Objekt erstellt wird.
Rufen Sie canMakePayment() auf, bevor Sie den Zahlungsvorgang aufrufen, um zu prüfen, ob der Nutzer und die Umgebung für die Zahlung bereit sind. Wenn Sie canMakePayment() aufrufen, wird true zurückgegeben, wenn der Browser mindestens eine der im Objekt angegebenen Zahlungsmethoden 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 erstellt haben, können Sie die Methode show() aufrufen, um die Benutzeroberfläche der Zahlungs-App aufzurufen.
request.show().then(response => {
// [process payment]
// send to a PSP etc.
response.complete('success');
});
Wie die Benutzeroberfläche der Zahlungs-App aussieht, liegt ganz beim Anbieter der Zahlungs-App. Nachdem der Kunde der Zahlung zugestimmt hat, wird ein JSON-Objekt mit allen erforderlichen Informationen für die Überweisung an den Händler übergeben. Der Händler kann sie dann an den Zahlungsdienstleister senden, um die Zahlung zu verarbeiten.
Schließen Sie die Benutzeroberfläche für Zahlungsanfragen ab, indem Sie den Vorgang mit response.complete('success') oder response.complete('fail') abschließen, je nachdem, welches Ergebnis der Zahlungsdienstleister zurückgibt.