AMP

amp-access-laterpay

Permite a los editores integrar fácilmente la plataforma de micropagos LaterPay. amp-access-laterpay está basado en AMP Access, y lo necesita para su funcionamiento.

Secuencias de comandos obligatoriasTen en cuenta que necesitas las secuencias de comandos de "amp-access-laterpay", "amp-access" y "amp-analytics".
<script async custom-element="amp-access" src="https://cdn.ampproject.org/v0/amp-access-0.1.js"></script>
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<script async custom-element="amp-access-laterpay" src="https://cdn.ampproject.org/v0/amp-access-laterpay-0.2.js"></script>
EjemplosConsulta el ejemplo comentado de amp-access-laterpay de AMP By Example.

Comportamiento

LaterPay es una plataforma de micropagos que permite a los usuarios comprar cualquier contenido online con solo un par de clics y obtener acceso inmediato sin necesidad de pagar por adelantado, de proporcionar datos personales ni de registrarse. Los usuarios solo pagan una vez que sus compras en sitios web alcanzan un total de 5 $ o 5 €. Los proveedores de contenido pueden vender artículos individuales o pases por tiempo limitado, lo cual da acceso ilimitado o con limitación de tiempo al usuario.

Ten en cuenta que no podrás integrar LaterPay en las páginas AMP mediante la integración de Connector Script. amp-access-laterpay es similar a Connector Script, ya que proporciona un conjunto parecido de funciones, pero que están diseñadas para páginas AMP.

También es posible vender contenido a través de LaterPay utilizando amp-access-laterpay como método único de integración.

El componente amp-access-laterpay utiliza AMP Access de manera interna para poder tener un funcionamiento similar al de AMP Access, pero adaptado para su uso con el servicio LaterPay.

Si ya tienes un servicio de muro de pago y quieres utilizarlo con AMP Access y junto con LaterPay en la misma página, también puedes hacerlo.

El componente amp-access-laterpay no requiere una configuración de autorización ni de pingback, ya que está preconfigurado para funcionar con el servicio LaterPay. Tampoco requiere la configuración manual de enlaces de inicio de sesión.

Se pueden configurar las diferentes opciones de compra en la cuenta de LaterPay del editor, tras lo cual el componente obtendrá la configuración y creará una lista de las opciones de compra disponibles.

Puedes consultar la documentación sobre cómo configurar Laterpay Connector, la integración de frontend de la plataforma, para aprender a configurar las opciones de compra.

Se puede aplicar un estilo a la lista generada y presentarla de acuerdo con las preferencias del editor.

Este componente también utiliza el marcado de acceso al contenido para mostrar y ocultar el contenido.

Configuración

La configuración es similar a la de AMP Access, pero no se necesita autorización, pingback ni enlaces de inicio de sesión.

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

Se pueden asignar los siguientes valores al objeto de configuración laterpay:

PropiedadValoresDescripción
articleTitleSelectorSelector de CSS obligatorioSelector de CSS que determina el elemento de la página que contiene el título del artículo. De este modo, la página en la que se lleva a cabo la compra del artículo incluirá este título para que el usuario sepa lo que está comprando.
articleIdLista de identificadores separados por comasDe forma predeterminada, se utiliza la URL de un artículo para asociarlo a una opción de compra. Para hacer eso mismo sin especificar una ruta de URL para la opción de compra, puedes definir un ID de artículo en la interfaz de LaterPay Connector y utilizar la propiedad articleId para asociarlos.
Este procedimiento es necesario si asociar una opción de compra con la URL de un artículo no es una opción lo suficientemente flexible. Consulta la página de configuración de LaterPay Connector() para obtener información sobre algunas situaciones de ejemplo en las que esta opción resulta útil.
jwtToken de JWT para la configuración de pagos dinámicosEsta opción permite especificar un JSON Web Token firmado que contiene una configuración para el contenido de pago disponible. Esto significa que puedes proporcionar una configuración integrada y generada mediante programación en las páginas, en lugar de tener que especificarla manualmente en la interfaz de Connector Admin de LaterPay. Esto puede ser especialmente útil al configurar compras individuales de muchos artículos diferentes.
Si quieres obtener más información sobre cómo crear este token y qué contenido se puede especificar en él, consulta la documentación de la API de JWT Paid Content de LaterPay para la integración de Connector Script.
localecadenaDefine el formato de precio adecuado para la configuración regional.
localeMessagesobjetoPermite al editor personalizar o localizar el texto de la lista de opciones de compra generada. Para obtener más información, consulta la sección Localización.
scrollToTopAfterAuthbooleanoSi el valor es "true", desplaza la página hasta la parte superior después de que el proceso de autorización se haya realizado correctamente. Esto puede resultar útil para evitar que el usuario se confunda debido a su posición de desplazamiento después de volver a la página, si el lugar donde has decidido mostrar el cuadro de diálogo se encuentra más abajo.
regioncadenaEspecifica si estás en la región de LaterPay eu (UE) o us (EE. UU.).
sandboxbooleanoSolo se necesita si estás utilizando el modo de zona de pruebas para probar la configuración de tu servidor. Debes utilizar también el modo de desarrollo de AMP.

