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:
- Retrieving your API keys
-
Development
- Installing a Client
-
Implementing Affirm promotional messaging into your website
- Embed Affirm.js
- Implement Affirm on product pages
- Implement Affirm on cart pages
- Implement additional product pages
-
Implementing Affirm checkout integration into your website
- Embed Affirm.js
- Testing your integration
- 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.
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.
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.
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
- Add the Affirm.js embed code to the head of your global page template.
- Paste the public API key from your sandbox dashboard into the public_api_key attribute.