Getting Started with AFJS

Country Availability

Country List ⬇️

USA

Canada

UK

Overview

Affirm.js (AFJS) 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.

Including and initializing Affirm.js

Include the affirm.js script to the head of your global page template.

To create an instance of Affirm, you must pass your public API key and the environment you are pointing to. The Affirm object is your entry point into the rest of the Affirm.js SDK.

Your Affirm public API key is required when calling this function because it identifies your website to Affirm.

When you’re ready to accept live transactions, replace the sandbox key with your live key in production as well as the environment URL.

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

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

Method Arguments

Alternate Configuration

If you are planning to run the affirm above script in other parts of your application instead of 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;

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!');
});