Skip to main content

​
Purpose

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

​
Installation

Select the implementation that fits your needs:

​
NPM Implementation

Using npm: npm install @sezzle/sezzle-installment-widget@latest Within your checkout page, add the following code snippet to import the library: 
import SezzleInstallmentWidget from @sezzle/sezzle-installment-widget
Where you want the widget to render, add the snippet from the Configuration section below, updating options to determine the price.

​
CDN Implementation

Within your checkout page, add the following code snippet to import the library: 
<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 section below, updating options to determine the price.

​
Static Implementation

Language will auto-detect, first by HTML lang attribute, then by user’s brownser default, and finally to EN.

​
Shopify Method

Compatible with Shopify Plus stores only.
  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, then click Save
  6. Paste the following into the bottom of the templates/checkout.liquid file in Shopify, then click Save: 
    {{ "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 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: 
    <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: 
        <div id="sezzle-installment-widget-box"></div>
    <script src="sezzle-checkout-installment-widget.js"></script>
  1. 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

Not applicable for static implementation
<div id="sezzle-installment-widget-box"></div>
<script type='text/javascript'>
    new SezzleInstallmentWidget({
        'platform': `${yourPlatformIfSupported}`,
        'checkoutTotalElemTargetPath': `${yourPriceElementXPath}`
    });
</script>