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

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.