Shift4Shop

Learn how to integrate Affirm into your Shift4Shop e-commerce platform.

Overview

This guide describes how to integrate Affirm into the Shift4Shop e-commerce platform so that you can provide Affirm as a payment option to your customers. After integrating Affirm, your Shift4Shop site will:

  • Offer Affirm as payment option on the checkout page
  • Process Affirm charges in your order management system
  • Display Affirm promotional messaging

Before you begin 

Before beginning integration, you should review:

Sandbox development

You should have received an email inviting you to create an Affirm account. Click here for information about accessing your account.

Develop and test the Affirm integration in your development environment connected to our sandbox. To use our sandbox, retrieve your sandbox API keys at https://sandbox.affirm.com/dashboard/#/apikeys for use during integration.

After development and testing, you'll need to update your integration to use your live API keys, which you can find at https://affirm.com/dashboard/#/apikeys.


Install and configure Affirm

1. Open the Shift4Shop Online Store Manager.
2. Go to Settings > Payment.
3. Click Select Payment Methods.

4. In Payment Methods, click Add New.

5. Enter the following information:

  • Payment Method: Affirm
  • Country: United States
  • State: All
  • Min. Order Amount and Max. Order Amount: The minimum and maximum dollar amount values that display Affirm as a payment option to your customers when checking out (optional)
  • Customer Group: None (unless you choose to provide Affirm to a select customer group)

6. Click Add New
7. In the upper right corner of the configuration box, toggle the switch to On for Affirm.
8. Edit Caption to say Affirm Monthly Payments.
9. If you would like to test, check the Test Mode box to test the Shift4Shop Affirm integration to point to Affirm sandbox environment.
10.
Enter the Public Key and Private Key from your Affirm dashboard. (If testing, use your Affirm sandbox keys(leave the Financial Product Key blank).
11. If you do not want to automatically capture the charge right after authorization, then check the Authorize Only box.
12. Set Show Monthly Payment Messaging to All to display Affirm promotional messaging on both the product and cart pages (See FAQ below if you are not seeing Affirm Monthly Payment Messaging on the product page).
13. Leave Promo ID value in Data Promo ID (If your Affirm Client Success contact has provided you a Promo ID, enter it here; if not, leave this field blank).
14. Enable checkbox for Enable Affirm Modal JS if you want the Affirm checkout to be displayed in a modal instead of redirect.
15. r Enable Affirm's Enhanced Analytics (Confirmation Page) to allow Affirm to receive order information after the order is placed (optional)
16. Click Save

👍

Captures, refunds, voids can be completed in Shift4Shop and these actions will automatically be reflected in Affirm. It isn't necessary to manage these functions separately in your Affirm dashboard. While you can process orders in the dashboard, we strongly recommend using Shift4Shop to keep order status synced with Affirm. For more information on processing orders in Shift4Shop, refer to their documentation.

FAQ

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


Did this page help you?