PaymentRequestEvent
===================

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

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

Event

ExtendableEvent

PaymentRequestEventConstructor
-----------

`PaymentRequestEvent()` 
Experimental

Creates a new `PaymentRequestEvent` object instance.

Instance properties
-------------------

`instrumentKey` Read only  
Deprecated

Non-standard

Returns an 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 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
--------------

| Specification |
| --- |
| Payment Handler API # the-paymentrequestevent |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Web-based payment apps overview
* Setting up a payment method
* Life of a payment transaction
* Using the Payment Request API
* Payment processing concepts