W3cubDocs

/Web APIs

ServiceWorkerGlobalScope: paymentrequest event

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The paymentrequest event of the ServiceWorkerGlobalScope interface is fired on a payment app when a payment flow has been initiated on the merchant website via the PaymentRequest.show() method.

Syntax

Use the event name in methods like addEventListener(), or set an event handler property.

js

addEventListener("paymentrequest", (event) => {});

onpaymentrequest = (event) => {};

Event type

Examples

When the PaymentRequest.show() method is invoked, a paymentrequest 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.

js

let payment_request_event;
let resolver;
let client;

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

  // ...
});

When a paymentrequest event is received, the payment app can open a payment handler window by calling PaymentRequestEvent.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.

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

Specifications

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
paymentrequest_event 70 79 No No 57 No No 70 No 49 No 10.0

See also

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerGlobalScope/paymentrequest_event