Skip to main content

Integrating with Affirm: Affirm Lite

  • Updated

Contents 

 

This article outlines the steps to implement Affirm on a branded page with minimal development effort.

 

 

Overview

 

If using a Platform Integration or a Direct API Integration is generally out of the question for you, then you can leverage Affirm Lite as an alternative.

 

Affirm Lite is an implementation of Affirm that requires minimal development effort. Instead of having Affirm directly integrated onto your eCommerce page, you’ll instead be providing your customers with a URL (such as https://affirm.com/business) that can be linked to any desired image or marketing material on your storefront. This URL links to a branded landing page hosted by Affirm.

 

When customers visit this URL, they specify the loan amount they want and request payment in installments. Once approved, we issue the customer a one time use virtual debit card that they can use on your website.

 

Virtual debit cards can be blocked by a specific merchant's processor (fitting a Regular Expression pattern in your merchant name as it appears to the processor), and can only fund checkout amounts. These cards can also accept multiple authorizations and capture the full amount on the card.

 

Back To Top

 

Customer Experience

 

  • Direct the customers to your Affirm URL (www.affirm.com/merchant.name).

 

step1.PNG

 

  • Customers will have to create a new Affirm account by providing some information, then see how much they are prequalified for.

 

step2.PNG

 

  • Customers will have to enter their purchase amount, select the payment plan, and review the loan to complete their purchase.

 

step3.PNG

 

  1. A Virtual Card will be issued for the customer to complete their purchase.

step4.PNG

 

Back To Top

 

Add Affirm.js

 

For Affirm Lite to work correctly, you must add the Affirm.js embed code to the head of your global page template.

 

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

 

  • Be sure to use your public API key from the sandbox merchant dashboard for public_api_key. To learn more about your API keys, view this article.
  • Your global page template is the only place where you need this embed code.

 

Back To Top

 

Implement Affirm Promotional Messaging

 

Affirm promotional messaging components (monthly payment messaging and educational modals) show customers how they can use Affirm to finance their purchases. 

A front-end developer can complete this step in parallel with the rest of the integration process. Adding Affirm promotional messaging is a required integration step, and you should complete it before testing your integration. Learn more about promotional messaging.

 

Back To Top

 

Add Landing Page Link(s)

 

Obtain your unique landing page URL (for example: https://affirm.com/business) from your technical point of contact at Affirm and implement your links to this URL. Common integration points are:

  • Checkout page (recommended landing page link)
  • Cart Page
  • Product Detail Page

 

Prefill amount

 

Affirm Lite also supports prefill amounts that auto-populate the purchase amount on the landing page, providing your customers with a more seamless experience. Simply append the prefill amount to your landing page link and specify the purchase amount in cents (eg: $300 would be 30,000 cents). 

Then, redirect your customer to this modified link, and they will see their total reflected in the "How much is your purchase?" step:

 

njg.png

 

 

Back To Top

 

Test and go live

 

After completing your integration, do a thorough testing of both your integration to ensure that the user experience works as expected.

 

Coordinate testing with Affirm

Before deploying the Affirm integration to your production site, Affirm will need to test it in your development or staging environment connected to our live environment. 

Contact your Integration Consultant at merchanthelp@affirm.com to coordinate this test.

 

Connect to the live Affirm environment

  • Retrieve your public and private API keys at:https://affirm.com/dashboard/#/apikeys
  • Update the script parameter in the Affirm.js embed code to point to our live environment at:  https://cdn1.affirm.com
  • Replace the public_api_key parameter in the Affirm.js embed code with the public API key you just retrieved.

 

Deploy to production

After you've connected to our live environment and we've tested your integration, you're ready to deploy to your production environment and offer Affirm as a payment option to your customers.

 

Back To Top

 

Related articles