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


This image displays the Inline flow for Pay in 4 and Installment options.

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


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.

Inline integration
Open Recipe

## Example

(Script tags will be stripped)

(Script tags will be stripped)

## Platform integrations

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