amp-access-laterpay
Description
Allows publishers to integrate with the LaterPay micropayments platform.
Required Scripts
<script async custom-element="amp-access-laterpay" src="https://cdn.ampproject.org/v0/amp-access-laterpay-0.1.js"></script>
<script async custom-element="amp-access-laterpay" src="https://cdn.ampproject.org/v0/amp-access-laterpay-0.1.js"></script>
Exemples
Usage
LaterPay is a micropayment platform that allows users to buy any online content with just two clicks, and get immediate access – without upfront registration, personal data, or payment. Users only pay, once their purchases have reached a total of \$5 or 5€ across websites. Content providers can sell individual items or time passes, which allow flatrate access or time limited access to content.
The amp-access-laterpay
component is based on, and requires amp-access
.
If you're integrating LaterPay via the Connector Script integration you won't be able to use that integration on AMP pages. amp-access-laterpay
is analogous to Connector Script, providing a similar set of features, but built for AMP pages.
It's also possible to sell content via LaterPay simply using amp-access-laterpay
as the sole integration method.
The amp-access-laterpay
component uses amp-access
internally to provide a behavior similar to amp-access
, but tailored for usage with the LaterPay service.
If you have your own paywall service that you'd like to use with amp-access
and would like to use it together with LaterPay on the same page, it's also possible to do so.
The amp-access-laterpay
component does not require an authorization or pingback configuration, because it is pre-configured to work with the LaterPay service. It also does not require manual setup of login links.
The different purchase options can be configured on the publisher's LaterPay account, and the component will retrieve the configuration and create a list of available purchase options.
You can refer to the documentation on configuring the LaterPay Connector, LaterPay's existing front-end integration, to learn how to configure the purchase options.
The generated list can be styled and presented according to the publisher's preference.
This component also relies on Access Content Markup to show and hide content.
Using amp-access-laterpay with amp-access
If you have an existing subscription system and you intend to use LaterPay only for individual article sales, it's possible to have both sale methods coexist in the same page, using both amp-access
and amp-access-laterpay
together.
First of, please refer to the amp-access
documentation to learn how to configure amp-access
with your existing paywall.
The multiple providers section explains how to setup multiple providers with namespaces.
When using it with LaterPay and an existing paywall integration, the necessary configuration can look something like this:
<script id="amp-access" type="application/json"> [ { "vendor": "laterpay", "laterpay": { "region": "us" }, "namespace": "laterpay" }, { "authorization": "https://pub.com/amp-access?rid=READER_ID&url=SOURCE_URL", "pingback": "https://pub.com/amp-ping?rid=READER_ID&url=SOURCE_URL", "login": "https://pub.com/amp-login?rid=READER_ID&url=SOURCE_URL", "authorizationFallbackResponse": {"error": true}, "namespace": "publishername" } ] </script>
Where as the content access markup could end up looking like this:
<section amp-access="NOT error AND NOT laterpay.access AND NOT publishername.access" amp-access-hide > <p> <a on="tap:amp-access.login-publishername" >Login here to access your PublisherName subscription.</a > </p> <div id="amp-access-laterpay-dialog" class="amp-access-laterpay"></div> </section> <section amp-access="error" amp-access-hide class="error-section"> Oops... Something broke. </section> <div amp-access="laterpay.access OR publishername.access" amp-access-hide> <p>...article content...</p> </div>
You can find a more complete example here.
The following resources provide further documentation on using LaterPay with AMP:
amp-access
- LaterPay
- LaterPay: How we do MicroPayments
- LaterPay Connector - Similar to
amp-access-laterpay
but for non AMP pages.
Using Access Content Markup and showing the purchase list
Access Content Markup should be used in the same way as with amp-access
.
The element with id amp-access-laterpay-dialog
will render a list of purchase options when the user does not have access to the article. This list has some very basic styling and can be customized to feel more integrated in the publisher's page.
Make sure you add the amp-access-laterpay
class if you want to use the default styling.
<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 class="error-section"> Oops... Something broke. </section> <div amp-access="access" amp-access-hide> <p>...article content...</p> </div>
Configuration
Configuration is similar to amp-access
, but no authorization, pingback and login links are required.
<script id="amp-access" type="application/json"> { "vendor": "laterpay", "laterpay": { "property": value } } </script>
The following values can be set in the laterpay
config object:
Property | Values | Description |
---|---|---|
articleTitleSelector | CSS selector required | A CSS selector which determines the element in the page which contains the title of the article. This will ensure the page presented for purchase of the article will contain this title so the user is aware of what they're purchasing. |
articleId | Comma separated list of identifiers | By default, the URL of an article is used to match it to a purchase option, but instead of specifying a URL path for a purchase option you can set an Article ID in the LaterPay Connector-UI and then use the articleId property to match the article with the purchase option. This is necessary in cases where matching a purchase option by an article’s URL is not flexible enough. See the configuration page for the LaterPay Connector() to see learn about some example scenarios in which this is useful. |
jwt | JWT token for dynamic payment configuration | This option allows you specify a signed JSON Web Token with a configuration for the available paid content. This means that you can provide an in page configuration, programatically generated in your pages rather than specifying it manually on LaterPay's Connector Admin interface. This might be specially useful when configuring Single Purchases for many different articles. If you'd like more information on how to create this token and what content can be specified in it, please refer to LaterPay's JWT Paid Content API documentation for the Connector Script integration. |
locale | string | Defines the style of price formatting appropriate for the locale. |
localeMessages | object | Allows the publisher to customize or localize the text present in the generated list of purchase options. See the Localization section for more information. |
scrollToTopAfterAuth | boolean | If true, scrolls the page to the top after the authorization process is successful. This can be helpful if the place where you show the dialog is further below in the page and the user could be confused by their current scroll position after returning to the page. |
region | string | Specify if you are on the eu or us LaterPay region. |
sandbox | boolean | Only needed if you are using the sandbox mode to test out your server configuration. You also need to use AMP's development mode. |
Styling
Multiple classes are applied to some of the elements in the generated markup. Elements with no classes can be referred unambiguously through CSS element selectors.
Some basic layout CSS already exists, but it's recommended that publishers style it to match the look and feel of their pages.
The structure created for the dialog looks as follows:
<div id="amp-access-laterpay-dialog" class="amp-access-laterpay"> <div class="amp-access-laterpay-container"> <p class="amp-access-laterpay-header"> Optional, appears if header locale message is defined. </p> <ul> <li> <label> <input name="purchaseOption" type="radio" /> <div class="amp-access-laterpay-metadata"> <span class="amp-access-laterpay-title">Purchase option title</span> <p class="amp-access-laterpay-description"> Purchase option description </p> </div> </label> <p class="amp-access-laterpay-price-container"> <span class="amp-access-laterpay-price">0.15</span> <sup class="amp-access-laterpay-currency">USD</sup> </p> </li> <!-- ... more list items for other purchase options ... --> </ul> <button class="amp-access-laterpay-purchase-button">Buy Now</button> <p class="amp-access-laterpay-already-purchased-container"> <a href="...">I already bought this</a> </p> <p class="amp-access-laterpay-footer"> Optional, appears if footer locale message is defined. </p> </div> <p class="amp-access-laterpay-badge"> Powered by <a href="https://laterpay.net" target="_blank">LaterPay</a> </p> </div>
Analytics
Given that amp-access-laterpay
is based on amp-access
it supports all the analytics events sent by amp-access
.
The examples at https://ampexample.laterpay.net/ are all configured to send these analytics events if you'd like to see a more complete example as to how this would look in practice.
Localization
The text shown in the dialog for the purchase options will be defined by the publisher in the LaterPay Connector UI.
The remaining text is part of the extended component and can be changed and localized via the configuration options as follows:
<script id="amp-access" type="application/json"> { "vendor": "laterpay", "laterpay": { "localeMessages": { "messageKey": "message value" } } } </script>
The following message keys can be translated or customized, but be aware that they should retain their original meaning and intent.
Key | Description | Default value |
---|---|---|
payLaterButton | Text shown in the purchase button for options that can be paid later. | 'Buy Now, Pay Later' |
payNowButton | Text shown in the purchase button for options which will have to paid in the moment of purchase. | 'Buy Now' |
defaultButton | Default text shown in the purchase button before any option is selected. | 'Buy Now' |
alreadyPurchasedLink | If the user has purchased the article in the past but they have lost their cookies (or are in a different device) they can use this link to login to LaterPay and retrieve their purchases. | 'I already bought this' |
header | Optional header text. | |
footer | Optional footer text. |
Validation
See amp-access-laterpay
rules in the AMP validator specification.
Vous avez lu ce document une douzaine de fois mais il ne répond pas à toutes vos questions ? D'autres personnes ont peut-être eu le même sentiment. Contactez-les sur Stack Overflow.
Se rendre sur Stack Overflow Vous avez trouvé un bug ou une fonctionnalité manquante ?Le projet AMP encourage fortement votre participation et vos contributions ! Nous espérons que vous deviendrez un membre régulier de notre communauté open source, mais nous serons également ravis de recevoir des contributions ponctuelles concernant les questions qui vous intéressent particulièrement.
Se rendre sur GitHub