---
updatedAt: 2025-11-13T14:07:49.000Z
agentTools:
  siteIndex: https://docs.affirm.com/llms.txt
  projectIndex: https://docs.affirm.com/developers/llms.txt
---

# Modal with Direct Checkout

Enable a seamless checkout experience with Affirm’s Modal Checkout using the Direct Checkout API, keeping customers on your site without redirects. Learn how to send checkout data, retrieve the checkout ID, and launch the modal for a smooth, client-side payment flow with real-time confirmation.

<HTMLBlock>{`
<style>
  .dropdown-menu {
    font-family: Arial, sans-serif;
    max-width: 250px;
    margin-left: auto; /* Align to the right */
  	margin-right: 0; /* Ensure it's flush to the right */
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px;
    background: #4A4AF4;
    overflow: hidden; /* Ensure the container grows with content */
  }

  .dropdown-item {
    margin-bottom: 10px;
  }

  .dropdown-toggle {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
  }

  .dropdown-toggle:hover {
    background: #f0f0f0;
  }

  .dropdown-content {
    display: none;
    margin-top: 5px;
    padding: 10px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
  }

  .dropdown-item.open .dropdown-content {
    display: block;
  }

  .flag-icon {
    width: 20px;
    height: 20px;
    margin-right: 10px;
  }

  .product-item {
    margin-bottom: 5px;
  }

  .product-icon {
    width: 20px;
    height: 20px;
    margin-right: 10px;
  }
  
  .country-title {
    font-family: Arial, sans-serif;
    font-size:20px;
    text-align: center;
    font-weight: bold;
    color: #ffffff;
  } 

</style>
  <div class="dropdown-menu">
    <p class="country-title" alt="Countries where this product is available">Country Availability</p>

    <div class="dropdown-item">
      <button class="dropdown-toggle" onclick="toggleDropdown(event)" alt="Drop down menu displaying the available countries for this product">
        <b>Country List</b> ⬇️
      </button>
      <div class="dropdown-content">
        <div class="product-item">
          <img src="https://files.readme.io/a4c8b3d6596d943e2b93c82cb1d432a2edaf6998667835c2e97ef4a31d460c7e-us-circle-01.png" alt="USA" class="flag-icon">
          USA
        </div>
      </div>
    </div>

  </div>
`}</HTMLBlock>

## 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](https://docs.affirm.com/payments/docs/modal-vs-redirect-checkout#modal-checkout) 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.

## 1. Send the Checkout Object to Affirm

Call the  [`/api/v2/checkout/direct`](https://docs.affirm.com/developers/reference/direct) endpoint to send the checkout object to Affirm.

```curl
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"
     }
}
'
```

## 2. Receive the checkout\_id from the Response

Receive and store the `checkout_id` from the `/api/v2/checkout/direct` response.

```json
{
    "redirect_url": "https://sandbox.affirm.com/products/checkout?public_api_key=AF8E24MPN009M9OS&checkout_ari=PO4D77JZ6W5X123T",
    "checkout_id": "PO4D77JZ6W5X123T"
}
```

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

```javascript JavaScript (abridged)
affirm.checkout({
  ...
  "checkoutAri"  : "PO4D77JZ6W5X123T",
  "metadata": {
     "mode": "modal"
  }
});
...
affirm.checkout.open();
```

## Recipe

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

<Recipe slug="modal-checkout-with-direct" title="Modal Checkout with Direct" />

# Sibling pages

* [Checkout Overview](https://docs.affirm.com/developers/docs/affirm-checkout-overview.md)
* [About Express Checkout](https://docs.affirm.com/developers/docs/express-checkout.md)
* [Set up Express Checkout](https://docs.affirm.com/developers/docs/set-up-express-checkout.md)
* [Checkout Button](https://docs.affirm.com/developers/docs/pre-styled-checkout-button.md)
* [Open Affirm Checkout](https://docs.affirm.com/developers/docs/open-affirm-checkout.md)
* [Open Affirm Virtual Card Checkout](https://docs.affirm.com/developers/docs/open-affirm-virtual-card-checkout.md)
* [Modal vs. Redirect Checkout](https://docs.affirm.com/developers/docs/modal-vs-redirect-checkout.md)
* [Additional Features](https://docs.affirm.com/developers/docs/additional-features.md)