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

## Step 2: Receive the checkout_id from the response

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

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

## Recipe

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