HomeGetting startedSolutionsPlatformsGlobal Integration
Docs

Integrate Promotional Messaging

Learn how to integrate promotional messaging into your site.

Suggest Edits

Overview

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 integration steps below to use Affirm.js.

Integration steps

  1. Affirm Promotional Messaging Placement
  2. Add Affirm.JS
  3. Insert Promotional Messaging HTML Tags

Step 1: Affirm Promotional Messaging Placement

Placement Guidelines

Determine where you would like the Affirm Promotional Messaging to display on your site. For examples and additional context, please review our Strategic Placement section.

Email Marketing Guidelines

For more guidance around email marketing guidelines, please refer to our Email Marketing page.

Step 2: 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", // use your live public API key
   script:          "https://cdn1-sandbox.affirm.com/js/v2/affirm.js" // NOTE: switch this value to “https://cdn1.affirm.com/js/v2/affirm.js” to point to Affirm production environment
   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 →

📘

Script URL -> Production Environment

Please note that the URL listed in the code snippet points to our sandbox script, which is best suited for testing your integration. Before going live, remember to set the script to the live version: https://cdn1.affirm.com/js/v2/affirm.js.

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 3: Insert Promotional Messaging HTML Tags

After adding Affirm.js, you’ll need to insert specific HTML tags on your site where you want the promotional messaging to display. These tags are responsible for rendering the messaging. See our HTML reference and Components page 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 can 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 site's 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",
   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>

Updated 4 days ago