Skip to main content

Building a Direct API Integration - Step 2: Development

  • Updated

Contents 

 

 

Implementation process

 

Direct API integrations require some coding. There are a few things you must do before you can deploy it to your production account and go live:

  1. Retrieving your API keys
  2. Development
    • Installing a Client
    • Implementing Affirm promotional messaging into your website
      1. Embed Affirm.js
      2. Implement Affirm on product pages
      3. Implement Affirm on cart pages
      4. Implement additional product pages
    • Implementing Affirm checkout integration into your website
      • Embed Affirm.js
  3. Testing your integration
  4. Deploying your integration

 

We'll cover the items that are bolded in this article. We'll cover the other steps in the other guide steps.

 

Back To Top

 

Development

 

Installing a client

We provide different client and integration mechanisms for web and mobile to support Affirm as a payment option in your application. This will create your checkout experience.

 

Back To Top

 

Implementing Affirm promotional messaging into your website

 

This section will walk you through the process of integrating Affirm promotional messaging into your e-commerce site. Monthly payment messaging and educational modals show customers how they can use Affirm to finance their purchases. Our promotional messaging allows you to:

  • Dynamically display monthly payment pricing information  
  • Offer Prequalification  


Once you’ve determined where you’d like the Affirm pay-over-time-messaging to appear on your website, there are a few steps to render and ensure it works correctly. Let’s go through it!

 

 

1. Embed Affirm.js

Add the Affirm.js embed code to the head of your global page template then paste the public API key from your sandbox dashboard into the public_api_key attribute.

 

Note: The same credentials set up for the production dashboard can be used to log in to the sandbox.

 

<!-- 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){returnfunction(){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>
<!-- End Affirm -->

 

Example: https://jsfiddle.net/cgj5refv/embedded/html/

 

 

2. Implement Affirm on product pages

Copy the line of HTML shown below and paste it below the code that displays the price on your product detail page. In the data-amount attribute, pass the value of the listed price of the product as a whole integer in cents (e.g. $104.99 = 10499).

 

<p class="affirm-as-low-as" data-page-type="product" data-amount="10499"></p>

 

If implemented correctly, you should see messaging similar to the one below:

https://jsfiddle.net/v1gcrdu2/1/embedded/result

 

 

3. Implement Affirm on cart pages

Copy the line of HTML shown below and paste it below the code that displays the total on your cart page. In the data-amount attribute, pass the value of the cart total as a whole integer in cents (e.g. $104.99 = 10499).

 

<p class="affirm-as-low-as" data-page-type="cart" data-amount="10499"></p>

 

If implemented correctly, you should see messaging similar to the one below:

https://jsfiddle.net/v1gcrdu2/2/embedded/result

 

 

4. Implement additional product placements

Homepage and category page placements help raise awareness around the Affirm payment option and ultimately help drive incremental volume and conversion. To add a banner to your homepage or category page, use the 'affirm-site-modal' class as shown below:

 

<a class="affirm-site-modal" data-page-type="banner"><img src="https://cdn-assets.affirm.com/images/banners/234x60.png"></a>

 

If implemented correctly, you should see a banner similar to the one below:

https://jsfiddle.net/0zvrdag9/embedded/resultb

 

Note:If you want to use a different banner, simply adjust the image source to one of the banners listed here. You can also see other marketing assets here.

 

Back To Top

 

Implementing Affirm checkout integration into your website

 

Checkout creation is the process in which a customer uses Affirm to pay for a purchase in your app. By using the following functions you’ll trigger our standard flow when the customer clicks on a complete payment button after selecting Affirm as a payment option.

This section describes how to integrate the Affirm payment method into your e-commerce store, if you are not using one of our existing Platform Integrations. The implementation process is broken up into the following steps: 

 

Embed Affirm.js

  1. Add the Affirm.js embed code to the head of your global page template.
  2. Paste the public API key from your sandbox dashboard into the public_api_key attribute.

 

Back To Top

<< Step 1: Retrieving Your API Keys

>> Step 3: Testing Your Integration

Related articles