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