• 网站

AMP 中的支付

简介

通过 amp-iframe 和 allowpaymentrequest 属性，AMP 页面可以直接从浏览器请求支付信息。PaymentRequest API 是一个 开放的 W3C 规范，大多数主流浏览器都支持它。此示例不会详细介绍 API，但你可以在 这篇深入分析文章中获取更多信息。

此示例演示了如何嵌入一个仅包含“立即购买”按钮的 iframe。所有实际的支付逻辑都包含在 iframe src 本身中。

设置

此示例唯一需要的额外组件是 amp-iframe。

<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>

配置 Iframe

在基本情况下，AMP 页面将所有 PaymentRequest 逻辑交给 iframe，以完成单个商品的购买。

重要的是，iframe 执行两项操作

1. 设置 allowpaymentrequest 属性，该属性授予 iframe 源调用 PaymentRequest.show() 的权限。
2. 通过查询字符串传递相关的产品标识符，允许 iframe 为此产品检索适当的产品信息。

<amp-iframe title="Buy Now button to retrieve product information" width="130" height="42" sandbox="allow-scripts allow-same-origin allow-top-navigation" allowpaymentrequest frameborder="0" noloading src="/static/samples/files/iframe/payments.html?productId=1">
   <button placeholder disabled>Buy Now</button>
</amp-iframe>

但是，由于 AMP 不允许 JavaScript，iframe 源也必须处理 PaymentRequest 不可用的情况。虽然目前不在此示例的范围内，但潜在的选择是

1. 将“立即购买”按钮替换为“添加到购物车”按钮。
2. 重定向到标准结帐表单。
3. 完全隐藏“立即购买”按钮，并使用单独的基于 AMP 的“添加到购物车”按钮（请参阅产品页面演示）

• 由 @sebastianbenz 撰写