Modal Checkout with Direct Checkout
Learn how to initiate modal checkout with the Direct Checkout API
Overview
With Modal checkout, your customers go through the the Affirm loan application flow in a modal while remaining on your site. As a result, customers experience a seamless process since this flow doesn't redirect to an affirm.com site. Modal checkout also enables client-side callbacks so that you can receive confirmation checkout from affirm.js
instead of HTTP.
If you're using our [Direct Checkout API]((https://docs.affirm.com/developers/reference/direct), follow these steps to retrieve the checkout ID on your server-side. Then, launch the modal from the client-side while supplying the checkout ID.
Step 1: Send the checkout object to Affirm
Call the /api/v2/checkout/direct
endpoint to send the checkout object to Affirm.
curl --request POST \
--url https://api.affirm.com/api/v2/checkout/direct \
--header 'Accept: application/json' \
--header 'Content-Type: application/json' \
--data '
{
"merchant": {
"use_vcn": "false"
}
}
'
Step 2: Receive the checkout_id from the response
Receive and store the checkout_id
from the /api/v2/checkout/direct
response.
{
"redirect_url": "https://sandbox.affirm.com/products/checkout?public_api_key=AF8E24MPN009M9OS&checkout_ari=PO4D77JZ6W5X123T",
"checkout_id": "PO4D77JZ6W5X123T"
}
Step 3: Launch the Affirm modal
Use the affirm.checkout
function and configure the checkout
object to launch the Affirm modal.
- Call the
affirm.checkout
function - Set the
checkoutAri
parameter with the checkout_id - Set the
mode
parameter tomodal
- Launch the Affirm modal
affirm.checkout({
...
"checkoutAri" : "PO4D77JZ6W5X123T",
"metadata": {
"mode": "modal"
}
});
...
affirm.checkout.open();
Recipe
Use our Modal checkout recipe to walk through the code step by step.
Updated 4 months ago