Overview

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

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 section (code snippets) of our developer documentation.

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 in the Affirm Promotional Messaging section.

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.

For more insights on the Affirm checkout process, you can review the Open Affirm Checkout guide and the checkout function recipe (code snippet).

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