Skip to content

Commit b336891

Browse files
marcoscaceresmarcoscaceres
authored
add PaymentMethodChangeEvent event (#695)
Also adds: * PaymentRequest.prototype.onpaymentmethodchange
1 parent a63c968 commit b336891

File tree

1 file changed

+141
-7
lines changed

1 file changed

+141
-7
lines changed

‎index.html‎

Lines changed: 141 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -171,7 +171,7 @@ <h2>
171171
</p>
172172
<dl>
173173
<dt>
174-
A <dfn>can make payment</dfn> algorithm:
174+
<dfn>Steps to check if a payment can be made</dfn>:
175175
</dt>
176176
<dd>
177177
How a payment handler determines whether it, or the user, can
@@ -184,14 +184,23 @@ <h2>
184184
<dfn>Steps to respond to a payment request</dfn>:
185185
</dt>
186186
<dd>
187-
An algorithm that returns an object or <a data-cite=
187+
Steps that return an object or <a data-cite=
188188
"!WEBIDL#idl-dictionary">dictionary</a> that a merchant uses to
189189
process or validate the transaction. The structure of this object is
190190
specific to each <a>payment method</a>. For an example of such an
191191
object, see the <code><a data-cite=
192192
"payment-method-basic-card#dom-basiccardresponse">BasicCardResponse</a></code>
193193
dictionary of [[payment-method-basic-card]].
194194
</dd>
195+
<dt>
196+
<dfn>Steps for when a user changes payment method</dfn> (optional)
197+
</dt>
198+
<dd>
199+
Steps that describe how to handle the user changing payment method or
200+
monetary instrument (e.g., from a debit card to a credit card) that
201+
results in a <a data-cite="!WEBIDL#idl-dictionary">dictionary</a> or
202+
<a data-cite="!WEBIDL#idl-object">object</a> or null.
203+
</dd>
195204
</dl>
196205
<p>
197206
This API also enables web sites to take advantage of more secure
@@ -575,8 +584,8 @@ <h2>
575584
readonly attribute PaymentShippingType? shippingType;
576585

577586
attribute EventHandler onshippingaddresschange;
578-
579587
attribute EventHandler onshippingoptionchange;
588+
attribute EventHandler onpaymentmethodchange;
580589
};
581590
</pre>
582591
<div class="note">
@@ -997,8 +1006,8 @@ <h2>
9971006
<li>For each <var>handler</var> in <var>registeredHandlers</var>:
9981007
<ol>
9991008
<li>Let <var>canMakePayment</var> be the result of running
1000-
<var>handler</var>'s <a>can make payment</a> algorithm with
1001-
<var>data</var>.
1009+
<var>handler</var>'s <a>steps to check if a payment can be
1010+
made</a> with <var>data</var>.
10021011
</li>
10031012
<li>If <var>canMakePayment</var> is true, then append
10041013
<var>handler</var> to <var>handlers</var>.
@@ -1219,8 +1228,8 @@ <h2>
12191228
<li>For each <var>handler</var> in <var>handlers</var>:
12201229
<ol>
12211230
<li>Let <var>canMakePayment</var> be the result of running
1222-
<var>handler</var>'s <a>can make payment</a> algorithm with
1223-
<var>data</var>.
1231+
<var>handler</var>'s <a>steps to check if a payment can be
1232+
made</a> with <var>data</var>.
12241233
</li>
12251234
<li>If <var>canMakePayment</var> is true, resolve
12261235
<var>promise</var> with true, and return.
@@ -1292,6 +1301,16 @@ <h2>
12921301
<a>shippingoptionchange</a>.
12931302
</p>
12941303
</section>
1304+
<section data-dfn-for="PaymentRequest" data-link-for="PaymentRequest">
1305+
<h2>
1306+
<dfn>onpaymentmethodchange</dfn> attribute
1307+
</h2>
1308+
<p data-tests="onpaymentmenthodchange-attribute.https.html">
1309+
A <a>PaymentRequest</a>'s <a>onpaymentmethodchange</a> attribute is
1310+
an <a>EventHandler</a> for a <a>PaymentRequestUpdateEvent</a> named
1311+
"<a>paymentmethodchange</a>".
1312+
</p>
1313+
</section>
12951314
<section>
12961315
<h2>
12971316
Internal Slots
@@ -3402,8 +3421,80 @@ <h2>
34023421
The user chooses a new shipping option.
34033422
</td>
34043423
</tr>
3424+
<tr>
3425+
<td>
3426+
<code><dfn>paymentmethodchange</dfn></code>
3427+
</td>
3428+
<td>
3429+
<a>PaymentMethodChangeEvent</a>
3430+
</td>
3431+
<td>
3432+
The user chooses a different <a>payment method</a> within a
3433+
<a>payment handler</a>.
3434+
</td>
3435+
</tr>
34053436
</table>
34063437
</section>
3438+
<section data-dfn-for="PaymentMethodChangeEvent" data-link-for=
3439+
"PaymentMethodChangeEvent">
3440+
<h2>
3441+
<dfn>PaymentMethodChangeEvent</dfn> interface
3442+
</h2>
3443+
<pre class="idl">
3444+
[Constructor(DOMString type, optional PaymentMethodChangeEventInit eventInitDict), SecureContext, Exposed=Window]
3445+
interface PaymentMethodChangeEvent : PaymentRequestUpdateEvent {
3446+
readonly attribute DOMString methodName;
3447+
readonly attribute object? methodDetails;
3448+
};
3449+
</pre>
3450+
<section>
3451+
<h2>
3452+
<dfn>methodDetails</dfn> attribute
3453+
</h2>
3454+
<p data-link-for="PaymentMethodChangeEventInit">
3455+
When getting, returns the value it was initialized with. See
3456+
<a>methodDetails</a> member of <a>PaymentMethodChangeEventInit</a>
3457+
for more information.
3458+
</p>
3459+
</section>
3460+
<section>
3461+
<h2>
3462+
<dfn>methodName</dfn> attribute
3463+
</h2>
3464+
<p data-link-for="PaymentMethodChangeEventInit">
3465+
When getting, returns the value it was initialized with. See
3466+
<a>methodName</a> member of <a>PaymentMethodChangeEventInit</a> for
3467+
more information.
3468+
</p>
3469+
</section>
3470+
<section data-dfn-for="PaymentMethodChangeEventInit" data-link-for=
3471+
"PaymentMethodChangeEventInit">
3472+
<h3>
3473+
<dfn>PaymentMethodChangeEventInit</dfn> dictionary
3474+
</h3>
3475+
<pre class="idl">
3476+
dictionary PaymentMethodChangeEventInit : PaymentRequestUpdateEventInit {
3477+
required DOMString methodName;
3478+
object? methodDetails;
3479+
};
3480+
</pre>
3481+
<dl>
3482+
<dt>
3483+
<dfn>methodName</dfn> member
3484+
</dt>
3485+
<dd>
3486+
A DOMString representing the <a>payment method identifier</a>.
3487+
</dd>
3488+
<dt>
3489+
<dfn>methodDetails</dfn> member
3490+
</dt>
3491+
<dd>
3492+
An object representing the some data from the payment method, or
3493+
null.
3494+
</dd>
3495+
</dl>
3496+
</section>
3497+
</section>
34073498
<section data-dfn-for="PaymentRequestUpdateEvent" data-link-for=
34083499
"PaymentRequestUpdateEvent">
34093500
<h2>
@@ -3672,6 +3763,49 @@ <h2>
36723763
</li>
36733764
</ol>
36743765
</section>
3766+
<section>
3767+
<h2>
3768+
Payment method changed algorithm
3769+
</h2>
3770+
<p>
3771+
A <a>payment handler</a> MAY run the <dfn>payment method changed
3772+
algorithm</dfn> when the user changes <a>payment method</a> with
3773+
<var>methodDetails</var>, which is either <a data-cite=
3774+
"!WEBIDL#idl-dictionary">dictionary</a> or an <a data-cite=
3775+
"!WEBIDL#idl-object">object</a> or null, and a <var>methodName</var>,
3776+
which is a DOMString that represents the <a>payment method
3777+
identifier</a> of the <a>payment handler</a> the user is interacting
3778+
with:
3779+
</p>
3780+
<ol class="algorithm">
3781+
<li>Let <var>request</var> be the <a>PaymentRequest</a> object that
3782+
the user is interacting with.
3783+
</li>
3784+
<li>
3785+
<a>Queue a task</a> on the <a>user interaction task source</a> to
3786+
run the following steps:
3787+
<ol>
3788+
<li>If the <var>request</var>.<a>[[\updating]]</a> is true, then
3789+
terminate this algorithm and take no further action. Only one
3790+
update may take place at a time. The <a>user agent</a> SHOULD
3791+
ensure that this never occurs.
3792+
</li>
3793+
<li>If the <var>request</var>.<a>[[\state]]</a> is not set to
3794+
"<a>interactive</a>", then terminate this algorithm and take no
3795+
further action. The <a>user agent</a> user interface SHOULD
3796+
ensure that this never occurs.
3797+
</li>
3798+
<li data-link-for="PaymentMethodChangeEvent">
3799+
<a>Fire an event</a> named "<a>paymentmethodchange</a>" at
3800+
<var>request</var> using <a>PaymentMethodChangeEvent</a>, with
3801+
its <a>methodName</a> attribute initialized to
3802+
<var>methodName</var>, and its <a>methodDetails</a> attribute
3803+
initialized to <var>methodDetails</var>.
3804+
</li>
3805+
</ol>
3806+
</li>
3807+
</ol>
3808+
</section>
36753809
<section>
36763810
<h2>
36773811
PaymentRequest updated algorithm

0 commit comments

Comments
 (0)