重要提示：此文档不适用于您当前选择的格式 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，并且需要它。

如果您正在通过连接器脚本集成集成 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 现有的前端集成）的文档，以了解如何配置购买选项。

可以根据发布商的喜好对生成的列表进行样式设置和展示。

此组件还依赖于访问内容标记来显示和隐藏内容。

将 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