> ## Documentation Index
> Fetch the complete documentation index at: https://docs.sezzle.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Checkout Installments Widget

## Purpose

The checkout installments widget shows a sample installment plan, including installment amounts and due dates, at the point of final decision.

<img src="https://mintcdn.com/sezzle/gU3SzsA5tCIMe9m_/images/docs/guides/checkout-installments.png?fit=max&auto=format&n=gU3SzsA5tCIMe9m_&q=85&s=c36be3df2cb55dca38f99cb1c7044b5e" alt="Checkout Installment Widget Pn" className="mx-auto" style={{ width:"66%" }} width="567" height="578" data-path="images/docs/guides/checkout-installments.png" />

## Installation

Select the implementation that fits your needs:

* [NPM Package](#npm-implementation)
* [Code Snippet (auto-updates)](#cdn-implementation)
* [Code Snippet (static file)](#static-implementation)

### NPM Implementation

Using npm: `npm install @sezzle/sezzle-installment-widget@latest`

Within your checkout page, add the following code snippet to import the library:

```html theme={"system"}
import SezzleInstallmentWidget from @sezzle/sezzle-installment-widget
```

Where you want the widget to render, add the snippet from the [Configuration](#configuration) section below, updating options to determine the price.

### CDN Implementation

Within your checkout page, add the following code snippet to import the library:

```html theme={"system"}
<script type="text/javascript" defer src="https://checkout-sdk.sezzle.com/installment-widget.min.js"/>
```

Where you want the widget to render, add the snippet from the [Configuration](#configuration) section below, updating options to determine the price.

### Static Implementation

<Note>
  Language will auto-detect, first by HTML lang attribute, then by user's brownser default, and finally to EN.
</Note>

#### Shopify Method

<Note>
  Compatible with Shopify Plus stores only.
</Note>

1. Log in to your Shopify Admin
2. Go to `Online Store` > `Themes`
3. On the theme you wish to edit, click `...` then select `Edit Code`
4. In the `Assets` folder, click `New File` and name it `sezzle-installment-widget.js`
5. Copy+paste the code from [Github](https://github.com/sezzle/static-widgets/blob/production/src/sezzle-checkout-installment-widget/sezzle-checkout-installment-widget.js), then click `Save`
6. Paste the following into the bottom of the `templates/checkout.liquid` file in Shopify, then click `Save`:
   ```html theme={"system"}
   {{ "sezzle-installment-widget.js" | asset_url | script_tag }}
   <script type="text/javascript">
       document.addEventListener('readystatechange', function(){
           var sezzlePaymentLine = document.querySelector('[alt="Sezzle"]').parentElement.parentElement.parentElement;
           var sezzleCheckoutWidget = document.createElement('div');
           sezzleCheckoutWidget.id = 'sezzle-installment-widget-box';
           sezzlePaymentLine.parentElement.insertBefore(sezzleCheckoutWidget, sezzlePaymentLine.nextElementSibling);
       })
   </script>
   ```
7. Back in the Javascript file, update the values of the following options as applicable, then click Save:

* merchantLocale (optional): The country code. Currently Sezzle is only available in the United States and its territories, and Canada. Defaults to "US".
* currencySymbol (optional): The currency symbol to display in the installment widget. If unassigned, the currency symbol will be automatically detected in the targeted checkout total element contents or default to \$
* checkoutTotal (required): The element where the checkout total is rendered. (Example value is given for Shopify default)

#### Platform-Agnostic Method

1. Create a copy of the code from [Github](https://github.com/sezzle/static-widgets/blob/production/src/sezzle-checkout-installment-widget/sezzle-checkout-installment-widget.js) within your store's theme code, then import it into the checkout page code.
2. Invocation:

* Option 1 (recommended): To inject the placeholder element dynamically, add the following lines of code to run once the rest of the page has loaded, updating `sezzlePaymentLine` to target the Sezzle payment method line, below which the installment widget asset will display:
  ```html theme={"system"}
  <script type="text/javascript">
      document.addEventListener('readystatechange', function(){
          var sezzlePaymentLine = document.querySelector('[alt="Sezzle"]').parentElement.parentElement.parentElement; // Shopify example
          var sezzleCheckoutWidget = document.createElement('div');
          sezzleCheckoutWidget.id = 'sezzle-installment-widget-box';
          sezzlePaymentLine.parentElement.insertBefore(sezzleCheckoutWidget, sezzlePaymentLine.nextElementSibling);
      })
  </script>
  ```
* Option 2: Enter the following two lines of code where the installment widget should appear:
  ```html theme={"system"}
      <div id="sezzle-installment-widget-box"></div>
      <script src="sezzle-checkout-installment-widget.js"></script>
  ```

3. Back in the Javascript file, update the values of the following options as applicable, then Save changes:

* merchantLocale (optional): The country code. Currently Sezzle is only available in the United States and its territories, and Canada. Defaults to "US".
* currencySymbol (optional): The currency symbol to display in the installment widget. If unassigned, the currency symbol will be automatically detected in the targeted checkout total element contents or default to \$
* checkoutTotal (required): The element where the checkout total is rendered. (Example value is given for Shopify default, other top platform values saved as comments)

### Configuration

<Note>
  Not applicable for static implementation
</Note>

<Tabs>
  <Tab title="Template">
    ```html theme={"system"}
    <div id="sezzle-installment-widget-box"></div>
    <script type='text/javascript'>
        new SezzleInstallmentWidget({
            'platform': `${yourPlatformIfSupported}`,
            'checkoutTotalElemTargetPath': `${yourPriceElementXPath}`
        });
    </script>
    ```
  </Tab>

  <Tab title="Example">
    ```html theme={"system"}
    <div id="sezzle-installment-widget-box"></div>
    <script type='text/javascript'>
        new SezzleInstallmentWidget({
            'platform': 'shopify',
            // 'checkoutTotalElemTargetPath': '.payment-due__price'
        });
    </script>
    ```
  </Tab>

  <Tab title="Options">
    <Note>
      Either `platform` or `checkoutTotalElemTargetPath` is required, but not both.
    </Note>

    <ParamField body="platform" type="string">
      The ecommerce platform which hosts the checkout page. If not supported, please refer to checkoutTotalElemTargetPath.

      Available options: `shopify`, `woocommerce`, `3dcart`, `commentsold`, `magento2`, `prestashop`, `shopware`, `opencart`
    </ParamField>

    <ParamField body="checkoutTotalElemTargetPath" type="string">
      The ID or class name of the element containing the total order amount.
    </ParamField>

    <ParamField body="currency" default="$" type="string">
      The currency symbol to show in the price. By default, the widget will mimic the currency from the total order amount targeted element if present and fallback to \$ if not provided.
    </ParamField>
  </Tab>
</Tabs>