2 files changed, 266 insertions, 0 deletions
diff --git a/files/zh-cn/web/api/payment_request_api/concepts/index.html b/files/zh-cn/web/api/payment_request_api/concepts/index.html
new file mode 100644
index 0000000000..30e58235f5
--- /dev/null
+++ b/files/zh-cn/web/api/payment_request_api/concepts/index.html
@@ -0,0 +1,129 @@
+---
+title: 交易过程的基本概念
+slug: Web/API/Payment_Request_API/Concepts
+tags:
+  - API
+  - Apple Pay
+  - 中间状态
+  - 交易
+  - 付款方
+  - 付款方式
+  - 应用程序接口
+  - 指南
+  - 支付
+  - 支付请求API
+  - 收款方
+  - 贸易
+translation_of: Web/API/Payment_Request_API/Concepts
+original_slug: Web/API/支付_请求_接口/Concepts
+---
+<p>{{securecontext_header}}{{DefaultAPISidebar("Payment Request API")}}{{draft}}</p>
+
+<p><a href="zh-CN/docs/Web/API/%E6%94%AF%E4%BB%98_%E8%AF%B7%E6%B1%82_%E6%8E%A5%E5%8F%A3">交易请求API</a>使在网站或应用上进行的交易变得更便捷。<span class="seoSummary">在这篇文档中，我们将了解此接口如何运作，以及各个组件的功能。</span></p>
+
+<h2 id="术语">术语</h2>
+
+<p>在深入了解此API的工作方式前，你应该了解以下术语。</p>
+
+<dl>
+ <dt>收款方（或商家）</dt>
+ <dd>商家可以是个人，也可以是一个组织。商家扮演的角色是在自己的网站或应用上通过支付请求API收款。</dd>
+ <dt>付款方</dt>
+ <dd>付款方可以是个人，也可以是一个组织。付款方扮演的角色是，在网站或应用上购买物品。支付流程要求付款方先自证身份，然后授权付款。</dd>
+ <dt>支付方式</dt>
+ <dd>付款的方式，例如信用卡或线上支付服务。</dd>
+ <dt>支付方式提供方</dt>
+ <dd>对某种特定支付方式提供技术支持的组织。例如，使用信用卡付钱时，信用卡交易处理就是一种支付方式提供方。</dd>
+ <dt>交易处理机</dt>
+ <dd>一段代码，作用是与付款方式提供方交互，进行交易处理。</dd>
+</dl>
+
+<p>某些交易处理机会用到<strong>商家认证</strong>。商家认证是指以某种方式认证商家的身份，可能的方式包括密码学机制（例如公钥）。认证成功后的商家得以和交易处理机进行交互。</p>
+
+<h2 id="支付方式识别码">支付方式识别码</h2>
+
+<p>交易处理机是通过<strong>支付方式识别码</strong>识别的。交易方式识别码是一个指向唯一交易处理机的字符串，它可以是一套已成标准的识别码，也可以是一个URL。后者被交易处理服务同时用于两种用途：自证身份和处理交易。</p>
+
+<h3 id="标准化的交易方式识别码">标准化的交易方式识别码</h3>
+
+<p>目前注册在案的只有一套<a href="https://www.w3.org/TR/payment-method-id/#registry">标准化交易方式识别码</a>。（未来可能会添加更多。）</p>
+
+<dl>
+ <dt><code>基本卡（basic-card, 输入一次银行卡信息后即可多次消费的支付方式）</code></dt>
+ <dd>?根据基本卡规范进行交易处理。?详细说明请参见{{domxref("BasicCardRequest")}}。<em><strong>此处应该有对基本卡规范和使用方法进行说明的文档。</strong></em></dd>
+</dl>
+
+<h3 id="基于URL的交易方式识别码">基于URL的交易方式识别码</h3>
+
+<p>这种识别方式的具体使用将会极大程度地依赖不同服务各自的规范。比如，某种服务可能使用多个URL链接，不同URL的使用依赖于API的版本和通信方式等。</p>
+
+<dl>
+ <dt><code>https://apple.com/apple-pay</code></dt>
+ <dd>交易使用<a href="https://www.apple.com/apple-pay/">Apple Pay</a>服务。目前，只有Safari浏览器支持这种交易方式。</dd>
+ <dt><code>https://google.com/pay</code></dt>
+ <dd>交易使用<a href="https://pay.google.com/">Google Pay</a>. 目前，只有Chrome及Chrome内核的浏览器支持这种交易方式。</dd>
+</dl>
+
+<h2 id="交易处理机的功能">交易处理机的功能</h2>
+
+<p>{{Glossary("user agent")}}内部机制支持不同类型的交易。另外，你还可以调用<a href="https://w3c.github.io/payment-handler/">交易处理API</a>来支持更多相应的支付方式提供方（前提是你使用的浏览器支持这些API的使用）。不论使用哪种方式，交易处理机的功能都是如下几条：</p>
+
+<ol>
+ <li><strong>确保交易正确进行。</strong> 交易正确进行的条件取决于不同的支付类型和用户的支付请求；例如，如果用户选择了信用卡支付，而收款方并不支持这种方式，交易就无法正确进行。</li>
+ <li><strong>响应用户代理发起的对商家进行认证的请求（在处理机支持商家认证的前提下）。</strong> 详细说明请参考{{anch("Merchant validation")}}。</li>
+ <li><strong>验证用户提交的信息有资格发起一次有效交易。</strong>这一步骤会创建并返回一个基于具体支付方式的对象，此对象包含处理交易所需要的信息。</li>
+</ol>
+
+<h2 id="商家认证">商家认证</h2>
+
+<p>一些交易处理机包含<strong>商家认证</strong>步骤<strong>。</strong>商家认证是指，通过某种方式识别商家的身份，使用的方式通常是“密码学挑战”。没有成功通过认证的商家不被允许使用交易处理机。</p>
+
+<p>具体的认证方式由交易处理机决定，也完全可以省去这种认证。最终，网站或应用唯一要做的就是就是获取商家的认证密钥并传输给{{domxref("MerchantValidationEvent.complete", "complete()")}}事件的方法。</p>
+
+<pre class="brush: js">paymentRequest.onmerchantvalidation = function(event) {
+  event.complete(fetchValidationData(event.validationURL));
+}
+</pre>
+
+<p>在这个例子中，由<code>fetchValidationData()</code>方法加载由<code>validationURL</code>提供的认证信息。要注意到的是，这个方法必须由商家服务器转发，因为通常情况下，客户端不会主动访问用于认证的URL。</p>
+
+<p>然后，该数据（或用来解析该数据的{{jsxref("Promise")}}）被传送给交易处理机的<code>complete()</code>方法。交易处理机可以用该数据获取更多信息或是进行更多重的算法解析，以认证商家对处理机的使用权。</p>
+
+<p>因此，注意到如下事实很重要：{{Glossary("user agent")}}永远不会发送{{event("merchantvalidation")}}事件，除非用户代理自身装载了交易处理机。例如，Safari浏览器本身即支持Apple Pay，而Apple Pay的交易处理机可据此向客户端发送<code>merchantvalidation</code>、指示客户端获取服务器上的认证信息，并将其传送给交易处理机的<code>complete()</code>，来为商品进行支付。</p>
+
+<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>
+
+<ul>
+ <li><a href="/zh-CN/docs/Web/API/%E6%94%AF%E4%BB%98_%E8%AF%B7%E6%B1%82_%E6%8E%A5%E5%8F%A3">支付请求API</a></li>
+ <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>
+</ul>
diff --git a/files/zh-cn/web/api/payment_request_api/index.html b/files/zh-cn/web/api/payment_request_api/index.html
new file mode 100644
index 0000000000..1d3db1feaa
--- /dev/null
+++ b/files/zh-cn/web/api/payment_request_api/index.html
@@ -0,0 +1,137 @@
+---
+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>
+<div class="hidden">此页面中的兼容性表格是用结构化数据生成的。如果你愿意对该数据进行贡献，请访问<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>并向我们发起合并请求。</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>