Configurer la messagerie promotionnelle

Conditions préalables

Consultez les directives de conformité en matière de marketing d'Affirm.
Déterminez où afficher les messages Affirm sur votre site (par exemple, produit, catégorie, panier et page d'accueil).
Vérifiez que vos clés API publiques sont disponibles, vous pouvez y accéder dans le Portail Commerçant Affirm. Vous aurez besoin de cela pour configurer Affirm.js et les requêtes API.
(Facultatif) Collaborez avec votre gestionnaire de réussite client pour personnaliser les paramètres de préadmissibilité ou les visuels co-marqués.

Étapes

1. Ajouter Affirm.js (AFJS)

Intégrez l'extrait suivant dans la section <head> du modèle global de votre site :

💻

Intégrer Affirm .js

Ouvrir la recette

<script>
var _affirm_config = {
		public_api_key: "YOUR_PUBLIC_API_KEY", /* replace with public api key */
		script: "https://cdn1-sandbox.affirm.com/js/v2/affirm.js",
		locale: "en_US",
		country_code: "USA",
	};

(function(m,g,n,d,a,e,h,c){var b=m[n]||{},k=document.createElement(e),p=document.getElementsByTagName(e)[0],l=function(a,b,c){return function(){a[b]._.push([c,arguments])}};b[d]=l(b,d,"set");var f=b[d];b[a]={};b[a]._=[];f._=[];b._=[];b[a][h]=l(b,a,h);b[c]=function(){b._.push([h,arguments])};a=0;for(c="set add save post open empty reset on off trigger ready setProduct".split(" ");a<c.length;a++)f[c[a]]=l(b,d,c[a]);a=0;for(c=["get","token","url","items"];a<c.length;a++)f[c[a]]=function(){};k.async=
  !0;k.src=g[e];p.parentNode.insertBefore(k,p);delete g[e];f(g);m[n]=b})(window,_affirm_config,"affirm","checkout","ui","script","ready","jsReady");
</script>

2. Insérer des balises HTML là où le message apparaîtra

Placez les composants HTML d'Affirm sur les pages pertinentes. Exemples :

<!-- Product Page -->
<p class="affirm-as-low-as" data-page-type="product" data-amount="50000"></p>

<!-- Cart Page -->
<p class="affirm-as-low-as" data-page-type="cart" data-amount="50000"></p>

<!-- Homepage Modal -->
<a class="affirm-site-modal" data-page-type="homepage">Learn more</a>

Utilisez les valeurs data-amount en cents (p. ex. 100,00 = 10 000) et data-page-type qui correspondent à l'emplacement.

Exemple HTML complet

L'exemple suivant montre comment inclure Affirm.js et les balises HTML nécessaires sur une page de détail d'un produit :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Product Detail Page</title>
  <link rel="stylesheet" href="styles.css">
  <!-- Affirm -->
<script>
 _affirm_config = {
   public_api_key:  "YOUR_PUBLIC_KEY",
   script:          "https://cdn1.affirm.com/js/v2/affirm.js",
   locale:          "en_US",
   country_code:    "USA"
 };
 (function(l,g,m,e,a,f,b){var d,c=l[m]||{},h=document.createElement(f),n=document.getElementsByTagName(f)[0],k=function(a,b,c){return function(){a[b]._.push([c,arguments])}};c[e]=k(c,e,"set");d=c[e];c[a]={};c[a]._=[];d._=[];c[a][b]=k(c,a,b);a=0;for(b="set add save post open empty reset on off trigger ready setProduct".split(" ");a<b.length;a++)d[b[a]]=k(c,e,b[a]);a=0;for(b=["get","token","url","items"];a<b.length;a++)d[b[a]]=function(){};h.async=!0;h.src=g[f];n.parentNode.insertBefore(h,n);delete g[f];d(g);l[m]=c})(window,_affirm_config,"affirm","checkout","ui","script","ready");
</script>
<!-- End Affirm -->
</head>
<body>
  <header>
    <!-- Site Header -->
  </header>
  <main>
    <div class="product-detail">
      <img src="product-image.jpg" alt="Product Image">
      <h1>Product Name</h1>
      <p>Product Description</p>
      <p>Price: $100</p>

      <!-- Add promotional messaging below the product price -->
<div id="prices">
    <div id="buy-button">
      Buy Now
    </div>
    <div id="regular-price">
      $500.00
    </div>
    <p class="affirm-as-low-as" data-page-type="product" data-amount="50000"></p>
</div>
    </div>
  </main>
  <footer>
    <!-- Site Footer -->
  </footer>
</body>
</html>

Exemples de placement de messages promotionnels

bannière

Page des produits

Page de présentation du produit

3. Add Code to Handle Price Changes

Si les prix des produits sur votre site sont mis à jour dynamiquement, par exemple lorsque les clients choisissent différentes variantes ou ajustent les quantités, assurez-vous que les messages promotionnels d'Affirm reflètent les prix actualisés. Les fonctions suivantes sont couvertes dans cette section :

Actualiser l’interface utilisateur
Page Reload
Price Update
Detect Modal Close

Actualiser l’interface utilisateur

Pour continuer à mettre à jour les messages, ajoute cette fonction d'actualisation dans ta fonction de rappel des changements de prix :

affirm.ui.refresh();

Page Reload

Si le prix du produit ou le message promotionnel Affirm s'affiche après le chargement de la page, ou si vous avez inclus la fonction d'actualisation précédente de manière statique sur la page, intégrez-la dans la fonction de rappel affirm.ui.ready(). En procédant ainsi, on s'assure que la page appelle la fonction d'actualisation uniquement après l'initialisation d'Affirm.js.

affirm.ui.ready(function(){
    affirm.ui.refresh();
});

Price Update

Lorsque le prix est mis à jour sur votre page, appelez la fonction d'actualisation dans la même fonction de rappel qui gère l'événement de changement de prix. Ajoutez des ID d'élément aux composants de messages promotionnels pour faciliter l'accès et la modification de leurs attributs. Notez que nous utilisons des exemples d'ID ci-dessous.

priceUpdateEventHandler(){
    changePriceHandler(newPrice);
}
 
function updateAffirmPromos(newPrice){
    //Update the wrapper elements' attributes in the DOM
    document.getElementById('affirmProductModal').setAttribute('data-amount',newPrice);
    document.getElementById('affirmLearnMore').setAttribute('data-amount',newPrice);
   
    //Call affirm.ui.refresh to re-render the promotional messaging components
    affirm.ui.refresh();
}

Detect Modal Close

Lorsqu'un modal éducatif est fermé (non courant), vous pouvez détecter cet événement en utilisant le code suivant :

affirm.events.on('learnMore:close',function(){console.log('fired')});

4. Ajouter la messagerie de préadmissibilité (facultatif)

Pour offrir aux acheteurs la possibilité de vérifier l'admissibilité à un financement Affirm, intégrez la messagerie « aussi peu que » (APQ). Les placements APQ prennent automatiquement en charge les modales de préadmissibilité lorsqu’on clique dessus et aucune intégration distincte n’est nécessaire.

Flux de préadmissibilité (nouveau client)

Flux de préadmissibilité (client existant)

5. Tester et déployer

Confirmez que tous les composants Affirm se rendent correctement.
Passez votre script JS de l'environnement de test à la production (https://cdn1.affirm.com/...).
Dans le code Affirm.js que vous avez ajouté à votre site, remplacez "YOUR_PUBLIC_KEY" par votre clé active provenant du Portail Commerçant Affirm.
Validez la fonctionnalité de bout en bout avant de la mettre en ligne.