Modal Checkout with Direct Checkout

Learn how to initiate modal checkout with the Direct Checkout API


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 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]((, 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 \
     --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": "",
    "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
  "checkoutAri"  : "PO4D77JZ6W5X123T",
  "metadata": {
     "mode": "modal"


Use our Modal checkout recipe to walk through the code step by step.