---
updatedAt: 2026-01-15T16:37:00.000Z
agentTools:
  siteIndex: https://docs.affirm.com/llms.txt
  projectIndex: https://docs.affirm.com/payments/llms.txt
---

# Inline Integration Overview

Learn how to integrate Affirm’s Inline flow to highlight flexible payment options early in checkout. Display value propositions, payment timelines, and educational modals seamlessly within your site. Supports Magento 2, WooCommerce, and Shopify Plus.

<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;
    color: black;
  }

  .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 our **Inline** integration, you can highlight Affirm’s value proposition early in the checkout flow and set clear expectations with your customers.

## How It Works

When a customer selects Affirm as a payment option, the view expands to display the following information:

* **Value propositions**: Highlights some of the benefits of paying with Affirm.
* **Learn more about Affirm**: A learn more link that opens our educational modal.
* **Payment timelines**: The timeline and amount for each payment.

<Image title="Inline.png" alt="Screenshot on mobile of the inline flow." align="center" width="smart" border={true} src="https://files.readme.io/9a37c6a-Inline.png">
  The Inline flow for Pay in 4 and Installment options.
</Image>

## Inline Flow

### 1. Render Affirm Checkout

Create a checkout object and launch the Affirm in-line experience using the `affirm.checkout.open()` and `affirm.checkout.inline()` functions.

```javascript
affirm.checkout({
          total: 15099
        });
affirm.checkout.inline({
          merchant: {
            inline_container: "custom-inline-checkout-container"
          },
        });
```

### 2. Specify an ID in the Merchant Object

Provide a container and specify an id in the merchant object using the ‘inline\_container’ key. Defining a container specifies where you want the payment option to display and ensures it's spaced appropriately.

```javascript
"merchant": {
        "inline_container": "my-special-classname"
      },
```

> 📘 Important
>
> If you don’t specify an `id`, `affirm.js` looks for a container named with a default ID of `affirm-inline-checkout-container`.

### Recipe

Our Inline value proposition integration recipe provides a step-by-step walk-through of the code sample.

<Recipe slug="inline-integration" title="Inline integration" />

### Example

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

<HTMLBlock>{`
<iframe width="100%" height="300" src="//jsfiddle.net/KarenLiAffirm/pj1a4L0q/1/embedded/result/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
`}</HTMLBlock>

## Platform Integrations

**Inline** is currently available for the [Magento 2 (Adobe Commerce)](https://docs.affirm.com/platforms/docs/magento-2-configure-affirm), [WooCommerce](https://docs.affirm.com/platforms/docs/woocommerce-setup-configuration), and [Shopify Plus](https://docs.affirm.com/platforms/docs/enable-inline-checkout) e-commerce platforms.

# Sibling pages

* [About Direct API](https://docs.affirm.com/payments/docs/direct-api-overview.md)
* [Set Up Direct API](https://docs.affirm.com/payments/docs/transactions-web.md)
* [About Split Capture](https://docs.affirm.com/payments/docs/split-capture.md)
* [Set Up Split Capture](https://docs.affirm.com/payments/docs/integrate-affirm-split-capture.md)