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>

Permite que os editores se integrem facilmente com a plataforma de micropagamentos LaterPay. O amp-access-laterpay é baseado no AMP Access e o exige.

Comportamento

O LaterPay é uma plataforma de micropagamento que permite aos usuários comprar qualquer conteúdo on-line com apenas dois cliques e ter acesso imediato, sem registro antecipado, dados pessoais ou pagamento. Os usuários só pagam quando as compras atingirem um total de cinco dólares ou cinco euros nos sites. Os provedores de conteúdo podem vender itens individuais ou cartões de tempo, que permitem o acesso ao conteúdo por uma taxa fixa ou por um tempo limitado.

Se você estiver integrando o LaterPay por meio da integração do Connector Script (link em inglês), não poderá usar essa integração em páginas AMP. O amp-access-laterpay é semelhante ao Connector Script, fornecendo um conjunto semelhante de recursos, mas criado para páginas AMP.

Também é possível vender conteúdo pelo LaterPay simplesmente usando o amp-access-laterpay como único método de integração.

O componente amp-access-laterpay usa o AMP Access internamente para oferecer um comportamento semelhante ao AMP Access, mas adaptado para uso com o serviço LaterPay.

Se você tem seu próprio serviço de paywall e quer usá-lo com o AMP Access e com o LaterPay na mesma página, também é possível fazer isso.

O componente amp-access-laterpay não requer uma configuração de autorização ou pingback, porque ele está pré-configurado para funcionar com o serviço LaterPay. Ele também não precisa de configuração manual de links de login.

As diferentes opções de compra podem ser configuradas na conta do LaterPay do editor, e o componente recuperará a configuração e criará uma lista de opções de compra disponíveis.

Consulte a documentação sobre a configuração do LaterPay Connector (link em inglês), a integração de front-end do LaterPay, para saber como configurar as opções de compra.

A lista gerada pode ser estilizada e apresentada de acordo com a preferência do editor.

Esse componente também depende da marcação de conteúdo de acesso para mostrar e ocultar conteúdo.

Configuração

A configuração é semelhante ao AMP Access, mas não são necessários links de login, autorização e pingback.

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

Os seguintes valores podem ser definidos no objeto de configuração laterpay:

Usar a marcação de conteúdo de acesso e mostrar a lista de compras

A marcação de conteúdo de acesso precisa ser usada da mesma forma que o AMP Access.

O elemento com o código amp-access-laterpay-dialog renderiza uma lista de opções de compra quando o usuário não tem acesso ao artigo. Essa lista tem um estilo muito básico e pode ser personalizada para uma integração maior com a página do editor.

Adicione a classe amp-access-laterpay se quiser usar o estilo padrão.

<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="">
  Oops... Something broke.
</section>

<div amp-access="access" amp-access-hide="">
  <p>...article content...</p>
</div>

Estilo

Várias classes são aplicadas a alguns dos elementos na marcação gerada. Os elementos sem classes podem ser citados sem ambiguidades por meio de seletores de elementos CSS.

Já existe um CSS com layout básico, mas é recomendável que os editores definam o estilo para que ele corresponda à aparência das páginas deles.

A estrutura criada para a caixa de diálogo se parece com a seguinte:

<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">Comprar agora</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>

Localização

O texto mostrado na caixa de diálogo das opções de compra é definido pelo editor na IU do LaterPay Connector.

O texto restante faz parte do componente estendido e pode ser alterado e localizado usando as opções de configuração da seguinte forma:

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

As seguintes chaves de mensagem podem ser traduzidas ou personalizadas, mas precisam manter o significado e a intenção originais.

Análise

Como amp-access-laterpay é baseado em amp-access, ele é compatível com todos os eventos de análise enviados pelo amp-access.

Todos os exemplos disponíveis em https://ampexample.laterpay.net/ estão configurados para enviar esses eventos de análise, caso você queira ver um exemplo mais completo de como isso é na prática.

Usar o AMP Access LaterPay com o AMP Access

Se você tem um sistema de assinatura e pretende usar o LaterPay somente para vendas de artigos individuais, é possível fazer com que os dois métodos de venda coexistam na mesma página, usando AMP Access e AMP Access LaterPay juntos.

Primeiro, consulte a documentação do AMP Access para saber como configurar o AMP Access com seu paywall existente.

A seção sobre vários provedores explica como configurar diversos provedores com namespaces.

Ao usar o AMP Access com o LaterPay e uma integração de paywall existente, a configuração necessária pode ser semelhante a esta:

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

Em que a marcação de acesso ao conteúdo pode se parecer com esta:

<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 class="error-section" amp-access="error" amp-access-hide>
  Oops... Something broke.
</section>

<div amp-access="laterpay.access OR publishername.access" amp-access-hide>
  <p>...article content...</p>
</div>

Veja um exemplo mais completo em https://ampexample.laterpay.net/dual-amp-access.html (link em inglês).

Documentação relacionada

• AMP Access
• LaterPay (link em inglês)
• LaterPay: como fazemos micropagamentos (link em inglês)
• LaterPay Connector (link em inglês). Semelhante ao AMP Access LaterPay, mas voltado para páginas que não são AMP.

Validação

Consulte as regras do amp-access-laterpay (link em inglês) nas especificações do validador de AMP.