Enable Inline Checkout on Shopify Plus

Learn how to enable Inline Checkout on Shopify Plus.

With Inline Checkout, 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
This image displays the Inline flow for Split pay and Installment options.This image displays the Inline flow for Split pay and Installment options.

This image displays the Inline flow for Split pay 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. To remove this error, please contact Shopify to add Affirm to your store’s allowlist in the Content Security Policy.

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:

var _affirm_config = {
  public_api_key: "[Public API Key]",
  script:         "https://www.affirm.com/js/v2/affirm.js"
};
(function(l,g,m,e,a,f,b){var d,c=l[m]||{},h=document.createElement(f),n=document.getElementsByTagName(f)[0],k=function(a,b,c){return function(){a[b]._.push([c,arguments])}};c[e]=k(c,e,"set");d=c[e];c[a]={};c[a]._=[];d._=[];c[a][b]=k(c,a,b);a=0;for(b="set add save post open empty reset on off trigger ready setProduct".split(" ");a<b.length;a++)d[b[a]]=k(c,e,b[a]);a=0;for(b=["get","token","url","items"];a<b.length;a++)d[b[a]]=function(){};h.async=!0;h.src=g[f];n.parentNode.insertBefore(h,n);delete g[f];d(g);l[m]=c})(window,_affirm_config,"affirm","checkout","ui","script","ready");

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 }} }
});
       
      });

Recipe

View the recipe to below to walk through the steps for adding Inline Checkout.


Did this page help you?