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


This guide describes how to integrate Affirm into the 3dcart e-commerce 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

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 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

Install and configure Affirm

1. Open the 3dcart 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. Check the Test Mode box to test the 3dcart Affirm integration to point to Affirm sandbox environment.
10. Enter the Public Key and Private Key you retrieved from the Affirm sandbox merchant
dashboard (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. 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).
14. Enable checkbox for Enable Affirm Modal JS if you want the Affirm checkout to be displayed in a modal instead of redirect.
15. Enable the checkout for Enable Affirm's Enhanced Analytics (Confirmation Page) to allow Affirm to receive order information after the order is placed.
16. Click Save

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.

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 Integration Consultant or [email protected] to coordinate this test.

Deploy to production

Connect to the live Affirm environment 

1. Retrieve your live API keys at
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 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.


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>
   _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)
             var spanProductElem = document.getElementById('product_id');
               if (jQuery != null && spanProductElem != undefined && spanProductElem != null || 1 == 1) {
                jQuery('#product_id').on('DOMSubtreeModified', function () {
<div class="clear"></div>
<!--END: affirm_button-->

6. Click Save



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 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 -->
_affirm_config = {
   public_api_key:  "YOUR_PUBLIC_KEY",
   script:          ""
(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 script to point to Affirm production environment.
    var orderTotal = "[orderamount]".replace(/[^0-9]+/g,""){
        "orderId": "[invoicenum]",
        "total": orderTotal,
        "paymentMethod": "[opaymethod]"
<!-- End Affirm -->

5. Click Save Changes

Updated 5 months ago


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

Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.