HomePaymentsPlatformsGlobal Integration

Troubleshooting Shift4Shop

Learn how to troubleshoot the Affirm Shift4Shop platform.

Suggest Edits

Affirm monthly payment messaging is not rendering on product pages.

Affirm monthly payment messaging code has been added as a configuration option in Shift4Shop. If you are using custom listing page templates, this update will not be added automatically to your custom templates. To get Affirm monthly payment messaging added to your templates, you need to follow the steps below:

1. Sign in to your Shift4Shop Online Store Manager.
2. Go to Settings >Design >Themes & Styles.
3. Click the Edit Template (HTML) button at the top right under More.
4. In Shift4Shop, listing_x.html defines the layout of the product listing pages. In Template Editor, depending on which listing_x.html you are using for your product page, click on the settings icon > Edit to edit the product page template.
5. Under [ITEMPRICE] div and above the <div class="status"> add the following code:  

<!--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. Click Save.

📘

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.

Affirm confirmation page function is not working.

When a customer completes their purchase, you can send their order and product information to Affirm for A/B testing, which will help you optimize your site. This configuration has been added in Shift4Shop Affirm admin settings (Enable Affirm's Enhanced Analytics (Confirmation Page)). If you are using a custom checkout template, you may need to additionally add custom code: 

1. Sign in to your Shift4Shop Online Store Manager.
2. Go to Content > Titles & Content.
3. In Checkout #4, click Actions and then click Edit (located on the far right of the page section).
4. Add the code below to the Footer section (WYSIWYG mode enabled):

<!-- 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. Click Save Changes.

Updated 5 months ago