Configurer Affirm Lite

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

<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"
  data-enable-ala="true"
>
    Checkout with Affirm
</button>

Page de secours d'Affirm Landing Page

To ensure a customer can complete their checkout even if Affirm Lite cannot identify a selector, you can use safeguards such as the Affirm Landing Page (previously Affirm Lite) fallback. You can activate this fallback by including the data-fallback-url attribute in your Affirm Lite code.

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. The class affirm-lite-checkout.
2. The data-total-amount-tag attribute to accurately capture and communicate your customer's checkout cart total to Affirm.
3. The data-fallback-url attribute to redirect customers to Affirm Landing Page if Affirm Lite does not activate.

Attributs d'Affirm Lite

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

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

• Cart total (#total-amount)
• Credit card number (#cc-number)
• CVV (#cc-csc)
• Expiration month (#exp-month)
• Expiration year (#exp-year)

📘

Champs d'expiration combinés

If your expiration fields are combined, use the same selector for both data-cc-exp-month-tag and 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.

2. Cliquez avec le bouton droit sur la zone du mois d'expiration et sélectionnez « Inspecter » pour afficher le panneau Inspecter l'élément.

3. In the Elements tab, find the highlighted expiration year element and the element's name. For example, in the screenshot below, the expiration year element has an id name of exp-year.

4. Add the element name, such as exp-year, in the Affirm Lite code for the data-cc-exp-year-tag attribute.

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.

Add affirm-checkout-btn to your button class for default styling:

<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. Default option: affirm-checkout-btn displays the button with a blue background and white text.

2. Light option: affirm-checkout-btn btn-light displays the button with a white background, blue border, and black text.

Prochaines étapes

• À propos d’Affirm Lite
• Gérer les transactions
• En savoir plus sur Split Capture
• Page de destination Affirm