Contenu
- Processus d'Implémentation
- Développement
Processus d'Implémentation
Les intégrations direct API nécessitent un peu de codage. Vous devez effectuer certaines opérations avant de pouvoir les déployer sur votre compte de production et les mettre en ligne :
- Récupérer vos clés API
-
Développement
- Installation d'un client
-
Implémenter la messagerie promotionnelle Affirm sur votre site Web
- Intégrer Affirm.js
- Implémenter Affirm sur les pages de produits
- Implémenter Affirm sur les pages de panier
- Implémenter des pages de produits supplémentaires
-
Implémenter l'intégration de paiement Affirm sur votre site Web
- Intégrer Affirm.js
- Tester votre intégration
- Déployer votre intégration
Nous couvrirons les éléments en gras dans cet article. Nous couvrirons les autres étapes dans les autres étapes du guide.
Développement
Installation d'un client
Nous fournissons différents mécanismes d'intégration et de client pour le Web et le mobile afin de prendre en charge Affirm comme option de paiement dans votre application. Cela créera votre expérience de paiement.
Implémenter la messagerie promotionnelle Affirm sur votre site Web
Cette section vous expliquera le processus d'intégration de la messagerie promotionnelle Affirm dans votre site d'eCommerce. La messagerie de paiement mensuel et des fenêtres modales éducatifs montrent aux clients comment ils peuvent utiliser Affirm pour financer leurs achats. Notre messagerie promotionnelle vous permet de:
- Afficher dynamiquement les informations de tarification des paiements mensuels
- Offrir la Préadmissibilité
Une fois que vous avez déterminé où vous souhaitez que la messagerie de paiement par versements Affirm apparaisse sur votre site Web, il y a quelques étapes à suivre pour la rendre et s'assurer qu'elle fonctionne correctement. Voyons cela !
1. Intégrer Affirm.js
Ajoutez le code d'intégration Affirm.js à l'en-tête de votre modèle de page global, puis collez la clé API publique depuis votre tableau de bord sandbox dans l' attribut public_api_key .
Remarque: Les mêmes informations d'identification configurées pour le tableau de bord de production peuvent être utilisées pour se connecter au sandbox.
<!-- Affirm →
<script>
_affirm_config = {
public_api_key: "YOUR_PUBLIC_KEY",
script: "https://cdn1-sandbox.affirm.com/js/v2/affirm.js"
};
(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){returnfunction(){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");
// Utilisez votre clé API publique live et https://cdn1.affirm.com/js/v2/affirm.js script pour pointer vers l'environnement de production Affirm.
</script>
<!-- End Affirm -->
Exemple: https://jsfiddle.net/cgj5refv/emBedded/html/
2. Implémenter Affirm sur les pages de produits
Copiez la ligne de code HTML indiquée ci-dessous et collez-la sous le code qui affiche le prix sur la page de détails de votre produit. Dans l'attribut data-amount, transmettez la valeur du prix indiqué du produit sous la forme d'un entier en cents (par ex., $104,99 = 10499).
<p class="affirm-as-low-as" data-page-type="product" data-amount="10499"></p>
Si elle est correctement implémentée, vous devrez voir apparaître un message similaire à celui ci-dessous:
https://jsfiddle.net/v1gcrdu2/1/embedded/result
3. Implementer Affirm sur les pages de panier
Copiez la ligne de code HTML indiquée ci-dessous et collez-la sous le code qui affiche le total sur votre page de panier. Dans l'attribut data-amount, transmettez la valeur du total du panier sous la forme d'un entier en cents (par ex., $104,99 = 10499).
<p class="affirm-as-low-as" data-page-type="cart" data-amount="10499"></p>
Si elle est correctement implémentée, vous devrez voir apparaître un message similaire à celui ci-dessous:
https://jsfiddle.net/v1gcrdu2/2/embedded/result
4. Implémenter des placements de produits supplémentaires
Les placements sur les pages d’accueil et la page de catégorie contribuent à faire connaître l’option de paiement Affirm et à générer un volume et une conversion supplémentaires. Pour ajouter une bannière à votre page d'accueil ou votre page de catégorie, utilisez la classe 'affirm-site-modal' comme indiqué ci-dessous:
<a class="affirm-site-modal" data-page-type="banner"><img src="https://cdn-assets.affirm.com/images/banners/234x60.png"></a>
Si l'implémentation est correcte, vous devriez voir apparaître une bannière similaire à celle ci-dessous:
https://jsfiddle.net/0zvrdag9/embedded/resultb
Remarque: si vous souhaitez utiliser une autre bannière, ajustez simplement la source de l'image à l'une des bannières répertoriées ici. Vous pouvez également voir d'autres ressources marketing ici.
Implémenter l'intégration de paiement Affirm sur votre site Web
La création de paiement est le processus par lequel un client utilise Affirm pour payer un achat dans votre application. En utilisant les fonctions suivantes, vous déclencherez notre flux standard lorsque le client clique sur terminer le paiement après sélectionner Affirm comme option de paiement.
Cette section décrit comment intégrer le mode de paiement Affirm à votre boutique e-commerce, si vous n'utilisez pas l'une de nos intégrations de plateforme existantes. Le processus de l'implementation est divisé en étapes suivantes :
Intégrer Affirm.js
- Ajoutez le code d'intégration Affirm .js à l'en-tête de votre modèle de page global.
- Collez la clé API publique de votre tableau de bord sandbox dans l'attribut public_api_key.