重要事項：本文件不適用於您目前選取的格式 stories！

amp-access-laterpay

說明

允許發布商與 LaterPay 小額付費平台整合。

必要指令碼

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

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

用法

LaterPay 是一個小額付費平台，使用者只需按兩下滑鼠即可購買任何線上內容並立即存取，無需事先註冊、提供個人資料或付款。使用者只需在跨網站的購買總額達到 \$5 或 5 歐元後才需付款。內容供應商可以銷售單個項目或通行證，允許使用者無限次存取內容或在限定時間內存取內容。

amp-access-laterpay 元件以 amp-access 為基礎，且需要 amp-access。

如果您透過連接器指令碼整合整合 LaterPay，您將無法在 AMP 頁面上使用該整合。amp-access-laterpay 類似於連接器指令碼，提供一組類似的功能，但專為 AMP 頁面建構。

也可以僅使用 amp-access-laterpay 作為唯一的整合方法，透過 LaterPay 銷售內容。

amp-access-laterpay 元件在內部使用 amp-access，以提供類似 amp-access 的行為，但針對 LaterPay 服務的使用進行了調整。

如果您有自己的付費牆服務，想要與 amp-access 搭配使用，並希望在同一個頁面上同時使用 LaterPay，這也是可行的。

amp-access-laterpay 元件不需要授權或回傳設定，因為它已預先設定為與 LaterPay 服務搭配使用。它也不需要手動設定登入連結。

不同的購買選項可以在發布商的 LaterPay 帳戶中設定，元件將檢索設定並建立可用購買選項的清單。

您可以參考有關設定 LaterPay 連接器 (LaterPay 現有的前端整合) 的文件，以了解如何設定購買選項。

產生的清單可以根據發布商的偏好設定樣式和呈現方式。

此元件也依賴 Access Content Markup (存取內容標記) 來顯示和隱藏內容。

將 amp-access-laterpay 與 amp-access 搭配使用

如果您有現有的訂閱系統，並且打算僅將 LaterPay 用於單篇文章銷售，則可以使用 amp-access 和 amp-access-laterpay，在同一個頁面上同時使用兩種銷售方法。

首先，請參考 amp-access 文件，以了解如何使用現有的付費牆設定 amp-access。

多個供應商章節說明如何使用命名空間設定多個供應商。

將其與 LaterPay 和現有的付費牆整合一起使用時，必要的設定可能如下所示

<script id="amp-access" type="application/json">
  [
    {
      "vendor": "laterpay",
      "laterpay": {
        "region": "us"
      },
      "namespace": "laterpay"
    },
    {
      "authorization": "https://pub.com/amp-access?rid=READER_ID&url=SOURCE_URL",
      "pingback": "https://pub.com/amp-ping?rid=READER_ID&url=SOURCE_URL",
      "login": "https://pub.com/amp-login?rid=READER_ID&url=SOURCE_URL",
      "authorizationFallbackResponse": {"error": true},
      "namespace": "publishername"
    }
  ]
</script>

內容存取標記最終可能看起來像這樣

<section
  amp-access="NOT error AND NOT laterpay.access AND NOT publishername.access"
  amp-access-hide
>
  <p>
    <a on="tap:amp-access.login-publishername"
      >Login here to access your PublisherName subscription.</a
    >
  </p>

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

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

<div amp-access="laterpay.access OR publishername.access" amp-access-hide>
  <p>...article content...</p>
</div>

您可以在這裡找到更完整的範例。

以下資源提供有關將 LaterPay 與 AMP 搭配使用的更多文件

amp-access
LaterPay
LaterPay：我們如何進行小額付費
LaterPay 連接器 - 類似於 amp-access-laterpay，但適用於非 AMP 頁面。

使用 Access Content Markup (存取內容標記) 並顯示購買清單

Access Content Markup (存取內容標記) 的使用方式應與 amp-access 相同。

當使用者無法存取文章時，ID 為 amp-access-laterpay-dialog 的元素將呈現購買選項清單。此清單具有一些基本樣式，可以自訂以使其更融入發布商的頁面。

如果您想使用預設樣式，請務必新增 amp-access-laterpay 類別。

<section amp-access="NOT error AND NOT access" amp-access-hide>
  <div id="amp-access-laterpay-dialog" class="amp-access-laterpay"></div>
</section>

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

<div amp-access="access" amp-access-hide>
  <p>...article content...</p>
</div>

設定

設定類似於 amp-access，但不需要授權、回傳和登入連結。

<script id="amp-access" type="application/json">
  {
    "vendor": "laterpay",
    "laterpay": {
      "property": value
    }
  }
</script>

可以在 laterpay 設定物件中設定以下值

