Umgang mit optionalen Zahlungsinformationen mit einem Service Worker

Hier erfahren Sie, wie Sie Ihre webbasierte Zahlungsanwendung an Web Payments anpassen und so eine bessere Nutzererfahrung für Ihre Kunden bieten.

Eiji Kitamura

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> <ph type="x-smartling-placeholder">

Händler über eine Änderung der Zahlungsmethode informieren

Zahlungs-Apps unterstützen mehrere Zahlungsmittel mit unterschiedlichen Zahlungsmethoden.

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.

</ph> <ph type="x-smartling-placeholder">

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.

</ph> <ph type="x-smartling-placeholder">

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> <ph type="x-smartling-placeholder">

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 der Händler über die gekürzten Adressinformationen informiert. 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 .

</ph> <ph type="x-smartling-placeholder">

<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 der Informationen kann die Zahlungs-App eine Benutzeroberfläche erstellen und die eine Versandoption auszuwählen.

</ph> <ph type="x-smartling-placeholder">

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.

</ph> <ph type="x-smartling-placeholder">

<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:

1. Rufen Sie https://paymentrequest-demo.glitch.me/ auf.
2. Sehen Sie sich den Bereich ganz unten auf der Seite an.
3. Klicken Sie auf Zahlungsschaltfläche hinzufügen.
4. Geben Sie https://paymenthandler-demo.glitch.me in das Feld ID der Zahlungsmethode ein.
5. Klicken Sie neben dem Feld auf die Schaltfläche Bezahlen.