Shift4Shop

🚧

Note

L'intégration d'Affirm est seulement disponible pour les marchands sur les plans payants de Shift4Shop. Cette intégration n'est pas accessible sur le plan gratuit Shift4Shop End to End.

Introduction

Intégrez les solutions de paiement flexibles d'Affirm à Shift4Shop pour un financement fluide au moment du paiement.

Comment cela fonctionne? Lorsqu'un client passe une commande sur Shift4Shop, Affirm le soutient. Notre widget de paiement s'intègre directement pour permettre aux clients de fractionner leurs achats en paiements bihebdomadaires ou mensuels. Du côté de l'entreprise, Affirm s'occupe du financement - les fonds sont déposés sur le compte du commerçant comme s'il s'agissait d'un achat classique. C'est aussi simple que ça.

L'avantage? Les clients bénéficient d'un financement adapté à leur budget, tandis que les commerçants augmentent leurs ventes et le montant de leurs commandes. Alors, ne vous inquiétez pas à la caisse et laissez Affirm s'occuper du paiement - l'intégration est facilitée.

Comment fonctionne Affirm

Nous sommes là pour faciliter le financement pour vous et vos clients! Avec Affirm, vos clients peuvent facilement payer à l'avance pour leurs achats. Notre intégration est simple, vous pouvez donc proposer des options de paiement en ligne ou en magasin. Nous vous fournirons tous les outils nécessaires pour configurer votre entreprise afin d'afficher les options de paiement mensuel, d'offrir une préqualification et d'ajouter Affirm au moment du paiement. Rendons le financement facile ensemble!

Intégrer Affirm

Pour commencer à utiliser votre intégration Affirm, contactez votre gestionnaire de compte Shift4Shop ou l’assistance Shift4Shop pour plus de détails sur les prochaines étapes. Certaines personnalisations peuvent être nécessaires.

Dépannage

Les messages de paiement mensuels d'Affirm ne s'affichent pas sur les pages des produits.

Le code de messagerie de paiement mensuel Affirm a été ajouté en tant qu’option de configuration dans Shift4Shop. Si vous utilisez des modèles de page de liste personnalisés, cette mise à jour ne sera pas ajoutée automatiquement à vos modèles personnalisés. Pour que la messagerie de paiement mensuelle Affirm soit ajoutée à vos modèles, vous devez suivre les étapes ci-dessous :

1. Connectez-vous à votre gestionnaire de boutique en ligne Shift4Shop.
2. Accédez à Paramètres > Design > Thèmes et styles.
3. Cliquez sur le bouton Modifier le modèle (HTML) en haut à droite sous Plus.
4. Dans Shift4Shop, listing_x.html définit la mise en page des pages de listes de produits. Dans l'éditeur de modèles, selon lequel listing_x.html vous utilisez pour votre page produit, cliquez sur l’icône des paramètres > Modifier pour modifier le modèle de page produit.
5. Sous [ITEMPRICE] div et au-dessus de <div class="status"> ajoutez le code suivant :  

<!--START: affirm_button-->
<div class="clear"></div>
<div id="affirmButton" class="affirm-as-low-as" data-promo-id="[affirmPromoId]" data-amount="[intTotal]" data-page-type="product" data-brand="[affirmBrand]" data-sku="[affirmSKU]" data-category="[affirmCategory]"></div>
<script>
   _affirm_config = {
     public_api_key:  "[affirmPublicKey]",
     script:          "[affirmJsUrl]"
   };
   (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) { return function () { 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");
   affirm.ui.ready(function () {
    var spanPriceElem = document.getElementById('price');
      if (jQuery != null && spanPriceElem != undefined && spanPriceElem != null) {
       jQuery('#price').on('DOMSubtreeModified', function () {
         var arrPrice = spanPriceElem.innerText.match(/\d+/);
           if (arrPrice != null) {
            document.getElementById('affirmButton').setAttribute('data-amount', arrPrice[0] + "00");
              if (affirm.ui != null)
                 affirm.ui.refresh();
                }
              })
             }
 
             var spanProductElem = document.getElementById('product_id');
               if (jQuery != null && spanProductElem != undefined && spanProductElem != null || 1 == 1) {
                jQuery('#product_id').on('DOMSubtreeModified', function () {
                  document.getElementById('affirmButton').setAttribute('data-sku',document.getElementById('product_id').innerText);
                 })
                }
             });
</script>
<div class="clear"></div>
<!--END: affirm_button-->

6. Cliquez sur Enregistrer.

📘

Note

If you have custom cart page theme, you may also need to add the same code in your cart theme file. For example view_cart.html.

La fonction de la page de confirmation Affirm ne fonctionne pas.

Lorsqu'un client effectue son achat, vous pouvez envoyer ses renseignements de commande et de produit à Affirm pour les tests A/B, ce qui vous aidera à optimiser votre site. Cette configuration a été ajoutée dans les paramètres d'administration Affirm de Shift4Shop (Activer les analyses améliorées d'Affirm (page de confirmation). Si vous utilisez un modèle de paiement personnalisé, vous devrez peut-être ajouter un code personnalisé : 

1. Connectez-vous à votre gestionnaire de boutique en ligne Shift4Shop.
2. Accédez à Contenu > Titres et contenu.
3. Dans Paiement n° 4, cliquez sur Actions puis sur Modifier (situé à l'extrême droite de la section de la page).
4. Ajoutez le code ci-dessous à la section Pied de page (mode WYSIWYG activé) :

<!-- Affirm -->
<script>
 
_affirm_config = {
   public_api_key:  "YOUR_PUBLIC_KEY",
   script:          "https://cdn1.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){return function(){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");
// Use your live public API Key and https://cdn1.affirm.com/js/v2/affirm.js script to point to Affirm production environment.
 
affirm.ui.ready(function(){
    var orderTotal = "[orderamount]".replace(/[^0-9]+/g,"")
    affirm.analytics.trackOrderConfirmed({
        "orderId": "[invoicenum]",
        "total": orderTotal,
        "paymentMethod": "[opaymethod]"
    });
});
</script>
<!-- End Affirm -->

5. Cliquez sur Enregistrer les modifications.