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 <<glossary: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:

#### 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= English`en`- Country= United States `US`- for a `locale` that reads `en_US`). `country_code`:`CAN` `locale`:`en_CA`- (Language= English`en`- Country= Canada `CA`- for a `locale` that reads `en_CA`). `locale`:`fr_CA`- (Language= French`fr`- 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>`:

## Recipe

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

Enable Inline Checkout on Shopify Plus
Open Recipe