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

minPriceLT (optional)

Purpose: Minimum price 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 4-pay widget and modal will render. Type: number Default: 0 Additional Details: This is the primary indicator that long-term installments should be reflected in the widget.

maxPriceLT (optional)

Purpose: Maximum price for which purchase is eligible for long-term lending. Above this amount, the widget will not render. Type: number Default: 15000 Additional Details: Previously, maxPrice would be overridden. Now that field should only be used for biweekly installment maximum, and this should be used for long-term.

bestAPR (optional)

Purpose: Standard APR rate by which interest should be calculated. (Note: the key is a misnomer - our lending partner now requires the APR to be calculated based on average awarded APR) Type: number Default: 21.99

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}
/>