ServiceWorkerGlobalScope: canmakepayment event

Limited availability

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

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

Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

Note: This feature is only available in Service Workers.

The canmakepayment event of the ServiceWorkerGlobalScope interface is fired on a payment app's service worker to check whether it is ready to handle a payment. Specifically, it is fired when the merchant website calls the PaymentRequest() constructor.

Syntax

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

js
addEventListener("canmakepayment", (event) => {});

oncanmakepayment = (event) => {};

Event type

A CanMakePaymentEvent. Inherits from ExtendableEvent.

Event ExtendableEvent CanMakePaymentEvent

Examples

The canmakepayment event is fired on a payment app's service worker to check whether it is ready to handle a payment. Specifically, it is fired when the merchant website calls the PaymentRequest() constructor. The service worker can then use the CanMakePaymentEvent.respondWith() method to respond appropriately:

js
self.addEventListener("canmakepayment", (e) => {
  e.respondWith(
    new Promise((resolve, reject) => {
      someAppSpecificLogic()
        .then((result) => {
          resolve(result);
        })
        .catch((error) => {
          reject(error);
        });
    }),
  );
});

respondWith() returns a Promise that resolves with a boolean value to signal that the service worker is ready to handle a payment request (true), or not (false).

Specifications

Specification
Payment Handler API
# the-canmakepaymentevent

Browser compatibility

BCD tables only load in the browser

See also