Adding Promotional Messaging To Your Website – Sandbox US

Quickstart
Add Affirm.js
Create promotional messaging components
Add code to handle price changes
Marketing guidelines

Bring awareness to Affirm's flexible payment options at every phase in the shopping journey — increasing conversion and average order value for your business.

d1f891e-1._EDU_PDP.png

Quickstart

Monthly payment messaging and educational modals show customers how they can use Affirm to finance their purchases. Our promotional messaging allows you to:

Dynamically display monthly payment pricing information
Offer a Pre-qualification or a Learn More modal

This guide will review Affirm promotional messaging and break down how to add it to your site. Once you’ve determined where you’d like the Affirm pay-over-time-messaging to appear on your website, there are three steps to render and ensure it works correctly.

Affirm also offers a global integration guide that is catered to merchants who would like to operate internationally. The guide includes a step-by-step walkthrough to enable this configuration.

The global integration currently supports the US and Canada, with additional countries to come.

Add Affirm.js

Add the "Affirm.js" embed code to the head of your global page template if you haven't already done so. This will communicate with Affirm to help calculate the “Starting at $x/mo” messaging based on the financing offerings on your website.

<!-- Affirm -->
<script>
 _affirm_config = {
   public_api_key: "YOUR_PUBLIC_KEY",
   script:         "https://cdn1.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");
</script>
<!-- End Affirm -->

Create promotional messaging components

Add the "affirm-as-low-as" HTML element where you want to display an Affirm promotional messaging component. This will actually render the Starting at $x/mo messaging on the webpage.

The element attributes such as "data-page-type" determine which component displays. We generally recommend adding promotional messaging to your category, product, cart, and payment pages.

See our HTML reference for more information about creating marketing elements.

Add code to handle price changes

The price displayed on your product or cart pages may change due to product variants, quantity changes, etc. If your Affirm promotional messaging displays before the price update, the messaging will be inaccurate. To keep messaging updated, implement this refresh function into your price change callback function:

affirm.ui.refresh();

Page reload

If the product’s price or the Affirm promotional messaging display after the page loads, or if you included the above refresh function statically on the page, wrap it in the "affirm.ui.ready()" callback function. Doing so ensures that the page does not call the refresh function before "Affirm.js" initializes.

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

Price update

When the price updates on your page, call the refresh function in the same callback function that handles your price change event. Add element IDs to promotional messaging components for easy access and modification of their attributes. Note that we use example ID names below.

//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();
}

Detect modal close

When an education modal is closed (non-prequal), you can detect that event by using the following code:

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

If the above script did not work, use the same code but replace 'learnMore' with 'prequal', as shown below:

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

Examples

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>

Be sure to use your page's price variable or price amount in USD cents (e.g. $100 = 10000) for "data-amount".

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

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

Be sure to use your page's price variable or price amount in USD cents (e.g., $100 = 10000) for "data-amount".

To add a site modal to a text link on your home page:

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

To add a site modal to banner link:

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

In each HTML element, be sure to include the "data-page-type" attribute corresponding to the page where that promotional messaging component is placed. The "data-page-type" attribute allows you to customize messaging in the future without development work. By default, promotional messaging on product pages have prequalification enabled, but you can work with your client success manager to change this and configure additional customizations.

Marketing guidelines

Following our Merchant marketing guides will ensure that your messaging and communications are compliant and maintain the quality of the Affirm brand. These guides include:

Branding specifications (logo size, color)
Homepage messaging guidelines (layout and approved messaging)
Product, category, cart, and payment page messaging guidelines
Educational modals overview (referred to as Learn More modals in the guidelines document)
Email marketing guidelines (layout and approved messaging)
Social media marketing guidelines

All of your Affirm related marketing content must be available to all of your customers.

Contents