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>

Ce composant permet aux éditeurs de s'intégrer facilement à la plate-forme de micropaiement LaterPay. amp-access-laterpay est basé sur AMP Access et requiert cette extension.

Comportement

LaterPay est une plate-forme de micropaiement qui permet aux utilisateurs d'acheter du contenu en ligne en seulement deux clics, puis d'y accéder immédiatement, sans inscription initiale, sans fournir de données à caractère personnel et sans effectuer de paiement. Les utilisateurs paient uniquement lorsque le montant de leurs achats atteint un total de 5 $ ou 5 € sur l'ensemble des sites Web. Les fournisseurs de contenu peuvent vendre des articles individuels ou des forfaits au temps, ce qui permet un accès forfaitaire au contenu ou un accès limité dans le temps.

Si vous intégrez LaterPay à l'aide du script Connector, vous ne pourrez pas utiliser cette intégration sur les pages AMP. Le composant amp-access-laterpay est comparable au script Connector, en ce sens qu'il offre un ensemble de fonctionnalités équivalent, mais conçu pour les pages AMP.

Il est également possible de vendre du contenu via LaterPay en utilisant simplement amp-access-laterpay comme unique méthode d'intégration.

Le composant amp-access-laterpay utilise AMP Access en interne pour fournir un comportement semblable à cette extension, mais adapté à une utilisation avec le service LaterPay.

Si vous souhaitez utiliser votre propre service de paywall avec AMP Access et avec LaterPay sur la même page, sachez que cela est également possible.

Le composant amp-access-laterpay ne nécessite pas de configuration d'autorisation ou de pingback, car il est préconfiguré pour fonctionner avec le service LaterPay. De plus, il n'est pas nécessaire de configurer manuellement des liens de connexion.

Les différentes options d'achat peuvent être configurées sur le compte LaterPay de l'éditeur. Le composant récupérera alors la configuration et créera une liste des options d'achat disponibles.

Pour savoir comment configurer les options d'achat, reportez-vous à la documentation relative à la configuration du script LaterPay Connector, l'intégration au frontal de LaterPay.

La liste générée peut être mise en forme et présentée selon les préférences de l'éditeur.

Ce composant utilise également le balisage de contenu accessible pour afficher et masquer le contenu.

Configuration

La configuration est semblable à celle d'AMP Access, si ce n'est qu'aucune autorisation, aucun pingback et aucun lien de connexion ne sont nécessaires.

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

Les valeurs suivantes peuvent être définies dans l'objet de configuration laterpay :

Utiliser le balisage du contenu accessible et afficher la liste d'achats

Vous devez utiliser le balisage du contenu accessible de la même manière qu'avec AMP Access.

L'élément associé à l'identifiant amp-access-laterpay-dialog affiche une liste d'options d'achat lorsque l'utilisateur n'a pas accès à l'article. Cette liste présente des styles rudimentaires et peut être personnalisée afin de mieux l'intégrer dans la page de l'éditeur.

Veillez à ajouter la classe amp-access-laterpay si vous souhaitez utiliser les styles par défaut.

<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="">
  Désolé… Une erreur s'est produite.
</section>

<div amp-access="access" amp-access-hide="">
  <p>…contenu de l'article…</p>
</div>

Application d'un style

Plusieurs classes sont appliquées à certains éléments du balisage généré. Les éléments ne comportant aucune classe peuvent être référencés sans équivoque au moyen de sélecteurs d'éléments CSS.

Il existe déjà une feuille de style avec une disposition de base, mais il est conseillé aux éditeurs de lui appliquer un style propre afin de l'adapter à l'apparence de leurs pages.

La structure créée pour la boîte de dialogue se présente comme suit :

<div id="amp-access-laterpay-dialog" class="amp-access-laterpay">
  <div class="amp-access-laterpay-container">
    <p class="amp-access-laterpay-header">
      Facultatif. S'affiche si le message des paramètres locaux de l'en-tête est défini.
    </p>
    <ul>
      <li>
        <label>
          <input name="purchaseOption" type="radio">
            <div class="amp-access-laterpay-metadata">
              <span class="amp-access-laterpay-title">Titre de l'option d'achat</span>
              <p class="amp-access-laterpay-description">Description de l'option d'achat</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>
        <!-- … plus d'éléments de liste pour d'autres options d'achat … -->
      </ul>
      <button class="amp-access-laterpay-purchase-button">Acheter</button>
      <p class="amp-access-laterpay-already-purchased-container">
        <a href="...">J'ai déjà acheté cet article.</a>
      </p>
      <p class="amp-access-laterpay-footer">
        Facultatif. S'affiche si le message des paramètres locaux du pied de page est défini.
      </p>
    </div>
    <p class="amp-access-laterpay-badge">Fourni par <a href="https://laterpay.net" target="_blank">LaterPay</a></p>
  </div>

Localisation

Le texte affiché pour les options d'achat dans la boîte de dialogue est défini par l'éditeur dans l'interface utilisateur de LaterPay Connector.

Le texte restant fait partie du composant étendu. Vous pouvez le modifier et le localiser au moyen des options de configuration comme suit :

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

Les clés de message suivantes peuvent être traduites ou personnalisées. Sachez cependant qu'elles doivent conserver leur signification et leur intention d'origine.

Analyse

Le composant amp-access-laterpay est basé sur amp-access. Il accepte donc tous les événements d'analyse envoyés par amp-access.

Tous les exemples disponibles à l'adresse https://ampexample.laterpay.net/ sont configurés de manière à envoyer ces événements d'analyse, afin que vous disposiez d'un exemple d'utilisation pratique plus complet.

Utiliser AMP Access LaterPay avec AMP Access

Si un système d'abonnement est déjà actif et que vous souhaitez utiliser LaterPay uniquement pour certaines ventes d'articles, vous pouvez faire en sorte que les deux méthodes de vente coexistent sur la même page en utilisant conjointement AMP Access et AMP Access LaterPay.

Veuillez d'abord consulter la documentation d'AMP Access pour savoir comment configurer AMP Access avec votre paywall existant.

La section relative à des fournisseurs multiples explique comment configurer plusieurs fournisseurs avec des espaces de noms.

En cas d'utilisation avec LaterPay et une intégration de paywall existante, la configuration nécessaire peut se présenter comme suit :

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

Par contre, le balisage d'accès au contenu peut se présenter comme suit :

<section amp-access="NOT error AND NOT laterpay.access AND NOT publishername.access" amp-access-hide>
  <p>
    <a on="tap:amp-access.login-publishername">Connectez-vous ici pour accéder à votre abonnement 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>
  Désolé… Une erreur s'est produite.
</section>

<div amp-access="laterpay.access OR publishername.access" amp-access-hide>
  <p>…contenu de l'article…</p>
</div>

Pour un exemple plus complet, rendez-vous à l'adresse suivante : https://ampexample.laterpay.net/dual-amp-access.html.

Documentation associée

• AMP Access
• LaterPay
• LaterPay: How we do MicroPayments
• LaterPay Connector (semblable à AMP Access LaterPay, mais pour les pages non AMP).

Validation

Consultez les règles relatives à amp-access-laterpay dans les spécifications du validateur AMP.