Hier erfahren Sie, wie Sie Ihre webbasierte Zahlungsanwendung an Web Payments anpassen und so eine bessere Nutzererfahrung für Ihre Kunden bieten.
Sobald eine webbasierte Zahlungs-App eine Zahlungsanforderung empfängt und eine Zahlung veranlasst Transaktion handelt, handelt der Service Worker als Drehkreuz für die Kommunikation zwischen dem Händler und der Zahlungs-App. Dieser Beitrag erklärt, wie eine Zahlungs-App Informationen zur Zahlungsmethode weitergeben kann, Lieferadresse oder Kontaktinformationen an den Händler über einen Servicemitarbeiter senden.
<ph type="x-smartling-placeholder">![Optionale Zahlungsinformationen mit einem Service Worker verarbeiten](https://web.developers.google.cn/static/articles/handling-optional-payment-information/image/handling-optional-payment-9e082afff222b.png?authuser=6&hl=de)
Händler über eine Änderung der Zahlungsmethode informieren
Zahlungs-Apps unterstützen mehrere Zahlungsmittel mit unterschiedlichen Zahlungsmethoden.
Kunde | Zahlungsmethode | Zahlungsmittel |
---|---|---|
A | Kreditkartenaussteller 1 | ****1234 |
Kreditkartenaussteller 1 | ****4242 |
|
Bank X | ******123 |
|
B | Kreditkartenaussteller 2 | ****5678 |
Bank X | ******456 |
In der obigen Tabelle hat Kunde A beispielsweise für das webbasierte Wallet-Konto von Kunde A zwei Guthaben
Karten und ein Bankkonto registriert. In diesem Fall verarbeitet die App drei
Zahlungsmittel (****1234
, ****4242
, ******123
) und zwei Zahlungen
(Kreditkartenaussteller 1 und Bank X). Bei einer Zahlungstransaktion
App kann es dem Kunden ermöglichen, eines der Zahlungsmittel auszuwählen und damit zu bezahlen
für den Händler.
![Benutzeroberfläche für die Auswahl der Zahlungsmethode](https://web.developers.google.cn/static/articles/handling-optional-payment-information/image/payment-method-picker-ui-83cf9bfe052f4.png?authuser=6&hl=de)
Die Zahlungs-App kann dem Händler mitteilen, welche Zahlungsmethode der Kunde hat ausgewählt, bevor die vollständige Zahlungsantwort gesendet wird. Dies ist nützlich, wenn der der Händler eine Rabattkampagne für eine bestimmte Marke für Zahlungsmethoden durchführen möchte, .
Mit der Payment Handler API kann die Zahlungs-App eine „Änderung der Zahlungsmethode“ senden
über einen Service Worker an den Händler weiterzugeben, um die neue Zahlungsmethode zu benachrichtigen.
Kennung. Der Service Worker sollte
PaymentRequestEvent.changePaymentMethod()
mit der neuen Zahlungsmethode
Informationen.
![Händler über eine Änderung der Zahlungsmethode informieren](https://web.developers.google.cn/static/articles/handling-optional-payment-information/image/inform-merchant-a-payme-9ae9bd3b7b774.png?authuser=6&hl=de)
Zahlungs-Apps können ein methodDetails
-Objekt als optionales zweites Argument übergeben
für PaymentRequestEvent.changePaymentMethod()
. Dieses Objekt kann Folgendes enthalten:
Beliebige Details der Zahlungsmethode, die erforderlich sind, damit der Händler die Änderung vornehmen kann
.
<ph type="x-smartling-placeholder"></ph> [Zahlungs-Handler] service-worker.js
…
// Received a message from the frontend
self.addEventListener('message', async e => {
let details;
try {
switch (e.data.type) {
…
case 'PAYMENT_METHOD_CHANGED':
const newMethod = e.data.paymentMethod;
const newDetails = e.data.methodDetails;
// Redact or check that no sensitive information is passed in
// `newDetails`.
// Notify the merchant of the payment method change
details =
await payment_request_event.changePaymentMethod(newMethod, newDetails);
…
Wenn der Händler ein paymentmethodchange
-Ereignis von der Zahlung erhält
Request API können sie die Zahlungsdetails aktualisieren und mit einem
PaymentDetailsUpdate
-Objekt enthält.
<ph type="x-smartling-placeholder"></ph> [Händler]
request.addEventListener('paymentmethodchange', e => {
if (e.methodName === 'another-pay') {
// Apply $10 discount for example.
const discount = {
label: 'special discount',
amount: {
currency: 'USD',
// The value being string complies the spec
value: '-10.00'
}
};
let total = 0;
details.displayItems.push(discount);
for (let item of details.displayItems) {
total += parseFloat(item.amount.value);
}
// Convert the number back to string
details.total.amount.value = total.toString();
}
// Pass a promise to `updateWith()` and send updated payment details
e.updateWith(details);
});
Wenn der Händler antwortet,
PaymentRequestEvent.changePaymentMethod()
zurückgegeben wird, mit einer
PaymentRequestDetailsUpdate
-Objekt enthält.
<ph type="x-smartling-placeholder"></ph> [Zahlungs-Handler] service-worker.js
…
// Notify the merchant of the payment method change
details = await payment_request_event.changePaymentMethod(newMethod, newDetails);
// Provided the new payment details,
// send a message back to the frontend to update the UI
postMessage('UPDATE_REQUEST', details);
break;
…
Verwenden Sie das -Objekt, um die UI auf dem Front-End zu aktualisieren. Weitere Informationen finden Sie unter Zahlungsdetails
Händler über eine Änderung der Versandadresse informieren
Zahlungs-Apps können dem Händler im Rahmen des Programms die Versandadresse eines Kunden mitteilen Zahlungstransaktion.
Dies ist für Händler nützlich, da sie die Adresserfassung an Zahlungs-Apps. Da die Adressdaten in der Standard- Händler können davon ausgehen, Versandadressen mit einer einheitlichen Struktur zu erhalten.
Außerdem können Kunden ihre Adressinformationen bei ihrem bevorzugte Zahlungs-App und verwenden Sie sie für verschiedene Händler.
<ph type="x-smartling-placeholder">![Benutzeroberfläche zur Auswahl der Versandadresse](https://web.developers.google.cn/static/articles/handling-optional-payment-information/image/shipping-address-picker-u-2f452a9725ce3.png?authuser=6&hl=de)
Zahlungs-Apps können eine Benutzeroberfläche zum Bearbeiten einer Versandadresse oder zum Auswählen . Wenn eine Versandadresse vorübergehend ermittelt wird, kann die Zahlungs-App den den Händler über die gekürzten Adressinformationen informieren. So erhalten Händler mehrere Vorteile:
- Ein Händler kann feststellen, ob der Kunde die regionale Einschränkung erfüllt Versand des Artikels (z. B. nur im Inland)
- Händler können die Liste der Versandoptionen je nach Region des Versandadresse (z. B. internationaler regulärer oder Express-Versand).
- Ein Händler kann die neuen Versandkosten je nach Adresse anwenden und die Gesamtpreis.
Mit der Payment Handler API kann die Zahlungs-App
ändern“ vom Service Worker zur Benachrichtigung über den neuen Versand an den Händler.
Adresse. Der Service Worker sollte
PaymentRequestEvent.changeShippingAddress()
mit der neuen Adresse
.
![Händler über eine Änderung der Versandadresse informieren](https://web.developers.google.cn/static/articles/handling-optional-payment-information/image/inform-merchant-a-shipp-414e5048c9eb4.png?authuser=6&hl=de)
<ph type="x-smartling-placeholder"></ph> [Zahlungs-Handler] service-worker.js
...
// Received a message from the frontend
self.addEventListener('message', async e => {
let details;
try {
switch (e.data.type) {
…
case 'SHIPPING_ADDRESS_CHANGED':
const newAddress = e.data.shippingAddress;
details =
await payment_request_event.changeShippingAddress(newAddress);
…
Der Händler erhält ein shippingaddresschange
-Ereignis aus der Zahlung
Request API, damit das Team mit dem aktualisierten PaymentDetailsUpdate
antworten kann.
<ph type="x-smartling-placeholder"></ph> [Händler]
request.addEventListener('shippingaddresschange', e => {
// Read the updated shipping address and update the request.
const addr = request.shippingAddress;
const details = getPaymentDetailsFromShippingAddress(addr);
// `updateWith()` sends back updated payment details
e.updateWith(details);
});
Wenn der Händler antwortet,
PaymentRequestEvent.changeShippingAddress()
zurückgegeben wird, mit einer
PaymentRequestDetailsUpdate
-Objekt enthält.
<ph type="x-smartling-placeholder"></ph> [Zahlungs-Handler] service-worker.js
…
// Notify the merchant of the shipping address change
details = await payment_request_event.changeShippingAddress(newAddress);
// Provided the new payment details,
// send a message back to the frontend to update the UI
postMessage('UPDATE_REQUEST', details);
break;
…
Verwenden Sie das -Objekt, um die UI auf dem Front-End zu aktualisieren. Weitere Informationen finden Sie unter Zahlungsdetails
Händler über eine Änderung der Versandoption informieren
Versandoptionen sind Versandmethoden, die Händler verwenden, um gekaufte Artikel an Kunden zu versenden. Gängige Versandoptionen:
- Kostenloser Versand
- Expressversand
- Internationaler Versand
- Internationaler Premiumversand
Jedes ist mit eigenen Kosten verbunden. Normalerweise sind schnellere Methoden/Optionen teurer.
Händler, die die Payment Request API verwenden, können diese Auswahl an eine Zahlung delegieren Anhand dieser Informationen kann die Zahlungs-App eine Benutzeroberfläche erstellen und die eine Versandoption auszuwählen.
<ph type="x-smartling-placeholder">![Benutzeroberfläche zur Auswahl der Versandoption](https://web.developers.google.cn/static/articles/handling-optional-payment-information/image/shipping-option-picker-ui-a337c6acfbf94.png?authuser=6&hl=de)
Die Liste der Versandoptionen in der Payment Request API des Händlers lautet
wird als Eigenschaft von an den Service Worker der Zahlungs-App weitergegeben.
PaymentRequestEvent
<ph type="x-smartling-placeholder"></ph> [Händler]
const request = new PaymentRequest([{
supportedMethods: 'https://bobbucks.dev/pay',
data: { transactionId: '****' }
}], {
displayItems: [{
label: 'Anvil L/S Crew Neck - Grey M x1',
amount: { currency: 'USD', value: '22.15' }
}],
shippingOptions: [{
id: 'standard',
label: 'Standard',
amount: { value: '0.00', currency: 'USD' },
selected: true
}, {
id: 'express',
label: 'Express',
amount: { value: '5.00', currency: 'USD' }
}],
total: {
label: 'Total due',
amount: { currency: 'USD', value : '22.15' }
}
}, { requestShipping: true });
Die Zahlungs-App kann dem Händler mitteilen, welche Versandoption der Kunde hat ausgewählt. Dies ist sowohl für den Händler als auch für den Kunden wichtig, Wenn Sie die Versandoption ändern, ändert sich auch der Gesamtpreis. Der Händler benötigt werden Sie später über den aktuellen Preis für die Zahlungsbestätigung informiert. muss die Kundschaft auch über die Änderung informiert sein.
Mit der Payment Handler API kann die Zahlungs-App eine Versandoption
ändern“ vom Service Worker an den Händler gesendet. Der Service Worker sollte
aufrufen
PaymentRequestEvent.changeShippingOption()
durch die neue Versandoptionen-ID.
![Händler über eine Änderung der Versandoption informieren](https://web.developers.google.cn/static/articles/handling-optional-payment-information/image/inform-merchant-a-shipp-8f67c21bfb63e.png?authuser=6&hl=de)
<ph type="x-smartling-placeholder"></ph> [Zahlungs-Handler] service-worker.js
…
// Received a message from the frontend
self.addEventListener('message', async e => {
let details;
try {
switch (e.data.type) {
…
case 'SHIPPING_OPTION_CHANGED':
const newOption = e.data.shippingOptionId;
details =
await payment_request_event.changeShippingOption(newOption);
…
Der Händler erhält ein shippingoptionchange
-Ereignis aus der Zahlung
API anfordern Der Händler sollte die Informationen verwenden, um den Gesamtpreis zu aktualisieren
und dann mit dem aktualisierten
PaymentDetailsUpdate
<ph type="x-smartling-placeholder"></ph> [Händler]
request.addEventListener('shippingoptionchange', e => {
// selected shipping option
const shippingOption = request.shippingOption;
const newTotal = {
currency: 'USD',
label: 'Total due',
value: calculateNewTotal(shippingOption),
};
// `updateWith()` sends back updated payment details
e.updateWith({ total: newTotal });
});
Wenn der Händler antwortet,
PaymentRequestEvent.changeShippingOption()
zurückgegeben wird, mit einer
PaymentRequestDetailsUpdate
-Objekt enthält.
<ph type="x-smartling-placeholder"></ph> [Zahlungs-Handler] service-worker.js
…
// Notify the merchant of the shipping option change
details = await payment_request_event.changeShippingOption(newOption);
// Provided the new payment details,
// send a message back to the frontend to update the UI
postMessage('UPDATE_REQUEST', details);
break;
…
Verwenden Sie das -Objekt, um die UI auf dem Front-End zu aktualisieren. Weitere Informationen finden Sie unter Zahlungsdetails
Aktualisierte Zahlungsdetails berücksichtigen
Sobald der Händler die Zahlungsdetails aktualisiert hat, wurden die Versprechen zurückgegeben.
von .changePaymentMethod()
, .changeShippingAddress()
und
.changeShippingOption()
wird mit einer gemeinsamen
PaymentRequestDetailsUpdate
-Objekt enthält. Der Zahlungs-Handler kann anhand des Ergebnisses den aktualisierten Gesamtpreis wiedergeben.
und Versandoptionen in der Benutzeroberfläche.
Händler können aus verschiedenen Gründen Fehler zurückgeben:
- Die Zahlungsmethode wird nicht akzeptiert.
- Die Versandadresse befindet sich außerhalb der unterstützten Regionen.
- Die Versandadresse enthält ungültige Informationen.
- Die Versandoption kann für die angegebene Versandadresse oder aus einem anderen Grund.
Verwenden Sie die folgenden Attribute, um den Fehlerstatus widerzuspiegeln:
error
: menschenlesbarer Fehlerstring. Dies ist der beste String für die Anzeige für die Kundschaft.shippingAddressErrors
:AddressErrors
Objekt, das einen detaillierten Fehlerstring pro Adressattribut enthält. Dies ist nützlich, wenn Sie ein Formular öffnen möchten, in dem der Kunde seine Adresse bearbeiten kann und Sie müssen direkt auf die ungültigen Felder verweisen.paymentMethodErrors
: Methodenspezifisches Fehlerobjekt Du kannst fragen Händler einen strukturierten Fehler zur Verfügung stellen, aber die Autoren der empfehlen wir, einen einfachen String zu verwenden.
Beispielcode
Die meisten Beispielcodes, die Sie in diesem Dokument gesehen haben, sind Auszüge aus funktionierende Beispiel-App:
https://paymenthandler-demo.glitch.me
<ph type="x-smartling-placeholder"></ph> [Zahlungs-Handler] Service Worker
<ph type="x-smartling-placeholder"></ph> [Zahlungs-Handler] Frontend
Probieren Sie es aus:
- Rufen Sie https://paymentrequest-demo.glitch.me/ auf.
- Sehen Sie sich den Bereich ganz unten auf der Seite an.
- Klicken Sie auf Zahlungsschaltfläche hinzufügen.
- Geben Sie
https://paymenthandler-demo.glitch.me
in das Feld ID der Zahlungsmethode ein. - Klicken Sie neben dem Feld auf die Schaltfläche Bezahlen.