Secure contextThis feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The PaymentRequest
event handler onpaymentmethodchange
is invoked when the paymentmethodchange
is fired, indicating that the user has changed payment methods within a given payment handler. For example, when using Apple Pay, the user can swipe to select different credit cards, debit cards, and so forth. Each time the user does so, this event is fired.
This event may not be fired by all payment handlers.
Syntax
PaymentRequest.addEventListener('paymentmethodchange', paymentMethodChangeEvent => { ... }); PaymentRequest.onpaymentmethodchange = function(paymentMethodChangeEvent) { ... };
Value
An event handler function which is to be called whenever the paymentmethodchange
event is fired at the PaymentRequest
, indicating that the user has changed payment methods within the same payment handler.
The paymentmethodchange
event is triggered by a user-agent controlled interaction (i.e., the end-user switches from a debit to a credit card in the payment UI). To make sure you receive the event, you should add event listeners to PaymentRequest
object after instantiation, but before you call show()
.
Examples
An example payment method change handler is shown below; this example handles changes made to the payment method when using Apple Pay, specifically:
request.onpaymentmethodchange = ev => {
const { type: cardType } = ev.methodDetails;
const newStuff = {};
if (ev.methodName === "https://apple.com/apple-pay") {
switch (cardType) {
case "store":
// do Apple Pay specific handling for store card...
// methodDetails contains the store card information
const result = calculateDiscount(ev.methodDetails);
Object.assign(newStuff, result);
break;
}
}
// finally...
ev.updateWith(newStuff);
};
const response = await request.show();
Specifications
Specification | Status | Comment |
Payment Request APIThe definition of 'onpaymentmethodchange' in that specification. | Candidate Recommendation | Initial definition. |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
onpaymentmethodchange
|
Chrome
Full support 76 |
Edge
Full support 79 |
Firefox No support No No support No Notes' Available only in nightly builds. |
IE
No support No |
Opera
Full support 47 |
Safari
Full support 12.1 |
WebView Android
No support No |
Chrome Android
Full support Yes |
Firefox Android No support No No support No Notes' Available only in nightly builds. |
Opera Android
Full support 44 |
Safari iOS
Full support Yes |
Samsung Internet Android
Full support Yes |
Legend
- Full support
- Full support
- No support
- No support
- See implementation notes.'
- See implementation notes.
PaymentRequest.onpaymentmethodchange by Mozilla Contributors is licensed under CC-BY-SA 2.5.