HomePaymentsPlatformsGlobal Integration

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.

Suggest Edits

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.
1038

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

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, the locale will default to en_US (English speaking US).
  • When a country_code is not provided, the country_code will default to USA.

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.

🛒
Enable Inline Checkout on Shopify Plus
Open Recipe

Updated 3 months ago