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.
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 aWindowClient
. respondWith()
Experimental-
Prevents the default event handling and allows you to provide a
Promise
for aPaymentResponse
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
Specification |
---|
Payment Handler API # the-paymentrequestevent |
Browser compatibility
BCD tables only load in the browser