@lightspeed/online-payments-sdk 1.6.3 → 1.7.0
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/dist/cjs/v1/stripe/themes.js +115 -15
- package/dist/cjs/version.js +1 -1
- package/dist/v1/stripe/themes.js +115 -15
- package/dist/v1/widget.d.ts +1 -1
- package/dist/version.d.ts +1 -1
- package/dist/version.js +1 -1
- package/package.json +1 -1
|
@@ -1,4 +1,15 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
2
13
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
14
|
exports.THEME_COLORS = void 0;
|
|
4
15
|
exports.applyThemeClass = applyThemeClass;
|
|
@@ -45,6 +56,56 @@ function ensureThemeStylesheet() {
|
|
|
45
56
|
styleElement.textContent = "\n /* Dark theme styles for the mount element */\n .lsp-theme-dark {\n background-color: ".concat(exports.THEME_COLORS.DARK.BACKGROUND, " !important;\n color: ").concat(exports.THEME_COLORS.DARK.TEXT, " !important;\n }\n /* Dark theme styles for Stripe custom terms elements */\n .lsp-theme-dark .stripe-terms-chevron-icon {\n color: ").concat(exports.THEME_COLORS.DARK.TEXT, " !important;\n }\n .lsp-theme-dark .stripe-custom-terms-text {\n color: ").concat(exports.THEME_COLORS.DARK.TEXT, " !important;\n }\n .lsp-theme-dark .stripe-expandable-terms-content p {\n color: ").concat(exports.THEME_COLORS.DARK.TEXT, " !important;\n }\n ");
|
|
46
57
|
document.head.appendChild(styleElement);
|
|
47
58
|
}
|
|
59
|
+
/**
|
|
60
|
+
* ID for the invoicing-dark container stylesheet.
|
|
61
|
+
*
|
|
62
|
+
* Kept separate from THEME_STYLESHEET_ID so the two dark themes can coexist on a
|
|
63
|
+
* page without the first one mounted suppressing the other's rules.
|
|
64
|
+
*/
|
|
65
|
+
var INVOICING_DARK_STYLESHEET_ID = 'lsp-theme-invoicing-dark-styles';
|
|
66
|
+
/**
|
|
67
|
+
* Inject the invoicing-dark container stylesheet.
|
|
68
|
+
*
|
|
69
|
+
* Unlike the `dark` theme this sets no background colour: hosts using
|
|
70
|
+
* invoicing-dark already render their own dark surface behind the mount point,
|
|
71
|
+
* so forcing one here would fight it. Only the SDK-injected terms text needs a
|
|
72
|
+
* colour, because nothing else styles it.
|
|
73
|
+
*/
|
|
74
|
+
function ensureInvoicingDarkStylesheet() {
|
|
75
|
+
if (document.getElementById(INVOICING_DARK_STYLESHEET_ID)) {
|
|
76
|
+
return;
|
|
77
|
+
}
|
|
78
|
+
var styleElement = document.createElement('style');
|
|
79
|
+
styleElement.id = INVOICING_DARK_STYLESHEET_ID;
|
|
80
|
+
styleElement.textContent = "\n /*\n * Mirror the non-colour .lsp-theme-invoicing rules from\n * lightspeed-global-styles.css. Class selectors match whole tokens, so an\n * element carrying the class lsp-theme-invoicing-dark is never matched by\n * the selector .lsp-theme-invoicing; without these the terms text would\n * fall back to the system font while the Elements iframe renders Inter.\n */\n .lsp-theme-invoicing-dark {\n color: #e3e4e9;\n padding-bottom: 0 !important;\n }\n .lsp-theme-invoicing-dark .stripe-custom-terms-text,\n .lsp-theme-invoicing-dark .stripe-expandable-terms-content p {\n color: #e3e4e9;\n font-family: 'Inter', system-ui, sans-serif;\n }\n /*\n * Links and the expand toggle. lightspeed-global-styles.css colours these\n * #635bff, which is close to unreadable on a dark surface, so they take the\n * consumer dark interactive colour instead. The chevron inherits from its\n * toggle so the two can never drift apart.\n */\n .lsp-theme-invoicing-dark .stripe-custom-terms-text a,\n .lsp-theme-invoicing-dark .stripe-expandable-terms-content a,\n .lsp-theme-invoicing-dark .stripe-expandable-terms-toggle {\n color: #6cb5fb;\n }\n .lsp-theme-invoicing-dark .stripe-terms-chevron-icon {\n color: inherit;\n }\n ";
|
|
81
|
+
document.head.appendChild(styleElement);
|
|
82
|
+
}
|
|
83
|
+
/**
|
|
84
|
+
* Styling shared by every invoicing theme.
|
|
85
|
+
*
|
|
86
|
+
* `invoicing` and `invoicing-dark` are the same form in two palettes, so
|
|
87
|
+
* everything that is not a colour lives here and is spread into both. Keeping
|
|
88
|
+
* it in one place means the two cannot drift apart as either is tweaked.
|
|
89
|
+
*
|
|
90
|
+
* These are templates, not the returned values: `getThemeConfig` copies them on
|
|
91
|
+
* every call so a caller mutating one theme's config can never leak into another
|
|
92
|
+
* theme or a later call.
|
|
93
|
+
*/
|
|
94
|
+
var INVOICING_SHARED_VARIABLES = {
|
|
95
|
+
fontFamily: 'Inter, system-ui, sans-serif',
|
|
96
|
+
fontWeightNormal: 'normal',
|
|
97
|
+
fontSizeBase: '1rem',
|
|
98
|
+
fontLineHeight: '24px',
|
|
99
|
+
borderRadius: '12px',
|
|
100
|
+
};
|
|
101
|
+
var INVOICING_SHARED_FONTS = [
|
|
102
|
+
{
|
|
103
|
+
cssSrc: 'https://fonts.googleapis.com/css?family=Inter',
|
|
104
|
+
},
|
|
105
|
+
];
|
|
106
|
+
var INVOICING_SHARED_LAYOUT = {
|
|
107
|
+
type: 'tabs',
|
|
108
|
+
};
|
|
48
109
|
/**
|
|
49
110
|
* Get theme configuration based on theme name
|
|
50
111
|
*/
|
|
@@ -57,13 +118,7 @@ function getThemeConfig(theme) {
|
|
|
57
118
|
return {
|
|
58
119
|
appearance: {
|
|
59
120
|
theme: 'stripe',
|
|
60
|
-
variables: {
|
|
61
|
-
fontFamily: 'Inter, system-ui, sans-serif',
|
|
62
|
-
fontWeightNormal: 'normal',
|
|
63
|
-
fontSizeBase: '1rem',
|
|
64
|
-
fontLineHeight: '24px',
|
|
65
|
-
borderRadius: '12px',
|
|
66
|
-
},
|
|
121
|
+
variables: __assign({}, INVOICING_SHARED_VARIABLES),
|
|
67
122
|
labels: 'floating',
|
|
68
123
|
rules: {
|
|
69
124
|
'.Label, .Label--floating': {
|
|
@@ -72,14 +127,8 @@ function getThemeConfig(theme) {
|
|
|
72
127
|
},
|
|
73
128
|
},
|
|
74
129
|
},
|
|
75
|
-
fonts:
|
|
76
|
-
|
|
77
|
-
cssSrc: 'https://fonts.googleapis.com/css?family=Inter',
|
|
78
|
-
},
|
|
79
|
-
],
|
|
80
|
-
layout: {
|
|
81
|
-
type: 'tabs',
|
|
82
|
-
},
|
|
130
|
+
fonts: INVOICING_SHARED_FONTS.map(function (font) { return (__assign({}, font)); }),
|
|
131
|
+
layout: __assign({}, INVOICING_SHARED_LAYOUT),
|
|
83
132
|
};
|
|
84
133
|
case 'dark':
|
|
85
134
|
// Ensure theme stylesheet is injected
|
|
@@ -90,6 +139,57 @@ function getThemeConfig(theme) {
|
|
|
90
139
|
},
|
|
91
140
|
fonts: [],
|
|
92
141
|
};
|
|
142
|
+
case 'invoicing-dark':
|
|
143
|
+
// Ensure the invoicing-dark container stylesheet is injected
|
|
144
|
+
ensureInvoicingDarkStylesheet();
|
|
145
|
+
return {
|
|
146
|
+
appearance: {
|
|
147
|
+
theme: 'night',
|
|
148
|
+
variables: __assign(__assign({}, INVOICING_SHARED_VARIABLES), { colorBackground: '#242427', colorText: '#e3e4e9', colorTextSecondary: '#a4a4a8', colorTextPlaceholder: '#a4a4a8', colorPrimary: '#6cb5fb', colorDanger: '#ffa597', colorIcon: '#a4a4a8' }),
|
|
149
|
+
labels: 'floating',
|
|
150
|
+
rules: {
|
|
151
|
+
'.Label, .Label--floating': {
|
|
152
|
+
color: '#a4a4a8',
|
|
153
|
+
},
|
|
154
|
+
'.Input': {
|
|
155
|
+
backgroundColor: '#242427',
|
|
156
|
+
border: '1px solid #525256',
|
|
157
|
+
},
|
|
158
|
+
'.Input:hover': {
|
|
159
|
+
border: '1px solid #8c8c90',
|
|
160
|
+
},
|
|
161
|
+
'.Input:focus': {
|
|
162
|
+
border: '1px solid #6cb5fb',
|
|
163
|
+
boxShadow: 'inset 0 0 0 1px #6cb5fb',
|
|
164
|
+
},
|
|
165
|
+
'.Input--invalid': {
|
|
166
|
+
border: '1px solid #ea2f37',
|
|
167
|
+
// bg-no-highlight-default (#FF796A29) expressed as rgba() rather
|
|
168
|
+
// than 8-digit hex for the widest CSS support.
|
|
169
|
+
backgroundColor: 'rgba(255, 121, 106, 0.16)',
|
|
170
|
+
color: '#ffa597',
|
|
171
|
+
},
|
|
172
|
+
'.Tab': {
|
|
173
|
+
backgroundColor: '#242427',
|
|
174
|
+
border: '1px solid #525256',
|
|
175
|
+
color: '#a4a4a8',
|
|
176
|
+
},
|
|
177
|
+
'.Tab:hover': {
|
|
178
|
+
color: '#e3e4e9',
|
|
179
|
+
},
|
|
180
|
+
'.Tab--selected': {
|
|
181
|
+
backgroundColor: '#2f2f32',
|
|
182
|
+
border: '1px solid #6cb5fb',
|
|
183
|
+
color: '#e3e4e9',
|
|
184
|
+
},
|
|
185
|
+
'.Error': {
|
|
186
|
+
color: '#ffa597',
|
|
187
|
+
},
|
|
188
|
+
},
|
|
189
|
+
},
|
|
190
|
+
fonts: INVOICING_SHARED_FONTS.map(function (font) { return (__assign({}, font)); }),
|
|
191
|
+
layout: __assign({}, INVOICING_SHARED_LAYOUT),
|
|
192
|
+
};
|
|
93
193
|
default:
|
|
94
194
|
return undefined;
|
|
95
195
|
}
|
package/dist/cjs/version.js
CHANGED
|
@@ -3,4 +3,4 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.SDK_VERSION = void 0;
|
|
4
4
|
// This file is auto-generated during the build process
|
|
5
5
|
// DO NOT EDIT MANUALLY - Version is extracted from package.json
|
|
6
|
-
exports.SDK_VERSION = '1.
|
|
6
|
+
exports.SDK_VERSION = '1.7.0';
|
package/dist/v1/stripe/themes.js
CHANGED
|
@@ -1,3 +1,14 @@
|
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
11
|
+
};
|
|
1
12
|
/**
|
|
2
13
|
* Theme color constants for styling containers
|
|
3
14
|
* Use these to match the SDK's dark theme colors in your application
|
|
@@ -39,6 +50,56 @@ function ensureThemeStylesheet() {
|
|
|
39
50
|
styleElement.textContent = "\n /* Dark theme styles for the mount element */\n .lsp-theme-dark {\n background-color: ".concat(THEME_COLORS.DARK.BACKGROUND, " !important;\n color: ").concat(THEME_COLORS.DARK.TEXT, " !important;\n }\n /* Dark theme styles for Stripe custom terms elements */\n .lsp-theme-dark .stripe-terms-chevron-icon {\n color: ").concat(THEME_COLORS.DARK.TEXT, " !important;\n }\n .lsp-theme-dark .stripe-custom-terms-text {\n color: ").concat(THEME_COLORS.DARK.TEXT, " !important;\n }\n .lsp-theme-dark .stripe-expandable-terms-content p {\n color: ").concat(THEME_COLORS.DARK.TEXT, " !important;\n }\n ");
|
|
40
51
|
document.head.appendChild(styleElement);
|
|
41
52
|
}
|
|
53
|
+
/**
|
|
54
|
+
* ID for the invoicing-dark container stylesheet.
|
|
55
|
+
*
|
|
56
|
+
* Kept separate from THEME_STYLESHEET_ID so the two dark themes can coexist on a
|
|
57
|
+
* page without the first one mounted suppressing the other's rules.
|
|
58
|
+
*/
|
|
59
|
+
var INVOICING_DARK_STYLESHEET_ID = 'lsp-theme-invoicing-dark-styles';
|
|
60
|
+
/**
|
|
61
|
+
* Inject the invoicing-dark container stylesheet.
|
|
62
|
+
*
|
|
63
|
+
* Unlike the `dark` theme this sets no background colour: hosts using
|
|
64
|
+
* invoicing-dark already render their own dark surface behind the mount point,
|
|
65
|
+
* so forcing one here would fight it. Only the SDK-injected terms text needs a
|
|
66
|
+
* colour, because nothing else styles it.
|
|
67
|
+
*/
|
|
68
|
+
function ensureInvoicingDarkStylesheet() {
|
|
69
|
+
if (document.getElementById(INVOICING_DARK_STYLESHEET_ID)) {
|
|
70
|
+
return;
|
|
71
|
+
}
|
|
72
|
+
var styleElement = document.createElement('style');
|
|
73
|
+
styleElement.id = INVOICING_DARK_STYLESHEET_ID;
|
|
74
|
+
styleElement.textContent = "\n /*\n * Mirror the non-colour .lsp-theme-invoicing rules from\n * lightspeed-global-styles.css. Class selectors match whole tokens, so an\n * element carrying the class lsp-theme-invoicing-dark is never matched by\n * the selector .lsp-theme-invoicing; without these the terms text would\n * fall back to the system font while the Elements iframe renders Inter.\n */\n .lsp-theme-invoicing-dark {\n color: #e3e4e9;\n padding-bottom: 0 !important;\n }\n .lsp-theme-invoicing-dark .stripe-custom-terms-text,\n .lsp-theme-invoicing-dark .stripe-expandable-terms-content p {\n color: #e3e4e9;\n font-family: 'Inter', system-ui, sans-serif;\n }\n /*\n * Links and the expand toggle. lightspeed-global-styles.css colours these\n * #635bff, which is close to unreadable on a dark surface, so they take the\n * consumer dark interactive colour instead. The chevron inherits from its\n * toggle so the two can never drift apart.\n */\n .lsp-theme-invoicing-dark .stripe-custom-terms-text a,\n .lsp-theme-invoicing-dark .stripe-expandable-terms-content a,\n .lsp-theme-invoicing-dark .stripe-expandable-terms-toggle {\n color: #6cb5fb;\n }\n .lsp-theme-invoicing-dark .stripe-terms-chevron-icon {\n color: inherit;\n }\n ";
|
|
75
|
+
document.head.appendChild(styleElement);
|
|
76
|
+
}
|
|
77
|
+
/**
|
|
78
|
+
* Styling shared by every invoicing theme.
|
|
79
|
+
*
|
|
80
|
+
* `invoicing` and `invoicing-dark` are the same form in two palettes, so
|
|
81
|
+
* everything that is not a colour lives here and is spread into both. Keeping
|
|
82
|
+
* it in one place means the two cannot drift apart as either is tweaked.
|
|
83
|
+
*
|
|
84
|
+
* These are templates, not the returned values: `getThemeConfig` copies them on
|
|
85
|
+
* every call so a caller mutating one theme's config can never leak into another
|
|
86
|
+
* theme or a later call.
|
|
87
|
+
*/
|
|
88
|
+
var INVOICING_SHARED_VARIABLES = {
|
|
89
|
+
fontFamily: 'Inter, system-ui, sans-serif',
|
|
90
|
+
fontWeightNormal: 'normal',
|
|
91
|
+
fontSizeBase: '1rem',
|
|
92
|
+
fontLineHeight: '24px',
|
|
93
|
+
borderRadius: '12px',
|
|
94
|
+
};
|
|
95
|
+
var INVOICING_SHARED_FONTS = [
|
|
96
|
+
{
|
|
97
|
+
cssSrc: 'https://fonts.googleapis.com/css?family=Inter',
|
|
98
|
+
},
|
|
99
|
+
];
|
|
100
|
+
var INVOICING_SHARED_LAYOUT = {
|
|
101
|
+
type: 'tabs',
|
|
102
|
+
};
|
|
42
103
|
/**
|
|
43
104
|
* Get theme configuration based on theme name
|
|
44
105
|
*/
|
|
@@ -51,13 +112,7 @@ export function getThemeConfig(theme) {
|
|
|
51
112
|
return {
|
|
52
113
|
appearance: {
|
|
53
114
|
theme: 'stripe',
|
|
54
|
-
variables: {
|
|
55
|
-
fontFamily: 'Inter, system-ui, sans-serif',
|
|
56
|
-
fontWeightNormal: 'normal',
|
|
57
|
-
fontSizeBase: '1rem',
|
|
58
|
-
fontLineHeight: '24px',
|
|
59
|
-
borderRadius: '12px',
|
|
60
|
-
},
|
|
115
|
+
variables: __assign({}, INVOICING_SHARED_VARIABLES),
|
|
61
116
|
labels: 'floating',
|
|
62
117
|
rules: {
|
|
63
118
|
'.Label, .Label--floating': {
|
|
@@ -66,14 +121,8 @@ export function getThemeConfig(theme) {
|
|
|
66
121
|
},
|
|
67
122
|
},
|
|
68
123
|
},
|
|
69
|
-
fonts:
|
|
70
|
-
|
|
71
|
-
cssSrc: 'https://fonts.googleapis.com/css?family=Inter',
|
|
72
|
-
},
|
|
73
|
-
],
|
|
74
|
-
layout: {
|
|
75
|
-
type: 'tabs',
|
|
76
|
-
},
|
|
124
|
+
fonts: INVOICING_SHARED_FONTS.map(function (font) { return (__assign({}, font)); }),
|
|
125
|
+
layout: __assign({}, INVOICING_SHARED_LAYOUT),
|
|
77
126
|
};
|
|
78
127
|
case 'dark':
|
|
79
128
|
// Ensure theme stylesheet is injected
|
|
@@ -84,6 +133,57 @@ export function getThemeConfig(theme) {
|
|
|
84
133
|
},
|
|
85
134
|
fonts: [],
|
|
86
135
|
};
|
|
136
|
+
case 'invoicing-dark':
|
|
137
|
+
// Ensure the invoicing-dark container stylesheet is injected
|
|
138
|
+
ensureInvoicingDarkStylesheet();
|
|
139
|
+
return {
|
|
140
|
+
appearance: {
|
|
141
|
+
theme: 'night',
|
|
142
|
+
variables: __assign(__assign({}, INVOICING_SHARED_VARIABLES), { colorBackground: '#242427', colorText: '#e3e4e9', colorTextSecondary: '#a4a4a8', colorTextPlaceholder: '#a4a4a8', colorPrimary: '#6cb5fb', colorDanger: '#ffa597', colorIcon: '#a4a4a8' }),
|
|
143
|
+
labels: 'floating',
|
|
144
|
+
rules: {
|
|
145
|
+
'.Label, .Label--floating': {
|
|
146
|
+
color: '#a4a4a8',
|
|
147
|
+
},
|
|
148
|
+
'.Input': {
|
|
149
|
+
backgroundColor: '#242427',
|
|
150
|
+
border: '1px solid #525256',
|
|
151
|
+
},
|
|
152
|
+
'.Input:hover': {
|
|
153
|
+
border: '1px solid #8c8c90',
|
|
154
|
+
},
|
|
155
|
+
'.Input:focus': {
|
|
156
|
+
border: '1px solid #6cb5fb',
|
|
157
|
+
boxShadow: 'inset 0 0 0 1px #6cb5fb',
|
|
158
|
+
},
|
|
159
|
+
'.Input--invalid': {
|
|
160
|
+
border: '1px solid #ea2f37',
|
|
161
|
+
// bg-no-highlight-default (#FF796A29) expressed as rgba() rather
|
|
162
|
+
// than 8-digit hex for the widest CSS support.
|
|
163
|
+
backgroundColor: 'rgba(255, 121, 106, 0.16)',
|
|
164
|
+
color: '#ffa597',
|
|
165
|
+
},
|
|
166
|
+
'.Tab': {
|
|
167
|
+
backgroundColor: '#242427',
|
|
168
|
+
border: '1px solid #525256',
|
|
169
|
+
color: '#a4a4a8',
|
|
170
|
+
},
|
|
171
|
+
'.Tab:hover': {
|
|
172
|
+
color: '#e3e4e9',
|
|
173
|
+
},
|
|
174
|
+
'.Tab--selected': {
|
|
175
|
+
backgroundColor: '#2f2f32',
|
|
176
|
+
border: '1px solid #6cb5fb',
|
|
177
|
+
color: '#e3e4e9',
|
|
178
|
+
},
|
|
179
|
+
'.Error': {
|
|
180
|
+
color: '#ffa597',
|
|
181
|
+
},
|
|
182
|
+
},
|
|
183
|
+
},
|
|
184
|
+
fonts: INVOICING_SHARED_FONTS.map(function (font) { return (__assign({}, font)); }),
|
|
185
|
+
layout: __assign({}, INVOICING_SHARED_LAYOUT),
|
|
186
|
+
};
|
|
87
187
|
default:
|
|
88
188
|
return undefined;
|
|
89
189
|
}
|
package/dist/v1/widget.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { WidgetController, DefaultValues } from './common';
|
|
2
2
|
import { EventListeners } from './EventBroadcaster';
|
|
3
|
-
export type PaymentWidgetTheme = 'invoicing' | 'dark';
|
|
3
|
+
export type PaymentWidgetTheme = 'invoicing' | 'dark' | 'invoicing-dark';
|
|
4
4
|
export type PaymentWidgetConfiguration = {
|
|
5
5
|
mountPoint: HTMLElement;
|
|
6
6
|
defaultValues?: DefaultValues;
|
package/dist/version.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const SDK_VERSION = "1.
|
|
1
|
+
export declare const SDK_VERSION = "1.7.0";
|
package/dist/version.js
CHANGED
package/package.json
CHANGED