Upgrade your promotional messaging


Upgrading your Affirm integration allows you to take advantage of our upcoming and future releases as soon as they’re available with little or no development work. Our lightweight upgrade includes:

  • New promotional messaging components that respond dynamically to your unique financing programs such as longer terms (18, 24 and 36-month repayment terms) and 0% APR promotions, with customizable messaging to personalize the consumer journey
  • Our Prequalification flow within promotional messaging components to unlock purchasing power upfunnel while minimizing additional development work for your teams
  • Our updated Affirm.js library, which includes Enhanced Analytics that provide consumer insights and enable A/B testing to keep your site optimized

Recommended: Sandbox development

Perform this upgrade in your development environment connected to our sandbox. To connect your development environment to our sandbox, do the following:

1. Delete Affirm.js from each page

Delete all references to Affirm.js from each page where it's currently embedded. These pages include but may not be limited to the category, product, cart, and payment pages.

Adding the Affirm.js embed code only to your global page template loads it just once instead of loading it with each page that displays Affirm messaging.

2. Add Affirm.js to the global page template

<!-- Affirm -->
 _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.
<!-- 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. Update Affirm promotional messaging

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

In each HTML element, include the new 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. See our HTML Reference for required attributes.

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.

Monthly payment messaging (affirm-as-low-as) usually display price-specific information (requires data-amount) and are typically used with the following data-page-types:

  • category
  • product
  • cart
  • payment

Since site modals (affirm-site-modal) do not display price-specific information, they are typically used with the following data-page-types:

  • homepage
  • banner
  • landing
  • search

If you don't pass data-page-type, the component will use a default setting.

Update product modals and messaging

You are currently triggering some product modals by wrapping an affirm-as-low-as HTML element in an affirm-product-modal HTML element, which may look like (search for affirm-product-modal on your page source):

<a class="affirm-product-modal" data-amount="50000" data-modal-id="ABJF582KFOQ8DFK"><p class="affirm-as-low-as" data-amount="50000" data-promo-id="CEYI234PTKB4WJB"></p></a>

To take advantage of our new Page Type and more easily manage your messaging and customizations, you'll need to update each of these HTML snippets by removing affirm-product-modal and using only affirm-as-low-as. For example, your updated HTML snippet may look like:

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

Before setting these changes live, you'll need to work with your Client Success Manager to either use a new data-page-type, as the previous data-promo-id potentially may not work.

If you are using any of the following platforms, we have updated our plugin to support these new features. You may need to update your Affirm plugin and follow platform specific instructions to update Affirm product modals and messaging:

  • Magento 1 - New extension installation instructions can be found here
  • Magento 2 - New extension installation instructions can be found here ]
  • Shopify - Instructions to update the promotional can be found here
  • WooCommerce - Update the Affirm plugin to the latest version (1.1.5) and follow the instructions here.
  • Miva - New Miva plugin can be found here
  • Salesforce Commerce Cloud - New cartridge installation instructions can be found Salesforce Commerce Cloud (Demandware)
  • Web Shop Manager - Please reach out to your Web Shop Manager Account Manager to update the Affirm integration.
  • Zoey - Instructions to update promotional messaging can be found here
  • BigCommerce - Please reach out to your third-party partner to update the integration.


<p class="affirm-as-low-as" data-page-type="category" data-amount="99900"></p>

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

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

4. 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. We only require orderId, total, productId, and quantity for A/B testing.

5. Test and set live

Confirm that all of your Affirm promotional messaging components display as expected.

After testing everything, update the script parameter in the Affirm.js embed code to point to our live environment at https://cdn1.affirm.com and replace the public_api_key parameter with your live public API key found at https://affirm.com/dashboard/#/apikeys.

After you've connected to our live environment, you're ready to deploy to your production environment.

Did this page help you?