Inline Integration

Learn how to integrate the Inline flow.

Overview

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
1038

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.

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.

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

📘

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 (Adobe Commerce), WooCommerce, and Shopify Plus e-commerce platforms.