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
![Inline.png 1038](https://files.readme.io/9a37c6a-Inline.png)
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 ofaffirm-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.
Updated about 2 months ago