Skip to main content

 

Affirm Merchant Help

3dcart Integration

Overview

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

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

The integration steps are:

  1. Install and configure Affirm
  2. Review your order management functions
  3. Test your integration
  4. Deploy to production

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.

1. Install and configure Affirm on 3dcart

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

Screen Shot 2018-07-24 at 8.50.52 PM.png

  1. In Payment Methods, click Add New

Screen Shot 2018-07-24 at 8.50.58 PM.png

  1. 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)

Screen Shot 2018-07-24 at 8.51.08 PM.png

  1. Click Add New
  2. In the upper right corner of the configuration box, toggle the switch to On for Affirm
  3. Edit Caption to say Affirm Monthly Payments
  4. Check the Test Mode box to test the 3dcart Affirm integration to point to Affirm sandbox environment
  5. Enter the Public Key and Private Key you retrieved from the Affirm sandbox merchant dashboard (leave the Financial Product Key blank)
  6. If you do not want to automatically capture the charge right after authorization, then check the Authorize Only box
  7. 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)
  8. You can optionally enter a 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)
  9. Enable checkbox for Enable Affirm Modal JS if you want the Affirm checkout to be displayed in a modal instead of redirect
  10. Enable the checkout for Enable Affirm's Enhanced Analytics (Confirmation Page) to allow Affirm to receive order information after the order is placed
  11. Click Save

Screen Shot 2019-02-12 at 9.37.59 AM.png

2. Review your order management functions

Processing orders (authorize, void, refund, and partial refund) in 3dcart updates the order status in the Affirm dashboard. While you can process orders in the dashboard, we strongly recommend using 3dcart to keep order status synced with Affirm. For more information on processing orders in 3dcart, refer to their documentation.

3. Test your integration

After completing your integration, do a thorough testing of both your front-end and order management functions in our sandbox to ensure that everything works as expected. Click here for our recommended test plan. However, you’ll need to tailor your testing plan to your specific systems, processes, and integration.

4. Deploy to production

Coordinate testing with Affirm

Before deploying the Affirm integration to your production site, Affirm will need to test it in your development or staging environment connected to our live environment. Contact your Client Success Manager to coordinate this test.

Connect to the live Affirm environment

  1. Retrieve your live API keys at https://affirm.com/dashboard/#/apikeys
  2. In the 3dcart Online Store Manager, go to Settings > Payment
  3. Click Select Payment Methods
  4. In Payment Methods, click Affirm
  5. Enter the Public Key and Private Key you just retrieved from the Affirm merchant dashboard
  6. Uncheck the Test Mode box
  7. Click Save
  8. From the main Store Manager page, go to Content > Header and Footer
  9. In the Global Header field, if you have added the Affirm.js code, update it to use the live public API key you just received for public_api_key and https://cdn1.affirm.com/js/v2/affirm.js for script (Optional)
  10. Click Save

Launch to production

After you’ve connected to our live environment and we’ve tested your integration, you’re ready to deploy to your production environment and offer Affirm as a payment option to your customers.

FAQ

1. Affirm monthly payment messaging is not rendering on product pages

Affirm monthly payment messaging code has been added as a configuration option in the latest 3dcart release. 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 3dcart 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 3dcart, 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

 

2. 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 3dcart 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 3dcart 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-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){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