Enable Inline Checkout
With Inline Checkout, you can highlight Affirm’s value props early on in the checkout flow and set clear expectations with your customers.
With Inline Checkout, you can highlight Affirm’s value props early on 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.
Known issue
There is a known console error when calling Affirm in the Shopify Checkout. As of right now, this error is in Report Only mode and will not affect the functionality in the checkout.
Enable Inline checkout
1. Sign in to your Shopify admin page at yourstore.myshopify.com/admin/.
2. From the navigation menu on the left, go to Online Store > Themes.
3. On the menu to the right of the theme, click Actions.
4. Click Edit Code.
5. Under Layout, select checkout.liquid
.
6. At the top of the page, above the <head>
tag, add the affirm.js
library code between <script>
tags:
<script>
_affirm_config = {
public_api_key: "{YOUR_PUBLIC_API_KEY}",
script: "https://cdn1.affirm.com/js/v2/affirm.js",
locale: "en_US",
country_code: "USA",
};
(function(m,g,n,d,a,e,h,c){var b=m[n]||{},k=document.createElement(e),p=document.getElementsByTagName(e)[0],l=function(a,b,c){return function(){a[b]._.push([c,arguments])}};b[d]=l(b,d,"set");var f=b[d];b[a]={};b[a]._=[];f._=[];b._=[];b[a][h]=l(b,a,h);b[c]=function(){b._.push([h,arguments])};a=0;for(c="set add save post open empty reset on off trigger ready setProduct".split(" ");a<c.length;a++)f[c[a]]=l(b,d,c[a]);a=0;for(c=["get","token","url","items"];a<c.length;a++)f[c[a]]=function(){};k.async=
!0;k.src=g[e];p.parentNode.insertBefore(k,p);delete g[e];f(g);m[n]=b})(window,_affirm_config,"affirm","checkout","ui","script","ready","jsReady");
</script>
Locale
The locale
parameter allows Affirm to identify which locale you are serving your site in for any particular user. For example, let's say that you are rendering your site in Canadian French; perhaps this occurred because the user's browser setting detected Canadian French. You can provide Affirm with the user's language setting by passing it in the locale
parameter. Affirm will then read the locale and translate the pages accordingly, thus, matching the language the user had seen on your site. However, we will not attempt to read the user's locale directly.
Country_code
The country_code
parameter represents the country of legal incorporation of your store, which is shown to any given user. So, if you are showing your American website/store to a user and you have a legal presence in the United States, you would pass USA
into the country_code
parameter. This allows us to determine which regulations to abide by and which banks to partner with for this transaction.
Supported values for locale
and country_code
locale
and country_code
Affirm supports the following combinations for locale
and country_code
:
country_code
:USA
locale
:en_US
- (Language= Englishen
- Country= United States US
- for a locale
that reads en_US
).
country_code
:CAN
locale
:en_CA
- (Language= Englishen
- Country= Canada CA
- for a locale
that reads en_CA
).
locale
:fr_CA
- (Language= Frenchfr
- Country= Canada CA
- for a locale
that reads fr_CA
).
The following will occur when a locale
and/or country_code
is not provided:
- When a
locale
is not provided, thelocale
will default toen_US
(English speaking US). - When a
country_code
is not provided, thecountry_code
will default toUSA
.
7. Add the following code enclosed in <script>
tags between </body>
and </html>
:
var paymentImage = document.getElementsByTagName("img");
for (i =0 ; i < paymentImage.length ; i++ ){
if( paymentImage[i].alt == "Affirm"){
var paymentId = paymentImage[i].parentElement.parentElement.parentElement.getAttribute('data-select-gateway');
var targetNode = document.getElementById('payment-gateway-subfields-'+paymentId);
targetNode.innerHTML = "<div id='affirm-inline-checkout'></div>";
}
}
affirm.ui.ready(function() {
affirm.checkout.inline({
merchant: {
inline_container: "affirm-inline-checkout"
},
data: { total: {{ checkout.total_price }} }
});
});
var paymentImage = document.getElementsByClassName("payment-icon--affirm")
var paymentId = paymentImage[0].parentElement.getAttribute('data-brand-icons-for-gateway')
var targetNode = document.getElementById('payment-gateway-subfields-'+paymentId);
targetNode.innerHTML = "<div id='affirm-inline-checkout'></div>";
affirm.ui.ready(function() {
affirm.checkout.inline({
merchant: {
inline_container: "affirm-inline-checkout"
},
data: { total: {{ checkout.total_price }} }
});
});
Recipe
View the recipe to below to walk through the steps for adding Inline Checkout.
Updated 3 months ago