Description Allows publishers to easily integrate with the LaterPay micropayments platform. amp-access-laterpay is based on, and requires AMP Access.
Required Scripts Notice that you need scripts for "amp-access-laterpay", "amp-access" and "amp-analytics".
<script async custom-element="amp-access" src="https://cdn.ampproject.org/v0/amp-access-0.1.js"></script>
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<script async custom-element="amp-access-laterpay" src="https://cdn.ampproject.org/v0/amp-access-laterpay-0.1.js"></script>
Examples See AMP By Example's annotated amp-access-laterpay example.

Behavior

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. 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 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.

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.
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.
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.

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>

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>

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
premiumContentTitle The Premium Content purchase option allows the user to buy just the currently shown article for the specified price. The title for this option cannot be specified in the Connector UI but it can be customized here. 'Buy only this article'
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.