Skip to main content

Merchant Help Center

 

Affirm Merchant Help Center

Monthly Payment Messaging

Overview

Monthly Payment Messaging is the text below your product price that says, "Starting at $10/month with Affirm. Learn more". Placing Monthly Payment Messaging on your site is the easiest way to communicate Affirm's value proposition to your customers. 

The monthly payment message is dynamically rendered into an HTML placeholder element on the page. Clicking the 'Learn more' link opens a modal window with an explanation of Affirm and how the monthly payment price was calculated.

 

Integration

  1. Include Affirm.js runtime embed code
    <script>
      var _affirm_config = {
        public_api_key:  "XXXXXXXXXXXXXXX",
        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.
    </script>
  2. Change out the public_api_key value with your own Public API key. Please note that the key needs to match the environment you're referencing.
  3. Include an HTML placeholder element with the correct class name

     

    <a class="affirm-as-low-as" data-amount="50000" data-affirm-color="blue"></a>
    
  4. Change out the 'data-amount' attribute value with your product price variable. You can refer to your current product page price template to find out that variable name.

Variants

Below are the guides for various implementations that captures the common variants:

We also have examples to demonstrate these different use cases:

Single price
  • Add the HTML placeholder
  • If product variants/price can be updated on this page, make sure the placeholder element is updated with the current price
  • The Affirm runtime code will automatically render the monthly payment messaging component

 

<a class="affirm-as-low-as" data-amount="50000" data-affirm-color="blue"></a>

 

Single price appearing multiple places on a page
  • Add multiple HTML placeholders on a single page
  • If product variants/price can be updated on this page, make sure all placeholder elements are updated with the current price
  • The Affirm runtime code will automatically render all monthly payment messaging components

<!-- First instance -->
<a id="monthlyPriceBelowMainPrice" class="affirm-as-low-as" data-amount="your_product_price_variable" data-affirm-color="blue"></a>

<!-- Second instance -->
<a id="monthlyPriceInFooter" class="affirm-as-low-as" data-amount="your_product_price_variable" data-affirm-color="blue"></a>

 

Multiple products with different prices
  • One placeholder element per product grid item
  • Price of the item is reflected in its Monthly Payment Messaging placeholder

 

<!-- Product 1 -->
<div class="product-tile" id="product_1">
<p class="product-name">Product 1 Name</p>
<p class="product-price">$500</p>
<a class="affirm-as-low-as" data-amount="50000" data-affirm-color="blue"></a>
</div>

<!-- Product 2 -->
<div class="product-tile" id="product_2">
<p class="product-name">Product 2 Name</p>
<p class="product-price">$300</p>
<a class="affirm-as-low-as" data-amount="30000" data-affirm-color="blue"></a>
</div>