HomeGetting StartedSolutionsPlatformsGlobal Integration

Affirm Lite Integration Guide

The Affirm Lite integration has made it easier than ever to offer you customers a convenient way to pay.

Suggest Edits

🚧

Affirm Lite 1.0 → Affirm Landing Page Update

If you are looking for the original "Affirm Lite," the product has been renamed to "Affirm Landing Page." This product will continue to function exactly as before, and no changes are required for existing integrations. To review this documentation, please click here.

Overview

This guide will walk you through the integration steps of Affirm Lite— a product designed to streamline the implementation process and boost customer conversion. With just three key steps, this straightforward process will equip your site with a seamless Affirm checkout experience, enhancing the shopping journey for your customers.

Functionality

Affirm Lite is designed to keep customers on your checkout page while they use Affirm to complete their purchase, functioning similarly to a widget. When a customer clicks the Affirm Lite checkout button, a window will appear within the existing screen to guide them through the checkout process, resulting in the creation of an Affirm virtual card, as illustrated below.

Once the Affirm virtual card is created, there are two ways the card information can be transferred to the respective payment fields:

  1. If you are utilizing the query selectors for the Affirm Lite attributes (we will discuss this in more detail in the next section), Affirm can autofill the card number, expiration, and CVV fields with the virtual card’s information.
  2. If autofill is not available, the customer can copy the information directly from the virtual card and paste it into the respective fields.

🚧

iFrame Autofill Compatibility

Please note that if your checkout page uses an iFrame, browser security restrictions prevent Affirm Lite from autofilling customer information. As a result, customers will need to manually input their Affirm virtual card details by copying and pasting the information into the specified fields, as outlined above in option 2.

Affirm Landing Page Fallback

To ensure your customer can complete their checkout with Affirm even if Affirm Lite cannot identify a selector, safeguards such as the Affirm Landing Page (fka Affirm Lite) fallback are available. You can activate this fallback by including the data-fallback-url attribute in your Affirm Lite code, which we will discuss in the following section.

In scenarios where the fallback is activated, the customer will be redirected to the Affirm Landing Page to continue the checkout process. Here, they will complete their purchase, resulting in the generation of an Affirm virtual card. The customer will then need to manually enter their Affirm virtual card details by copying and pasting the information into the specified fields.

Integration Steps

1. Add AFJS

Incorporate the Affirm.js script into the <head> section of your global page. To initialize Affirm, provide your public API key, which authenticates your website's identity to Affirm and specify the environment (sandbox or production) you're targeting. This step will activate the Affirm object, serving as your gateway to the broader Affirm.js SDK functionalities.

💻
Embed Affirm.js
Open Recipe
<script>
var _affirm_config = {
		public_api_key: "YOUR_PUBLIC_API_KEY", /* replace with public api key */
		script: "https://cdn1-sandbox.affirm.com/js/v2/affirm.js",
		locale: "en_US",
		country_code: "USA",
	};

(function(m,g,n,d,a,e,h,c){var b=m[n]||{},k=document.createElement(e),p=document.getElementsByTagName(e)[0],l=function(a,b,c){return function(){a[b]._.push([c,arguments])}};b[d]=l(b,d,"set");var f=b[d];b[a]={};b[a]._=[];f._=[];b._=[];b[a][h]=l(b,a,h);b[c]=function(){b._.push([h,arguments])};a=0;for(c="set add save post open empty reset on off trigger ready setProduct".split(" ");a<c.length;a++)f[c[a]]=l(b,d,c[a]);a=0;for(c=["get","token","url","items"];a<c.length;a++)f[c[a]]=function(){};k.async=
  !0;k.src=g[e];p.parentNode.insertBefore(k,p);delete g[e];f(g);m[n]=b})(window,_affirm_config,"affirm","checkout","ui","script","ready","jsReady");
</script>

2. Add the Affirm Lite Code Snippet

Next, you'll need to embed the Affirm Lite code snippet into your HTML as a button that triggers the Affirm checkout experience. Affirm Lite requires an additional button on your checkout page, as shown in the example below. If you prefer not to design your own button, Affirm provides a pre-styled checkout button. For more information, you can review the details here.

