PaymentRequestEvent

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimental:This is anexperimental technology
Check theBrowser compatibility table carefully before using this in production.

Note: This feature is only available inService Workers.

ThePaymentRequestEvent interface of thePayment Handler API is the object passed to a payment handler when aPaymentRequest is made.

Constructor

PaymentRequestEvent()Experimental: Creates a newPaymentRequestEvent object instance.

Instance properties

methodDataRead onlyExperimental: Returns an array of objects containing payment method identifiers for the payment methods that the website accepts and any associated payment method specific data.
modifiersRead onlyExperimental: Returns an array of objects containing changes to payment details.
paymentRequestIdRead onlyExperimental: Returns the ID of the PaymentRequest object.
paymentRequestOriginRead onlyExperimental: Returns the origin where the PaymentRequest object was initialized.
topOriginRead onlyExperimental: Returns the top-level origin where the PaymentRequest object was initialized.
totalRead onlyExperimental: Returns the total amount being requested for payment.

Instance methods

changePaymentMethod()Experimental: Gets an updated total, given payment method details.
openWindow()Experimental: Opens the specified URL in a new window, if and only if the given URL is on the same origin as the calling page. It returns a Promise that resolves with a reference to aWindowClient.
respondWith()Experimental: Prevents the default event handling and allows you to provide a Promise for aPaymentResponse object yourself.

When thePaymentRequest.show() method is invoked, apaymentrequest event is fired on the service worker of the payment app. This event is listened for inside the payment app's service worker to begin the next stage of the payment process.

let paymentRequestEvent;let resolver;let client;// `self` is the global object in service workerself.addEventListener("paymentrequest", async (e) => {  if (paymentRequestEvent) {    // If there's an ongoing payment transaction, reject it.    resolver.reject();  }  // Preserve the event for future use  paymentRequestEvent = e;  // …});

When apaymentrequest event is received, the payment app can open a payment handler window by callingPaymentRequestEvent.openWindow(). The payment handler window will present the customers with a payment app interface where they can authenticate, choose shipping address and options, and authorize the payment.

When the payment has been handled,PaymentRequestEvent.respondWith() is used to pass the payment result back to the merchant website.

SeeReceive a payment request event from the merchant for more details of this stage.