Add Affirm promotional messaging

Configure Affirm Promotional Messaging

You can find the Affirm promotional messaging configuration in the AmeriCommerce online store Apps & Addons dashboard for Affirm.  To enable Affirm messaging, check the boxex for the applicable locations:

• Shopping Cart Settings
• Product Page Settings

Shopping Cart Settings

When enabled, Affirm promotional messaging displays on the shopping cart page. You can set up the Logo Color and Promotion Type on the messaging. You can also customize where to display the message by moving the ##AFFIRMCARTPROMOTION## merge code in your shopping cart theme page.

Product Page Settings

When enabled, Affirm promotional messaging displays on the product detail page. You can set up the Logo Color and Promotion Type on the messaging. You can also customize where to display the message by moving the ##AFFIRMPRODUCTPROMOTION## merge code in your product detail theme page.

Promotional messaging for custom themes

If you have modified your product or cart page templates in the past, you may not be able to see Affirm messaging after enabling the above configurations. Your product and cart page templates may not have Affirm related merge codes and you would then need to use the following instructions to add custom code to get Affirm promotional messaging: 

Step 1: Add Affirm.js to the global page template

1. Go to Themes > Edit Theme > Head Tags
2. Add the code below:

<!-- Affirm -->
<script>
 _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.

Be sure to use your public API key from the sandbox merchant dashboard for public_api_key.

Add an HTML element everywhere you want to display an Affirm promotional messaging component. The element attributes (see below) 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. 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.

Step 2: Add promotional messaging code

You'll need to edit the HTML on your pages by signing in to the AmeriCommerce admin page and navigating to Themes > Edit > Product Details > HTML Editor. When configuring your promotional messaging, you'll need to use AmeriCommerce's merge codes for the data-amount values. Possible merge codes include:

• ##RAWPRICE## (product page)
• ##CARTRAWTOTAL## (cart page)
• $$ITEMPRICEDOLLARS$$
• $$ITEMPRICECENTS$$
• ##ITEMPRICE##
• $$ITEMPRICE$$
• $$PRICE$$

Step 3: Add promotional messaging to product and cart pages

<script>
   affirm.ui.ready(function(){
     var refreshable = document.getElementById('as-low-as-refreshable');
     if (refreshable){
         var amount = "##RAWPRICE##".replace(/[^0-9]+/g,"");
         refreshable.setAttribute('data-amount', amount);
         affirm.ui.refresh();
     }
 });
 </script>
  
 <p class="affirm-as-low-as" data-amount="##RAWPRICE##" id="as-low-as-refreshable" data-page-type="product"> </p>

Here's a sample code for a variant product page:

<script>
  //Calculate price to update data-amount value
  function updateAffirmDataAmount (){
      var rawProductPrice = $('.ProductDetailsPricing .ProductDetailsPrice').html();
      rawProductPrice = Math.round(100 * parseFloat(rawProductPrice.replace(/[^0-9\.-]+/g, '')));      
      var refreshable = document.getElementById('as-low-as-refreshable');
      refreshable.setAttribute('data-amount', rawProductPrice);
  }
 
 //Check if the product price changed
  $(document).on("DOMSubtreeModified", ".ProductDetailsPricing .ProductDetailsPrice", function () {
      updateAffirmDataAmount ();
      affirm.ui.refresh();
  });
 
</script> 
 
<p class="affirm-as-low-as" data-amount="" id="as-low-as-refreshable" data-page-type="product"> </p>
 
<script>
     updateAffirmDataAmount();
</script>

Click here for more information on adding Affirm promotional messaging to your site. 

Add the Confirmation Page function (optional)

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. Click here for all the Confirmation Page function parameters.

To add the function, go to Settings > Orders > General and paste the script below in the Place Order Script box.

<script>
affirm.ui.ready(function(){
    var orderTotal = "##ORDERTOTAL##".replace(/[^0-9]+/g,"")
    affirm.analytics.trackOrderConfirmed({
       "orderId": "##ORDERID##",
       "total": orderTotal,
    });
 });
</script>

Function parameters 

Order object