To activate Affirm Lite successfully, you must meet the following code requirements:

  1. Embed the class "affirm-lite-checkout" within the Affirm Lite button's HTML.
  2. The attribute data-total-amount-tag must be included to accurately capture and communicate your customer's checkout cart total to Affirm.
  3. The attribute data-fallback-url must be included to redirect customers to Affirm Landing Page if Affirm Lite does not activate.

Affirm Lite Code Snippet

Below is a snippet of the Affirm Lite code:

<button
  type="button" 
  class="affirm-lite-checkout"
  data-fallback-url="https://affirm.com/shop/<merchant>"      
  data-total-amount-tag="#amount-tag-dollars" 
  data-cc-number-tag="input[name='cc-number']" 
  data-cc-csc-tag="input[name='cvv']" 
  data-cc-exp-month-tag="input[name='exp']" 
  data-cc-exp-year-tag="input[name='exp']">
    Checkout with Affirm
</button>

Affirm Lite Attributes

Below is a list of Affirm Lite's attributes along with their descriptions:

AttributeDescription
class= "affirm-lite-checkout"Serves as a locator for Affirm.js to find elements on the page to be transformed into Affirm Lite checkout buttons.
data-fallback-urlThis attribute ensures that Affirm Landing Page can be activated as a fallback measure in the case that Affirm Lite is unable to render.
data-total-amount-tagThe data-total-amount-tag is used to capture the cart total and send that information to Affirm.
data-cc-number-tagThe data-cc-number-tag is used to identify the Affirm card’s number and auto populate the details into the respective field on your website.
data-cc-csc-tag The data-cc-csc-tag is used to identify the Affirm card’s “csc” or security number and auto populate the details into the respective field on your website.
data-cc-exp-month-tag The data-cc-exp-month-tag is used to identify the month of the Affirm card’s expiration date and auto populate the details into the respective field on your website.

If your site only contains a single field for credit card expiration month and year, you will provide the same query selector for both attributes, i.e. data-cc-exp-month-tag= “cc-exp” and data-cc-exp-year-tag= “cc-exp”.
data-cc-exp-year-tag The data-cc-exp-year-tag is used to identify the year of the Affirm card’s expiration date and auto populate the details into the respective field on your website.

If your site only contains a single field for credit card expiration month and year, you will provide the same query selector for both attributes, i.e. data-cc-exp-month-tag= “cc-exp” and data-cc-exp-year-tag= “cc-exp”.

3. Identifying the HTML Selectors

Once you have added the Affirm Lite code snippet to your checkout button’s HTML, you will need to identify the appropriate selectors for each attribute. To identify the selectors, you will need to use Google Chrome’s “Inspect” feature. Follow the steps below to learn how to access the “Inspect” feature and identify the appropriate selectors.

Identify the Data-Total-Amount-Tag

  1. Navigate to the checkout page on your website and highlight the area that displays the customer’s cart total.
  1. Next, you will right-click on the highlighted area displaying the customer’s cart total and select “Inspect” from the dropdown menu.
  1. Once you have selected “Inspect” from the dropdown menu, a new window will appear on the right-side of the screen displaying the code of the checkout page. In this code display under the “Elements” tab, you will see that the selector name of your cart total is highlighted. For this example, you will focus on the id name to identify the selector, which is total-amount. You can also right-click on the element and select “Copy” > “Copy selector” from the dropdown to obtain the id name.
  1. After identifying the selector for the cart total, total-amount for this example, you will input that name in the Affirm Lite code under the attribute data-total-amount-tag, which will look like this:

Example:

data-total-amount-tag="#total-amount"

Providing this information will allow Affirm to read the cart total and accurately obtain the amount required for the customer’s loan.

Identify the Data-CC-Number-Tag

  1. First, highlight the area on your website’s checkout page where the customer inputs their credit card number.

  1. Then, you will right-click and select “Inspect” from the dropdown menu which will populate a new window on the screen containing your website’s code.
  1. The selected area, in this case the credit card number input form, will be highlighted and you will obtain the id name listed and provide that information in the data-cc-number-tag attribute. In this instance, the id is cc-number. You can also right-click on the element and select “Copy” > “Copy selector” from the dropdown to obtain the id name.

