Direct API Video Integration Guides

This four-part video series guides you through the Direct API integration, offering clear instructions on the necessary steps.


Affirm's four-part video series provides a comprehensive guide on integrating the Direct API into your site. Each video focuses on a necessary step, ensuring you have all the information and resources required for a successful integration with Affirm.

Step 1: Adding Affirm.js

The initial step in integrating Affirm’s Direct API involves adding the Affirm .js script to the head section of your website. This script is available in the “Recipes” (code snippets) section of our Developer Documentation, here.

The Affirm .js script serves as the cornerstone for accessing Affirm's features, including our Promotional Messaging that showcases Affirm's ALA (as-low-as) messaging to your customers. In our upcoming section and video of the Direct API Video Integration series, we will dive into the details of Promotional Messaging.

Step 2: Adding Affirm Promotional Messaging

As highlighted in the previous section, Affirm's Promotional Messaging plays a crucial role in offering flexible financing options to your customers. It allows for customization of the message's language and placement across various pages of your website, such as the product page, landing page, checkout page, and others.

In addition to this video guide, you can learn more about Promotional Messaging, here.

Step 3: Rendering Affirm Checkout (Part I)

The next vital step in the Affirm flow involves initiating the Affirm Checkout. This critical action entails rendering the affirm.checkout() function and constructing the checkout object, enabling your customers to seamlessly choose Affirm as a payment method during checkout.

In this video, "Part I of Rendering the Affirm Checkout," we delve into the affirm.checkout() function, the checkout object, and how to access Affirm's promotional details, including loan terms. For more insights on the Affirm checkout process, please review our guide and our “recipe” (code snippet) for the checkout function, here.

Step 4: Rendering Affirm Checkout (Part II)

In Part II of rendering the checkout and the final step of our Direct API Video Integration series, we will guide you through the transaction authorization process. This involves retrieving the checkout_token, authorizing it from your server, and storing the transaction_id for future actions such as capturing funds, voiding the transaction, or processing refunds.


Additional Support

For additional support, please contact our support team through the "Developer Support" widget located at the bottom-right corner of your screen.