重要提示：此文档不适用于您当前选择的格式广告！

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 组件不需要授权或 pingback 配置，因为它已预先配置为与 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 的元素将呈现购买选项列表。此列表具有一些非常基本的样式，并且可以自定义，使其感觉更集成到发布商的页面中。

如果要使用默认样式，请确保添加 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，但不需要授权、pingback 和登录链接。

<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 管理界面上手动指定它。当为许多不同的文章配置单次购买时，这可能特别有用。如果您想了解有关如何创建此令牌以及可以在其中指定哪些内容的更多信息，请参阅 LaterPay 的 JWT 付费内容 API 文档，以了解 Connector Script 集成。
`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