PaymentRequest: paymentmethodchange Ereignis

Syntax

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignis-Handler-Eigenschaft.

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

onpaymentmethodchange = (event) => { }

Ereignistyp

Ein PaymentMethodChangeEvent. Erbt von Event.

Beispiele

Werfen wir einen Blick auf ein Beispiel. Dieser Code erstellt ein neues PaymentRequest, fügt einen Handler für das paymentmethodchange Ereignis hinzu, indem er die addEventListener()-Methode des Requests aufruft und anschließend show() aufruft, um die Zahlungsoberfläche dem Benutzer zu präsentieren.

Der Code geht von der Existenz einer Methode detailsForTransaction() aus, die ein Objekt zurückgibt, das als details-Argument 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 Ereignis-Handler-Funktion selbst, handlePaymentChange(), sieht folgendermaßen 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);
};

Dies beginnt, indem es die methodName-Eigenschaft des Ereignisses betrachtet; wenn diese anzeigt, dass der Benutzer versucht, Apple Pay zu verwenden, übergeben wir die methodDetails an eine Funktion namens calculateServiceFee(). Diese Funktion könnten wir erstellen, um die Informationen über die Transaktion, wie z. B. die zugrunde liegende Kreditkarte, die zur Bearbeitung der Apple Pay-Anfrage verwendet wird, zu nehmen und ein Objekt zu berechnen und zurückzugeben, das Änderungen angibt, die auf das PaymentRequest angewendet werden sollen, um gegebenenfalls erforderliche Servicegebühren für die Zahlungsmethode hinzuzufügen.

Bevor der Ereignis-Handler zurückkehrt, ruft er die updateWith()-Methode des Ereignisses auf, um die Änderungen in die Anfrage zu integrieren.

Spezifikationen

Browser-Kompatibilität

Siehe auch

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