Usar el marcado de acceso al contenido y mostrar la lista de compra

El marcado de acceso al contenido se debe utilizar de la misma forma que con AMP Access.

El elemento con el id amp-access-laterpay-dialog mostrará una lista de las opciones de compra cuando el usuario no tenga acceso al artículo. Esta lista tiene un estilo muy básico y se puede personalizar para que parezca estar más integrada en la página del editor.

Asegúrate de añadir la clase amp-access-laterpay si quieres utilizar el estilo predeterminado.

<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="">
  Vaya... Algo no funciona.
</section>

<div amp-access="access" amp-access-hide="">
  <p>...contenido del artículo...</p>
</div>

Estilo

Se aplican varias clases a algunos de los elementos del marcado generado. Se puede hacer referencia de forma inequívoca a los elementos sin clases mediante selectores de elementos de CSS.

Incluye un diseño básico de CSS, pero se recomienda que los editores apliquen un estilo que se ajuste al aspecto de sus páginas web.

La estructura que se ha creado para el cuadro de diálogo es la siguiente:

<div id="amp-access-laterpay-dialog" class="amp-access-laterpay">
  <div class="amp-access-laterpay-container">
    <p class="amp-access-laterpay-header">
      Opcional, aparece si se ha definido el mensaje del encabezado de la configuración regional.
    </p>
    <ul>
      <li>
        <label>
          <input name="purchaseOption" type="radio">
            <div class="amp-access-laterpay-metadata">
              <span class="amp-access-laterpay-title">Título de la opción de compra</span>
              <p class="amp-access-laterpay-description">Descripción de la opción de compra</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>
        <!-- ... más elementos de la lista que corresponden a otras opciones de compra ... -->
      </ul>
      <button class="amp-access-laterpay-purchase-button">Comprar ahora</button>
      <p class="amp-access-laterpay-already-purchased-container">
        <a href="…">Ya lo he comprado</a>
      </p>
      <p class="amp-access-laterpay-footer">
        Opcional, aparece si se ha definido el mensaje del pie de página de la configuración regional.
      </p>
    </div>
    <p class="amp-access-laterpay-badge">Con la tecnología de <a href="https://laterpay.net" target="_blank">LaterPay</a></p>
  </div>

Localización

El editor puede definir en la interfaz de LaterPay Connector el texto que se muestra en el cuadro de diálogo de las opciones de compra.

El resto del texto forma parte del componente extendido y se puede modificar y localizar en las opciones de configuración de la siguiente manera:

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

Las siguientes claves de mensaje se pueden traducir o personalizar, pero ten en cuenta que deben conservar su significado e intención originales.

ClaveDescripciónValor predeterminado
payLaterButtonTexto del botón de compra en las opciones que permiten al usuario pagar más adelante."Comprar ahora y pagar más adelante"
payNowButtonTexto del botón de compra en las opciones que requieren al usuario pagar en el momento de la compra."Comprar ahora"
defaultButtonTexto predeterminado del botón de compra antes de seleccionar una opción."Comprar ahora"
alreadyPurchasedLinkEnlace que puede utilizar el usuario si ya ha comprado el artículo pero ha perdido las cookies (o está utilizando otro dispositivo) para iniciar sesión en LaterPay y recuperar sus compras."Ya lo he comprado"
headerTexto opcional del encabezado.
footerTexto opcional del pie de página.

Analíticas

Dado que amp-access-laterpay está basado en amp-access, admite todos los eventos de analíticas que envía amp-access.

Si quieres ver un ejemplo más completo de cómo se haría en la práctica, puedes consultar los ejemplos de https://ampexample.laterpay.net/, que están configurados para enviar dichos eventos de analíticas.

Utilizar AMP Access LaterPay junto con AMP Access

Si ya tienes un sistema de suscripción y quieres utilizar LaterPay solo para las ventas de artículos individuales, puedes incluir ambos métodos de venta en la misma página utilizando AMP Access y AMP Access LaterPay.

En primer lugar, consulta la documentación de AMP Access para obtener información sobre cómo configurarlo para utilizarlo en tu muro de pago.

También puedes consultar la sección sobre cómo configurar varios proveedores mediante espacios de nombre.

Al utilizarlo con LaterPay y con una integración de muro de pago existente, la configuración necesaria puede tener un aspecto similar a este:

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

Por otro lado, el marcado de acceso al contenido puede quedar así:

<section amp-access="NOT error AND NOT laterpay.access AND NOT publishername.access" amp-access-hide>
  <p>
    <a on="tap:amp-access.login-publishername">Inicia sesión aquí para acceder a tu suscripción a NombreDelEditor.</a>
  </p>

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

<section class="error-section" amp-access="error" amp-access-hide>
  Vaya... Algo no funciona.
</section>

<div amp-access="laterpay.access OR publishername.access" amp-access-hide>
  <p>...contenido del artículo...</p>
</div>

Encontrarás un ejemplo más completo en https://ampexample.laterpay.net/dual-amp-access.html.

Documentación relacionada

Validación

Consulta las reglas de amp-access-laterpay en la especificación de la herramienta de validación de AMP.

¿Necesitas más ayuda?

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