AccueilCommencerSolutionsPlateformesIntégrations globales
Docs

Guide d'intégration Affirm Lite

Simplifiez l’intégration avec Affirm Lite, permettant aux clients de finaliser leurs achats de manière fluide à l’aide d’une fenêtre contextuelle de paiement. Apprenez comment ajouter Affirm.js, Configurer les boutons de caisse, activer le remplissage automatique et mettre en œuvre des options de secours pour améliorer l'expérience de paiement.

Suggérer des modifications

Disponibilité des pays

USA USA

🚧

Affirm Lite 1.0 → Mise à jour d'Affirm Landing Page

Si vous recherchez l'original « Affirm Lite », le produit a été renommé « Affirm Landing Page ». Ce produit continuera à fonctionner exactement comme avant et aucune modification n'est nécessaire pour les intégrations existantes. Pour consulter cette documentation, veuillez cliquer ici.

Aperçu

Ce guide vous explique les étapes d'intégration d'Affirm Lite, un produit conçu pour simplifier le processus de mise en œuvre et stimuler la conversion des clients. En seulement trois étapes clés, ce processus simple équipera votre site Web d'une expérience de paiement Affirm transparente, améliorant ainsi le parcours d'achat de vos clients.

Regardez la vidéo ci-dessous pour un aperçu détaillé du flux de paiement client d'Affirm Lite et du processus d'intégration :


Fonctionnalité

Affirm Lite garde les clients sur votre page de caisse pendant qu'ils utilisent Affirm pour finaliser leur achat, fonctionnant de la même manière qu'un widget. Lorsqu'un client clique sur le bouton de paiement Affirm Lite, nous affichons une fenêtre contextuelle sur l'écran existant pour le guider tout au long du processus de paiement, ce qui entraîne la création d'une carte virtuelle Affirm.

Une fois la carte virtuelle Affirm créée, les informations de la carte peuvent être transférées aux champs de paiement respectifs de ces deux manières :

  1. Si vous utilisez les sélecteurs de requête pour les attributs Affirm Lite, Affirm peut remplir automatiquement les champs numéro de carte, date d'expiration et CVV avec les renseignements de la carte virtuelle. Consultez la section Étapes d'intégration pour plus de détails.
  2. Si le remplissage automatique n'est pas disponible, le client peut copier l'information directement à partir de la carte virtuelle et coller dans les champs correspondants.

🚧

Compatibilité de remplissage automatique iFrame

Si votre page de paiement utilise un iframe, les restrictions de sécurité du navigateur empêchent Affirm Lite de remplir automatiquement les informations du client. Par conséquent, les clients doivent saisir manuellement les détails de leur carte virtuelle Affirm en copiant et en collant les renseignements dans les champs respectifs.

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.

Étapes d'intégration

1. Add AFJS

Pour activer l’objet Affirm et utiliser les fonctionnalités plus larges du SDK Affirm.js :

  1. Ajouter le script Affirm.js dans la section <head> de votre page globale.
  2. Initialiser Affirm par :
    1. Ajout de votre clé API publique, qui authentifie l'identité de votre site Web auprès d'Affirm, et
    2. Spécifiez l'environnement de test ou de production que vous ciblez.
💻
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 l'extrait de code Affirm Lite

Intégrez l'extrait de code Affirm Lite dans votre code HTML sous la forme d'un bouton qui déclenche l'expérience de paiement Affirm. Affirm Lite nécessite un bouton de caisse supplémentaire sur votre page de paiement. Si vous préférez ne pas concevoir votre propre bouton, Affirm propose un bouton de caisse prédéfini. Pour plus de détails, consultez la section Bouton de paiement Affirm.

Pour activer Affirm Lite avec succès, vous devez :

  1. Embed the class "affirm-lite-checkout" within the Affirm Lite button's HTML.
  2. Incluez l’attribut data-total-amount-tag pour capturer et communiquer précisément le total du panier d’achat de votre client à Affirm.
  3. Incluez l’attribut data-fallback-url pour rediriger les clients vers la page de destination Affirm si Affirm Lite ne s’active pas.

Extrait de code Affirm Lite

☑️
Affirm Lite
Ouvrir la recette
<button
  type="button" 
  class="affirm-lite-checkout"
  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>

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. Identifier et ajouter les sélecteurs HTML

Utilisez la fonction « Inspecter l’élément de Google Chrome » pour identifier les sélecteurs HTML. Ensuite, autorisez Affirm à lire le total du panier et à obtenir avec précision le montant requis pour le prêt du client.

Identifier leData-Total-Amount-Tag

  1. Sur la page de caisse de votre site Web, localisez la section qui affiche le total du panier du client.
  1. Cliquez avec le bouton droit sur le total du panier du client et sélectionnez « Inspecter ». Cela affiche le panneau « Inspecter l’élément ».
  1. Dans l'onglet « Éléments » retrouvez l'élément « total du panier » en surbrillance et identifiez son nom. Par exemple, dans la capture d'écran ci-dessous, l'élément total du panier a un nom id total-amount.
    Remarque : Vous pouvez également cliquer avec le bouton droit de la souris sur l'élément et sélectionner « Copier » > « Copier le sélecteur » pour obtenir le nom id .
  1. Saisissez total-amount dans le code Affirm Lite pour l'attributdata-total-amount-tag.

