Affirm integration

WebStore
1

Affirm is a payment gateway offering an alternative payment processing solution. Affirm offers a loan to complete the payment rather than processing the payment using a credit or debit card. Which allows store customers to repay the loan over a number of months, instead of making a one-off payment at checkout.

To integrate with Affirm follow the steps as such:

  • Contact Affirm to setup an account with your store. Affirm will provide you with a set of public and private API keys. These keys can be found on your dashboard, found here: Affirm ( or Affirm when testing ).

  • Go to the Webstore Manager, search under Payments and open Payment Gateways. Open the Affirm configuration from the drop down and enable Affirm, entering your public and private keys where indicated, see below:

  • With the Affirm enabled, the templates must then be configured. Go to Edit Templates under Design & Content in the Webstore Manager.

Open the Product Page Template and find the html element

and make the following edits.

At the top of the element, insert the Affirm embedded JS Script, adding your public key where needed:

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

Beneath this, search for {include:panelPricingPanel}, and insert

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

Now open the Basket Page and only insert the Affirm embedded JS Script at the top of the template, after the comments.

Open the Basket Panel Template and find the line:

{if (orderextra['type'] eq 'tax' || orderextra['type'] eq 'total')}

Directly beneath this line insert the following script:

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

With this script in place, find the line:
</div><!--row-->
Directly above, insert:
<p class="affirm-as-low-as" data-page-type="cart" data-amount="your_price_variable"></p>

Finally,open the Footer Template and find the line:
<!-- Bootstrap core JavaScript

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

  • If you wish to enter test mode, use the public API key obtained from the sandbox dashboard, and replace the script src with https://cdn1-sandbox.affirm.com/js/v2/affirm.js

  • With these changes Affirm should now be enabled on your webstore. To check look at the checkout pages and product page:

The Checkout Page will show Affirm as a means of completing the payment

The Product Page will display Affirms price plans for the product being viewed

We anticipate Affirm being a suitable match to many retailers. If you are interested in integrating your webstore with this payment gateway, you can follow the steps above or raise a ticket with our support staff who will gladly steer you through the set up in Webstore Manager.

1 Like