Skip to content
Related Articles

Related Articles

Improve Article
Google AMP amp-access-laterpay
  • Last Updated : 25 Oct, 2020

 

Many publishers would like to add an easy payment infrastructure platform to their website, and the amp-access-laterpay tag is just for this purpose. It helps the publisher to easily integrate a payment platform on their webpage. It uses AMP Access and LaterPay to do so.

Setup: To use the amp-access-laterpay tag you have to add certain scripts and style in the head tag.

  • First, you have to import the amp-access component.

HTML




<script async custom-element="amp-access" src=
</script>
  • Also, you have to import amp-analytics.

HTML






<script async custom-element="amp-analytics" src=
</script>
  • And then import the amp-access-laterpay component.

HTML




<script async custom-element="amp-access-laterpay" src=
</script>
  • And at last add the configuration which specifies the vendor, and vendor-specific configuration for amp-access.

HTML




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

 

Controlling visibility: It is very important to decide what the user will see and what he will not, whether he is a valid user and if not then what message should be displayed.

 

To set a preview section use the following code. This code sets a preview division which is visible to all the visitors.

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>

 



If you want to set a security check when the user tries to enter with FALSE credentials then use this code.

HTML




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

 

If you have to do some styling then please use the id and class mention below as they are predefined.

HTML




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

 

If there is any kind of error and you want to display it then use the code mentioned below.

HTML




<section amp-access="error" amp-access-hide>
    Oops... Something broke. Please try Again!!
</section>
  • If the access credentials are correct then you can you this code to display the hidden section. If the value is evaluated true then it is displayed.

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>

Example:

HTML




<!doctype html>
<html amp>
 
<head>
    <meta charset="utf-8">
    <link rel="canonical" href=
 
    <meta name="viewport" content=
"width=device-width,minimum-scale=1,initial-scale=1">
 
    <script async src=
    </script>
     
    <title>Google AMP amp-access-laterpay</title>
 
    <!-- Import the `amp-access` component
        in the header. -->
    <script async custom-element="amp-access"
    </script>
 
    <!-- `amp-access` requires `amp-analytics`
        to be imported as well. -->
    <script async custom-element="amp-analytics"
    </script>
 
    <!-- And of course the `amp-access-laterpay`
        component. -->
    <script async custom-element="amp-access-laterpay"
    </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>

Output:

This is preview content being displayed…




My Personal Notes arrow_drop_up
Recommended Articles
Page :