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.
PaymentRequest.show()
.then( paymentResponse => { ... })
.catch( error => { ... }) A Promise to a PaymentResponse object. The promise is resolved when the user accepts the payment request.
None.
| 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.
// Initialization of PaymentRequest arguments are excerpted for the sake of
// brevity.
var payment = new PaymentRequest(supportedInstruments, details, options);
payment.show().then(function(paymentResponse) {
// Process paymentResponse here, including sending payment to the server.
// paymentResponse.methodName contains the selected payment method
// paymentResponse.details contains a payment method specific response
paymentResponse.complete("success");
}).catch(function(err) {
console.error("Uh oh, something bad happened", err.message);
}); | Specification | Status | Comment |
|---|---|---|
| Payment Request API The definition of 'show()' in that specification. | Candidate Recommendation | Initial definition. |
| Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|---|
| Basic support | 61 | (Yes) | No support[1] | ? | No support | ? |
| Feature | Android Webview | Chrome for Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|---|
| Basic support | No support | 53 | (Yes) | No support[1] | ? | No support | ? |
[1] Supported since 55 but disabled on all versions. Hidden behind the dom.payments.request.enabled pref.
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/PaymentRequest/show