Skip to main content

Merchant Help

 

Affirm Merchant Help

Updating legacy Affirm Javascript

Preparation

  1. Document your:
    1. Current price variable. You'll assign this to the 'affirm_price' variable'.
    2. ALA message template. This you'll communicate to your Affirm contact so they can apply that same template on the Affirm platform-side.
  2. Remove everything after embed code (starting with affirm.ui.ready)
  3. Add new JS (below) to page after embed code
  4. Define page types (required) or promo IDs (optional) to apply for each placement. This is assigned to the 'affirm_page_type' variable below.

Update HTML placeholder

Add the class name 'affirm-as-low-as' to your current monthly payment messaging HTML placeholder. Most likely your existing HTML element has an ID of 'learn-more'. Just add the class name 'affirm-as-low-as' to this HTML element.

Old:

<p id="learn-more">

New: 

<p id="learn-more" class="affirm-as-low-as" data-amount="50000" data-page-type="product"> 

If the HTML element already has a class name defined, you can add 'affirm-as-low-as' to the end of the class attribute value with a space to separate it.

Remove legacy JavaScript

Keep this:

_affirm_config = {
  //Affirm Sandbox environment
  script:"https://cdn1-sandbox.affirm.com/js/v2/affirm.js",
  
  //Affirm Live environment
  //script:"https://cdn1.affirm.com/js/v2/affirm.js", 
  
  public_api_key:"YOUR_PUBLIC_API_KEY"
};
(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");

To be removed (everything after the above snippet):

affirm.ui.ready( function() { updateAffirmAsLowAs( 50000 ) } ); // change to your template value for product or cart price
  function updateAffirmAsLowAs( amount ){
    if ( ( amount == null ) || ( amount < 1000 ) ) { return; } // Only display as low as for items over $10 CHANGE FOR A DIFFERENT LIMIT
    // payment estimate options
    var options = {
      apr: "0.10", // percentage assumed APR for loan
      months: 12, // can be 3, 6, or 12
      amount: amount // USD cents
    };
    try {
      typeof affirm.ui.payments.get_estimate; /* try and access the function */
    }
    catch (e) {
      return; /* stops this function from going any further - affirm functions are not loaded and will throw an error */
    }
    // use the payment estimate response
    function handleEstimateResponse (payment_estimate) {
      // the payment comes back in USD cents
      var dollars = ( ( payment_estimate.payment + 99 ) / 100 ) | 0; // get dollars, round up, and convert to int
      // Set affirm payment text
      var a = document.getElementById('learn-more');
      var iText = ('innerText' in a)? 'innerText' : 'textContent';
      a[iText] = "Starting at $" + dollars + " a month. Learn More";
      // open the customized Affirm learn more modal
      a.onclick = payment_estimate.open_modal;
      a.style.visibility = "visible";
    };
    // request a payment estimate
    affirm.ui.payments.get_estimate(options, handleEstimateResponse);
  }

Example JavaScript implementation code


// Code to set all ALA placements to same values across whole page
var affirm_promo_id = ;
var affirm_page_type = ;
var affirm_price = ;
affirm.ui.ready(function(){
    var _affirm_promos = document.getElementsByClassName('affirm-as-low-as');
    for (var i = _affirm_promos.length - 1; i >= 0; i--) {
        _affirm_promos[i].setAttribute('data-promo-id',affirm_promo_id);
        _affirm_promos[i].setAttribute('data-page-type',affirm_page_type);
        _affirm_promos[i].setAttribute('data-amount',affirm_price);
    }
})

// Code to set a single ALA placement
var affirm_promo_id = ;
var affirm_page_type = ;
var affirm_price = ;
affirm.ui.ready(function(){
    var _affirm_promos = document.getElementsByClassName('affirm-as-low-as')[0];
    _affirm_promos.setAttribute('data-promo-id',affirm_promo_id);
    _affirm_promos.setAttribute('data-page-type',affirm_page_type);
    _affirm_promos.setAttribute('data-amount',affirm_price);
})

Please refer to the main Promos documentation for best practices on implementing Affirm Promos on your site:

https://docs.affirm.com/Integrate_Affirm/Promotional_Messaging