AccueilCommencerSolutionsPlateformesIntégrations globales
DocsRéférence APIRéférence APIRecetteChangelog
AccueilCommencerSolutionsPlateformesIntégrations globalesSe connecter
Docs

Configurer Affirm Lite

Apprenez à intégrer Affirm Lite pour une expérience de paiement simplifiée via une fenêtre contextuelle qui retient les clients sur votre site. Inclut les étapes pour ajouter Affirm.js, l'activation de la saisie automatique, l'utilisation de boutons pré-stylés et la mise en œuvre d'un système de secours.

Suggérer des modifications

Conditions préalables

  • Examinez votre page de caisse pour les iframes, car cela affecte votre capacité à utiliser le remplissage automatique.
  • Vérifiez que les champs de total de votre panier et de votre carte de crédit ont des sélecteurs HTML cohérents et inspectables.
  • Consultez la documentation de la Page de destination Affirm si vous utilisez le mode de repli.

Étapes

1. Intégrer Affirm JS (AFJS)

Ajoutez le script Affirm.js au <head> sur votre site. Le script se charge directement depuis le domaine Affirm.

🚧

Clés API Sandbox

Utilisez uniquement vos clés API et votre domaine d’environnement de test pendant les essais et le développement. Cela garantit que vous ne modifiez pas accidentellement les transactions en direct.

💻
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. Ajouter le bouton de paiement « Passer à la caisse »

Ajoutez ce bouton HTML à l'endroit où vous souhaitez que le bouton de paiement Affirm apparaisse :

<button
  type="button" 
  class="affirm-lite-checkout"
  data-fallback-url="https://affirm.com/shop/<merchant>"      
  data-total-amount-tag="#total-amount" 
  data-cc-number-tag="#cc-number" 
  data-cc-csc-tag="#cc-csc" 
  data-cc-exp-month-tag="#exp-month" 
  data-cc-exp-year-tag="#exp-year">
    Checkout with Affirm
</button>

Page de secours d'Affirm Landing Page

Pour garantir qu'un client puisse terminer son achat même si Affirm Lite ne peut pas identifier un sélecteur, vous pouvez utiliser des mesures de protection telles que la Page de destination Affirm (anciennement Affirm Lite). Vous pouvez activer cette solution de rechange en incluant l'attribut data-fallback-url dans votre code Affirm Lite.

Lorsque vous activez la solution de secours, le client est redirigé vers la page d’accueil Affirm pour poursuivre le processus de paiement. Lorsque le client termine son achat, nous générons une carte virtuelle Affirm. Le client saisit ensuite manuellement les détails de sa carte virtuelle Affirm sur la page de paiement de votre magasin.

🚧

Exigences du bouton Affirm Lite

Pour activer Affirm Lite avec succès, assurez-vous que ces éléments sont inclus dans le code HTML du bouton Affirm Lite :

  1. La classe affirm-lite-checkout.
  2. L’attribut data-total-amount-tag pour saisir et communiquer avec précision le total du panier de paiement de votre client à Affirm.
  3. L’attribut data-fallback-url pour rediriger les clients vers la page de destination Affirm si Affirm Lite ne s’active pas.

Attributs d'Affirm Lite

AttributDescription
class= "affirm-lite-checkout"Sert de localisateur pour Affirm.js pour trouver des éléments sur la page à transformer en boutons de caisse Affirm Lite.
data-fallback-urlVeille à ce que la page de destination Affirm puisse être activée comme mesure de rechange si Affirm Lite n'est pas en mesure de s'afficher.
data-total-amount-tagCapture le total du panier et envoie cette information à Affirm.
data-cc-number-tagIdentifie et remplit automatiquement le numéro de la carte virtuelle dans le champ correspondant sur votre site Web.
data-cc-csc-tag Identifie et remplit automatiquement le code de sécurité à 3 ou 4 chiffres de la carte virtuelle dans le champ correspondant sur votre site Web.
data-cc-exp-month-tag Identifie et remplit automatiquement le mois de la date d'expiration de la carte virtuelle Affirm dans le champ correspondant sur votre site Web.

Si votre site ne contient qu’un seul champ pour le mois et l’année d’expiration de la carte de crédit, fournissez le même sélecteur de requête pour les deux attributs, c’est-à-dire data-cc-exp-month-tag= “cc-exp” et data-cc-exp-year-tag= “cc-exp”.
data-cc-exp-year-tag Identifie et remplit automatiquement l'année de la date d'expiration de la carte virtuelle Affirm dans le champ correspondant sur votre site Web.

Si votre site ne contient qu’un seul champ pour le mois et l’année d’expiration de la carte de crédit, fournissez le même sélecteur de requête pour les deux attributs, c’est-à-dire data-cc-exp-month-tag= “cc-exp” et data-cc-exp-year-tag= “cc-exp”.

3. Identifiez vos sélecteurs HTML pour l'autoremplissage

Utilisez Chrome DevTools (« Inspecter ») pour identifier les identifiants ou sélecteurs de noms appropriés :

  • Total du panier (#total-amount)
  • Numéro de carte de crédit (#cc-number)
  • CVV (#cc-csc)
  • Mois d’expiration (#exp-month)
  • Année d'expiration (#exp-year)

📘

Champs d'expiration combinés

Si vos champs d'expiration sont combinés, utilisez le même sélecteur pour les deux data-cc-exp-month-tag et data-cc-exp-year-tag.

Exemple d'expiration de carte

  1. Sur la page de caisse de votre site Web, localisez la zone qui affiche l'année d'expiration de la carte de crédit.
  1. Cliquez avec le bouton droit sur la zone du mois d'expiration et sélectionnez « Inspecter » pour afficher le panneau Inspecter l'élément.
  1. Dans l'onglet Éléments, trouvez l'élément d'année d'expiration en surbrillance et identifiez le nom de l'élément. Par exemple, dans la capture d'écran ci-dessous, l'élément année d'expiration a un nom d'ID exp-year.

  1. Ajoutez le nom de l’élément, tel que exp-year, dans le code Affirm Lite pour l’attribut data-cc-exp-year-tag.
data-cc-csc-tag="#cc-csc"

🚧

Modifications apportées au sélecteur de requête HTML

Si des modifications sont apportées à votre page Web, assurez-vous que les sélecteurs de requête pour les attributs Affirm Lite sont corrects et mettez-les à jour si nécessaire.

4. (Facultatif) Activez le bouton de caisse prédéfini.

Ajoutez affirm-checkout-btn à votre classe de boutons pour le style par défaut :

<button
  type="button" 
  class="affirm-lite-checkout affirm-checkout-btn"
  data-fallback-url="https://affirm.com/shop/<merchant>"      
  data-total-amount-tag="#amount-tag-dollars" 
  data-cc-number-tag="input[name='cc-number']" 
  data-cc-csc-tag="input[name='cvv']" 
  data-cc-exp-month-tag="input[name='exp']" 
  data-cc-exp-year-tag="input[name='exp']">
    Checkout with Affirm
</button>

5. (Facultatif) Personnalisations des boutons

Il existe deux options pour le bouton de paiement Affirm pré-stylisé :

  1. Option par défaut : affirm-checkout-btn affiche le bouton avec un fond bleu et un texte blanc.

  1. Option claire : affirm-checkout-btn btn-light affiche le bouton avec un fond blanc, une bordure bleue et un texte noir.

Prochaines étapes

Mis à jour 10 days ago