@lightspeed/online-payments-sdk 1.6.3 → 1.7.1

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.
Files changed (9) hide show
  1. package/dist/cjs/v1/stripe/shared.js +5 -5
  2. package/dist/cjs/v1/stripe/themes.js +115 -15
  3. package/dist/cjs/version.js +1 -1
  4. package/dist/v1/stripe/shared.js +5 -5
  5. package/dist/v1/stripe/themes.js +115 -15
  6. package/dist/v1/widget.d.ts +1 -1
  7. package/dist/version.d.ts +1 -1
  8. package/dist/version.js +1 -1
  9. package/package.json +2 -2
package/dist/cjs/v1/stripe/shared.js CHANGED
@@ -241,7 +241,7 @@ function setupChangeEventHandler(paymentElement, eventBroadcaster, addressElemen
241
241
  })));
242
242
  };
243
243
  paymentElement.on('change', function (event) {
244
- var _a;
244
+ var _a, _b;
245
245
  paymentComplete = event.complete;
246
246
  var completenessChanged = (paymentComplete && addressComplete) !== previousComplete;
247
247
  var methodType = (_a = event.value) === null || _a === void 0 ? void 0 : _a.type;
@@ -249,11 +249,11 @@ function setupChangeEventHandler(paymentElement, eventBroadcaster, addressElemen
249
249
  if (methodType !== undefined) {
250
250
  previousMethodType = methodType;
251
251
  }
252
- // Check for save checkbox state from Stripe's value object
253
- // The value object may contain a `savePaymentMethod` property
252
+ // `savePaymentMethod` reflects the "save for future use" checkbox; it is only
253
+ // present on the change event when the element renders that checkbox.
254
254
  var saveCheckboxChanged = false;
255
- if (event.value && typeof event.value === 'object' && 'savePaymentMethod' in event.value) {
256
- var saveCheckboxState = event.value.savePaymentMethod;
255
+ var saveCheckboxState = (_b = event.value) === null || _b === void 0 ? void 0 : _b.savePaymentMethod;
256
+ if (saveCheckboxState !== undefined) {
257
257
  saveCheckboxChanged = previousSaveCheckboxState !== saveCheckboxState;
258
258
  previousSaveCheckboxState = saveCheckboxState;
259
259
  }
package/dist/cjs/v1/stripe/themes.js CHANGED
@@ -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.3';
6
+ exports.SDK_VERSION = '1.7.1';
package/dist/v1/stripe/shared.js CHANGED
@@ -229,7 +229,7 @@ export function setupChangeEventHandler(paymentElement, eventBroadcaster, addres
229
229
  })));
230
230
  };
231
231
  paymentElement.on('change', function (event) {
232
- var _a;
232
+ var _a, _b;
233
233
  paymentComplete = event.complete;
234
234
  var completenessChanged = (paymentComplete && addressComplete) !== previousComplete;
235
235
  var methodType = (_a = event.value) === null || _a === void 0 ? void 0 : _a.type;
@@ -237,11 +237,11 @@ export function setupChangeEventHandler(paymentElement, eventBroadcaster, addres
237
237
  if (methodType !== undefined) {
238
238
  previousMethodType = methodType;
239
239
  }
240
- // Check for save checkbox state from Stripe's value object
241
- // The value object may contain a `savePaymentMethod` property
240
+ // `savePaymentMethod` reflects the "save for future use" checkbox; it is only
241
+ // present on the change event when the element renders that checkbox.
242
242
  var saveCheckboxChanged = false;
243
- if (event.value && typeof event.value === 'object' && 'savePaymentMethod' in event.value) {
244
- var saveCheckboxState = event.value.savePaymentMethod;
243
+ var saveCheckboxState = (_b = event.value) === null || _b === void 0 ? void 0 : _b.savePaymentMethod;
244
+ if (saveCheckboxState !== undefined) {
245
245
  saveCheckboxChanged = previousSaveCheckboxState !== saveCheckboxState;
246
246
  previousSaveCheckboxState = saveCheckboxState;
247
247
  }
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.6.3";
1
+ export declare const SDK_VERSION = "1.7.1";
package/dist/version.js CHANGED
@@ -1,3 +1,3 @@
1
1
  // This file is auto-generated during the build process
2
2
  // DO NOT EDIT MANUALLY - Version is extracted from package.json
3
- export var SDK_VERSION = '1.6.3';
3
+ export var SDK_VERSION = '1.7.1';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lightspeed/online-payments-sdk",
3
- "version": "1.6.3",
3
+ "version": "1.7.1",
4
4
  "description": "Process online-payments with Lightspeed Payments",
5
5
  "author": "Lightspeed Commerce Inc.",
6
6
  "license": "SEE LICENSE IN LICENSE.md",
@@ -44,6 +44,6 @@
44
44
  "dependencies": {
45
45
  "@adyen/adyen-web": "^6.40.1",
46
46
  "@datadog/browser-logs": "^6.33.0",
47
- "@stripe/stripe-js": "^7.9.0"
47
+ "@stripe/stripe-js": "^8.8.0"
48
48
  }
49
49
  }