@sezzle/sezzle-react-widget is a React-based component to render Sezzle's widget on React platforms.

Installation

Using npm: npm install @sezzle/sezzle-react-widget

Within your product page, add the two following snippets in the appropriate locations:

import SezzleWidget from '@sezzle/sezzle-react-widget'

<SezzleWidget
  price={YOUR PRICE VARIABLE HERE}
  merchantId={'YOUR MERCHANT ID HERE'}
/>

Customization

The following props can be specified in the element to customize the widget's content and appearance

price (required)

Purpose: The price value from which to calculate the installment amount, including currency. Type: string

merchantId (required)

Purpose: Site's 36-character Merchant ID, found in the Business Settings of Sezzle Merchant Dashboard. Type: string

theme (optional)

Purpose: To control the Sezzle image variant. Use light or black-flat for light backgrounds, dark or white-flat for dark backgrounds. Type: string Options: light, dark, white-flat, black-flat Default: light

alignment (optional)

Type: string Options: auto, left, center, right Default: auto

fontWeight (optional)

Type: number Default: 500

fontFamily (optional)

Type: string Default: inherit

fontSize (optional)

Type: number Default: 14

textColor (optional)

Type: string Default: inherit

logoSize (optional)

Purpose: To scale the logo (1 = 100%) Type: number Default: 1

includeAPModal (optional)

Purpose: To enable Afterpay's logo within the Sezzle widget Type: boolean Default: false

numberOfPayments (optional)

Purpose: Number of installments by which the shopper will pay the total, calculates installment amount. Type: number Options: 4, 5 Default: 5 Additional Details: Default 5 installments will appear above $50, and 4 installments will show below that amount. If override reflects 4, 5 installments will never show in the widget or modal.

minPrice (optional)

Purpose: to display a checkout minimum within the Sezzle widget Type: number Default: 0

maxPrice (optional)

Purpose: the threshold at which to not show biweekly installments within the Sezzle widget Type: number Default: 2500

The following are reserved for merchants enrolled in our long-term payment program. Please discuss with Sezzle point of contact before using the below config options:

The default values listed below for each long-term option correspond to the LTgroup: "a" preset. Setting LTgroup to a different value shifts those defaults to that group's preset (see each option's Additional Details). Individual options always take precedence over both the LTgroup preset and the listed default. All long-term prices are in whole currency units (e.g. dollars), matching minPrice and maxPrice.

LTgroup (optional)

Purpose: Applies long-term settings based on your lending package. Please confirm the applicable value for your enrollment with your account manager. Type: string Options: a or b Default: null Additional Details: This is the crucial config option for enabling long-term widgets.

minPriceLT (optional)

Purpose: Minimum price override for which purchase is eligible for long-term lending. Above this amount, the monthly installments with interest will be reflected in the widget and modal. Below this amount, the bi-weekly widget and modal will render. Type: number Default: 0 Additional Details: When LTgroup is set, defaults to 150 for a or 400 for b.

Deprecation notice: This was previously the crucial config option for enabling long-term widgets. For backwards compatibility, if this value is set but LTgroup is unset, LTgroup automatically resolves to a.

maxPriceLT (optional)

Purpose: Maximum price override for which purchase is eligible for long-term lending. Below this amount, the monthly installments with interest will be reflected in the widget and modal. Above this amount, the widget and modal will not render. Type: number Default: 15000 Additional Details: When LTgroup is set, defaults to 15000 for a or 8000 for b.

The maxPrice option corresponds to the bi-weekly installments only. Between these two prices, the long-term widget will render, and the bi-weekly installments will not show in the modal.

minAPR (optional)

Purpose: Lowest APR offered by the lending partner. Displayed as the lower bound of the APR range in the modal disclaimer. Type: number Default: 9.99 Additional Details: When LTgroup is set, defaults to 9.99 for a or 24.99 for b.

medianAPR (optional)

Purpose: Representative APR used to calculate the monthly installment amount shown in the widget and on each long-term installment card in the modal. Type: number Default: 21.99 Additional Details: When LTgroup is set, defaults to 21.99 for a or 29.99 for b.

maxAPR (optional)

Purpose: Highest APR offered by the lending partner. Displayed as the upper bound of the APR range in the modal disclaimer. Type: number Default: 34.99 Additional Details: When LTgroup is set, defaults to 34.99 for a or 35.99 for b.

termsToShow (optional)

Purpose: Defines which loan term lengths (in months) appear in the modal based on the order amount. Keys are price thresholds; the widget picks the term array whose threshold the price exceeds (highest match wins). The default key is used when no threshold matches. The min and max term lengths shown in the modal disclaimer are derived from the union of all term arrays. Type: object Default: LTgroup preset.

• a: { 1000: [24, 36, 48], 500: [12, 18, 24], 300: [6, 9, 12], default: [3, 6, 9] }
• b: { 1000: [12, 24, 36], 800: [9, 12, 24], 600: [6, 9, 12], default: [3, 6, 9] }

Example

<SezzleWidget
  price={'$29.99'}
  merchantId={'12a34bc5-6de7-890f-g123-4hi5678jk901'}
  numberOfPayments={5}
  theme={'light'}
  includeAPModal={false}
  minPrice={20}
  maxPrice={2500}
  fontWeight={500}
  fontFamily={'inherit'}
  fontSize={14}
  textColor={'inherit'}
  alignment={'auto'}
  logoSize={1}
/>