Widget SDK

Purpose

Boost conversions and increase average order value by showcasing Sezzle’s financing options to shoppers as they browse your site.

Overview

The Sezzle promotional messaging widget displays available financing options on product and cart pages, encouraging purchases. Follow the installation instructions below to add the widget to your website.

Installation

One-Click Installation: Many leading platforms offer one-click installation with Sezzle. Check for compatibility with your platform.
Manual Installation: If one-click installation is unavailable or incompatible with your theme, refer to the manual installation guide or contact merchantsupport@sezzle.com for assistance.

Customization

Sezzle provides extensive configuration options to tailor the widget to your site’s needs. Our engineering team is available to ensure seamless integration with your website’s design and functionality.

HTML required

<script src="https://widget.sezzle.com/v1/javascript/price-widget?uuid={merchant_id}"></script>

Replace {merchant_id} with your 36-character value from your Merchant Dashboard.

Merchant Configured

Configuration is required prior to invoking the price widget script.

`document.sezzleConfig` Options

<script type="text/javascript">
    document.sezzleConfig = {
      configGroups: [
        {
          "targetXPath": string,
          "renderToPath": string,
          "urlMatch": string,
          "theme": string,
          "ignoredPriceElements": [string],
          "ignoredFormattedPriceText": [string],
          "alignment": string,
          "alignmentSwitchMinWidth": number,
          "alignmentSwitchType": string,
          "containerStyle": {
            "property": string,
          },
          "textStyle": {
            "property": string,
          },
          "logoStyle": {
            "property": string,
          },
          "hideClasses": [string],
          "relatedElementActions": [{
            "relatedPath": string,
            "initialAction": function(r,w){}
          }]
        }
      ],
      "language": string,
      "apDualInstall": boolean,
	  "klarnaDualInstall": boolean,
      "minPrice": number,
      "maxPrice": number,
      "observeElements": [
        {
          "eventType": string,
          "element": string
        }
      ]
    }
</script>

<script type="text/javascript">
    document.sezzleConfig = {
      configGroups: [
        {
          "targetXPath": string,
          "renderToPath": string,
          "urlMatch": string,
          "theme": string,
          "ignoredPriceElements": [string],
          "ignoredFormattedPriceText": [string],
          "alignment": string,
          "alignmentSwitchMinWidth": number,
          "alignmentSwitchType": string,
          "containerStyle": {
            "property": string,
          },
          "textStyle": {
            "property": string,
          },
          "logoStyle": {
            "property": string,
          },
          "hideClasses": [string],
          "relatedElementActions": [{
            "relatedPath": string,
            "initialAction": function(r,w){}
          }]
        }
      ],
      "language": string,
      "apDualInstall": boolean,
	  "klarnaDualInstall": boolean,
      "minPrice": number,
      "maxPrice": number,
      "observeElements": [
        {
          "eventType": string,
          "element": string
        }
      ]
    }
</script>

<script type="text/javascript">
    document.sezzleConfig = {
      configGroups: [
        {
          "targetXPath": ".price",
          "renderToPath": "..",
          "urlMatch": "product",
          "theme": "auto",
          "ignoredPriceElements": ["DEL","STRIKE"],
          "ignoredFormattedPriceText": ["Subtotal", "Total:", "Sold Out"],
          "alignment": "inherit",
          "alignmentSwitchMinWidth": 0,
          "alignmentSwitchType": "inherit",
          "containerStyle": {
            "marginTop": "0px",
            "marginBottom": "0px",
            "marginRight": "0px",
            "marginLeft": "0px"
          },
          "textStyle": {
            "color": "inherit",
            "fontFamily": "inherit",
            "fontSize": "14px",
            "fontWeight": 500,
            "lineHeight": "13px",
            "maxWidth": "480px"
          },
          "logoStyle": {
            "transform": "scale(1)",
            "transformOrigin": "center",
            "margin": "0px"
          },
          "hideClasses": [],
          "relatedElementActions": [{
            "relatedPath": "..",
            "initialAction": function(r,w){
              if(r.className.indexOf('compare') > -1){
                w.style.display = "none"
              }
            }
          }]
        }
      ],
      "language": document.querySelector("html").lang || "en",
      "apDualInstall": false,
      "klarnaDualInstall": false,
      "minPrice": 0,
      "maxPrice": 250000,
      "observeElements": [
        {
          "eventType": "click",
          "element": ".options-selector"
        }
      ]
    }
</script>

configGroups

object[]

default:"[{}]"

required

Allows multiple configurations for one store to suit different page types, layouts, or applications. View all available options for customization.

targetXPath

string

required

ID, class, or path to the element in the webpage where the product price text value will be detected.
To indicate a path, subpaths are separated by ’/’, IDs are preceded by ’#’, classes by ’.’, and tag names are suffixed with index (tagName-Index). Indexes are zero-based.

e.g. ‘#ProductSection/.product-price/SPAN-1’ would target the 2nd ‘SPAN’ element contained within elements that contain the ‘product-price’ class which are contained within the element with an ID of ‘ProductSection’.

renderToPath

string

default:".."

Path from targetXPath to the element after which the Sezzle widget should be rendered.
Use ’.’ for sibling placement, ’../’ to move up to parents, and tag-index selectors to move down. Same syntax as targetXPath.

