Adapt api.PaymentResponse.onpayerdetailchange to new events structure (…

…#13602) * Adapt api.PaymentResponse.onpayerdetailchange to new events structure This PR adapts the payerdetailchange event of the PaymentResponse API to conform to the new events structure. * Apply suggestions from code review Co-authored-by: Jean-Yves Perrier <[email protected]> * Apply suggestions from review comments Co-authored-by: Jean-Yves Perrier <[email protected]>
mdn · Mar 8, 2022 · 415fcf6 · 415fcf6
1 parent e467e00
commit 415fcf6
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 157 deletions.
diff --git a/files/en-us/_redirects.txt b/files/en-us/_redirects.txt
@@ -8712,6 +8712,7 @@
 /en-US/docs/Web/API/PaymentRequest/PaymentRequest.onmerchantvalidation	/en-US/docs/Web/API/PaymentRequest/onmerchantvalidation
 /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
 /en-US/docs/Web/API/PaymentResponse/payerdetail_event	/en-US/docs/Web/API/PaymentResponse/payerdetailchange_event
 /en-US/docs/Web/API/Performance.navigation	/en-US/docs/Web/API/Performance/navigation
 /en-US/docs/Web/API/Performance.now	/en-US/docs/Web/API/Performance/now

diff --git a/files/en-us/_wikihistory.json b/files/en-us/_wikihistory.json
@@ -65411,14 +65411,6 @@
       "dgashmdn"
     ]
   },
-  "Web/API/PaymentResponse/onpayerdetailchange": {
-    "modified": "2020-10-15T22:06:18.501Z",
-    "contributors": [
-      "chrisdavidmills",
-      "Sheppy",
-      "marcoscaceres"
-    ]
-  },
   "Web/API/PaymentResponse/payerEmail": {
     "modified": "2020-10-15T21:48:29.059Z",
     "contributors": [

diff --git a/files/en-us/web/api/paymentresponse/index.md b/files/en-us/web/api/paymentresponse/index.md
@@ -49,7 +49,6 @@ Listen to this event using [`addEventListener()`](/en-US/docs/Web/API/EventTarge
 
 - [`payerdetailchange`](/en-US/docs/Web/API/PaymentResponse/payerdetailchange_event){{securecontext_inline}}{{deprecated_inline}}
   - : Fired during a retry when the user makes changes to their personal information while filling out a payment request form. Allows the developer to revalidate any requested user data (e.g., the phone number or the email address) if it changes.
-    Also available via the [`onpayerdetailchange`](/en-US/docs/Web/API/PaymentResponse/onpayerdetailchange) property.
 
 ## Specifications
 

diff --git a/files/en-us/web/api/paymentresponse/onpayerdetailchange/index.md b/files/en-us/web/api/paymentresponse/onpayerdetailchange/index.md
diff --git a/files/en-us/web/api/paymentresponse/payerdetailchange_event/index.md b/files/en-us/web/api/paymentresponse/payerdetailchange_event/index.md
@@ -8,44 +8,39 @@ tags:
   - Reference
   - Response
   - Validation
-  - events
+  - Event
   - payerdetail
   - payment
   - validate
 browser-compat: api.PaymentResponse.payerdetailchange_event
 ---
 {{securecontext_header}}{{APIRef("Payment Request API")}}{{Deprecated_header}}{{Non-standard_header}}
 
-**`payerdetailchange`** events are delivered by the [Payment Request API](/en-US/docs/Web/API/Payment_Request_API) to a {{domxref("PaymentResponse")}} object when the user makes changes to their personal information while filling out a payment request form.
+A **`payerdetailchange`** event is fired by the [Payment Request API](/en-US/docs/Web/API/Payment_Request_API) to a {{domxref("PaymentResponse")}} object when the user makes changes to their personal information while filling out a payment request form. This can happen when the payer is retrying to submit its details after an error has been detected.
 
 The event handler for `payerdetailchange` should check each value in the form that has changed and ensure that the values are valid. If any are invalid, appropriate error messages should be configured and the {{domxref("PaymentResponse.retry", "retry()")}} method should be called on the {{domxref("PaymentResponse")}} to ask the user to update the invalid entries.
 
-<table class="properties">
-  <tbody>
-    <tr>
-      <th>Bubbles</th>
-      <td>No</td>
-    </tr>
-    <tr>
-      <th>Cancelable</th>
-      <td>No</td>
-    </tr>
-    <tr>
-      <th>Interface</th>
-      <td>{{DOMxRef("PaymentRequestUpdateEvent")}}</td>
-    </tr>
-    <tr>
-      <th>Event handler property</th>
-      <td>
-        <code
-          ><a href="/en-US/docs/Web/API/PaymentResponse/onpayerdetailchange"
-            >onpayerdetailchange</a
-          ></code
-        >
-      </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('payerdetailchange', async event => { });
+
+onpayerdetailchange = async event => { };
+```
+
+## Event type
+
+A {{domxref("PaymentRequestUpdateEvent")}}. Inherits from {{domxref("Event")}}.
+
+{{InheritanceDiagram("PaymentRequestUpdateEvent")}}
+
+## Event properties
+
+Although this event type is {{domxref("PaymentRequestUpdateEvent")}}, it doesn't implement any property that is not already on {{domxref("Event")}}. 
 
 ## Examples
 
@@ -141,7 +136,6 @@ response.addEventListener("payerdetailchange", async ev => {
 - [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("PaymentResponse")}}
-- [`payerdetailchange`](/en-US/docs/Web/API/PaymentResponse/payerdetailchange_event)
 - [`paymentmethodchange`](/en-US/docs/Web/API/PaymentRequest/paymentmethodchange_event)
 - [`shippingaddresschange`](/en-US/docs/Web/API/PaymentRequest/shippingaddresschange_event)
 - [`shippingoptionchange`](/en-US/docs/Web/API/PaymentRequest/shippingoptionchange_event)