amp-access-laterpay

简介

amp-access-laterpay 允许发布商轻松与支付基础设施平台 LaterPay 集成。它基于并需要 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 和 class 都是预定义的，应保持原样。然后，您可以使用它们作为参考来根据需要设置对话框的样式。

<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 编写