@sezzle/sezzle-react-widget 3.0.1 → 3.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +41 -5
- package/dist/index.cjs +316 -93
- package/dist/index.cjs.map +1 -1
- package/dist/index.es.js +316 -93
- package/dist/index.es.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -3,7 +3,8 @@
|
|
|
3
3
|
`@sezzle/sezzle-react-widget` is a React-based component to render Sezzle's widget on React platforms.
|
|
4
4
|
|
|
5
5
|
# Installation
|
|
6
|
-
|
|
6
|
+
|
|
7
|
+
---
|
|
7
8
|
|
|
8
9
|
Using npm:
|
|
9
10
|
`npm install @sezzle/sezzle-react-widget`
|
|
@@ -22,55 +23,89 @@ Within your product page, add the two following snippets in the appropriate loca
|
|
|
22
23
|
# Customization
|
|
23
24
|
|
|
24
25
|
The following props can be specified in the element to customize the widget's content and appearance
|
|
25
|
-
|
|
26
|
+
|
|
27
|
+
---
|
|
28
|
+
|
|
26
29
|
- **{price} (Required)**
|
|
30
|
+
|
|
27
31
|
- Type: String
|
|
28
32
|
|
|
29
33
|
- **{merchantId} (Required)**
|
|
34
|
+
|
|
30
35
|
- Purpose: Site's 36-character Merchant ID, found in the Business Settings of Sezzle Merchant Dashboard.
|
|
31
36
|
- Type: String
|
|
32
37
|
|
|
33
38
|
- **{theme}** (Optional)
|
|
39
|
+
|
|
34
40
|
- Purpose: To control the Sezzle image variant. Use light or black-flat for light backgrounds, dark or white-flat for dark backgrounds.
|
|
35
41
|
- Type: String
|
|
36
42
|
- Options: light, dark, white-flat, black-flat
|
|
37
43
|
- Default: light
|
|
38
44
|
|
|
39
45
|
- **{alignment}** (Optional)
|
|
46
|
+
|
|
40
47
|
- Type: String
|
|
41
48
|
- Options: auto, left, center, right
|
|
42
49
|
- Default: auto
|
|
43
50
|
|
|
44
51
|
- **{fontWeight}** (Optional)
|
|
52
|
+
|
|
45
53
|
- Type: Number
|
|
46
54
|
- Default: 500
|
|
47
55
|
|
|
48
56
|
- **{fontFamily}** (Optional)
|
|
57
|
+
|
|
49
58
|
- Type: String
|
|
50
59
|
- Default: inherit
|
|
51
60
|
|
|
52
61
|
- **{fontSize}** (Optional)
|
|
62
|
+
|
|
53
63
|
- Type: Number
|
|
54
64
|
- Default: 14
|
|
55
65
|
|
|
56
66
|
- **{textColor}** (Optional)
|
|
67
|
+
|
|
57
68
|
- Type: String
|
|
58
69
|
- Default: inherit
|
|
59
70
|
|
|
60
71
|
- **{logoSize}** (Optional)
|
|
72
|
+
|
|
61
73
|
- Purpose: To scale the logo (1 = 100%)
|
|
62
74
|
- Type: Number
|
|
63
75
|
- Default: 1
|
|
64
76
|
|
|
65
77
|
- **{includeAPModal}** (Optional)
|
|
78
|
+
|
|
66
79
|
- Purpose: To enable Afterpay's logo within the Sezzle widget
|
|
67
80
|
- Type: Boolean
|
|
68
81
|
- Default: false
|
|
69
82
|
|
|
70
83
|
- **{minPrice}** (Optional)
|
|
84
|
+
|
|
71
85
|
- Purpose to display a checkout minimum within the Sezzle widget
|
|
72
86
|
- Type: Number
|
|
73
|
-
- Default:
|
|
87
|
+
- Default: 20
|
|
88
|
+
|
|
89
|
+
- **{maxPrice}** (Optional)
|
|
90
|
+
|
|
91
|
+
- Purpose to display a checkout maximum within the Sezzle widget
|
|
92
|
+
- Type: Number
|
|
93
|
+
- Default: 2500
|
|
94
|
+
|
|
95
|
+
## <b>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:</b>
|
|
96
|
+
|
|
97
|
+
`minPriceLT` (optional)
|
|
98
|
+
|
|
99
|
+
**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.
|
|
100
|
+
**Type**: number
|
|
101
|
+
**Default**: 0
|
|
102
|
+
**Additional Details**: The `maxPrice` option should be overwritten to `15000` for long-term.
|
|
103
|
+
|
|
104
|
+
`bestAPR` (optional)
|
|
105
|
+
|
|
106
|
+
**Purpose**: Standard APR rate by which interest should be calculated.
|
|
107
|
+
**Type**: number
|
|
108
|
+
**Default**: 9.99
|
|
74
109
|
|
|
75
110
|
# Example
|
|
76
111
|
|
|
@@ -80,10 +115,11 @@ ______________________________________________________________________
|
|
|
80
115
|
merchantId={'12a34bc5-6de7-890f-g123-4hi5678jk901'}
|
|
81
116
|
theme={'light'}
|
|
82
117
|
includeAPModal={false}
|
|
83
|
-
minPrice={
|
|
118
|
+
minPrice={20}
|
|
119
|
+
maxPrice={2500}
|
|
84
120
|
fontWeight={500}
|
|
85
121
|
fontFamily={'inherit'}
|
|
86
|
-
fontSize={
|
|
122
|
+
fontSize={14}
|
|
87
123
|
textColor={'inherit'}
|
|
88
124
|
alignment={'auto'}
|
|
89
125
|
logoSize={1}
|