blob: ed095b0c238f43348c4834f98733d7a5f2912455 (
plain)
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
127
128
129
130
131
132
133
134
135
|
---
title: 支付请求接口
slug: Web/API/Payment_Request_API
tags:
- 中间状态
- 信用卡
- 到岸卸货
- 参考
- 应用程序接口
- 支付
- 支付请求
- 支付请求接口
- 概述
- 贸易
translation_of: Web/API/Payment_Request_API
original_slug: Web/API/支付_请求_接口
---
<div>{{DefaultAPISidebar("Payment Request API")}}{{securecontext_header}}</div>
<p><span class="seoSummary">支付请求API为商家和支付者提供了统一的用户体验。它并非提供一种新的支付方式，而是让用户可以在原有的支付方式中进行选择，并使商家可以获悉用户的支付情况。</span></p>
<h2 id="支付请求的概念和使用">支付请求的概念和使用</h2>
<p>在网上购物时，使许多用户中止购物车结算的原因都可以被归结为填写支付信息表单时的步骤繁多导致的费时费力。<strong>支付请求API</strong>正是被用以减少支付步骤，逐步彻底消除表单的填写。它的目的是简化结算流程，而实现此目的的方式是通过保存用户相关信息并传送给商家。在理想的情况下，用户将不需要填写HTML表单。</p>
<p>使用支付请求API中“保存卡信息并自动扣款”（使用银行卡支付时）的优点：</p>
<ul>
<li><strong>快捷的购买体验</strong>：用户在浏览器上只需输入一次银行卡信息，之后便可一键对网络上提供的商品和服务进行支付。即使在不同的站点购物，他们也不需要反复填写相同的支付信息。</li>
<li><strong>跨站点的统一用户体验（仅指支持此API的站点）</strong>：浏览器统一控制支付页面，使定制化内容得以实现。可以定制的内容包括语言的本地化。</li>
<li><strong>无障碍体验</strong>：支付页面中的表单元素由浏览器控制，使得键盘输入和屏幕朗读在跨站点时也能以统一的方式工作，且不需要开发者的额外开发。浏览器也可以对支付页面中的字体大小、颜色对比度进行同一调节，使用户在支付过程中获得更加舒适的体验。</li>
<li><strong>认证管理</strong>：用户可以直接通过浏览器管理自己的信用卡和收件地址，且浏览器可以在不同设备间同步这些“认证信息”。这样，用户就能在购物时灵活地在电脑和移动设备间来回切换。</li>
<li><strong>统一的异常信息处理</strong>：浏览器可以检查信用卡卡号的有效性，并在卡片已经（或即将）过期时告知用户。浏览器可以通过用户过去的使用习惯和商家的支付规则（例如，“我们只支持Visa或Mastercard”）自动对此次交易使用卡片的选择提出建议。用户还可以自行设置默认/最偏好的卡片。</li>
</ul>
<p>当用户在页面上进行操作发起一次支付，比如点击“购买”按钮时，网页会相应地创建一个{{domxref("PaymentRequest")}}对象。<code>PaymentRequest</code>对象允许网页与用户代理交互，传送用户输入的用以交易的信息。</p>
<p>你可以在<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>注意</strong>：此API只有在设置了{{htmlattrxref("allowpaymentrequest","iframe")}}属性时才支持{{htmlelement("iframe")}}元素的跨域使用。</p>
</div>
<h2 id="接口">接口</h2>
<dl>
<dt>{{domxref('PaymentAddress')}}</dt>
<dd>一个包含地址信息的对象；例如，可以包含账单地址和收货地址。</dd>
<dt>{{domxref('PaymentRequest')}}</dt>
<dd>一个提供了创建和管理 {{Glossary("user agent", "user agent's")}}支付接口的对象。</dd>
<dt>{{domxref('PaymentRequestEvent')}}</dt>
<dd>当{{domxref("PaymentRequest")}}发生时，被传送给支付回调函数的事件。</dd>
<dt>{{domxref('PaymentRequestUpdateEvent')}}</dt>
<dd>当用户进行操作时，使网页可以更新相应的支付信息的事件。</dd>
<dt>{{domxref('PaymentMethodChangeEvent')}}</dt>
<dd>代表支付凭证改变（例如，用户将支付方式从信用卡改为了借记卡）的事件。</dd>
<dt>{{domxref('PaymentResponse')}}</dt>
<dd>一个对象，当用户选择了一种支付方式并同意发起交易请求后被返回。</dd>
<dt>{{domxref('MerchantValidationEvent')}}</dt>
<dd>代表浏览器要求商家（网站）证实自身被允许使用某种特定的支付回调函数（例如，注册了对Apply Pay支付方式的使用）的事件。</dd>
</dl>
<dl>
</dl>
<h2 id="词典">词典</h2>
<dl>
<dt>{{domxref("AddressErrors")}}</dt>
<dd>一个由字符串组成的词典，包含用以描述任何{{domxref("PaymentAddress")}}条目中可能出现的报错的相应描述。</dd>
<dt>{{domxref("PayerErrors")}}</dt>
<dd>一个由字符串组成的词典，包含了{{domxref("PaymentResponse")}}中出现的有关邮件地址、电话号码及姓名的报错的相应描述。</dd>
<dt>{{domxref("PaymentDetailsUpdate")}}</dt>
<dd>一个对象，用于描述当服务器在发起支付请求后且在用户与之交互前，需要更新支付信息的事件。</dd>
</dl>
<h3 id="“保存卡信息并自动扣款”规范的相关词典">“保存卡信息并自动扣款”规范的相关词典</h3>
<dl>
<dt>{{domxref("BasicCardChangeDetails")}}</dt>
<dd>一个对象，提供了当用户更改支付信息时，{{domxref("PaymentMethodChangeEvent.methodDetails", "methodDetails")}}中传送通过{{event("paymentmethodchange")}}事件传送给 {{domxref("PaymentRequest")}}的<em>删节的</em>地址信息。</dd>
<dt>{{domxref("BasicCardErrors")}}</dt>
<dd>一个对象，提供了{{domxref("BasicCardResponse")}}中无效信息的相关错误提示。错误发生时，该对象被传送给{{domxref("PaymentRequest")}}，作为{{domxref("PaymentValidationErrors")}}对象中{{domxref("PaymentValidationErrors.paymentMethod", "paymentMethod")}}属性的值。</dd>
<dt>{{domxref('BasicCardRequest')}}</dt>
<dd>定义了支付请求信息（例如“卡类型”）对象的结构。</dd>
<dt>{{domxref('BasicCardResponse')}}</dt>
<dd>定义了支付请求响应（例如被使用的银行卡的“卡号”、“有效期”和“账单地址”）对象的结构。</dd>
</dl>
<h2 id="规范">规范</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">规范</th>
<th scope="col">状态</th>
<th scope="col">注释</th>
</tr>
<tr>
<td>{{SpecName('Payment')}}</td>
<td>{{Spec2('Payment')}}</td>
<td>原始定义</td>
</tr>
<tr>
<td>{{SpecName('Basic Card Payment')}}</td>
<td>{{Spec2('Basic Card Payment')}}</td>
<td>定义信用卡支付回调函数中的{{domxref("BasicCardRequest")}}和{{domxref("BasicCardResponse")}}</td>
</tr>
<tr>
<td>{{SpecName('Payment Method Identifiers')}}</td>
<td>{{Spec2('Payment Method Identifiers')}}</td>
<td>定义支付方式的识别码和认证方式。对于某些适用的场景，通过W3C进行铸币和注册。</td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<div>
<h3 id="支付请求接口">支付请求接口</h3>
<div>
<p>{{Compat("api.PaymentRequest", 0)}}</p>
</div>
</div>
<h2 id="相关文档">相关文档</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>
</ul>
|
