AMP

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.
localestringОпределяет стиль форматирования цены, соответствующий региональным настройкам.
localeMessagesobjectПозволяет издателю настраивать или локализовать текст, присутствующий в сгенерированном списке вариантов покупки. Более подробные сведения приведены в разделе Локализация.
scrollToTopAfterAuthbooleanПри значении true прокручивает страницу вверх, если авторизация прошла успешно. Это полезно, если диалог был показан в нижней части страницы и пользователь может запутаться с прокруткой после возврата на страницу.
regionstringРегион для LaterPay: eu или us.
sandboxbooleanТребуется только в том случае, если вы используете тестовую среду для проверки конфигурации сервера. Вам также необходимо применить режим разработчика 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