Affirm.js Quick Guide

Get started with Affirm.js (AFJS), Affirm’s browser-side JavaScript library. Learn how to include, initialize, and configure Affirm.js to enable seamless checkout experiences. Includes setup, API key usage, and callback functions for integration.

Overview

Affirm.js is Affirm’s browser-side JavaScript library that enables seamless integration of Affirm’s payment solutions into your website. This guide provides a complete reference to all available objects and methods, helping you implement Affirm’s checkout, promotional messaging, and transaction workflows efficiently.

By including and initializing Affirm.js, you can configure your integration using your public API key and environment settings. The library provides functions for handling checkout, managing user interactions, and customizing the payment experience. Follow the setup instructions to get started and ensure a smooth integration.

Step 1: Including and Initializing Affirm.js

Add the Affirm.js script to the on your site. The script loads directly from the Affirm domain.

🚧

Sandbox API Keys

Use only your sandbox API keys and domain during testing and development. This ensures that you don't accidentally modify live transactions.

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

The Affirm object is your entry point into the rest of the Affirm.js SDK. To create an instance of Affirm, you must pass your public API key and the environment you’re pointing to. Your Affirm public API key is required when calling this function because it identifies your website to Affirm.

Method Arguments

AttributeTypeDetails
public_api_key
required
stringYour public API key.
script
required
stringSandbox: https://cdn1-sandbox.affirm.com/js/v2/affirm.js
Production: https://cdn1.affirm.com/js/v2/affirm.js

Alternate Configuration

If you’re planning to run the Affirm script in other parts of your application, instead of in the global page template, ensure that you set window._affirm_config to the configuration object:

const _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",
	};

window._affirm_config = _affirm_config;

Step 2: Ready

A callback can be passed to affirm.ui.ready() that is called when affirm.js finishes loading.

affirm.ui.ready(function() {  
  console.log('Affirm JS ready!');  
});

Recommended Pages