AMP
ES
English Deutsch Français العربية Italiano Indonesia 日本語 한국어 Português Русский Türkçe 中文 Polski Tiếng việt

Important: this documentation is not applicable to your currently selected format stories!

amp-access-laterpay

Description

Allows publishers to easily integrate with the LaterPay micropayments platform.

 

Required Scripts

<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 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 obligatorias Ten 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>
Ejemplos Consulta 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:

Propiedad Valores Descripción
articleTitleSelector Selector de CSS obligatorio Selector 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.
articleId Lista de identificadores separados por comas De 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.
jwt Token de JWT para la configuración de pagos dinámicos Esta 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.
locale cadena Define el formato de precio adecuado para la configuración regional.
localeMessages objeto Permite 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.
scrollToTopAfterAuth booleano Si 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.
region cadena Especifica si estás en la región de LaterPay eu (UE) o us (EE. UU.).
sandbox booleano Solo 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.

Clave Descripción Valor predeterminado
payLaterButton Texto del botón de compra en las opciones que permiten al usuario pagar más adelante. "Comprar ahora y pagar más adelante"
payNowButton Texto del botón de compra en las opciones que requieren al usuario pagar en el momento de la compra. "Comprar ahora"
defaultButton Texto predeterminado del botón de compra antes de seleccionar una opción. "Comprar ahora"
alreadyPurchasedLink Enlace 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"
header Texto opcional del encabezado.
footer Texto 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.

¿Necesita ayuda adicional?

¿Ha leído este documento una docena de veces pero realmente no responde todas sus preguntas? Quizás otras personas piensen lo mismo: póngase en contacto con ellas en Stack Overflow.

Ir a Stack Overflow
¿Encontró un error o considera que falta una función?

¡El proyecto AMP alienta profundamente su participación y contribuciones! Esperamos que se convierta en un miembro permanente de nuestra comunidad de código abierto, pero también agradecemos las contribuciones esporádicas sobre los temas que le apasionan especialmente.

Ir a GitHub