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

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 连接器（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 连接器 - 与 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 连接器 UI 中的文章 ID，而不是为购买选项指定 URL 路径，然后使用 `articleId` 属性将文章与购买选项匹配。在通过文章 URL 匹配购买选项不够灵活的情况下，这是必要的。请参阅 LaterPay 连接器() 的配置页面，了解一些有用的示例场景。
`jwt`	用于动态付款配置的 JWT 令牌	此选项允许您指定带有可用付费内容配置的签名 JSON Web 令牌。这意味着您可以在页面中提供配置，在您的页面中以编程方式生成配置，而不是在 LaterPay 的连接器管理界面上手动指定配置。这在为许多不同的文章配置单次购买时可能特别有用。如果您想了解有关如何创建此令牌以及可以在其中指定哪些内容的更多信息，请参阅 LaterPay 的 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 连接器 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