重要：本文件不適用於您目前選擇的格式 email！

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。

如果您透過 Connector Script 整合整合 LaterPay，您將無法在 AMP 頁面上使用該整合。`amp-access-laterpay` 類似於 Connector Script，提供一組類似的功能，但專為 AMP 頁面而建置。

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

`amp-access-laterpay` 组件在內部使用 `amp-access`，以提供類似於 `amp-access` 的行為，但針對與 LaterPay 服務一起使用而量身定制。

如果您有自己的付費牆服務，想要與 `amp-access` 一起使用，並且想要在同一個頁面上將其與 LaterPay 一起使用，這也是可能的。

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

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

您可以參考有關設定 LaterPay Connector（LaterPay 現有的前端整合）的文件，以了解如何設定購買選項。

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

此组件也依賴存取內容標記來顯示和隱藏內容。

將 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 Connector - 類似於 `amp-access-laterpay`，但適用於非 AMP 頁面。

使用存取內容標記並顯示購買清單

存取內容標記的使用方式應與 `amp-access` 相同。

當使用者無權存取文章時，ID 為 `amp-access-laterpay-dialog` 的元素將呈現購買選項的清單。

此清單具有一些非常基本的樣式設定，並且可以自訂以使其感覺更融入發布商的頁面。

<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-laterpay` 類別。

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

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

屬性	值	描述
`articleTitleSelector`	CSS 選擇器必要	CSS 選擇器，用於判斷頁面中包含文章標題的元素。這將確保為購買文章呈現的頁面將包含此標題，以便使用者知道他們正在購買什麼。
`articleId`	逗號分隔的識別碼清單	預設情況下，文章的 URL 用於將其與購買選項進行匹配，但您可以設定文章 ID 而不是指定購買選項的 URL 路徑在 LaterPay Connector-UI 中，然後使用 `articleId` 屬性將文章與購買選項匹配。在透過文章 URL 匹配購買選項不夠彈性的情況下，這是必要的。請參閱 LaterPay Connector() 的設定頁面，以了解一些範例情境，其中這很有用。
`jwt`	用於動態付款設定的 JWT 權杖	此選項允許您指定已簽署的 JSON Web 權杖，其中包含可用付費內容的設定。這表示您可以提供頁面內設定，以程式設計方式在您的頁面中產生，而不是在 LaterPay 的 Connector 管理員介面上手動指定。當為許多不同的文章設定單次購買時，這可能特別有用。如果您想了解有關如何建立此權杖以及可以在其中指定哪些內容的更多資訊，請參閱 LaterPay 的 Connector Script 整合的 JWT 付費內容 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`	可稍後付款的選項的購買按鈕中顯示的文字。	'立即購買，稍後付款'
`payNowButton`	必須在購買時付款的選項的購買按鈕中顯示的文字。	'立即購買'
`defaultButton`	在選取任何選項之前，購買按鈕中顯示的預設文字。	'立即購買'
`alreadyPurchasedLink`	如果使用者過去已購買過文章，但他們遺失了 Cookie（或是在不同的裝置上），他們可以使用此連結登入 LaterPay 並檢索其購買項目。	'我已經買過了'
`header`	選用標頭文字。
`footer`	選用頁尾文字。

驗證

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

需要更多協助嗎？

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

前往 Stack Overflow

發現錯誤或缺少功能嗎？

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

前往 GitHub

amp-access-laterpay 0.2 0.1

描述

必要腳本

用法

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

使用存取內容標記並顯示購買清單

設定

樣式設定

分析

在地化

驗證

amp-access-laterpay