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

  • 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

• {minPrice} (Optional)

  • Purpose to display a checkout minimum within the Sezzle widget
  • Type: Number
  • Default: 20

• {maxPrice} (Optional)

  • Purpose to display a checkout maximum 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: The maxPrice option should be overwritten to 15000 for long-term.

bestAPR (optional)

Purpose: Standard APR rate by which interest should be calculated. Type: number Default: 9.99

Example

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