Exemple:

data-total-amount-tag="#total-amount"

Identifier leData-CC-Number-Tag

  1. Sur la page de caisse de votre site Web, localisez la zone qui affiche le numéro de carte de crédit du client.
  1. Cliquez avec le bouton droit de la souris sur la zone du numéro de carte de crédit et sélectionnez « Inspecter ». Cela affiche le panneau « Inspecter l’élément ».
  1. Dans l'onglet « Éléments », recherchez l'élément numéro de carte de crédit en surbrillance et identifiez le nom de l'élément. Par exemple, dans la capture d'écran ci-dessous, l'élément de numéro de carte de crédit a un nom id de cc-number.
    Remarque : vous pouvez également cliquer avec le bouton droit de la souris sur l’élément et sélectionner « Copier » > « Copier le sélecteur » dans le menu déroulant pour obtenir le nom id.
  1. Saisissez cc-number dans le code Affirm Lite pour l'attribut data-cc-number-tag .

Exemple:

data-cc-number-tag="#cc-number"

Identifier leData-CC-CSC-Tag

  1. Sur la page de caisse de votre site Web, localisez la section qui affiche le code de sécurité à 3 ou 4 chiffres de la carte crédit, le code de sécurité de la carte (CSC) ou le code de vérification de la carte (CVC).
  1. Cliquez avec le bouton droit de la souris sur la zone du code de sécurité et sélectionnez « Inspecter ». Cela affiche le panneau « Inspecter l’élément ».
  1. Dans l'onglet « Éléments », recherchez l'élément de code de sécurité en surbrillance et identifiez le nom de l'élément. Par exemple, dans la capture d'écran ci-dessous, l'élément de code de sécurité a un nom id de cc-csc.
    Remarque : vous pouvez également cliquer avec le bouton droit de la souris sur l’élément et sélectionner « Copier » > « Copier le sélecteur » dans le menu déroulant pour obtenir le nom id.
  1. Saisissez cc-csc dans le code Affirm Lite pour l'attribut data-cc-csc-tag .

Exemple:

data-cc-csc-tag="#cc-csc"

Identifier leData-CC-Exp-Month-Tag

  1. Sur la page de caisse de votre site Web, localisez la section qui affiche le mois 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 ». Cela affiche le panneau « Inspecter l’élément ».
  1. Dans l'onglet « Éléments », retrouvez l'élément « mois d'expiration » en surbrillance et identifiez son nom. Par exemple, dans la capture d'écran ci-dessous, l'élément du mois d'expiration a un nom id de exp-month.
    Remarque : vous pouvez également cliquer avec le bouton droit de la souris sur l’élément et sélectionner « Copier » > « Copier le sélecteur » dans le menu déroulant pour obtenir le nom id.
  1. Saisissez exp-month dans le code Affirm Lite pour l'attribut data-cc-exp-month-tag .

Exemple:

data-exp-month-tag="#exp-month"

Remarque: 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 : data-cc-exp-month-tag= “cc-exp” et data-cc-exp-year-tag= “cc-exp”.

Identifier leData-CC-Exp-Year-Tag

  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 ». Cela affiche le panneau « Inspecter l’élément ».
  1. Dans l'onglet « Éléments », retrouvez l'élément « 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 id exp-year.
    Remarque : vous pouvez également cliquer avec le bouton droit de la souris sur l’élément et sélectionner « Copier » > « Copier le sélecteur » dans le menu déroulant pour obtenir le nom id.
  1. Saisissez exp-year dans le code Affirm Lite pour l'attribut Data-cc-exp-year-tag .

Exemple:

data-exp-year-tag="#exp-year"

Remarque: 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 : data-cc-exp-month-tag= “cc-exp” et data-cc-exp-year-tag= “cc-exp”.

Complétion des attributs HTML

Après avoir identifié vos sélecteurs HTML, votre code final ressemble à l’exemple ci-dessous et vos étapes d’intégration sont terminées pour Affirm Lite :

☑️
Affirm Lite
Ouvrir la recette
<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>

🚧

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.

Bouton de paiement Affirm(facultatif)

En option, Affirm a créé un bouton de paiement prédéfini pour faciliter davantage le processus d'intégration.

Pour activer le bouton de paiement Affirm pré-stylé, ajoutez affirm-checkout-btn à la classe contenant affirm-lite-checkout.

Exemple:

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

Personnalisation des boutons

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

  • Par défaut: affirm-checkout-btn qui affiche le bouton sur fond bleu et texte blanc.
  • Clair: affirm-checkout-btn btn-light qui affiche le bouton avec un fond blanc, une bordure bleue et un texte noir.

Mis à jour 2 months ago