amp-access-laterpay

簡介

amp-access-laterpay 讓發布商能輕鬆整合 LaterPay 付款基礎架構平台。它基於 AMP Access，且需要 AMP Access。

設定

於標頭匯入 amp-access 元件。

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

amp-access 也需要匯入 amp-analytics。

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

當然，還有 amp-access-laterpay 元件。

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

新增指定供應商和 amp-access 供應商特定設定的設定。

<script id="amp-access" type="application/json">
{
  "vendor": "laterpay",
  "laterpay": {
    "articleTitleSelector": ".preview > h3",
    "sandbox": true
  }
}
</script>

控制可見性

此區塊對所有使用者皆可見。在此情況下，不需要特殊的標記。

文章

這是文章預覽。

<section class="preview">
  <h3>The Article</h3>
  <p>
    This is a preview of the article.
  </p>
</section>

此區塊僅在授權請求回應中的 access 和 error 屬性值皆評估為 FALSE 時顯示。具有不同購買選項的 LaterPay 對話方塊將在此處呈現

<section amp-access="NOT error AND NOT access" amp-access-hide>

此處顯示的 ID 和類別名稱皆為預先定義，應保持不變。您可以將這些作為參考，以根據您的需求設定對話方塊樣式。

<div id="amp-access-laterpay-dialog" class="amp-access-laterpay"></div>

如果取得授權請求時存在 error 屬性，則會顯示此區塊

糟糕... 發生錯誤。

<section amp-access="error" amp-access-hide>
  Oops... Something broke.
</section>

使用 amp-access 屬性來控制每個元件的可見性。運算式必須評估為布林值。如果評估為 TRUE，則會顯示該區塊。

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ullamcorper turpis vel commodo scelerisque. Phasellus luctus nunc ut elit cursus, et imperdiet diam vehicula. Duis et nisi sed urna blandit bibendum et sit amet erat. Suspendisse potenti. Curabitur consequat volutpat arcu nec elementum. Etiam a turpis ac libero varius condimentum. Maecenas sollicitudin felis aliquam tortor vulputate, ac posuere velit semper.

<div amp-access="access" amp-access-hide>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Curabitur ullamcorper turpis vel commodo scelerisque. Phasellus
    luctus nunc ut elit cursus, et imperdiet diam vehicula.
    Duis et nisi sed urna blandit bibendum et sit amet erat.
    Suspendisse potenti. Curabitur consequat volutpat arcu nec
    elementum. Etiam a turpis ac libero varius condimentum.
    Maecenas sollicitudin felis aliquam tortor vulputate,
    ac posuere velit semper.
</div>

需要更多說明嗎？

如果此頁面上的說明未涵蓋您的所有問題，歡迎隨時與其他 AMP 使用者聯繫，討論您的確切使用案例。

前往 Stack Overflow

未說明的功能？

AMP 專案大力鼓勵您的參與和貢獻！我們希望您能成為我們開放原始碼社群的長期參與者，但我們也歡迎您針對您特別熱衷的問題提供一次性的貢獻。

在 GitHub 上編輯範例

由 @trodrigues 撰寫