• 網站

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