HomeGetting StartedSolutionsPlatformsGlobal Integration
Docs

Shift4Shop

Our integration with Shift4Shop gives you access to all of Affirm's features, including flexible payment options, order management, and easy-to-implement on-site messaging to amplify awareness and conversion.

Suggest Edits

🚧

Note

The Affirm integration is only available for merchants on Shift4Shop legacy paid plans. This integration is not accessible on the free Shift4Shop End to End plan.

Introduction

Integrate Affirm's flexible payment solutions into Shift4Shop for smooth financing at checkout.

How's it work? When a customer hits checkout on Shift4Shop, Affirm's got their back. Our payment widget slides right in so customers can split their purchases into biweekly or monthly payments. On the business end, Affirm handles the financing - funds get deposited into the merchant's account like a standard purchase. It's that easy.

The benefit? Customers get financing that fits their budget, while merchants get more sales and larger order values. So take the headache out of checkout and let Affirm handle the heavy lifting - integration made easy.

How Affirm Works

We're here to make financing a breeze for you and your customers! With Affirm, your customers can easily pay-over-time for their purchases. Our integration is simple, so you can offer payment options online or in-store. We'll provide you with all the necessary tools to set up your business to display monthly payment options, offer prequalification, and add Affirm at checkout. Let's make financing easy together!

Integrate Affirm

To get started with your Affirm integration, contact your Shift4Shop account manager or Shift4Shop support for details on next steps. Some customization may be required.

Troubleshooting

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

Updated over 1 year ago

Other helpful resources