diff --git a/files/en-us/_redirects.txt b/files/en-us/_redirects.txt index 0ca8007636a6d27..93932ac3d408853 100644 --- a/files/en-us/_redirects.txt +++ b/files/en-us/_redirects.txt @@ -8743,7 +8743,11 @@ /en-US/docs/Web/API/PaymentDetailsUpdate/error /en-US/docs/Web/API/PaymentRequestUpdateEvent/updateWith /en-US/docs/Web/API/PaymentDetailsUpdate/shippingAddressErrors /en-US/docs/Web/API/PaymentRequestUpdateEvent/updateWith /en-US/docs/Web/API/PaymentItem /en-US/docs/Web/API/PaymentRequest/show -/en-US/docs/Web/API/PaymentRequest/PaymentRequest.onmerchantvalidation /en-US/docs/Web/API/PaymentRequest/onmerchantvalidation +/en-US/docs/Web/API/PaymentRequest/PaymentRequest.onmerchantvalidation /en-US/docs/Web/API/PaymentRequest/merchantvalidation_event +/en-US/docs/Web/API/PaymentRequest/onmerchantvalidation /en-US/docs/Web/API/PaymentRequest/merchantvalidation_event +/en-US/docs/Web/API/PaymentRequest/onpaymentmethodchange /en-US/docs/Web/API/PaymentRequest/paymentmethodchange_event +/en-US/docs/Web/API/PaymentRequest/onshippingaddresschange /en-US/docs/Web/API/PaymentRequest/shippingaddresschange_event +/en-US/docs/Web/API/PaymentRequest/onshippingoptionchange /en-US/docs/Web/API/PaymentRequest/shippingoptionchange_event /en-US/docs/Web/API/PaymentRequest/shippingaddresschange /en-US/docs/Web/API/PaymentRequest/shippingaddresschange_event /en-US/docs/Web/API/PaymentRequestEvent/topLevelOrigin /en-US/docs/Web/API/PaymentRequestEvent/topOrigin /en-US/docs/Web/API/PaymentResponse/onpayerdetailchange /en-US/docs/Web/API/PaymentResponse/payerdetailchange_event diff --git a/files/en-us/_wikihistory.json b/files/en-us/_wikihistory.json index 50a9426558831ad..54e5a5c1d8db561 100644 --- a/files/en-us/_wikihistory.json +++ b/files/en-us/_wikihistory.json @@ -64958,45 +64958,6 @@ "rsolomakhin" ] }, - "Web/API/PaymentRequest/onmerchantvalidation": { - "modified": "2020-10-15T22:08:42.855Z", - "contributors": [ - "sideshowbarker", - "rsolomakhin", - "Sheppy", - "marcoscaceres" - ] - }, - "Web/API/PaymentRequest/onpaymentmethodchange": { - "modified": "2020-10-15T22:06:08.345Z", - "contributors": [ - "Sheppy", - "marcoscaceres" - ] - }, - "Web/API/PaymentRequest/onshippingaddresschange": { - "modified": "2020-10-15T21:48:28.422Z", - "contributors": [ - "Sheppy", - "samouss", - "fscholz", - "jpmedley", - "chrisdavidmills", - "dgashmdn" - ] - }, - "Web/API/PaymentRequest/onshippingoptionchange": { - "modified": "2020-10-15T21:48:27.044Z", - "contributors": [ - "marcoscaceres", - "samouss", - "fscholz", - "jpmedley", - "chrisdavidmills", - "libbymc", - "dgashmdn" - ] - }, "Web/API/PaymentRequest/paymentmethodchange_event": { "modified": "2020-10-15T22:08:31.709Z", "contributors": [ diff --git a/files/en-us/web/api/paymentrequest/index.md b/files/en-us/web/api/paymentrequest/index.md index b1a083a9f9563e2..8c3e91f010a7f25 100644 --- a/files/en-us/web/api/paymentrequest/index.md +++ b/files/en-us/web/api/paymentrequest/index.md @@ -50,16 +50,12 @@ The [Payment Request API's](/en-US/docs/Web/API/Payment_Request_API) **`PaymentR - {{domxref("PaymentRequest.merchantvalidation_event", "merchantvalidation")}} {{securecontext_inline}} - : With some payment handlers (e.g., Apple Pay), this event handler is called to handle the {{event("merchantvalidation")}} event, which is dispatched when the user agent requires that the merchant validate that the merchant or vendor requesting payment is legitimate. - Also available using the {{domxref("PaymentRequest.onmerchantvalidation", "onmerchantvalidation")}} event handler property. - {{domxref("PaymentRequest.paymentmethodchange_event", "paymentmethodchange")}} {{securecontext_inline}} - : With some payment handlers (e.g., Apple Pay), dispatched whenever the user changes payment instrument, like switching from a credit card to a debit card. - Also available using the {{domxref("PaymentRequest.onpaymentmethodchange", "onpaymentmethodchange")}} event handler property. - {{domxref("PaymentRequest.shippingaddresschange_event", "shippingaddresschange")}} {{securecontext_inline}}{{deprecated_inline}} - : Dispatched whenever the user changes their shipping address. - Also available using the {{domxref("PaymentRequest.onshippingaddresschange", "onshippingaddresschange")}} event handler property. - {{domxref("PaymentRequest.shippingoptionchange_event", "shippingoptionchange")}} {{securecontext_inline}}{{deprecated_inline}} - : Dispatched whenever the user changes a shipping option. - Also available using the {{domxref("PaymentRequest.onshippingoptionchange", "onshippingoptionchange")}} event handler property. ## Specifications diff --git a/files/en-us/web/api/paymentrequest/merchantvalidation_event/index.md b/files/en-us/web/api/paymentrequest/merchantvalidation_event/index.md index e54bc8fa95daf4b..16f8aaac31a7e94 100644 --- a/files/en-us/web/api/paymentrequest/merchantvalidation_event/index.md +++ b/files/en-us/web/api/paymentrequest/merchantvalidation_event/index.md @@ -12,7 +12,7 @@ tags: - Sales - Validation - Web - - events + - Event - merchantvalidation - payment browser-compat: api.PaymentRequest.merchantvalidation_event @@ -23,28 +23,30 @@ browser-compat: api.PaymentRequest.merchantvalidation_event See {{SectionOnPage("/en-US/docs/Web/API/Payment_Request_API/Concepts", "Merchant validation")}} for details on how the merchant validation process works. - - - - - - - - - - - - - - - - - - - -
BubblesNo
CancelableNo
Interface{{domxref("MerchantValidationEvent")}}
Event handler property - {{domxref("PaymentRequest.onmerchantvalidation", "onmerchantvalidation")}} -
+This event is not cancelable and does not bubble. + +## Syntax + +Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property. + +```js +addEventListener('merchantvalidation', event => { }); + +onmerchantvalidation = event => { }; +``` + +## Event type + +An {{domxref("MerchantValidationEvent")}}. Inherits from {{domxref("Event")}}. + +{{InheritanceDiagram("MerchantValidationEvent")}} + +## Event properties + +- {{domxref("MerchantValidationEvent.methodName")}} {{securecontext_inline}} + - : A {{domxref("DOMString")}} providing a unique payment method identifier for the payment handler that's requiring validation. This may be either one of the standard payment method identifier strings or a URL that both identifies and handles requests for the payment handler, such as `https://apple.com/apple-pay`. +- {{domxref("MerchantValidationEvent.validationURL")}} {{securecontext_inline}} + - : A {{domxref("USVString")}} specifying a URL from which the site or app can fetch payment handler specific validation information. Once this data is retrieved, the data (or a promise resolving to the validation data) should be passed into {{domxref("MerchantValidationEvent.complete", "complete()")}} to validate that the payment request is coming from an authorized merchant. ## Examples @@ -65,7 +67,7 @@ const response = await request.show(); How merchant server handles the validation depends on the server implementation and payment method documentation. The content delivered by the validation server is forwarded to the merchant server and is then returned from the `fetch()` call's fulfillment handler to the {{domxref("MerchantValidationEvent.complete", "complete()")}} method on the event. This response lets the payment handler know if the merchant is validated. -You can also use the {{domxref("PaymentRequest.onmerchantvalidation", "onmerchantvalidation")}} event handler property to set up the handler for this event: +You can also use the `onmerchantvalidation` event handler property to set up the handler for this event: ```js request.onmerchantvalidation = event => { @@ -82,10 +84,6 @@ const response = await request.show(); For more information, see {{SectionOnPage("/en-US/docs/Web/API/Payment_Request_API/Concepts", "Merchant Validation")}}. -## Related events - -- {{event("payerdetailchange")}}, {{event("paymentmethodchange")}}, {{event("shippingaddresschange")}}, and {{event("shippingoptionchange")}} - ## Browser compatibility {{Compat}} @@ -94,6 +92,10 @@ For more information, see {{SectionOnPage("/en-US/docs/Web/API/Payment_Request_A - [Payment Request API](/en-US/docs/Web/API/Payment_Request_API) - [Using the Payment Request API](/en-US/docs/Web/API/Payment_Request_API/Using_the_Payment_Request_API) -- {{domxref("PaymentRequest.onmerchantvalidation", "onmerchantvalidation")}} event handler property +- `onmerchantvalidation` event handler property - {{SectionOnPage("/en-US/docs/Web/API/Payment_Request_API/Concepts", "Merchant validation")}} - {{domxref("PaymentRequest")}} +- {{domxref("PaymentRequest.payerdetailchange_event", "payerdetailchange")}} event +- {{domxref("PaymentRequest.paymentmethodchange_event", "paymentmethodchange")}} event +- {{domxref("PaymentRequest.shippingaddresschange_event", "shippingaddresschange")}} event +- {{domxref("PaymentRequest.shippingoptionchange_event", "shippingoptionchange")}} event diff --git a/files/en-us/web/api/paymentrequest/onmerchantvalidation/index.md b/files/en-us/web/api/paymentrequest/onmerchantvalidation/index.md deleted file mode 100644 index 0de0d3c5d876a37..000000000000000 --- a/files/en-us/web/api/paymentrequest/onmerchantvalidation/index.md +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: PaymentRequest.onmerchantvalidation -slug: Web/API/PaymentRequest/onmerchantvalidation -tags: - - API - - Commerce - - Event Handler - - Payment Method - - Payment Request API - - PaymentRequest - - Property - - Reference - - onmerchantvalidation - - payment -browser-compat: api.PaymentRequest.onmerchantvalidation ---- -{{deprecated_header}}{{non-standard_header}}{{securecontext_header}} - -The {{domxref("PaymentRequest")}} event handler -**`onmerchantvalidation`** is invoked when the -{{event("merchantvalidation")}} is fired, indicating that the payment handler -(e.g., Apple Pay) requires the merchant to validate themselves. - -This is usually the -first event to be fired, and the user won't be able to proceed with a payment until the -merchant validate themselves. - -This event is not be fired by all payment handlers. In particular, it's used by Apple -Pay. - -## Syntax - -```js -paymentRequest.onmerchantvalidation = eventHandlerFunction; -``` - -### Value - -An event handler function which is to be called whenever the -{{event("merchantvalidation")}} event is fired at the {{domxref("PaymentRequest")}}, -indicating that the payment handler requires the merchant to validate themselves as -allowed to use this payment handler. - -## Examples - -An example merchant validation handler for the {{domxref("PaymentRequest")}} object -`request` looks like this: - -```js -request.onmerchantvalidation = ev => { - ev.complete(async () => { - const merchantServerUrl = window.location.origin + - '/validation?url=' + encodeURIComponent(ev.validationURL); - // get validation data, and complete validation; - return await fetch(merchantServerUrl).then(r => r.text()); - }) -}; - -const response = await request.show(); -``` - -For more information, see -{{SectionOnPage("/en-US/docs/Web/API/Payment_Request_API/Concepts", "Merchant - Validation")}}. - -## Browser compatibility - -{{Compat}} diff --git a/files/en-us/web/api/paymentrequest/onpaymentmethodchange/index.md b/files/en-us/web/api/paymentrequest/onpaymentmethodchange/index.md deleted file mode 100644 index f8149af19d23840..000000000000000 --- a/files/en-us/web/api/paymentrequest/onpaymentmethodchange/index.md +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: PaymentRequest.onpaymentmethodchange -slug: Web/API/PaymentRequest/onpaymentmethodchange -tags: - - API - - Commerce - - Event Handler - - Payment Method - - PaymentRequest - - Property - - Reference - - onpaymentmethodchange - - payment -browser-compat: api.PaymentRequest.onpaymentmethodchange ---- -{{securecontext_header}}{{APIRef("Payment Request API")}} - -The {{domxref("PaymentRequest")}} event handler -**`onpaymentmethodchange`** is invoked when the -{{event("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 - -```js -PaymentRequest.addEventListener('paymentmethodchange', paymentMethodChangeEvent => { /* ... */ }); - -PaymentRequest.onpaymentmethodchange = function(paymentMethodChangeEvent) { /* ... */ }; -``` - -### Value - -An event handler function which is to be called whenever the -{{event("paymentmethodchange")}} event is fired at the {{domxref("PaymentRequest")}}, -indicating that the user has changed payment methods within the same payment handler. - -The {{event("paymentmethodchange")}} event is triggered by a user-agent controlled -interaction (e.g., the end-user switches from a debit to a credit card in the payment -app). To make sure you receive the event, you should add event listeners to -{{domxref('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: - -```js -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 - -{{Specifications}} - -## Browser compatibility - -{{Compat}} diff --git a/files/en-us/web/api/paymentrequest/onshippingaddresschange/index.md b/files/en-us/web/api/paymentrequest/onshippingaddresschange/index.md deleted file mode 100644 index 34ac95485c2678e..000000000000000 --- a/files/en-us/web/api/paymentrequest/onshippingaddresschange/index.md +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: PaymentRequest.onshippingaddresschange -slug: Web/API/PaymentRequest/onshippingaddresschange -tags: - - API - - Event Handler - - Experimental - - Payment Request - - Payment Request API - - Property - - Reference - - Secure context - - onshippingaddresschange -browser-compat: api.PaymentRequest.onshippingaddresschange ---- -{{securecontext_header}}{{APIRef("Payment Request API")}}{{Deprecated_header}}{{Non-standard_header}} - -The **`onshippingaddresschange`** event of the -{{domxref("PaymentRequest")}} interface is fired whenever the user changes their -shipping address, including when an address is added by the user for the first time. - -## Syntax - -```js -PaymentRequest.addEventListener('shippingaddresschange', shippingAddressChangeEvent => { /* ... */ }); - -PaymentRequest.onshippingaddresschange = function(shippingAddressChangeEvent) { /* ... */ }; -``` - -## Examples - -The `shippingaddresschange` event is triggered by a user-agent controlled -interaction. If the address stored by the user agent changes at any time during a -payment process, the event is triggered. To make sure an updated address is included -when sending payment information to the server, you should add event listeners for a -{{domxref('PaymentRequest')}} object after instantiation, but before the call -to `show()`. - -```js -// Initialization of PaymentRequest arguments are excerpted for clarity. -var payment = new PaymentRequest(supportedInstruments, details, options); - -request.addEventListener('shippingaddresschange', function(evt) { - evt.updateWith(new Promise(function(resolve) { - updateDetails(details, request.shippingAddress, resolve); - })); -}); - -payment.show().then(function(paymentResponse) { - // Processing of paymentResponse excerpted for the same of clarity. -}).catch(function(err) { - console.error("Uh oh, something bad happened", err.message); -}); -``` - -## Browser compatibility - -{{Compat}} diff --git a/files/en-us/web/api/paymentrequest/onshippingoptionchange/index.md b/files/en-us/web/api/paymentrequest/onshippingoptionchange/index.md deleted file mode 100644 index 3d34ea04de38bb7..000000000000000 --- a/files/en-us/web/api/paymentrequest/onshippingoptionchange/index.md +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: PaymentRequest.onshippingoptionchange -slug: Web/API/PaymentRequest/onshippingoptionchange -tags: - - API - - Event Handler - - Experimental - - Payment Request - - Payment Request API - - Reference - - Secure context - - onshippingoptionchange -browser-compat: api.PaymentRequest.onshippingoptionchange ---- -{{securecontext_header}}{{APIRef("Payment Request API")}}{{Deprecated_header}}{{Non-standard_header}} - -The **`onshippingoptionchange`** event of the -{{domxref("PaymentRequest")}} interface is fired whenever the user changes a shipping -option. - -## Syntax - -```js -PaymentRequest.addEventListener('shippingoptionchange', shippingOptionChangeEvent => { /* ... */ }); - -PaymentRequest.onshippingoptionchange = function(shippingOptionChangeEvent) { /* ... */ }; -``` - -## Examples - -The `shippingoptionchange` event is triggered by a user-agent controlled -interaction. If the option stored by the user agent changes at any time during a payment -process, the event is triggered. To make sure an updated option is included when sending -payment information to the server, you should add event listeners for a -{{domxref('PaymentRequest')}} object after instantiation, but before the call -to `show()`. - -```js -// Initialization of PaymentRequest arguments are excerpted for clarity. -var request = new PaymentRequest(supportedInstruments, details, options); - -// When user selects a shipping address -request.addEventListener('shippingaddresschange', e => { - e.updateWith(((details, addr) => { - var shippingOption = { - id: '', - label: '', - amount: { currency: 'USD', value: '0.00' }, - selected: true - }; - // Shipping to US is supported - if (addr.country === 'US') { - shippingOption.id = 'us'; - shippingOption.label = 'Standard shipping in US'; - shippingOption.amount.value = '0.00'; - details.total.amount.value = '55.00'; - // Shipping to JP is supported - } else if (addr.country === 'JP') { - shippingOption.id = 'jp'; - shippingOption.label = 'International shipping'; - shippingOption.amount.value = '10.00'; - details.total.amount.value = '65.00'; - // Shipping to elsewhere is unsupported - } else { - // Empty array indicates rejection of the address - details.shippingOptions = []; - return Promise.resolve(details); - console.log(details.error); - } - // Hardcode for simplicity - if (details.displayItems.length === 2) { - details.displayItems[2] = shippingOption; - } else { - details.displayItems.push(shippingOption); - } - details.shippingOptions = [shippingOption]; - - return Promise.resolve(details); - })(details, request.shippingAddress)); -}); -``` - -## Browser compatibility - -{{Compat}} diff --git a/files/en-us/web/api/paymentrequest/paymentmethodchange_event/index.md b/files/en-us/web/api/paymentrequest/paymentmethodchange_event/index.md index 0e16a649bf3ba89..e6d472fdab89460 100644 --- a/files/en-us/web/api/paymentrequest/paymentmethodchange_event/index.md +++ b/files/en-us/web/api/paymentrequest/paymentmethodchange_event/index.md @@ -13,32 +13,36 @@ browser-compat: api.PaymentRequest.paymentmethodchange_event --- {{APIRef}} -**`paymentmethodchange`** events are delivered by the [Payment Request API](/en-US/docs/Web/API/Payment_Request_API) to a {{domxref("PaymentRequest")}} object when the user changes payment methods within a given payment handler. +The **`paymentmethodchange`** event is delivered the [Payment Request API](/en-US/docs/Web/API/Payment_Request_API) to a {{domxref("PaymentRequest")}} object when the user changes the payment method within a given payment handler. For example, if the user switches from one credit card to another on their [Apple Pay](https://www.apple.com/apple-pay/) account, a `paymentmethodchange` event is fired to let you know about the change. - - - - - - - - - - - - - - - - - - - -
BubblesNo
CancelableNo
Interface{{domxref("PaymentMethodChangeEvent")}}
Event handler property - {{domxref("PaymentRequest.onpaymentmethodchange", "onpaymentmethodchange")}} -
+This event is not cancelable and does not bubble. + +## Syntax + +Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property. + +```js +addEventListener('paymentmethodchange', event => { }); + +onpaymentmethodchange = event => { }; +``` + +## Event type + +An {{domxref("PaymentMethodChangeEvent")}}. Inherits from {{domxref("Event")}}. + +{{InheritanceDiagram("PaymentMethodChangeEvent")}} + +## Event properties + +_In addition to the properties below, this interface includes properties inherited from {{domxref("PaymentRequestUpdateEvent")}}._ + +- {{domxref("PaymentMethodChangeEvent.methodDetails", "methodDetails")}} {{ReadOnlyInline}} {{securecontext_inline}} + - : An object containing payment method-specific data useful when handling a payment method change. If no such information is available, this value is `null`. +- {{domxref("PaymentMethodChangeEvent.methodName", "methodName")}} {{ReadOnlyInline}} {{securecontext_inline}} + - : A {{domxref("DOMString")}} containing the payment method identifier, a string which uniquely identifies a particular payment method. This identifier is usually a URL used during the payment process, but may be a standardized non-URL string as well, such as `basic-card`. The default value is the empty string, `""`. ## Examples @@ -80,10 +84,6 @@ This begins by looking at the event's {{domxref("PaymentMethodChangeEvent.method Before the event handler returns, it calls the event's {{domxref("PaymentMethodChangeEvent.updateWith()")}} method to integrate the changes into the request. -## Related events - -- {{event("merchantvalidation")}}, {{event("shippingaddresschange")}}, {{event("shippingoptionchange")}}, and {{event("payerdetailchange")}} - ## Specifications {{Specifications}} @@ -96,5 +96,7 @@ Before the event handler returns, it calls the event's {{domxref("PaymentMethodC - [Payment Request API](/en-US/docs/Web/API/Payment_Request_API) - [Using the Payment Request API](/en-US/docs/Web/API/Payment_Request_API/Using_the_Payment_Request_API) -- {{domxref("PaymentRequest.onpaymentmethodchange", "onpaymentmethodchange")}} event handler property -- Related events: {{event("merchantvalidation")}}, {{event("payerdetailchange")}}, {{event("shippingaddresschange")}}, {{event("shippingoptionchange")}} +- {{domxref("PaymentRequest.merchantvalidation_event", "merchantvalidation")}} event +- {{domxref("PaymentRequest.payerdetailchange_event", "payerdetailchange")}} event +- {{domxref("PaymentRequest.shippingaddresschange_event", "shippingaddresschange")}} event +- {{domxref("PaymentRequest.shippingoptionchange_event", "shippingoptionchange")}} event diff --git a/files/en-us/web/api/paymentrequest/shippingaddress/index.md b/files/en-us/web/api/paymentrequest/shippingaddress/index.md index 4570370d52d9ee8..cf58d54d6d269ff 100644 --- a/files/en-us/web/api/paymentrequest/shippingaddress/index.md +++ b/files/en-us/web/api/paymentrequest/shippingaddress/index.md @@ -33,7 +33,7 @@ You can trigger this by setting the `PaymentRequest` constructor. In the example below, the cost of shipping varies by geography. When the -{{domxref('PaymentRequest.onshippingaddresschange')}} is +{{domxref('PaymentRequest.shippingaddresschange_event', 'shippingaddresschange')}} is called, `updateDetails()` is called to update the details of the `PaymentRequest`, using `shippingAddress` to set the correct shipping cost. diff --git a/files/en-us/web/api/paymentrequest/shippingaddresschange_event/index.md b/files/en-us/web/api/paymentrequest/shippingaddresschange_event/index.md index 570310128befc49..8fd863a3e5dc922 100644 --- a/files/en-us/web/api/paymentrequest/shippingaddresschange_event/index.md +++ b/files/en-us/web/api/paymentrequest/shippingaddresschange_event/index.md @@ -11,7 +11,7 @@ tags: - PaymentRequestUpdateEvent - Reference - Shipping - - events + - Event - payment - shippingaddresschange browser-compat: api.PaymentRequest.shippingaddresschange_event @@ -20,28 +20,27 @@ browser-compat: api.PaymentRequest.shippingaddresschange_event The **`shippingaddresschange`** event is sent to the {{domxref("PaymentRequest")}} object when the user selects a shipping address or changes details of their shipping address. - - - - - - - - - - - - - - - - - - - -
BubblesNo
CancelableNo
Interface{{domxref("PaymentRequestUpdateEvent")}}
Event handler property - {{domxref("PaymentRequest.onshippingaddresschange", "onshippingaddresschange")}} -
+This event is not cancelable and does not bubble. + +## Syntax + +Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property. + +```js +addEventListener('shippingaddresschange', event => { }); + +onshippingaddresschange = event => { }; +``` + +## Event type + +An {{domxref("PaymentRequestUpdateEvent")}}. Inherits from {{domxref("Event")}}. + +{{InheritanceDiagram("PaymentRequestUpdateEvent")}} + +## Event properties + +_Provides only the properties inherited from {{domxref("Event")}}._ ## Usage notes @@ -68,7 +67,7 @@ const checkAddress = theAddress => { }; ``` -You can also establish a handler for `shippingaddresschange` using the {{domxref("PaymentRequest.onshippingaddresschange", "onshippingaddresschange")}} event handler property: +You can also establish a handler for `shippingaddresschange` using the `onshippingaddresschange` event handler property: ```js paymentRequest.onshippingaddresschange = event => { @@ -80,7 +79,3 @@ paymentRequest.onshippingaddresschange = event => { ## Browser compatibility {{Compat}} - -## See also - -- {{domxref("PaymentRequest.onshippingaddresschange", "onshippingaddresschange")}} event handler property diff --git a/files/en-us/web/api/paymentrequest/shippingoption/index.md b/files/en-us/web/api/paymentrequest/shippingoption/index.md index e10c264f3349fa0..ef1e8119396deda 100644 --- a/files/en-us/web/api/paymentrequest/shippingoption/index.md +++ b/files/en-us/web/api/paymentrequest/shippingoption/index.md @@ -35,8 +35,8 @@ var shippingOption = request.shippingOption; ## Example -In the example below, the {{domxref('PaymentRequest.onshippingoptionchange')}} and -the {{domxref('PaymentRequest.onshippingaoptionchange')}} events are dispatched. In +In the example below, the {{domxref('PaymentRequest.shippingaddresschange_event', 'shippingaddresschange')}} and +the {{domxref('PaymentRequest.shippingoptionchange_event', 'shippingoptionchange')}} events are dispatched. In each calls to `updateDetails()` are made, one using a promise, and the other with a plain JS object. This demonstrates synchronous and asynchronous updates to a payment sheet. diff --git a/files/en-us/web/api/paymentrequest/shippingoptionchange_event/index.md b/files/en-us/web/api/paymentrequest/shippingoptionchange_event/index.md index 77658ca5d1a4a3a..3c68025b4df640c 100644 --- a/files/en-us/web/api/paymentrequest/shippingoptionchange_event/index.md +++ b/files/en-us/web/api/paymentrequest/shippingoptionchange_event/index.md @@ -9,7 +9,7 @@ tags: - PaymentRequest - Reference - Shipping - - events + - Event - onshippingoptionchange - payment - shippingoptionchange @@ -21,28 +21,27 @@ For payment requests that request shipping information, and for which shipping o The string identifying the currently-selected shipping option can be found in the {{domxref("PaymentRequest.shippingOption", "shippingOption")}} property. - - - - - - - - - - - - - - - - - - - -
BubblesNo
CancelableNo
Interface{{domxref("PaymentRequestUpdateEvent")}}
Event handler property - {{domxref("PaymentRequest.onshippingoptionchange", "onshippingoptionchange")}} -
+This event is not cancelable and does not bubble. + +## Syntax + +Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property. + +```js +addEventListener('shippingoptionchange', event => { }); + +onshippingoptionchange = event => { }; +``` + +## Event type + +An {{domxref("PaymentRequestUpdateEvent")}}. Inherits from {{domxref("Event")}}. + +{{InheritanceDiagram("PaymentRequestUpdateEvent")}} + +## Event properties + +_Provides only the properties inherited from {{domxref("Event")}}._ ## Examples @@ -62,7 +61,7 @@ paymentRequest.addEventListener("shippingoptionchange", event => { After calling a custom function, `calculateNewTotal()`, to compute the updated total based on the newly-selected shipping option as specified by the {{domxref("PaymentRequest.shippingOption", "shippingOption")}}. The revised total is submitted back to the payment request by calling the event's {{domxref("PaymentRequestUpdateEvent.updateWith", "updateWith()")}} method. -You can also create an event handler for `shippingoptionchange` using its corresponding event handler property, {{domxref("PaymentRequest.onshippingoptionchange", "onshippingoptionchange")}}: +You can also create an event handler for `shippingoptionchange` using its corresponding event handler property, `onshippingoptionchange`: ```js paymentRequest.onshippingoptionchange = event => { @@ -79,7 +78,3 @@ paymentRequest.onshippingoptionchange = event => { ## Browser compatibility {{Compat}} - -## See also - -- {{domxref("PaymentRequest.onshippingoptionchange", "onshippingoptionchange")}} event handler property diff --git a/files/en-us/web/api/paymentrequestupdateevent/index.md b/files/en-us/web/api/paymentrequestupdateevent/index.md index f0aeba0b56772c1..52eadf4f87df08a 100644 --- a/files/en-us/web/api/paymentrequestupdateevent/index.md +++ b/files/en-us/web/api/paymentrequestupdateevent/index.md @@ -18,10 +18,8 @@ The **`PaymentRequestUpdateEvent`** interface is used for events sent to a {{dom - {{domxref("PaymentRequest.shippingaddresschange_event", "shippingaddresschange")}} {{securecontext_inline}} - : Dispatched whenever the user changes their shipping address. - Also available using the {{domxref("PaymentRequest.onshippingaddresschange", "onshippingaddresschange")}} event handler property. - {{domxref("PaymentRequest.shippingoptionchange_event", "shippingoptionchange")}} {{securecontext_inline}} - : Dispatched whenever the user changes a shipping option. - Also available using the {{domxref("PaymentRequest.onshippingoptionchange", "onshippingoptionchange")}} event handler property. {{InheritanceDiagram}} diff --git a/files/en-us/web/api/paymentresponse/shippingaddress/index.md b/files/en-us/web/api/paymentresponse/shippingaddress/index.md index e3c43905dba0e07..f92609536d5b2ed 100644 --- a/files/en-us/web/api/paymentresponse/shippingaddress/index.md +++ b/files/en-us/web/api/paymentresponse/shippingaddress/index.md @@ -38,8 +38,8 @@ setting `PaymentOptions.requestShipping` to `true` when calling the {{domxref('PaymentRequest.paymentRequest','PaymentRequest')}} constructor. In the example below, the cost of shipping varies by geography. When the -{{domxref('PaymentRequest.onshippingaddresschange')}} is -called, `updateDetails()` is called to update the details of +{{domxref('PaymentRequest.shippingaddresschange_event', 'shippingaddresschange')}} event is +fired and caught, `updateDetails()` is called to update the details of the `PaymentRequest`, using `shippingAddress` to set the correct shipping cost. diff --git a/files/en-us/web/api/paymentresponse/shippingoption/index.md b/files/en-us/web/api/paymentresponse/shippingoption/index.md index 8123243cc3dddc4..b874dd92e488447 100644 --- a/files/en-us/web/api/paymentresponse/shippingoption/index.md +++ b/files/en-us/web/api/paymentresponse/shippingoption/index.md @@ -30,7 +30,7 @@ var shippingOption = PaymentRequest.shippingOption; ## Example -In the example below, the {{domxref('PaymentRequest.onshippingaoptionchange')}} event +In the example below, the {{domxref('PaymentRequest.shippingoptionchange_event', 'shippingoptionchange')}} event is called. It calls `updateDetails()` to toggle the shipping method between "standard" and "express".