Google AMP amp-access-laterpay
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 = "https://cdn.ampproject.org/v0/amp-access-0.1.js" > </ script > |
- Also, you have to import amp-analytics.
HTML
< script async custom-element = "amp-analytics" src = "https://cdn.ampproject.org/v0/amp-analytics-0.1.js" > </ script > |
- And then import the amp-access-laterpay component.
HTML
< script async custom-element = "amp-access-laterpay" src = "https://cdn.ampproject.org/v0/amp-access-laterpay-0.2.js" > </ 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 >w3wiki</ h3 > < p > w3wiki is a Computer Science portal for Beginner. 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> w3wiki is a Computer Science portal for Beginner. It contains well written, well thought and well explained computer science and programming articles, quizzes etc. w3wiki is a Computer Science portal for Beginner. 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 = "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 > Beginner For Beginner </ h1 > <!-- This section is visible to all users. No special markup is needed in this case.--> < section class = "preview" > < h3 >The Article</ h3 > < p > w3wiki is a Computer Science portal for Beginner. 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> w3wiki is a Computer Science portal for Beginner. It contains well written, well thought and well explained computer science and programming articles, quizzes etc. w3wiki is a Computer Science portal for Beginner. It contains well written, well thought and well explained computer science and programming articles, quizzes etc. </ div > </ body > </ html > |