Google AMP amp-access-laterpay用法及代码示例

许多发布商都希望在其网站上添加一个便捷的支付基础架构平台，而amp-access-laterpay标签仅用于此目的。它可以帮助发布商轻松地在其网页上集成付款平台。它使用AMP Access和LaterPay这样做。

设置：要使用amp-access-laterpay标签，您必须在head标签中添加某些脚本和样式。

首先，您必须导入amp-access组件。

HTML

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

另外，您必须导入amp-analytics。

HTML

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

然后导入amp-access-laterpay组件。

HTML

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

最后添加指定供应商的配置，以及amp-access的vendor-specific配置。

HTML

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

控制可见性：决定用户将看到什么，他将不会看到什么，他是否是有效用户以及如果没有显示则显示什么消息非常重要。

要设置预览部分，请使用以下代码。此代码设置了一个预览分区，该分区对所有访客可见。

HTML

<section class="preview">
    <h3>GeeksForGeeks</h3>
     
<p>
        GeeksforGeeks is a Computer 
        Science portal for geeks. It 
        contains well written, well 
        thought and well explained
        computer science and programming 
        articles, quizzes etc.
    </p>
 
</section>

如果要在用户尝试使用FALSE凭据输入时设置安全检查，请使用此代码。

HTML

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

如果必须进行某些样式设置，请使用下面提到的id和class，因为它们是预定义的。

HTML

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

如果存在任何类型的错误，并且想要显示它，请使用下面提到的代码。

HTML

<section amp-access="error" amp-access-hide>
    Oops... Something broke. Please try Again!!
</section>

如果访问凭据正确，则可以使用此代码显示隐藏的部分。如果该值评估为true，则显示该值。

HTML

<div amp-access="access" amp-access-hide>
    GeeksforGeeks is a Computer Science 
    portal for geeks. It contains well 
    written, well thought and well 
    explained computer science and 
    programming articles, quizzes etc.
 
    GeeksforGeeks is a Computer Science 
    portal for geeks. It contains well 
    written, well thought and well 
    explained computer science and 
    programming articles, quizzes etc.
</div>

例：

HTML

<!doctype html>
<html amp>
 
<head>
    <meta charset="utf-8">
    <link rel="canonical" href=
"https://amp.dev/documentation/examples/components/amp-3d-gltf/index.html">
 
    <meta name="viewport" content=
"width=device-width,minimum-scale=1,initial-scale=1">
 
    <script async src=
        "https://cdn.ampproject.org/v0.js">
    </script>
     
    <title>Google AMP amp-access-laterpay</title>
 
    <!-- Import the `amp-access` component 
        in the header. -->
    <script async custom-element="amp-access"
src="https://cdn.ampproject.org/v0/amp-access-0.1.js">
    </script>
 
    <!-- `amp-access` requires `amp-analytics` 
        to be imported as well. -->
    <script async custom-element="amp-analytics"
src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js">
    </script>
 
    <!-- And of course the `amp-access-laterpay` 
        component. -->
    <script async custom-element="amp-access-laterpay"
src="https://cdn.ampproject.org/v0/amp-access-laterpay-0.2.js">
    </script>
 
    <!-- Add the configuration which specifies 
        the vendor, and vendor specific 
        configuration for `amp-access` -->
    <script id="amp-access" type="application/json">
    {
        "vendor":"laterpay",
        "laterpay":{
            "articleTitleSelector":".preview > h3",
            "sandbox":true
        }
    }
    </script>
 
    <style amp-boilerplate>
        body {
            -webkit-animation:-amp-start 8s 
                steps(1, end) 0s 1 normal both;
 
            -moz-animation:-amp-start 8s 
                steps(1, end) 0s 1 normal both;
 
            -ms-animation:-amp-start 8s 
                steps(1, end) 0s 1 normal both;
 
            animation:-amp-start 8s 
                steps(1, end) 0s 1 normal both;
        }
 
        @-webkit-keyframes -amp-start {
            from {
                visibility:hidden
            }
 
            to {
                visibility:visible
            }
        }
 
        @-moz-keyframes -amp-start {
            from {
                visibility:hidden
            }
 
            to {
                visibility:visible
            }
        }
 
        @-ms-keyframes -amp-start {
            from {
                visibility:hidden
            }
 
            to {
                visibility:visible
            }
        }
 
        @-o-keyframes -amp-start {
            from {
                visibility:hidden
            }
 
            to {
                visibility:visible
            }
        }
 
        @keyframes -amp-start {
            from {
                visibility:hidden
            }
 
            to {
                visibility:visible
            }
        }
    </style>
 
    <noscript>
        <style amp-boilerplate>
            body {
                -webkit-animation:none;
                -moz-animation:none;
                -ms-animation:none;
                animation:none
            }
        </style>
    </noscript>
 
    <style amp-custom>
        h1,
        h3 {
            color:green;
        }
        h1 {
            text-align:center;
        }
 
        p {
            color:red;
        }
    </style>
</head>
 
<body>
    <h1>
        Geeks For Geeks
    </h1>
 
    <!-- This section is visible to all 
        users. No special markup is 
        needed in this case.-->
    <section class="preview">
        <h3>The Article</h3>
         
<p>
            GeeksforGeeks is a Computer 
            Science portal for geeks. It 
            contains well written, well 
            thought and well explained
            computer science and programming 
            articles, quizzes etc.
        </p>
 
    </section>
 
    <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>
        Oops... Something broke.
    </section>
 
    <div amp-access="access" amp-access-hide>
        GeeksforGeeks is a Computer Science portal 
        for geeks. It contains well  written, well 
        thought and well explained computer science 
        and programming articles, quizzes etc.
 
        GeeksforGeeks is a Computer Science portal 
        for geeks. It contains well written, well 
        thought and well explained computer science 
        and programming articles, quizzes etc.
    </div>
</body>
 
</html>

输出：

这是正在显示的预览内容…

相关用法

注：本文由纯净天空筛选整理自aditya_taparia大神的英文原创作品 Google AMP amp-access-laterpay。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。