Custom Promotional Messaging

Overview

This guide will review Affirm promotional messaging and tell you how to add it to your site.

The steps for adding Affirm promotional messaging are:

1. Determine Affirm promotional messaging placement
2. Add Affirm.js
3. Create promotional messaging components
4. Add code to handle price changes
5. Test and set live

1. Determine Affirm promotional messaging placement

If you’re integrating Affirm for the first time, you’ll need to go through a design process to determine where you want to include Affirm promotional messaging on your site and what the messaging should look like and say.

Please reach out to your Client Success Manager if you need help designing your messaging placement. Also, remember that Affirm must approve your messaging to ensure that it complies with regulatory guidelines. After your team finalizes the design, you can add the messaging to your site quickly.

2. Add Affirm.js

Add the Affirm.js embed code to the head of your global page template if you haven't already done so.

<!-- 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.
</script>
<!-- End Affirm -->

Be sure to use your public API key from the sandbox merchant dashboard for public_api_key.

Your global page template is the only place where you need this embed code.

3. Create promotional messaging components

Add an HTML element everywhere you want to display an Affirm promotional messaging component. The element attributes (see below) determine which component displays. We generally recommend adding promotional messaging to your category, product, cart, and payment pages.

See the following examples for how to add promotional messaging components to your site.

To add monthly payment messaging and a product modal to your product page:

<p class="affirm-as-low-as" data-page-type="product" data-amount="your_price_variable"></p>

<p class="affirm-as-low-as" data-page-type="cart" data-amount="your_price_variable"></p>

<a class="affirm-site-modal" data-page-type="homepage">Learn more</a>

<a class="affirm-site-modal" data-page-type="banner"><img src="https://cdn-assets.affirm.com/images/banners/300x50.png"></a>

affirm.ui.refresh();

affirm.ui.ready(function(){
    affirm.ui.refresh();
});

//Add to an existing callback that fires when the price updates
priceUpdateEventHandler(){
    changePriceHandler(newPrice);
}

function updateAffirmPromos(newPrice){
    //Update the wrapper elements' attributes in the DOM
    document.getElementById('affirmProductModal').setAttribute('data-amount',newPrice);
    document.getElementById('affirmLearnMore').setAttribute('data-amount',newPrice);
  
    //Call affirm.ui.refresh to re-render the promotional messaging componenets
    affirm.ui.refresh(); 
}

affirm.events.on('learnMore:close',function(){console.log('fired')});