Affirm Lite

Implement Affirm on a branded page with minimal development effort.

Overview

Affirm Lite is an implementation of Affirm that requires minimal development effort. In this flow, Affirm provides a merchant with a URL that can be linked to from any desired images or marketing collateral on their storefront. This URL links to a branded landing page hosted by Affirm.

When customers go to this URL, they provide their desired loan amount and apply to pay over time. Upon approval, we issue a virtual prepaid debit card to the customer, and they can copy and utilize the card on your site. Cards can be locked to a particular merchant's processor (fitting a Regular Expression pattern in your merchant name as it appears to the processor), are funded only for the checkout amount, and accept multiple authorizations and captures up to the amount on the card. 

Sandbox development

When you're ready to begin development, your technical point of contact at Affirm can send you an email inviting you to create an Affirm account. Click here for information about accessing your account

You'll develop and test the Affirm integration in your development environment connected to our sandbox. To use our sandbox:

After development and testing, you'll need to update your integration to use your live API keys, which you can find at https://affirm.com/dashboard/#/apikeys, and our live URLs.


1. Add Affirm.js

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){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");
// 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.
  • Your global page template is the only place where you need this embed code.

2. 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. Properly placed promotional messaging helps drive increased AOV and conversion.

As noted earlier, 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


3. Add Landing Page Link(s)

Obtain your unique landing page URL from your technical point of contact at Affirm and implement links to this URL where agreed upon in the path to purchase. Common integration points are:

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

You may wish to work with your Affirm Client Success Manager to determine the look and feel of the clickable element(s) you add to the page (promotional text, a branded button, etc.) as well as the integration points that suit your brand and conversion funnel.

Prefill amount

We now support the prefill_amount as a URL parameter. This auto-populates the price amount.


4. 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 [email protected] to coordinate this test.

Connect to the live Affirm environment

1. Retrieve your public and private API keys at https://affirm.com/dashboard/#/apikeys
2. Update the script parameter in the Affirm.js embed code to point to our live environment at https://cdn1.affirm.com
3. 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.


Did this page help you?