Example:

data-cc-number-tag="#cc-number"

Identify the Data-CC-CSC-Tag

  1. First, highlight the area on your website’s checkout page where the customer inputs their credit card’s 3-4 digit security code, or “csc” or "cvc" number.
  1. Then, you will right-click and select “Inspect” from the dropdown menu which will populate a new window on the screen containing your website’s code.
  1. The selected area, in this case the credit card number input form, will be highlighted and you will obtain the id name listed and provide that information in the data-cc-csc-tag attribute. In this instance, the id is cc-csc. You can also right-click on the element and select “Copy” > “Copy selector” from the dropdown to obtain the id name.

Example:

data-cc-csc-tag="#cc-csc"

Identify the Data-CC-Exp-Month-Tag

  1. First, highlight the area on your website’s checkout page where the customer inputs their credit card’s credit card’s expiration month.
  1. Then, you will right-click and select “Inspect” from the dropdown menu which will populate a new window on the screen containing your website’s code.
  1. The selected area, in this case the credit card number input form, will be highlighted and you will obtain the id name listed and provide that information in the Data-cc-exp-month-tag attribute. In this instance, the id is exp-month. You can also right-click on the element and select “Copy” > “Copy selector” from the dropdown to obtain the id name.

Note: If your site only contains a single field for credit card expiration month and year, you will provide the same query selector for both attributes, i.e. data-cc-exp-month-tag= “cc-exp” and data-cc-exp-year-tag= “cc-exp”.

Example:

data-exp-month-tag="#exp-month"

Identify the Data-CC-Exp-Year-Tag

  1. First, highlight the area on your website’s checkout page where the customer inputs their credit card’s credit card’s expiration year.
  1. Then, you will right-click and select “Inspect” from the dropdown menu which will populate a new window on the screen containing your website’s code.
  1. The selected area, in this case the credit card number input form, will be highlighted and you will obtain the id name listed and provide that information in the Data-cc-exp-year-tag attribute. In this instance, the id is exp-year. You can also right-click on the element and select “Copy” > “Copy selector” from the dropdown to obtain the id name.

Note: If your site only contains a single field for credit card expiration month and year, you will provide the same query selector for both attributes, i.e. data-cc-exp-month-tag= “cc-exp” and data-cc-exp-year-tag= “cc-exp”.

Example:

data-exp-year-tag="#exp-year"

HTML Attribute Completion

Once you have completed identifying your HTML selectors, your final code should resemble this example below and your integration steps are complete for Affirm Lite:

<button
  type="button" 
  class="affirm-lite-checkout"
  data-fallback-url="https://affirm.com/shop/<merchant>" 
  data-total-amount-tag="#total-amount" 
  data-cc-number-tag="#cc-number" 
  data-cc-csc-tag="#cc-csc" 
  data-cc-exp-month-tag="#exp-month" 
  data-cc-exp-year-tag="#exp-year">
    Checkout with Affirm
</button>

🚧

HTML Query Selector Changes

If any changes are made to your web page, please ensure that the query selectors for the Affirm Lite attributes are correct and update them if necessary.

Affirm Checkout Button (optional)

As an optional feature, Affirm has created a pre-styled checkout button to further simplify the integration process.

To enable the pre-styled Affirm checkout button, simply add the following class name, affirm-checkout-btn, to the class containing the affirm-lite-checkout.

Example:

<button
  type="button" 
  class="affirm-lite-checkout affirm-checkout-btn"
  data-fallback-url="https://affirm.com/shop/<merchant>"      
  data-total-amount-tag="#amount-tag-dollars" 
  data-cc-number-tag="input[name='cc-number']" 
  data-cc-csc-tag="input[name='cvv']" 
  data-cc-exp-month-tag="input[name='exp']" 
  data-cc-exp-year-tag="input[name='exp']">
    Checkout with Affirm
</button>

Button Customizations

There are two options for the pre-styled Affirm checkout button:

  • Default: affirm-checkout-btn which displays the button with a blue background and white text.
  • Light: affirm-checkout-btn btn-light which displays the button with a white background, blue border, and black text.

Updated 17 days ago