• 網站

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