Skip to main content

Merchant Help

 

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 on 3dcart
  2. Add Affirm.js
  3. Add Affirm promotional messaging
  4. Review your order management functions
  5. Add the Confirmation Page function
  6. Test your integration
  7. 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
  3. Edit Caption to say Affirm Monthly Payments
  4. Check the Test Mode box to test the 3dcart Affirm integration in our sandbox
  5. Enter the Public Key and Private Key you retrieved from the Affirm sandbox merchant dashboard (leave the Financial Product Key blank)
  6. If your checkout process does not automatically capture the charge after authorization, then check the Authorize Only box
  7. Set Show Monthly Payment Messaging to None to display Affirm promotional messaging on both the product and cart pages
  8. You can optionally enter a Promo ID value in Data Promo ID (contact the Affirm Client Success team for more information about Promo ID’s)
  9. Click Save

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

2. Add Affirm.js

Add the Affirm.js embed code to the head of your global page template.

  1. Sign in to your 3dcart Online Store Manager
  2. From the left-side navigation, go to Content > Header and Footer
  3. In the Global Header field, click the </> icon to disable WYSIWYG mode
  4. Add the code below
<!-- Affirm -->
<script>
 _affirm_config = {
   public_api_key:  "YOUR_PUBLIC_KEY",
   script:          "https://cdn1-sandbox.affirm.com/js/v2/affirm.js",
   session_id:      "YOUR_VISITOR_SESSION_ID"
 };
 (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.
</script>
<!-- End Affirm -->
  1. Use your public API key from the sandbox merchant dashboard for public_api_key and a session ID variable for the optional session_id to take advantage of additional analytics
  2. After adding the code, click Enable
  3. Click Save

Note that the above code won’t display unless you enable WYSIWYG mode.

3. Add Affirm promotional messaging

Affirm promotional messaging components—monthly payment messaging and educational modals—show customers how they can use Affirm to finance their purchases. Click here for information on adding Affirm promotional messaging to your site. Refer to the code below for how to add promotional messaging to 3dcart.

<div class="affirm-as-low-as" data-amount="" id="as-low-as-refreshable" data-page-type="product"></div>
 
<script>
 affirm.ui.ready(function(){
    var refreshable = document.getElementById('as-low-as-refreshable');
    if (refreshable){
    var amount = "[price]".replace(/[^0-9]+/g,"");
    refreshable.setAttribute('data-amount', amount);
    affirm.ui.refresh();  
    }
  });
</script>

Click here for the price variable for the listing page.

If you prefer to use the standard 3dcart template, then when configuring Affirm, set Show Monthly Payment Messaging to All to display Affirm promotional messaging on both the product and cart pages

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

5. Add the Confirmation Page function

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. Send this information by adding the Confirmation Page function to your payment confirmation page.

  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)
<script type="text/javascript">
affirm.ui.ready(function(){
    var orderTotal = "[orderamount]".replace(/[^0-9]+/g,"")
    affirm.analytics.trackOrderConfirmed({
        "orderId": "[invoicenum]",
        "total": orderTotal,
        "paymentMethod": "[opaymethod]"
    });
});
</script>        
  1. Click Save Changes

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

7. 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, update the Affirm.js code 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
  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.