W3cubDocs

/Web APIs

PaymentRequestEvent

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

The PaymentRequestEvent interface of the Payment Request API is the object passed to a payment handler when a PaymentRequest is made.

Event ExtendableEvent PaymentRequestEvent

Constructor

PaymentRequestEvent() Experimental

Creates a new PaymentRequestEvent object instance.

Instance properties

instrumentKey Read only Deprecated Non-standard

Returns a PaymentInstrument object reflecting the payment instrument selected by the user or an empty string if the user has not registered or chosen a payment instrument.

methodData Read only Experimental

Returns an array of PaymentMethodData objects containing payment method identifiers for the payment methods that the website accepts and any associated payment method specific data.

modifiers Read only Experimental

Returns an array of objects containing changes to payment details.

paymentRequestId Read only Experimental

Returns the ID of the PaymentRequest object.

paymentRequestOrigin Read only Experimental

Returns the origin where the PaymentRequest object was initialized.

topOrigin Read only Experimental

Returns the top-level origin where the PaymentRequest object was initialized.

total Read only Experimental

Returns the total amount being requested for payment.

Instance methods

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 a WindowClient.

respondWith() Experimental

Prevents the default event handling and allows you to provide a Promise for a PaymentResponse object yourself.

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
PaymentRequestEvent 70 79 No No 57 No No 70 No 49 No 10.0
PaymentRequestEvent 70 79 No No 57 No No 70 No 49 No 10.0
changePaymentMethod 76 79 No No 63 No No 76 No 54 No 12.0
changeShippingAddress 80 80 No No 67 No No 80 No 57 No 13.0
changeShippingOption 80 80 No No 67 No No 80 No 57 No 13.0
instrumentKey 70–111 79–111 No No 57–97 No No 70–111 No 49 No 10.0–22.0
methodData 70 79 No No 57 No No 70 No 49 No 10.0
modifiers 70 79 No No 57 No No 70 No 49 No 10.0
openWindow 70 79 No No 57 No No 70 No 49 No 10.0
paymentOptions 80 80 No No 67 No No 80 No 57 No 13.0
paymentRequestId 70 79 No No 57 No No 70 No 49 No 10.0
paymentRequestOrigin 70 79 No No 57 No No 70 No 49 No 10.0
respondWith 70 79 No No 57 No No 70 No 49 No 10.0
shippingOptions 80 80 No No 67 No No 80 No 57 No 13.0
topOrigin 70 79 No No 57 No No 70 No 49 No 10.0
total 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/PaymentRequestEvent