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，并且需要它。

如果您通过连接器脚本集成集成 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 用于将其与购买选项匹配，但是您可以不在购买选项中指定 URL 路径，而是在 LaterPay 连接器 UI 中设置文章 ID，然后使用 `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