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

# Modal vs. Redirect Checkout

Learn about Affirm's Modal and Redirect checkout options. Modal checkout keeps users on your site with a pop-up, while Redirect takes them to Affirm’s site for authentication. Configure metadata, define callback functions, and test your integration for a seamless payment flow.

<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 class="product-item">
          <img src="https://files.readme.io/3ca294a1b4b8b8506c3ff32876abc6e3e33d0e65a509dab81398915094bdbc5c-61TcZ33ZrJL._AC_UY1000_.jpg" alt="Canada" class="flag-icon">
          Canada
        </div>
      </div>
    </div>

  </div>
`}</HTMLBlock>

## Overview

Affirm enables your customers to go through the Affirm loan application flow using our **Modal** or **Redirect** checkout.

### Modal

Users go through the Affirm flow in a modal while remaining on your site. Modal checkout also enables client-side callbacks so that you can receive confirmation checkout from `affirm.js` instead of HTTP.

### Redirect

Users are redirected to Affirm's site, where they authenticate and go through the checkout flow. Once they complete checkout, they're returned to the merchant site.

## Modal Checkout

1. Add a metadata flag to your checkout object.
2. Define callback functions (optional).

#### Add a Metadata Flag to Your Checkout Object

Enable modal checkout by adding a new parameter to the checkout object metadata.

```javascript Metadata Flag
{
    ...,
      "metadata": {
        "mode":        "modal"
      },
    ...
}
```

#### Mode

*optional* enum. Set to `modal` to enable the modal checkout flow (default uses redirect checkout flow).

#### Define Callback Functions (optional)

The `affirm.checkout.open()` function accepts an argument object where you can [define success and failure callback functions](https://docs.affirm.com/payments/docs/open-affirm-checkout#returns).

```javascript
{
    onFail: function(){yourAffirmCancelFunction()},
    onSuccess: function(success_object){yourAffirmSuccessFunction(success_object)},
    onOpen: function(){yourAffirmOpenFunction()},
    onValidationError: function(){yourAffirmCheckoutValidationFunction()}
}
```

#### onFail

*optional* function. Called when the customer exits, cancels, or is declined in the Affirm checkout flow.

#### onSuccess

*optional* function. Called when the customer confirms their Affirm loan. Receives success\_object, which contains the checkout\_token.

#### onOpen

*optional* function. Called when the customer successfully loads the Affirm checkout flow.

#### onValidationError

*optional* function. Called when there was a validation error with the checkout request submitted.

## Test Modal Checkout

After implementing modal checkout, call `affirm.checkout.open()`. The modal checkout flow appears in a lightbox modal above your page contents. Use the the following code to test your modal checkout.

```javascript Modal Checkout
affirm.checkout.open({
    onFail: function(){
       console.log("User cancelled the Affirm checkout flow")},
    onSuccess: function(a){
       console.log("Affirm checkout successful, checkout token is: " + a.checkout_token)},
    onOpen: function(token){
       console.log("Affirm modal was opened successfully, checkout token is: " + token)},
    onValidationError: function(a) {
      console.log("onValidationError, respond to bad data here", a)}
});
```

### Example Code

<HTMLBlock>{`
<iframe width="100%" height="300" src="//jsfiddle.net/kczme5os/embedded/result,js,html/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
`}</HTMLBlock>

### Example Checkout Object

```javascript Open Affirm Checkout Object
affirm.checkout({
 
      "merchant": {
        "user_confirmation_url": "https://merchantsite.com/confirm",
        "user_cancel_url": "https://merchantsite.com/cancel",
        "user_confirmation_url_action": "POST",
        "name": "Your Customer-Facing Merchant Name"
      },
      "shipping":{
        "name":{
          "first":"Joe",
          "last":"Doe"
        },
        "address":{
          "line1":"633 Folsom St",
          "line2":"Floor 7",
          "city":"San Francisco",
          "state":"CA",
          "zipcode":"94107",
          "country":"USA"
        },
        "phone_number": "4153334567",
        "email": "joedoe@123fakestreet.com"
      },
      "billing":{
        "name":{
          "first":"Joe",
          "last":"Doe"
        },
        "address":{
          "line1":"633 Folsom St",
          "line2":"Floor 7",
          "city":"San Francisco",
          "state":"CA",
          "zipcode":"94107",
          "country":"USA"
        },
        "phone_number": "4153334567",
        "email": "joedoe@123fakestreet.com"
      },
      "items": [{
        "display_name":         "Awesome Pants",
        "sku":                  "ABC-123",
        "unit_price":           1999,
        "qty":                  3,
        "item_image_url":       "http://merchantsite.com/images/awesome-pants.jpg",
        "item_url":             "http://merchantsite.com/products/awesome-pants.html",
        "categories": [
            ["Home", "Bedroom"],
            ["Home", "Furniture", "Bed"]
        ]
      }
   ],
      "discounts":{
         "RETURN5":{
            "discount_amount":500,
            "discount_display_name":"Returning customer 5% discount"
        },
        "PRESDAY10":{
            "discount_amount":1000,
            "discount_display_name":"President's Day 10% off"
      }
   },
   "metadata":{
      "shipping_type":"UPS Ground",
      "mode":"modal"
   },
   "order_id":"JKLMO4321",
   "currency":"USD",  
   "financing_program":"flyus_3z6r12r",
   "shipping_amount":1000,
   "tax_amount":500,
   "total":100000
});

affirm.checkout.open();
```

## Appendix

### Third-party Cookies

The modal checkout experience will be degraded if third-party cookies are not allowed and disabled within a browser's privacy and security settings. If third-party cookies are disabled, the Affirm checkout flow will **always** be modal and require users to re-authenticate even if the "Remember my device" option is selected.

To allow third-party cookies, please follow the guides below for Google Chrome and Safari browsers.

### Chrome

Go to **Preferences > Advanced > Content Settings > Cookies**.

<Image title="Screen%2BShot%2B2018-05-14%2Bat%2B9.55.40%2BAM.png" alt="Allow cookies option" align="center" className="border" border={true} src="https://files.readme.io/bf6911a-Screen2BShot2B2018-05-142Bat2B9.55.402BAM.png" />

### Safari

1\.  Go to **Safari > Settings for This Website...** .

<Image title="Safari_modal1.png" align="center" className="border" border={true} src="https://files.readme.io/49b0d28-Safari_modal1.png" />

2\. Uncheck **Enable content blockers**.

<Image title="Safar_modal2.png" align="center" className="border" border={true} src="https://files.readme.io/e535afd-Safar_modal2.png" />

# 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 with Direct Checkout](https://docs.affirm.com/developers/docs/modal-with-direct-checkout.md)
* [Additional Features](https://docs.affirm.com/developers/docs/additional-features.md)