About Direct API

Overview

Affirm’s Direct API is a powerful and flexible integration that allows merchants to embed the full Affirm checkout and payment authorization flow directly into their website. This gives you complete control over the front-end user experience and the back-end transaction processing logic. From initiating checkout to handling confirmations and errors, Direct API provides a customizable and secure solution tailored to your business needs.

The Customer Experience

Customers selecting Affirm at checkout experience a seamless, branded flow that takes place on your site (via modal) or on affirm.com (via redirect). When they choose Affirm:

They’re shown prequalified payment options and loan terms.
They confirm their selection and return to your site’s confirmation page.
If needed, modal error messaging appears to help customers enter the correct input.

You can configure the customer redirect and cancel URLs, and even choose whether to send the checkout_token via GET or POST methods depending on your flow preferences.

Customer UX Flow

This flow illustrates the customer’s experience using Affirm via a Direct API integration. After selecting Affirm at checkout, the customer verifies their identity with a mobile number and PIN, creates an account, and selects a payment plan. Once terms are confirmed, the order is completed and a confirmation page is shown.

The Merchant Experience

Transaction Flow

This diagram outlines the key steps in Affirm’s Direct API transaction flow. After a customer selects Affirm and initiates checkout, the merchant creates and sends a checkout object containing order and customer details. Affirm then collects customer information, and upon approval, returns a checkout_token. The merchant uses this token to authorize the transaction and complete the order, enabling a secure, end-to-end payment process.

Key Steps

1. Embed Affirm.js

Add Affirm’s JavaScript SDK to your site’s <head>. This script creates the global affirm object and enables key features like checkout and promotional messaging. You’ll find the script in the Recipes section of our developer docs.

2. Add Promotional Messaging

Use affirm.ui components to display “as low as” messaging on product pages, cart, or banners. This helps customers understand payment options and encourages conversion.

3. Initiate Checkout

Call affirm.checkout() and define a checkout object with customer, cart, and merchant details. Then trigger affirm.checkout.open() to launch the checkout experience.

4. Authorize the Transaction

After checkout, receive the checkout_token at your confirmation URL and send it to Affirm’s API to authorize the transaction. Store the transaction_id for any post-purchase actions.