1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
|
---
title: Payment Request API
slug: Web/API/Payment_Request_API
translation_of: Web/API/Payment_Request_API
---
<div>{{DefaultAPISidebar("Payment Request API")}}{{securecontext_header}}</div>
<p><span class="seoSummary">Payment Request API предоставляет постоянный UX для продавцов и покупателей. Это не новый способ оплаты, а возможность пользователя выбрать предпочтительный способ оплаты и предоставить продавцу эту информацию.</span></p>
<h2 id="Основы_и_использование_Payment_Request">Основы и использование Payment Request</h2>
<p>Many problems related to online shopping-cart abandonment can be traced to checkout forms, which can be difficult and time consuming to fill out and often require multiple steps to complete. The <strong>Payment Request API</strong> is meant to reduce the number of steps needed to complete a payment online, potentially doing away with checkout forms. It aims to make the checkout process easier, by remembering a user's details, which are then passed along to a merchant hopefully without requiring a HTML form.</p>
<p>Advantages of using the Payment Request API with "basic-card" (card-based payments):</p>
<ul>
<li><strong>Fast purchase experience</strong>: Users enter their details once into the browser and are then ready to pay for goods and services on the web. They no longer have to fill out the same details repeatedly across different sites.</li>
<li><strong>Consistent experience on every site (that supports the API):</strong> As the payment sheet is controlled by the browser, it can tailor the experience to the user. This can include localizing the UI into the user's preferred language.</li>
<li><strong>Accessibility</strong>: As the browser controls the input elements of the payment sheet, it can assure consistent keyboard and screen reader accessibility on every website without developers needing to do anything. A browser could also adjust the font size or color contrast of the payment sheet, making it more comfortable for the user to make a payment.</li>
<li><strong>Credentials management</strong>: Users can manage their credit cards and shipping addresses directly in the browser. A browser can also sync these "credentials" across devices, making it easy for users to jump from desktop to mobile and back again when buying things.</li>
<li><strong>Consistent error handling:</strong> The browser can check the validity of card numbers, and can tell the user if a card has expired (or is about to expire). The browser can automatically suggest which card to use based on past usage patterns or restrictions from the merchant (e.g, "we only accept Visa or Mastercard"), or allow the user to say which is their default/favorite card.</li>
</ul>
<p>To request a payment, a web page creates a {{domxref("PaymentRequest")}} object in response to a user action that initiates a payment, such as clicking a "Purchase" button. The <code>PaymentRequest</code> allows the web page to exchange information with the user agent while the user provides input to complete the transaction.</p>
<p>You can find a complete guide in <a href="/en-US/docs/Web/API/Payment_Request_API/Using_the_Payment_Request_API">Using the Payment Request API</a>.</p>
<div class="note">
<p><strong>Note</strong>: The API is available inside cross-origin {{htmlelement("iframe")}} elements only if they have had the {{htmlattrxref("allowpaymentrequest","iframe")}} attribute set on them.</p>
</div>
<h2 id="Interfaces">Interfaces</h2>
<dl>
<dt>{{domxref('PaymentAddress')}}</dt>
<dd>An object that contains address information; used for billing and shipping addresses, for example.</dd>
<dt>{{domxref('PaymentRequest')}}</dt>
<dd>An object that provides the API for creating and managing the {{Glossary("user agent", "user agent's")}} payment interface.</dd>
<dt>{{domxref('PaymentRequestEvent')}}</dt>
<dd>An event delivered to a payment handler when a {{domxref("PaymentRequest")}} is made.</dd>
<dt>{{domxref('PaymentRequestUpdateEvent')}}</dt>
<dd>Enables the web page to update the details of the payment request in response to a user action.</dd>
<dt>{{domxref('PaymentMethodChangeEvent')}}</dt>
<dd>Represents the user changing payment instrument (e.g., switching from a credit card to debit card).</dd>
<dt>{{domxref('PaymentResponse')}}</dt>
<dd>An object returned after the user selects a payment method and approves a payment request.</dd>
<dt>{{domxref('MerchantValidationEvent')}}</dt>
<dd>Represents the browser requiring the merchant (website) to validate themselves as allowed to use a particular payment handler (e.g., registered as allowed to use Apple Pay).</dd>
</dl>
<dl>
</dl>
<h2 id="Dictionaries">Dictionaries</h2>
<dl>
<dt>{{domxref("AddressErrors")}}</dt>
<dd>A dictionary containing strings providing descriptive explanations of any errors in any {{domxref("PaymentAddress")}} entries which have errors.</dd>
<dt>{{domxref("PayerErrors")}}</dt>
<dd>A dictionary containing strings providing descriptive explanations of any errors in related to {{domxref("PaymentResponse")}}'s email, phone, and name attributes.</dd>
<dt>{{domxref("PaymentDetailsUpdate")}}</dt>
<dd>An object describing changes that need to be made to the payment details in the event that the server needs to update information following the instantiation of the payment interface but before the user begins to interact with it.</dd>
</dl>
<h3 id="Related_dictionaries_for_the_Basic_Card_specification">Related dictionaries for the Basic Card specification</h3>
<dl>
<dt>{{domxref("BasicCardChangeDetails")}}</dt>
<dd>An object providing <em>redacted</em> address information that is provided as the {{domxref("PaymentMethodChangeEvent.methodDetails", "methodDetails")}} on the {{event("paymentmethodchange")}} event sent to the {{domxref("PaymentRequest")}} when the user changes payment information.</dd>
<dt>{{domxref("BasicCardErrors")}}</dt>
<dd>An object providing any error messages associated with the fields in the {{domxref("BasicCardResponse")}} object that are not valid. This is used as the value of the {{domxref("PaymentValidationErrors.paymentMethod", "paymentMethod")}} property on the {{domxref("PaymentValidationErrors")}} object sent to the {{domxref("PaymentRequest")}} when an error occurs.</dd>
<dt>{{domxref('BasicCardRequest')}}</dt>
<dd>Defines an object structure for containing payment request details such as card type.</dd>
<dt>{{domxref('BasicCardResponse')}}</dt>
<dd>Defines an object structure for payment response details such as the number/expiry date of the card used to make the payment, and the billing address.</dd>
</dl>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{SpecName('Payment')}}</td>
<td>{{Spec2('Payment')}}</td>
<td>Initial definition.</td>
</tr>
<tr>
<td>{{SpecName('Basic Card Payment')}}</td>
<td>{{Spec2('Basic Card Payment')}}</td>
<td>Defines {{domxref("BasicCardRequest")}} and {{domxref("BasicCardResponse")}}, among other things needed for handling credit card payment</td>
</tr>
<tr>
<td>{{SpecName('Payment Method Identifiers')}}</td>
<td>{{Spec2('Payment Method Identifiers')}}</td>
<td>Defines payment method identifiers and how they are validated, and, where applicable, minted and formally registered with the W3C.</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<div>
<h3 id="PaymentRequest_interface">PaymentRequest interface</h3>
<div>
<p>{{Compat("api.PaymentRequest", 0)}}</p>
</div>
</div>
<h2 id="See_also">See also</h2>
<ul>
<li><a href="/en-US/docs/Web/API/Payment_Request_API/Using_the_Payment_Request_API">Using the Payment Request API</a></li>
<li><a href="/en-US/docs/Web/API/Payment_Request_API/Concepts">Payment processing concepts</a></li>
<li><a href="https://webkit.org/blog/8182/introducing-the-payment-request-api-for-apple-pay/">Introducing the Payment Request API for Apple Pay</a></li>
<li><a href="https://developers.google.com/pay/api/web/guides/paymentrequest/tutorial">Google Pay API PaymentRequest Tutorial</a></li>
<li><a href="https://github.com/w3c/payment-request-info/wiki/FAQ">W3C Payment Request API FAQ</a></li>
<li>Feature Policy directive {{httpheader("Feature-Policy/payment", "payment")}}</li>
</ul>
|
