amp-access-laterpay

简介

amp-access-laterpay 允许发布商轻松与支付基础设施平台 LaterPay 集成。它基于 AMP Access，并且需要 AMP Access。

设置

在标题中导入 amp-access 组件。

<script async custom-element="amp-access" src="https://cdn.ampproject.org/v0/amp-access-0.1.js"></script>

amp-access 也需要导入 amp-analytics。

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

当然还有 amp-access-laterpay 组件。

<script async custom-element="amp-access-laterpay" src="https://cdn.ampproject.org/v0/amp-access-laterpay-0.2.js"></script>

添加配置，指定供应商和 amp-access 的供应商特定配置。

<script id="amp-access" type="application/json">
{
  "vendor": "laterpay",
  "laterpay": {
    "articleTitleSelector": ".preview > h3",
    "sandbox": true
  }
}
</script>

控制可见性

此部分对所有用户可见。在这种情况下，不需要特殊的标记。

文章

这是文章的预览。

<section class="preview">
  <h3>The Article</h3>
  <p>
    This is a preview of the article.
  </p>
</section>

仅当授权请求响应中的 access 和 error 属性的值都为 FALSE 时，才会显示此部分。此处将呈现具有不同购买选项的 LaterPay 对话框。

<section amp-access="NOT error AND NOT access" amp-access-hide>

此处显示的 ID 和类都是预定义的，应保持原样。然后，你可以使用这些作为参考来设置对话框的样式，以满足你的需求。

<div id="amp-access-laterpay-dialog" class="amp-access-laterpay"></div>

如果在获取授权请求时存在 error 属性，则会显示此部分。

糟糕... 出问题了。

<section amp-access="error" amp-access-hide>
  Oops... Something broke.
</section>

使用 amp-access 属性来控制每个组件的可见性。表达式必须评估为布尔值。如果评估为 TRUE，则会显示该部分。

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ullamcorper turpis vel commodo scelerisque. Phasellus luctus nunc ut elit cursus, et imperdiet diam vehicula. Duis et nisi sed urna blandit bibendum et sit amet erat. Suspendisse potenti. Curabitur consequat volutpat arcu nec elementum. Etiam a turpis ac libero varius condimentum. Maecenas sollicitudin felis aliquam tortor vulputate, ac posuere velit semper.

<div amp-access="access" amp-access-hide>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Curabitur ullamcorper turpis vel commodo scelerisque. Phasellus
    luctus nunc ut elit cursus, et imperdiet diam vehicula.
    Duis et nisi sed urna blandit bibendum et sit amet erat.
    Suspendisse potenti. Curabitur consequat volutpat arcu nec
    elementum. Etiam a turpis ac libero varius condimentum.
    Maecenas sollicitudin felis aliquam tortor vulputate,
    ac posuere velit semper.
</div>

需要进一步解释吗？

如果此页面上的解释没有涵盖你的所有问题，请随时与其他 AMP 用户联系，讨论你的确切用例。

前往 Stack Overflow

无法解释的功能？

AMP 项目强烈鼓励你的参与和贡献！我们希望你成为我们开源社区的长期参与者，但我们也欢迎你为自己特别感兴趣的问题做出一次性贡献。

在 GitHub 上编辑示例

作者： @trodrigues