We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS


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

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

The PaymentRequest.show() method of the PaymentRequest interface causes the user agent to begin the user interaction for the payment request.

For security reason, the PaymentRequest.show() method must be "triggered by user activaton". That is, it can only be called as part of a click event, keyboard event, or similar user gesture. 


    .then( paymentResponse => { ... })
    .catch( error => { ... })


A Promise that eventually resolves with a PaymentResponse. The promise is resolved when the user accepts the payment request (i.e., when they hit "Pay" in the browser's payment sheet).


An optional PaymentDetailsUpdate dictionary or an optional Promise that resolves with a PaymentDetailsUpdate dictionary.


Exception Description
AbortError Promise rejects with an AbortError if the user agent's "payment request is showing" boolean is true; i.e. another payment has already been shown for this request.
InvalidStateError Promise rejects with an InvalidStateError if the same payment has already been shown for this request (its state is interactive because it is being shown already).
NotSupportedError Promise rejects with a NotSupportedError if the user agent does not support the payment methods included in the constructor call.
SecurityError Promise rejects with a SecurityError if the user agent disallows the method call for some reason (e.g. too many show() calls have been made in a short amount of time, or it doesn't allow show() calls that aren't initiated by a user action).


In the following example, a PaymentRequest object is instantiated before the show() method is called. This method triggers the user agent's built-in process for retrieving payment information from the user. The show() method returns a Promise that resolves to a PaymentResponse object when the user interaction is complete. The developer then uses the information in the PaymentResponse object to format and send payment data to the server. You should send the payment information to the server asynchronously so that the final call to paymentResponse.complete() can indicate the success or failure of the payment.

button.onclick = async function handlePurchase() {
  // Initialization of PaymentRequest arguments are excerpted for the sake of
  // brevity. 
  const payment = new PaymentRequest(methods, details, options);
  try {
    const response = await payment.show();
    // Process response here, including sending payment instrument
    // (e.g., credit card) information to the server.
    // paymentResponse.methodName contains the selected payment method
    // paymentResponse.details contains a payment method specific response
    await response.complete("success");
  } catch (err) {
    console.error("Uh oh, something bad happened", err.message);

The following example shows how to update the payment sheet as it's being presented to the end-user.

async function requestPayment() {
  // We start with AU$0 as the total.
  const initialDetails = {
    total: {
      label: "Total",
      amount: { value: "0", currency: "AUD" },
  const request = new PaymentRequest(methods, initialDetails, options);
  // Check if the the user supports the `methods`
  if (!await request.canMakePayment()) {
    return; // no, so use a web form instead.
  // Let's update the total as the sheet is shown
  const updatedDetails = {
    total: {
      label: "Total",
      amount: { value: "20", currency: "AUD" },
  const response = await request.show(updatedDetails);
  // Check response, etc...

document.getElementById("buyButton").onclick = requestPayment;


Specification Status Comment
Payment Request API
The definition of 'show(optional detailsPromise)' in that specification.
Candidate Recommendation Initial definition.

Browser Compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support6115551 No No ?
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support No53 Yes551 No ?6.0

1. From version 55: this feature is behind the dom.payments.request.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

See Also

Document Tags and Contributors

Last updated by: marcoscaceres,