Add Affirm promotional messaging

Configure Affirm promotional messaging

After enabling Affirm, follow the steps below to configure templates to display promotional messaging:

1/. From Design & Content, go to Edit Templates
2/. Open the Product Page Template and make the following edits to the html element.
3/. At the top of the element, add the Affirm.js script.

<!-- Affirm -->
<script>
 _affirm_config = {
   public_api_key:  "YOUR_PUBLIC_KEY",
   script:          "https://cdn1-sandbox.affirm.com/js/v2/affirm.js"
 };
(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>
<!-- End Affirm -->

4/. Next, search for the {include:panelPricingPanel} and insert the following elements:

<p class="affirm-as-low-as" data-page-type="cart" data-amount="your_price_variable"></p>
<p class="affirm-as-low-as" data-page-type="product" data-amount="{ns:printPriceInCents}"></p>

5/. Open the Basket Page and only insert Affirm.js at the too of the template after the comments.
6/. Open the Basket Panel Template and insert the following script beneath the {if (orderextra['type'] eq 'tax' || orderextra['type'] eq 'total')}

// Insert the following script beneath this line
{if (orderextra['type'] eq 'tax' || orderextra['type'] eq 'total')}

<script>
    nsc(document).ready(function() {
        setTimeout(function() {
nsc(".affirm-as-low-as").attr("data-amount", "{roundValue(orderextra['cost'], 1, 0)}".replace(/[^0-9]/g, ""));
    },100);
});
</script>

7/. Next, find the line </div> and insert the following html element above it:

<p class="affirm-as-low-as" data-page-type="cart" data-amount="your_price_variable"></p>
</div><!--row-->

8/. Open the Footer Template and insert the following script above <!-- Bootstrap core JavaScript:

{if (pageproperty['pageid'] eq 'checkoutstep2')}
  <script>$("#label_checkout_pluginid_62").text("Easy monthly payments with Affirm");</script>
  {endIf}

Congrats! With these changes Affirm should now be enabled on your store.