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>

範例

amp-access-laterpay

用法

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

amp-access-laterpay 元件基於 amp-access，並且需要它。

如果您透過 Connector Script integration 整合 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 使用 amp-access-laterpay

如果您有現有的訂閱系統，並且打算僅將 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 的元素將呈現購買選項清單。此清單具有一些非常基本的樣式，並且可以自訂以使其更融入發布商的頁面。

如果您想使用預設樣式，請確保新增 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 文件，以了解 Connector Script integration。
`locale`	字串	定義適用於語言環境的價格格式樣式。
`localeMessages`	物件	允許發布商自訂或本地化產生的購買選項清單中出現的文字。有關更多資訊，請參閱本地化章節。
`scrollToTopAfterAuth`	布林值	如果為 true，則在授權過程成功後將頁面捲動到頂部。如果您顯示對話方塊的位置在頁面中較下方，並且使用者在返回頁面後可能會對他們目前的捲動位置感到困惑，這可能會很有幫助。
`region`	字串	指定您是否位於 `eu` 或 `us` LaterPay region。
`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 使用 amp-access-laterpay

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

設定

樣式設定

分析

本地化

驗證

amp-access-laterpay