屬性	值	說明
`articleTitleSelector`	CSS 選擇器必要	CSS 選擇器，用於決定頁面中包含文章標題的元素。這將確保用於購買文章的頁面將包含此標題，以便使用者知道他們要購買的內容。
`articleId`	逗號分隔的識別碼清單	預設情況下，文章的 URL 用於將其與購買選項相符，但您可以設定 LaterPay Connector UI 中的文章 ID，而不是為購買選項指定 URL 路徑，然後使用 `articleId` 屬性將文章與購買選項相符。在文章 URL 比對購買選項不夠彈性的情況下，這是必要的。請參閱 LaterPay Connector() 的設定頁面，以了解一些有用的範例情境。
`jwt`	用於動態付款設定的 JWT 權杖	此選項允許您指定已簽署的 JSON Web Token，其中包含可用付費內容的設定。這表示您可以提供頁面內設定，以程式設計方式在您的頁面中產生，而不是在 LaterPay 的 Connector Admin 介面上手動指定。在為許多不同的文章設定單次購買時，這可能特別有用。如果您想了解有關如何建立此權杖以及可以在其中指定哪些內容的更多資訊，請參閱 LaterPay 的 JWT Paid Content API 文件，以了解連接器指令碼整合。
`locale`	字串	定義適用於地區設定的價格格式樣式。
`localeMessages`	物件	允許發布商自訂或在地化產生的購買選項清單中出現的文字。請參閱在地化章節以取得更多資訊。
`scrollToTopAfterAuth`	布林值	若為 true，則在授權程序成功後，將頁面捲動至頂端。如果您顯示對話方塊的位置在頁面中較下方的位置，且使用者在返回頁面後可能會對他們目前的捲動位置感到困惑，這會很有幫助。
`region`	字串	指定您是否位於 `eu` 或 `us` LaterPay 區域。
`sandbox`	布林值	僅當您使用沙箱模式來測試伺服器設定時才需要。您也需要使用 AMP 的開發模式。

樣式設定

多個類別會套用至產生標記中的某些元素。沒有類別的元素可以透過 CSS 元素選擇器明確參考。

已存在一些基本版面配置 CSS，但建議發布商設定其樣式以符合其頁面的外觀和風格。

為對話方塊建立的結構如下所示

<div id="amp-access-laterpay-dialog" class="amp-access-laterpay">
  <div class="amp-access-laterpay-container">
    <p class="amp-access-laterpay-header">
      Optional, appears if header locale message is defined.
    </p>
    <ul>
      <li>
        <label>
          <input name="purchaseOption" type="radio" />
          <div class="amp-access-laterpay-metadata">
            <span class="amp-access-laterpay-title">Purchase option title</span>
            <p class="amp-access-laterpay-description">
              Purchase option description
            </p>
          </div>
        </label>
        <p class="amp-access-laterpay-price-container">
          <span class="amp-access-laterpay-price">0.15</span>
          <sup class="amp-access-laterpay-currency">USD</sup>
        </p>
      </li>
      <!-- ... more list items for other purchase options ... -->
    </ul>
    <button class="amp-access-laterpay-purchase-button">Buy Now</button>
    <p class="amp-access-laterpay-already-purchased-container">
      <a href="...">I already bought this</a>
    </p>
    <p class="amp-access-laterpay-footer">
      Optional, appears if footer locale message is defined.
    </p>
  </div>
  <p class="amp-access-laterpay-badge">
    Powered by <a href="https://laterpay.net" target="_blank">LaterPay</a>
  </p>
</div>

分析

鑑於 amp-access-laterpay 以 amp-access 為基礎，它支援 amp-access 傳送的所有分析事件。

如果您想查看更完整的範例，了解這在實務中會是什麼樣子，請參閱 https://ampexample.laterpay.net/ 上的範例，這些範例都已設定為傳送這些分析事件。

在地化

購買選項對話方塊中顯示的文字將由發布商在 LaterPay Connector UI 中定義。

剩餘文字是擴充元件的一部分，可以透過以下設定選項進行變更和在地化

<script id="amp-access" type="application/json">
  {
    "vendor": "laterpay",
    "laterpay": {
      "localeMessages": {
        "messageKey": "message value"
      }
    }
  }
</script>

以下訊息金鑰可以翻譯或自訂，但請注意，它們應保留其原始意義和意圖。

金鑰	說明	預設值
`payLaterButton`	可稍後付款的選項在購買按鈕中顯示的文字。	'Buy Now, Pay Later' (立即購買，稍後付款)
`payNowButton`	必須在購買時付款的選項在購買按鈕中顯示的文字。	'Buy Now' (立即購買)
`defaultButton`	在選取任何選項之前，購買按鈕中顯示的預設文字。	'Buy Now' (立即購買)
`alreadyPurchasedLink`	如果使用者過去購買過文章，但他們遺失了 Cookie (或在不同的裝置上)，他們可以使用此連結登入 LaterPay 並檢索他們的購買項目。	'I already bought this' (我已經買過了)
`header`	選用標頭文字。
`footer`	選用頁尾文字。

驗證

請參閱 AMP 驗證器規格中的 amp-access-laterpay 規則。

需要更多協助嗎？

您已經閱讀這份文件十幾次了，但它仍然沒有真正涵蓋您的所有問題？也許其他人也有相同的感受：在 Stack Overflow 上與他們聯繫。

前往 Stack Overflow

發現錯誤或缺少功能？

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

前往 GitHub

amp-access-laterpay 0.2 0.1

說明

必要指令碼

用法

將 amp-access-laterpay 與 amp-access 搭配使用

使用 Access Content Markup (存取內容標記) 並顯示購買清單

設定

樣式設定

分析

在地化

驗證

amp-access-laterpay