## Overview

With our **Inline** integration, you can highlight Affirm’s value props early in the checkout flow and set clear expectations with your customers.

🚧

Inline support

• Inline is available for our **Installment**, **Pay in 4** and **Hybrid** financing options.

• **Affirm Lite** and **Adaptive Checkout** are not supported at this time.

## How it works

When a customer selects Affirm as a payment option, the view expands and renders the following information in your site:

• **Value props**: 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

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

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

📘

Important

If you don’t specify an `id`, `affirm.js` will look for a container named with a default id of `affirm-inline-checkout-container`.

## Recipe

Use our Inline value props integration recipe to walk through the code samples step by step.

## Example

## Platform integrations

**Inline** is currently available for the [Magento 2](🔗), [WooCommerce](🔗), and [Shopify Plus](🔗) e-commerce platforms.