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

amp-access-laterpay

Description

Permettre aux éditeurs de s'intégrer facilement à la plate-forme de micropaiement LaterPay.

 

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>

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.

Scripts requis Notez que vous avez besoin de scripts pour "amp-access-laterpay", "amp-access" et "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">
Exemples Consultez l'exemple de composant amp-access-laterpay annoté sur AMP By Example.

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 :

Propriété Valeurs Description
articleTitleSelector Sélecteur CSS requis Sélecteur CSS qui détermine l'élément de la page où se trouve le titre de l'article. De cette manière, la page présentée en vue de l'achat de l'article contiendra ce titre, de sorte que l'utilisateur sache ce qu'il achète.
articleId Liste d'identifiants séparés par des virgules Par défaut, l'URL d'un article est utilisée pour l'associer à une option d'achat. Cependant, au lieu de spécifier un chemin d'URL pour une option d'achat, vous pouvez définir un ID d'article dans l'interface utilisateur de LaterPay Connector, puis utiliser la propriété articleId pour faire correspondre l'article à l'option d'achat.
Cela s'avère nécessaire lorsque la mise en correspondance d'une option d'achat en fonction de l'URL d'un article n'offre pas une flexibilité suffisante. Consultez la page de configuration de LaterPay Connector() pour passer en revue quelques exemples d'utilisation de cette propriété.
jwt Jeton JWT pour une configuration dynamique des paiements Cette option vous permet de spécifier un jeton Web JSON signé avec une configuration pour le contenu payant disponible. Cela signifie que vous pouvez fournir une configuration intégrée, générée de façon automatisée dans vos pages, au lieu de la spécifier manuellement dans l'interface d'administration de Connector du service LaterPay. Cela peut s'avérer particulièrement utile lorsque vous configurez des achats uniques pour de nombreux articles différents.
Pour plus d'informations sur la création de ce jeton et sur le contenu qui peut y être spécifié, consultez la documentation de l'API JWT Paid Content de LaterPay relative à l'intégration du script Connector.
locale chaîne Définit le style de mise en forme du prix approprié aux paramètres régionaux.
localeMessages objet Permet à l'éditeur de personnaliser ou de localiser le texte figurant dans la liste des options d'achat qui a été générée. Pour plus d'informations à ce sujet, consultez la section Localisation.
scrollToTopAfterAuth valeur booléenne Si la valeur est définie sur true, cette propriété fait défiler la page vers le haut une fois le processus d'autorisation terminé. Cela peut s'avérer utile si l'emplacement d'affichage de la boîte de dialogue se trouve plus bas sur la page et que, de retour sur la page, l'utilisateur risque d'être perturbé par sa position de défilement actuelle.
region chaîne Indiquez la région LaterPay dans laquelle vous vous trouvez : eu ou us.
sandbox valeur booléenne Cette propriété n'est nécessaire que si vous utilisez le mode bac à sable pour tester la configuration de votre serveur. Vous devez également utiliser le mode de développement d'AMP.

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.

Clé Description Valeur par défaut
payLaterButton Texte affiché sur le bouton d'achat pour les articles qui peuvent être payés ultérieurement. 'Buy Now, Pay Later' (Acheter maintenant, payer plus tard)
payNowButton Texte affiché sur le bouton d'achat pour les articles qui doivent être payés au moment de l'achat. 'Buy Now' (Acheter maintenant)
defaultButton Texte par défaut affiché sur le bouton d'achat avant la sélection d'une quelconque option. 'Buy Now' (Acheter maintenant)
alreadyPurchasedLink Si l'utilisateur a déjà acheté l'article, mais qu'il a perdu ses cookies (ou utilise un autre appareil), il peut utiliser ce lien pour se connecter à LaterPay et récupérer ses achats. 'I already bought this' (J'ai déjà acheté cet article)
header Texte d'en-tête facultatif.
footer Texte de pied de page facultatif.

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

Validation

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

Besoin d'une aide supplémentaire ?

Vous avez lu ce document une douzaine de fois mais il ne répond pas à toutes vos questions ? D'autres personnes ont peut-être eu le même sentiment. Contactez-les sur Stack Overflow.

Se rendre sur Stack Overflow
Vous avez trouvé un bug ou une fonctionnalité manquante ?

Le projet AMP encourage fortement votre participation et vos contributions ! Nous espérons que vous deviendrez un membre régulier de notre communauté open source, mais nous serons également ravis de recevoir des contributions ponctuelles concernant les questions qui vous intéressent particulièrement.

Se rendre sur GitHub