e.g. ’../../BUTTON-0’ would go to the grandparent element of the targetXPath and place the widget after the first button found within that container.

urlMatch

string

Specific word appearing in the URL of pages where the widget config should apply. Typical values are ‘product’ or ‘cart’.

theme

string

default:"auto"

Updates the logo color to coordinate with different background colors. If not specified, the widget will attempt to detect the background color and apply a contrasting logo.

Available options: dark, light, black-flat, white-flat.

containerStyle

object

Custom styling to apply to the Sezzle widget container. Accepts CSS in JSON format. Keys must use camelCase, be wrapped in quotes, and separated by commas.

textStyle

object

Custom styling to apply to the Sezzle text within the widget. Accepts CSS in JSON format. Keys must use camelCase, be wrapped in quotes, and separated by commas.

logoStyle

object

Custom styling to apply to the Sezzle logo within the widget. Accepts CSS in JSON format. Keys must use camelCase, be wrapped in quotes, and separated by commas.

ignoredPriceElements

string[]

Direct child elements of targetXPath to be disregarded when detecting the price. Useful for handling variations between sale and regular-priced items.

ignoredFormattedPriceText

string[]

default:"['Subtotal','Total:','Sold Out']"

Text strings within targetXPath to be disregarded when detecting the price and rendering the widget.

hideClasses

string[]

XPath of elements that should be hidden when Sezzle’s widget is showing.
Despite the name, this config accepts an array of XPaths.

e.g. [“#viabill-pricetag”,“.afterpay-paragraph”,“QUADPAYWIDGET-0”]

alignment

string

default:"auto"

Alignment of the widget relative to the parent element.

Available options: left, center, right, auto

alignmentSwitchMinWidth

number

default:"0"

Screen width in pixels below which the alignment switches to alignmentSwitchType. Common breakpoint: 768px (for handheld vs desktop).

alignmentSwitchType

string

default:"auto"

Alignment of the widget to apply when viewport width is narrower than alignmentSwitchMinWidth.

Available options: left, center, right, auto

apDualInstall

boolean

default:"false"

Afterpay’s logo is appended to widget content. When clicked, the competitor’s modal will display.

klarnaDualInstall

boolean

default:"false"

Klarna’s logo is appended to widget content. When clicked, the competitor’s modal will display.

minPrice

number

default:"0"

Minimum price in cents for which Sezzle can be selected at checkout. If the price at targetXPath is lower than this number, the widget will render with a note stating the minimum eligible price required. This configuration does not prevent a customer from checking out with Sezzle below this price. For more information on setting a gateway minimum, contact your Merchant Success representative or use the Contact Us section of the Sezzle Merchant Dashboard.

maxPrice

number

default:"250000"

Maximum price in cents for which the widget should be rendered. If the price at targetXPath is higher than this number, the widget will not render on the page.

language

string

default:"document.querySelector('html').lang"

Language in which the widget text should be rendered. If the specified language is not supported, the translation will default to English.

Available options: left, center, right, auto

observeElements

object[]

Can attach event listeners to DOM elements and re-initialize the widget.

Simple Example

<script type="text/javascript">
    document.sezzleConfig = {
        configGroups: [
            {
                targetXPath: string,
            },
        ],
    };
</script>

<script type="text/javascript">
    document.sezzleConfig = {
        configGroups: [
            {
                targetXPath: string,
            },
        ],
    };
</script>

<script type="text/javascript">
    document.sezzleConfig = {
        configGroups: [
            {
                targetXPath: "#ProductPrice/.money",
            },
        ],
    };
</script>

Rendering the Widgets

After building the config, it is time to upload the widgets to your webpages! The SDK needs to be called in the HTML of the webpage for the widgets to be rendered. Place the config and the widget script at the bottom of the code file for the HTML page, and you should be all set!

A pre-populated snippet should be provided in your Sezzle Merchant Dashboard Setup Checklist.

When using this snippet to add the widget script to your site, you must replace {merchant_id} with the 36-character Sezzle Merchant ID found in the Business Settings of your Sezzle Merchant Dashboard for the applicable store. Please do not re-use IDs across multiple URLs.

The script with the applicable merchant ID must be included after document.sezzleConfig is defined.

HTML Needed

<script src="https://widget.sezzle.com/v1/javascript/price-widget?uuid={merchant_id}"></script>

Replace {merchant_id} with your 36-character value from your Merchant Dashboard.

Sezzle

Direct Integration

Virtual Card

Assets

Express Checkout (Beta)

Other

Purpose

Overview

Installation

Customization

HTML required

Merchant Configured

`document.sezzleConfig` Options

Simple Example

Rendering the Widgets

HTML Needed

Sezzle

Direct Integration

Virtual Card

Assets

Express Checkout (Beta)

Other

​Purpose

​Overview

​Installation

​Customization

​HTML required

​Merchant Configured

​document.sezzleConfig Options

​Simple Example

​Rendering the Widgets

​HTML Needed

Purpose

Overview

Installation

Customization

HTML required

Merchant Configured

`document.sezzleConfig` Options

Simple Example

Rendering the Widgets

HTML Needed