amp-access-laterpay

0.2 0.1

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

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:

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.

Validation

See amp-access-laterpay rules in the AMP validator specification.