Allgemeine Informationen zur Funktionsweise der Payment Request API.
Payment Request API
Wenn ein Kunde versucht, etwas auf Ihrer Website zu kaufen, muss die Website Sie fragen. Der Kunde muss Zahlungsinformationen und optional weitere Informationen angeben. wie Versandpräferenz. Das geht einfach und schnell mithilfe der Payment Request API (PR API).
Grundstruktur
Für das Erstellen eines PaymentRequest-Objekts sind zwei Parameter erforderlich: payment
Zahlungsmethoden und Zahlungsdetails zu überprüfen. Außerdem gibt es einen dritten Parameter für Zahlungsoptionen,
ist optional. Eine einfache Anfrage könnte wie folgt 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
Array-Variable. Jedes Element im Array
besteht aus zwei Komponenten,
supportedMethods und optional data.
Für supportedMethods muss der Händler eine Zahlungsmethode angeben
ID
wie z. B. https://bobbucks.dev/pay. Die Existenz und der Inhalt von data hängen von
Inhalt von supportedMethods und das Design des Zahlungs-App-Anbieters.
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 der Transaktion. Es enthält den erforderlichen Wert total,
der den Gesamtbetrag angibt, den der Kunde erhält. Dieser Parameter kann auch
können Sie die gekauften Artikel optional auflisten.
Im Beispiel unten ist die optionale Liste der gekauften Artikel (hier nur ein Artikel) Fall) wird angezeigt, ebenso wie der erforderliche Gesamtbetrag. In beiden Fällen ist die Währung Einheit wird 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' }
}
};
Verfügbarkeit der Zahlungsmethode prüfen
Chrome prüft, ob Nutzer und Umgebung zahlungsbereit sind
beim Erstellen eines PaymentRequest-Objekts.
Um zu prüfen, ob der Nutzer und die Umgebung bereit für eine Zahlung sind, rufen Sie
canMakePayment(), bevor Sie das Zahlungsverfahren aufrufen. Anrufen
canMakePayment() gibt true zurück, wenn der Browser mindestens eine Zahlung unterstützt.
-Methode, die im -Objekt angegeben ist.
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 hier gezeigt erstellt haben,
können Sie die Methode show() aufrufen, mit der der Nutzer 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, hängt vollständig von der Zahlungs-App ab. Dienstanbieter. Nachdem der Kunde einer Zahlung zugestimmt hat, wird ein JSON-Objekt übergeben. an den Händler, der alle für die Überweisung erforderlichen Informationen enthält. Der Händler kann es dann an den Premium-KMU-Partner senden, damit er die Zahlung verarbeitet.
Schließlich können Sie die Benutzeroberfläche für Zahlungsanforderung schließen, indem Sie den Vorgang mit
response.complete('success') oder response.complete('fail'), je nach
das vom Premium-KMU-Partner zurückgegeben wird.