Integrate promotional messaging

Affirm promotional messaging helps you showcase financing options to your customers, improvise conversion rate and average order value. This guide provides our integration options to get you started.

e-commerce platforms

If your site runs on an e-commerce platform, implementing Affirm promotional messaging is simple. Head over to our Platforms documentation for more information.

Affirm.js

Affirm.js is a Javascript library that you add to your website to enable the rendering of promotional content and ensures a seamless communication between the HTML tags you add to your site, like the data-page-type and Affirm’s servers. Follow the the integration steps below to use Affirm.js.

Integration steps

Add Affirm.JS
Insert promotional messaging HTML Tags

Step 1: Add Affirm.JS

In order to use Affirm promotional messaging, you’ll first need to include the Affirm.js library in the head of your site’s global page template. This ensures that the library is loaded on all pages of your site.

To include Affirm.js, add the following embed code to the head of your global page template:

<!-- 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 -->

See here for supported locale and country codes.

Once you include the script above, a defined instance of Affirm will be created on your client. You will gain access to methods within the Affirm object to trigger multiple actions.

Step 2: Insert promotional messaging HTML tags

After adding Affirm.js, you’ll need to insert specific HTML tags to your site where you want the promotional messaging to display. These tags are responsible for rendering the messaging. See our HTML reference for more details. The following example includes: As low as {payment}/mo with [affirm_logo]. Learn more.

Be sure to include the data-page-type attribute corresponding to the page where that promotional messaging component is placed. The data-page-type controls the page type and pricing configuration on your site. Additionally, you to customize messaging in the future without development work. By default, promotional messaging on product pages have prequalification enabled.

Example

To demonstrate how to include Affirm.js and the HTML tags on your site, the following example shows what a sites product detail page may look like:

<!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"
 };
 (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>