Guide d'intégration Affirm Lite
Grâce à l'intégration d'Affirm Lite, il est plus facile que jamais d'offrir à vos clients un moyen de paiement pratique.
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 keeps customers on your checkout page while they use Affirm to complete their purchase, functioning similarly to a widget. When a customer clicks the Affirm Lite checkout button, we display a pop-up window on the existing screen to guide them through the checkout process, resulting in the creation of an Affirm Virtual Card.
After the Affirm Virtual Card is created, card information can be transferred to the respective payment fields in these two ways:
- If you are using the query selectors for the Affirm Lite attributes, Affirm can autofill the card number, expiration date, and CVV fields with the Virtual Card’s information. See the Integration Steps section for details.
- 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
To activate the Affirm object and use the broader Affirm.js SDK functionalities:
- Ajouter le script Affirm.js dans la section
<head>
de votre page globale. - Initialize Affirm by:
- Adding your public API key, which authenticates your website's identity to Affirm, and
- Specifying the environment (sandbox or production) that you're targeting.
<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. Add the Affirm Lite Code Snippet
Embed the Affirm Lite code snippet into your HTML as a button that triggers the Affirm checkout experience. Affirm Lite requires an additional checkout button on your checkout page. If you prefer not to design your own button, Affirm provides a pre-styled checkout button. For details, see the Affirm Checkout Button section.
To activate Affirm Lite successfully, you must:
- Embed the class "affirm-lite-checkout" within the Affirm Lite button's HTML.
- Incluez l’attribut
data-total-amount-tag
pour capturer et communiquer précisément le total du panier d’achat de votre client à Affirm. - 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
<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
Attribut | Description |
---|---|
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-url | Ensures that Affirm Landing Page can be activated as a fallback measure if Affirm Lite is unable to render. |
data-total-amount-tag | Captures the cart total and sends that information to Affirm. |
data-cc-number-tag | Identifies and automatically populates the Virtual Card’s number into the respective field on your website. |
data-cc-csc-tag | Identifies and automatically populates the Virtual Card's 3-4 digit security code into the respective field on your website. |
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. Identify and Add the HTML Selectors
Use Google Chrome’s Inspect Element feature to identify HTML selectors. Then, enable Affirm to read the cart total and accurately obtain the amount required for the customer’s loan.
Identifier leData-Total-Amount-Tag
Data-Total-Amount-Tag
- On your website's checkout page, locate the area that displays the customer’s cart total.
- Right-click on the customer’s cart total and select “Inspect.” This displays the Inspect Element panel.
- 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 nomid
.
- 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
Data-CC-Number-Tag
- On your website's checkout page, locate the area that displays the customer’s credit card number.
- Right-click on the credit card number area and select “Inspect.” This displays the Inspect Element panel.
- 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
decc-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 nomid
.
- Saisissez
cc-number
dans le code Affirm Lite pour l'attributdata-cc-number-tag
.
Exemple:
data-cc-number-tag="#cc-number"
Identifier leData-CC-CSC-Tag
Data-CC-CSC-Tag
- On your website's checkout page, locate the area that displays the credit card’s 3-4 digit security code, Card Security Code (CSC), or Card Verification Code (CVC).
- Right-click on the security code area and select “Inspect.” This displays the Inspect Element panel.
- 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
decc-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 nomid
.
- Saisissez
cc-csc
dans le code Affirm Lite pour l'attributdata-cc-csc-tag
.
Exemple:
data-cc-csc-tag="#cc-csc"
Identifier leData-CC-Exp-Month-Tag
Data-CC-Exp-Month-Tag
- On your website's checkout page, locate the area that displays the credit card’s expiration month.
- Right-click on the expiration month area and select “Inspect.” This displays the Inspect Element panel.
- 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
deexp-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 nomid
.
- Saisissez
exp-month
dans le code Affirm Lite pour l'attributdata-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
Data-CC-Exp-Year-Tag
- On your website's checkout page, locate the area that displays the credit card’s expiration year.
- Right-click on the expiration month area and select “Inspect.” This displays the Inspect Element panel.
- 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 nomid
.
- Saisissez
exp-year
dans le code Affirm Lite pour l'attributData-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
After you identify your HTML selectors, your final code resembles the example below and your integration steps are complete for Affirm Lite:
<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
If any changes are made to your web page, ensure that the query selectors for the Affirm Lite attributes are correct and update them if necessary.
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 3 months ago