• 网站

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