AMP

Important: this documentation is not applicable to your currently selected format stories!

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.2.js"></script>
<script async custom-element="amp-access-laterpay" src="https://cdn.ampproject.org/v0/amp-access-laterpay-0.1.js"></script>

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:

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.

Need more help?

You've read this document a dozen times but it doesn't really cover all of your questions? Maybe other people felt the same: reach out to them on Stack Overflow.

Go to Stack Overflow
Found a bug or missing a feature?

The AMP project strongly encourages your participation and contributions! We hope you'll become an ongoing participant in our open source community but we also welcome one-off contributions for the issues you're particularly passionate about.

Go to GitHub