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

Example

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