Set Up Promotional Messaging

Prerequisites

Review Affirm Marketing Compliance Guidelines.
Determine where to display Affirm messaging on your site (e.g., product, category, cart, and homepage).
Confirm your public API keys are available, you can access them in the Affirm Merchant Portal. You’ll need this to configure Affirm.js and API requests.
(Optional) Work with your Client Success Manager to customize prequalification settings or co-branded visuals.

Steps

1. Add Affirm.js (AFJS)

Embed the following snippet into the <head> section of your site’s global template:

💻

Embed Affirm.js

Open Recipe

<script>
var _affirm_config = {
		public_api_key: "YOUR_PUBLIC_API_KEY", /* replace with public api key */
		script: "https://cdn1-sandbox.affirm.com/js/v2/affirm.js",
		locale: "en_US",
		country_code: "USA",
	};

(function(m,g,n,d,a,e,h,c){var b=m[n]||{},k=document.createElement(e),p=document.getElementsByTagName(e)[0],l=function(a,b,c){return function(){a[b]._.push([c,arguments])}};b[d]=l(b,d,"set");var f=b[d];b[a]={};b[a]._=[];f._=[];b._=[];b[a][h]=l(b,a,h);b[c]=function(){b._.push([h,arguments])};a=0;for(c="set add save post open empty reset on off trigger ready setProduct".split(" ");a<c.length;a++)f[c[a]]=l(b,d,c[a]);a=0;for(c=["get","token","url","items"];a<c.length;a++)f[c[a]]=function(){};k.async=
  !0;k.src=g[e];p.parentNode.insertBefore(k,p);delete g[e];f(g);m[n]=b})(window,_affirm_config,"affirm","checkout","ui","script","ready","jsReady");
</script>

2. Insert HTML Tags Where Messaging Will Appear

Place Affirm HTML components on relevant pages. Examples:

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

<!-- Cart Page -->
<p class="affirm-as-low-as" data-page-type="cart" data-amount="50000"></p>

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

Use the data-amount in cents (e.g., 100.00 = 10000) and data-page-type values that correspond to the location.

Full HTML Example

The following example shows how to include Affirm.js and the necessary HTML tags on a product detail page:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Product Detail Page</title>
  <link rel="stylesheet" href="styles.css">
  <!-- Affirm -->
<script>
 _affirm_config = {
   public_api_key:  "YOUR_PUBLIC_KEY",
   script:          "https://cdn1.affirm.com/js/v2/affirm.js",
   locale:          "en_US",
   country_code:    "USA"
 };
 (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 -->
</head>
<body>
  <header>
    <!-- Site Header -->
  </header>
  <main>
    <div class="product-detail">
      <img src="product-image.jpg" alt="Product Image">
      <h1>Product Name</h1>
      <p>Product Description</p>
      <p>Price: $100</p>

      <!-- Add promotional messaging below the product price -->
<div id="prices">
    <div id="buy-button">
      Buy Now
    </div>
    <div id="regular-price">
      $500.00
    </div>
    <p class="affirm-as-low-as" data-page-type="product" data-amount="50000"></p>
</div>
    </div>
  </main>
  <footer>
    <!-- Site Footer -->
  </footer>
</body>
</html>

Promotional Messaging Placement Examples

Banner

Products Page

Product Overview Page

3. Add Code to Handle Price Changes

If product pricing on your site updates dynamically, such as when customers select different variants or adjust quantities, ensure that Affirm’s promotional messaging reflects the updated pricing. The following functions are covered in this section:

Refresh UI
Page Reload
Price Update
Detect Modal Close

Refresh UI

To keep messaging updated, add 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 previous refresh function statically on the page, wrap it in the affirm.ui.ready() callback function. Doing so ensures that the page calls the refresh function only after 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.

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 components
    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')});

4. Add Prequalification Messaging (Optional)

Add a prequalification call-to-action link using your public API key:

<a href="https://www.affirm.com/apps/prequal/?public_api_key=YOUR_PUBLIC_KEY&unit_price=25000&page_type=product&referring_url=https://www.YourReturningURL.com">
  Prequalify now
</a>

When a customer clicks the link, it opens an educational modal to check eligibility and display spending power.

Prequalification Flow (New Customer)

Prequalification Flow (Existing Customer)

5. Test and Deploy

Confirm all Affirm components render correctly.
Switch your JS script from the sandbox to production (https://cdn1.affirm.com/...).
In the Affirm.js code you added to your site, replace "YOUR_PUBLIC_KEY" with your live key from the Affirm Merchant Portal.
Validate functionality end-to-end before going live.