Inline Integration

Learn how to integrate the Inline flow.


With our Inline integration, you can highlight Affirm’s value props 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 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 and affirm.checkout.inline() functions.

          total: 15099
          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.

"merchant": {
        "inline_container": "my-special-container-id"



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


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


Platform Integrations

Inline is currently available for the Magento 2 (Adobe Commerce), WooCommerce, and Shopify Plus e-commerce platforms.