amp-access-laterpay

0.2 0.1

Позволяет издателям легко обеспечивать интеграцию с платформой для микроплатежей LaterPay. Для работы с amp-access-laterpay необходимо использовать amp-access.

Действия

LaterPay – это платформа для микроплатежей, которая позволяет пользователям покупать онлайн-контент всего в два клика. При этом они сразу получают доступ к оплаченным данным – без предварительной регистрации и отправки личной или платежной информации. Оплата осуществляется только после того, как сумма покупки достигла 5 долл. США или евро на разных сайтах. Поставщики контента могут продавать отдельные элементы или повременный доступ к контенту (ограниченный или постоянный).

Если интеграция с LaterPay осуществлялась с помощью Connector Script, вы не сможете использовать ее на AMP-страницах. Решение amp-access-laterpay аналогично Connector Script по функциональности, но предназначено специально для AMP-страниц.

Чтобы продавать контент через LaterPay, достаточно использовать amp-access-laterpay в качестве единственного метода интеграции.

Компонент amp-access-laterpay использует решение AMP Access, чтобы обеспечить аналогичное поведение при работе с сервисом LaterPay.

Если у вас есть собственный сервис платного доступа и вы хотите использовать его совместно с AMP Access и LaterPay на одной и той же странице, это можно настроить.

Компонент amp-access-laterpay не требует авторизации или конфигурации автоматического уведомления, поскольку он уже настроен для работы с LaterPay. Также не требуется настраивать вручную ссылки для входа.

Разные варианты покупки можно настроить в издательском аккаунте LaterPay. Компонент будет запрашивать конфигурации и создавать список вариантов.

Ознакомьтесь с документацией по настройке LaterPay Connector, инструмента для интеграции с пользовательским интерфейсом.

Список, который создается компонентом, можно стилизовать, чтобы он выглядел так, как нужно издателю.

При работе компонента также применяется разметка контента для доступа. Она позволяет скрывать и показывать контент.

Конфигурация

Конфигурация похожа на ту, что используется для AMP Access, но не требует авторизации, автоматического уведомления и ссылок для входа.

<script id="amp-access" type="application/json">
  {
    "vendor": "laterpay",
    "laterpay": {
      "property": value
      }
    }
</script>

Значения, которые можно настроить в объекте конфигурации laterpay, перечислены ниже.

Разметка контента для доступа и список вариантов покупки

Разметка контента для доступа здесь используется так же, как и в случае с AMP Access.

Элемент с идентификатором amp-access-laterpay-dialog обрабатывает список вариантов, если у пользователя нет доступа к статье. Этот список имеет несколько базовых стилей и его можно настроить так, чтобы он лучше смотрелся на странице издателя.

Если вас устраивает стиль по умолчанию, убедитесь, что вы применяете класс amp-access-laterpay.

<section amp-access="NOT error AND NOT access" amp-access-hide="">
  <div id="amp-access-laterpay-dialog" class="amp-access-laterpay"></div>
</section>

<section class="error-section" amp-access="error" amp-access-hide="">
  Произошла ошибка.
</section>

<div amp-access="access" amp-access-hide="">
  <p>...Контент статьи...</p>
</div>

Стилизация

К некоторым элементам сгенерированной разметки применяется несколько классов. На элементы без классов можно однозначно ссылаться через селекторы элементов CSS.

У нас есть базовые шаблоны CSS, но мы рекомендуем издателям стилизовать списки так, чтобы они естественно смотрелись на страницах.

Структура диалога выглядит так:

<div id="amp-access-laterpay-dialog" class="amp-access-laterpay">
  <div class="amp-access-laterpay-container">
    <p class="amp-access-laterpay-header">
      Необязательно. Отображается, если в верхнем колонтитуле задано сообщение для локализации.
    </p>
    <ul>
      <li>
        <label>
          <input name="purchaseOption" type="radio">
            <div class="amp-access-laterpay-metadata">
              <span class="amp-access-laterpay-title">Название покупки</span>
              <p class="amp-access-laterpay-description">Описание покупки</p>
            </div>
          </label>
          <p class="amp-access-laterpay-price-container">
            <span class="amp-access-laterpay-price">100</span>
            <sup class="amp-access-laterpay-currency">РУБ</sup>
          </p>
        </li>
        <!-- ...Список других вариантов... -->
      </ul>
      <button class="amp-access-laterpay-purchase-button">Купить</button>
      <p class="amp-access-laterpay-already-purchased-container">
        <a href="…">Уже есть</a>
      </p>
      <p class="amp-access-laterpay-footer">
        Необязательно. Отображается, если в нижнем колонтитуле задано сообщение для локализации.
      </p>
    </div>
    <p class="amp-access-laterpay-badge">Технологии <a href="https://laterpay.net" target="_blank">LaterPay</a></p>
  </div>

Локализация

Текст, который отображается в диалоговом окне с вариантами покупки, указывается издателем в интерфейсе LaterPay Connector.

Оставшийся текст является частью расширенного компонента. Его можно изменить и локализовать с помощью параметров конфигурации следующим образом:

<script id="amp-access" type="application/json">
  {
    "vendor": "laterpay",
    "laterpay": {
      "localeMessages": {
        "messageKey": "message value"
        }
      }
    }
</script>

Ниже перечислены ключи, которые можно перевести или настроить. Учитывайте, что текст в любом случае должен сохранять исходный смысл.

Аналитика

Поскольку в основе amp-access-laterpay лежит amp-access, этот компонент поддерживает все события аналитики, которые отправляет amp-access.

Подробные практические примеры можно найти на сайте https://ampexample.laterpay.net/. Все они настроены так, чтобы отправлять эти события.

Совместное использование AMP Access LaterPay и AMP Access

Если у вас есть собственная система подписки и вы собираетесь использовать LaterPay только для продажи отдельных статей, можно сочетать AMP Access LaterPay и AMP Access на одной странице.

Для начала ознакомьтесь с документацией по AMP Access и узнайте, как настроить этот компонент для работы с вашим платным доступом.

В разделе о нескольких поставщиках объясняется, как настроить несколько поставщиков, используя пространства имен.

В сочетании с LaterPay и существующей системой платного доступа конфигурация будет выглядеть примерно так:

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

Разметка контента может выглядеть так:

<section amp-access="NOT error AND NOT laterpay.access AND NOT publishername.access" amp-access-hide>
  <p>
    <a on="tap:amp-access.login-publishername">Войдите, чтобы воспользоваться подпиской на PublisherName.</a>
  </p>

  <div id="amp-access-laterpay-dialog" class="amp-access-laterpay"></div>
</section>

<section class="error-section" amp-access="error" amp-access-hide>
  Произошла ошибка.
</section>

<div amp-access="laterpay.access OR publishername.access" amp-access-hide>
  <p>...Контент статьи...</p>
</div>

Более подробный пример можно найти по ссылке: https://ampexample.laterpay.net/dual-amp-access.html.

Статьи по теме

• AMP Access
• LaterPay
• LaterPay: как мы работаем с микроплатежами
• LaterPay Connector – решение, похожее на AMP Access LaterPay, но созданное для обычных страниц без AMP.

Проверка

О правилах для amp-access-laterpay читайте в спецификации валидатора AMP.