AMP

Important: this component does not support your currently selected format email!

amp-access-laterpay

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

Скрипты Обратите внимание, что вам понадобятся скрипты для amp-access-laterpay, amp-access и amp-analytics.
<script async custom-element="amp-access" src="https://cdn.ampproject.org/v0/amp-access-0.1.js">
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js">
<script async custom-element="amp-access-laterpay" src="https://cdn.ampproject.org/v0/amp-access-laterpay-0.2.js">
Примеры См. пример amp-access-laterpay на сайте AMP By Example.

Действия

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, перечислены ниже.

Свойство Значение Описание
articleTitleSelector Селектор CSS (обязательно) Селектор CSS, который определяет элемент на странице, содержащий заголовок статьи. Это гарантирует, что на страница с предложением купить статью есть ее название и пользователь знает, что покупает.
articleId Список идентификаторов, разделенный запятыми По умолчанию для сопоставления статьи с вариантом покупки используется ее URL. Однако вместо пути URL вы можете настроить идентификатор статьи в интерфейсе LaterPay Connector, а затем воспользоваться свойством articleId, чтобы выполнить сопоставление.
Это необходимо в тех случаях, когда вам требуется более гибкое сопоставление варианта покупки с URL. Ознакомьтесь со статьей о конфигурации LaterPay Connector. Там приведены примеры и сценарии использования.
jwt Токен JWT для настройки динамического платежа Этот параметр позволяет указать подписанный веб-токен JSON с конфигурацией для доступного платного контента. Таким образом вы можете предоставить внутристраничную конфигурацию, сгенерированную программно на ваших страницах, а не указывать ее вручную в интерфейсе LaterPay Connector. Это может быть особенно полезно при настройке отдельных покупок для множества разных статей.
О том, как создать токен и какой контент можно в нем указывать, читайте в документации по JWT Paid Content API для скрипта Connector Script.
locale string Определяет стиль форматирования цены, соответствующий региональным настройкам.
localeMessages object Позволяет издателю настраивать или локализовать текст, присутствующий в сгенерированном списке вариантов покупки. Более подробные сведения приведены в разделе Локализация.
scrollToTopAfterAuth boolean При значении true прокручивает страницу вверх, если авторизация прошла успешно. Это полезно, если диалог был показан в нижней части страницы и пользователь может запутаться с прокруткой после возврата на страницу.
region string Регион для LaterPay: eu или us.
sandbox boolean Требуется только в том случае, если вы используете тестовую среду для проверки конфигурации сервера. Вам также необходимо применить режим разработчика AMP.

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

Разметка контента для доступа здесь используется так же, как и в случае с 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>

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

Ключ Описание Значение по умолчанию
payLaterButton Текст кнопки для совершения покупки. Показывается для вариантов, когда можно заплатить позже. 'Buy Now, Pay Later'
payNowButton Текст кнопки для совершения покупки. Показывается для вариантов с немедленной оплатой. 'Buy Now'
defaultButton Текст кнопки, который отображается, пока ни один вариант не выбран. 'Buy Now'
alreadyPurchasedLink Если пользователь ранее приобрел статью, но файлы cookie не сохранились или он вошел с другого устройства, эта ссылка пригодится для входа в LaterPay и доступа к оплаченному контенту. 'I already bought this'
header Необязательный текст верхнего колонтитула.
footer Необязательный текст нижнего колонтитула.

Аналитика

Поскольку в основе 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 читайте в спецификации валидатора AMP.

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