PaymentRequest: paymentmethodchange-Ereignis

Syntax

Verwenden Sie den Ereignisnamen in addEventListener():

addEventListener("paymentmethodchange", (event) => { })

Alternativ können Sie ihn der Event-Handler-Eigenschaft der Schnittstelle zuweisen:

onpaymentmethodchange = (event) => { }

Ereignistyp

Ein PaymentMethodChangeEvent. Erbt von Event.

Beispiele

Betrachten wir ein Beispiel. Dieser Code erstellt ein neues PaymentRequest, fügt durch Aufruf von addEventListener() auf dem Request einen Handler für das Ereignis paymentmethodchange hinzu und ruft anschließend show() auf, um dem Benutzer die Zahlungsschnittstelle anzuzeigen.

Der Code setzt voraus, dass eine Methode detailsForTransaction() vorhanden ist. Sie gibt ein Objekt zurück, das als Argument details an den PaymentRequest-Konstruktor übergeben werden kann.

const paymentRequest = new PaymentRequest(
  paymentMethods,
  detailsForTransaction(),
);

paymentRequest.addEventListener("paymentmethodchange", handlePaymentChange);

paymentRequest
  .show()
  .then((response) => response.complete("success"))
  .catch((err) => console.error(`Error handling payment request: ${err}`));

Die Event-Handler-Funktion handlePaymentChange() selbst sieht so aus:

handlePaymentChange = (event) => {
  const detailsUpdate = {};

  if (event.methodName === "https://apple.com/apple-pay") {
    const serviceFeeInfo = calculateServiceFee(event.methodDetails);
    Object.assign(detailsUpdate, serviceFeeInfo);
  }

  event.updateWith(detailsUpdate);
};

Zunächst wird die Eigenschaft methodName des Ereignisses geprüft. Wenn sie anzeigt, dass der Benutzer Apple Pay verwenden möchte, übergeben wir methodDetails an eine Funktion namens calculateServiceFee(). Diese Funktion könnten wir so implementieren, dass sie anhand von Informationen zur Transaktion – etwa der Kreditkarte, mit der die Apple-Pay-Zahlung abgewickelt wird – ein Objekt berechnet und zurückgibt. Dieses Objekt legt die Änderungen fest, die am PaymentRequest vorgenommen werden müssen, um etwaige Gebühren der Zahlungsmethode hinzuzufügen.

Bevor der Event-Handler zurückkehrt, ruft er die Methode updateWith() des Ereignisses auf, um die Änderungen in den Request zu übernehmen.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Payment Request API
• Verwendung der Payment Request API
• Ereignis merchantvalidation
• Ereignis shippingaddresschange
• Ereignis shippingoptionchange