Introducing Socket Firewall: Free, Proactive Protection for Your Software Supply Chain.Learn More
Socket
Book a DemoInstallSign in
Socket

@sezzle/sezzle-react-widget

Package Overview
Dependencies
Maintainers
13
Versions
13
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@sezzle/sezzle-react-widget

A react component of sezzle widget where props are used to provide config

latest
npmnpm
Version
3.1.2
Version published
Weekly downloads
557
-4.3%
Maintainers
13
Weekly downloads
 
Created
Source

Sezzle

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

Keywords

sezzle

FAQs

Package last updated on 19 Sep 2025

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts