Adapt PaymentRequest API to new events structure (#13891)

* Adapt PaymentRequest API to new events structure This PR adapts the PaymentRequest API to conform to the new events structure. * Apply suggestions from code review Co-authored-by: Jean-Yves Perrier <jypenator@gmail.com> * Apply suggestions from review * Add event properties sections * Update files/en-us/web/api/paymentrequest/shippingoptionchange_event/index.md Co-authored-by: Jean-Yves Perrier <jypenator@gmail.com> * Update files/en-us/web/api/paymentrequest/shippingaddresschange_event/index.md Co-authored-by: Jean-Yves Perrier <jypenator@gmail.com> Co-authored-by: Jean-Yves Perrier <jypenator@gmail.com>
mdn · Mar 17, 2022 · 96836c9 · 96836c9
1 parent 12c1865
commit 96836c9
Show file tree

Hide file tree

Showing 16 changed files with 119 additions and 457 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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.
 
-<table class="properties">
-  <tbody>
-    <tr>
-      <th scope="row">Bubbles</th>
-      <td>No</td>
-    </tr>
-    <tr>
-      <th scope="row">Cancelable</th>
-      <td>No</td>
-    </tr>
-    <tr>
-      <th scope="row">Interface</th>
-      <td>{{domxref("MerchantValidationEvent")}}</td>
-    </tr>
-    <tr>
-      <th scope="row">Event handler property</th>
-      <td>
-        {{domxref("PaymentRequest.onmerchantvalidation", "onmerchantvalidation")}}
-      </td>
-    </tr>
-  </tbody>
-</table>
+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
diff --git a/files/en-us/web/api/paymentrequest/onpaymentmethodchange/index.md b/files/en-us/web/api/paymentrequest/onpaymentmethodchange/index.md
diff --git a/files/en-us/web/api/paymentrequest/onshippingaddresschange/index.md b/files/en-us/web/api/paymentrequest/onshippingaddresschange/index.md