feat: put request id in details dictionary (#426)

closes #388, #412, #415.

index.html

@@ -202,7 +202,7 @@ <h2>
           Promise&lt;void&gt; abort();
           Promise&lt;boolean&gt; canMakePayment();
 
-          readonly attribute DOMString? paymentRequestId;
+          readonly attribute DOMString id;
           readonly attribute PaymentAddress? shippingAddress;
           readonly attribute DOMString? shippingOption;
           readonly attribute PaymentShippingType? shippingType;
@@ -299,6 +299,7 @@ <h2>
           </p>
           <pre class="example" title="The 'details' argument">
             const details = {
+              id: "super-store-order-123-12312",
               displayItems: [
                 {
                   label: "Sub-total",
@@ -343,6 +344,17 @@ <h2>
           </li>
           <li>Let <var>serializedMethodData</var> be an empty list.
           </li>
+          <li>Establish the request's id:
+            <ol>
+              <li>If <var>details</var>.<a data-lt="PaymentDetailsInit.id">id</a>
+              is missing, add an <a data-lt="PaymentDetailsInit.id">id</a> member
+              to <var>details</var> and set its value to string that uniquely
+              identifies this payment request. It is RECOMMENDED that the
+              string be a <abbr title=
+              "Universally Unique Identifier">UUID</abbr> [[!RFC4122]].
+              </li>
+            </ol>
+          </li>
           <li>Process payment methods:
             <ol data-link-for="PaymentMethodData">
               <li>If the length of the <var>methodData</var> sequence is zero,
@@ -581,6 +593,16 @@ <h2>
           </li>
         </ol>
       </section>
+      <section data-dfn-for="PaymentRequest" data-link-for="PaymentRequest">
+        <h2>
+          <dfn>id</dfn> attribute
+        </h2>
+        <p>
+          When getting, the <a>id</a> attribute returns this
+          <a>PaymentRequest</a>'s <a>[[\details]]</a>.<a data-lt=
+          "PaymentDetailsInit.id">id</a>.
+        </p>
+      </section>
       <section data-dfn-for="PaymentRequest" data-link-for="PaymentRequest">
         <h2>
           <dfn>show()</dfn> method
@@ -1117,6 +1139,7 @@ <h2>
       </h2>
       <pre class="idl">
         dictionary PaymentDetailsInit : PaymentDetailsBase {
+          DOMString id;
           required PaymentItem total;
         };
       </pre>
@@ -1130,6 +1153,17 @@ <h2>
         <a>PaymentDetailsInit</a> dictionary:
       </p>
       <dl>
+        <dt>
+          <dfn>id</dfn>
+        </dt>
+        <dd>
+          <a>id</a> is a free-form identifier for this payment request.
+          <p class="note">
+            If an <a>id</a> member is not present, then the <a>user agent</a>
+            will generate a unique identifier for the payment request during
+            <a data-lt="PaymentRequest.PaymentRequest()">construction</a>.
+          </p>
+        </dd>
         <dt>
           <dfn>total</dfn>
         </dt>
@@ -1615,7 +1649,7 @@ <h2>
         interface PaymentResponse {
           serializer = { attribute };
 
-          readonly attribute DOMString paymentRequestId;
+          readonly attribute DOMString requestId;
           readonly attribute DOMString methodName;
           readonly attribute object details;
           readonly attribute PaymentAddress? shippingAddress;
@@ -1640,13 +1674,6 @@ <h2>
           "WEBIDL-LS#dfn-convert-to-serialized-value">converted to serialized
           values</a> as per [[!WEBIDL-LS]].
         </dd>
-        <dt>
-          <dfn>paymentRequestId</dfn>
-        </dt>
-        <dd>
-          The same <a>paymentRequestId</a> present in the original
-          <a>PaymentRequest</a>.
-        </dd>
         <dt>
           <dfn>methodName</dfn>
         </dt>
@@ -1718,6 +1745,13 @@ <h2>
           "PaymentResponse.payerPhone">payerPhone</a> will be the phone number
           chosen by the user.
         </dd>
+        <dt>
+          <dfn>requestId</dfn>
+        </dt>
+        <dd>
+          The corresponding payment request <a data-lt=
+          "PaymentRequest.id">id</a> that spawned this payment response.
+        </dd>
       </dl>
       <section data-dfn-for="PaymentResponse" data-link-for="PaymentResponse">
         <h2>
@@ -2327,6 +2361,11 @@ <h2>
           </li>
           <li>Let <var>response</var> be a new <a>PaymentResponse</a>.
           </li>
+          <li>Set the <a data-lt="PaymentResponse.requestId">requestId</a>
+          attribute value of <var>response</var> to the value of
+          <var>request</var>.<a>[[\details]]</a>.<a data-lt=
+          "PaymentDetailsInit.id">id</a>.
+          </li>
           <li>Set the <a data-lt="PaymentResponse.methodName">methodName</a>
           attribute value of <var>response</var> to the <a>payment method
           identifier</a> for the <a>payment method</a> that the user selected