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 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，然后使用 `articleId` 属性将文章与购买选项匹配，而不是为购买选项指定 URL 路径。在通过文章的 URL 匹配购买选项不够灵活的情况下，这是必要的。请参阅 LaterPay Connector 的配置页面()，了解有关此功能有用的示例场景。
`jwt`	用于动态支付配置的 JWT 令牌	此选项允许您指定一个带签名的 JSON Web 令牌，其中包含可用付费内容的配置。这意味着您可以提供页面内配置，在您的页面中以编程方式生成，而不是在 LaterPay 的 Connector 管理员界面中手动指定。这在为许多不同的文章配置单次购买时可能特别有用。如果您想了解有关如何创建此令牌以及可以在其中指定哪些内容的更多信息，请参阅 LaterPay 的 JWT 付费内容 API文档，了解 Connector 脚本集成的信息。
`locale`	字符串	定义适合该语言环境的价格格式样式。
`localeMessages`	对象	允许发布者自定义或本地化在生成的购买选项列表中显示的文本。有关更多信息，请参阅本地化部分。
`scrollToTopAfterAuth`	布尔值	如果为 true，则在授权过程成功后将页面滚动到顶部。如果在页面中较下方显示对话框的位置，并且用户在返回页面后可能会因其当前滚动位置而感到困惑，这会很有帮助。
`区域`	字符串	指定您位于`eu`还是`us`LaterPay 区域。
`沙盒`	布尔值	仅在使用沙盒模式测试服务器配置时需要。您还需要使用 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-access-laterpay 规则，了解 AMP 验证器规范。

需要更多帮助？

你已经阅读了本文档很多遍，但它并没有真正涵盖你的所有问题？也许其他人也有同样的感觉：在 Stack Overflow 上联系他们。

转到 Stack Overflow

发现了一个错误或缺少一个功能？

AMP 项目强烈鼓励你参与和贡献！我们希望你成为我们开源社区的持续参与者，但我们也欢迎针对你特别热衷的问题进行一次性贡献。

转到 GitHub

amp-access-laterpay 0.2 0.1

描述

所需的脚本

示例

用法

将 amp-access-laterpay 与 amp-access 结合使用

使用访问内容标记并显示购买清单

配置

样式

分析

本地化

验证

amp-access-laterpay