Modal Checkout with Direct Checkout

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 to modal
• 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.