@lightspeed/online-payments-sdk 1.4.0 → 1.4.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 +8 -4
  2. package/dist/cjs/v1/stripe/themes.js +2 -2
  3. package/dist/cjs/version.js +1 -1
  4. package/dist/v1/stripe/shared.js +8 -4
  5. package/dist/v1/stripe/themes.js +2 -2
  6. package/dist/version.d.ts +1 -1
  7. package/dist/version.js +1 -1
  8. package/package.json +1 -1
  9. package/styles/lightspeed-global-styles.css +46 -17
package/dist/cjs/v1/stripe/shared.js CHANGED
@@ -144,6 +144,11 @@ function createAddressElementOptions(defaultValues) {
144
144
  }
145
145
  return addressOptions;
146
146
  }
147
+ /**
148
+ * Inline SVG markup for the chevron-down icon used in the expandable terms
149
+ * toggle. The icon is rotated 180deg via CSS when the toggle is expanded.
150
+ */
151
+ var CHEVRON_DOWN_SVG = '<svg class="stripe-terms-chevron-icon" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="6 9 12 15 18 9"/></svg>';
147
152
  /**
148
153
  * Create custom Terms & Conditions element for US Bank Account payments
149
154
  * Styling is defined in lightspeed-global-styles.css
@@ -156,7 +161,7 @@ function createCustomTermsElement() {
156
161
  termsText.className = 'stripe-custom-terms-text';
157
162
  // Build terms HTML with translatable strings
158
163
  var stripeTermsLink = "<a href=\"".concat(terms_1.ACH_TERMS_URL.STRIPE_ACH_AUTHORIZATION, "\" target=\"_blank\" rel=\"noopener noreferrer\">").concat(terms_1.ACH_TERMS_TEXT.STRIPE_TERMS_LINK_TEXT, "</a>");
159
- var expandableToggle = "<span class=\"stripe-expandable-terms-toggle\">".concat(terms_1.ACH_TERMS_TEXT.EXPANDABLE_TERMS_LINK_TEXT, " <span class=\"stripe-terms-triangle\">\u25BC</span></span>");
164
+ var expandableToggle = "<span class=\"stripe-expandable-terms-toggle\" role=\"button\" tabindex=\"0\" aria-expanded=\"false\">".concat(terms_1.ACH_TERMS_TEXT.EXPANDABLE_TERMS_LINK_TEXT, " ").concat(CHEVRON_DOWN_SVG, "</span>");
160
165
  termsText.innerHTML = "".concat(terms_1.ACH_TERMS_TEXT.TERMS_PREFIX, " ").concat(stripeTermsLink, " ").concat(terms_1.ACH_TERMS_TEXT.TERMS_CONJUNCTION, " ").concat(expandableToggle);
161
166
  // Create expandable terms content
162
167
  var expandableContent = document.createElement('div');
@@ -167,14 +172,13 @@ function createCustomTermsElement() {
167
172
  termsContainer.appendChild(expandableContent);
168
173
  // Add click handler for expandable toggle
169
174
  var toggle = termsText.querySelector('.stripe-expandable-terms-toggle');
170
- var triangle = termsText.querySelector('.stripe-terms-triangle');
171
- if (toggle && triangle) {
175
+ if (toggle) {
172
176
  toggle.addEventListener('click', function (e) {
173
177
  e.preventDefault();
174
178
  var isExpanded = expandableContent.style.display !== 'none';
175
179
  expandableContent.style.display = isExpanded ? 'none' : 'block';
176
- triangle.textContent = isExpanded ? '▼' : '▲';
177
180
  toggle.classList.toggle('expanded', !isExpanded);
181
+ toggle.setAttribute('aria-expanded', String(!isExpanded));
178
182
  });
179
183
  }
180
184
  return termsContainer;
package/dist/cjs/v1/stripe/themes.js CHANGED
@@ -42,7 +42,7 @@ function ensureThemeStylesheet() {
42
42
  }
43
43
  var styleElement = document.createElement('style');
44
44
  styleElement.id = THEME_STYLESHEET_ID;
45
- 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-triangle {\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 ");
45
+ 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
46
  document.head.appendChild(styleElement);
47
47
  }
48
48
  /**
@@ -88,7 +88,7 @@ function getThemeConfig(theme) {
88
88
  appearance: {
89
89
  theme: 'night',
90
90
  },
91
- fonts: []
91
+ fonts: [],
92
92
  };
93
93
  default:
94
94
  return undefined;
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.4.0';
6
+ exports.SDK_VERSION = '1.4.1';
package/dist/v1/stripe/shared.js CHANGED
@@ -132,6 +132,11 @@ export function createAddressElementOptions(defaultValues) {
132
132
  }
133
133
  return addressOptions;
134
134
  }
135
+ /**
136
+ * Inline SVG markup for the chevron-down icon used in the expandable terms
137
+ * toggle. The icon is rotated 180deg via CSS when the toggle is expanded.
138
+ */
139
+ var CHEVRON_DOWN_SVG = '<svg class="stripe-terms-chevron-icon" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="6 9 12 15 18 9"/></svg>';
135
140
  /**
136
141
  * Create custom Terms & Conditions element for US Bank Account payments
137
142
  * Styling is defined in lightspeed-global-styles.css
@@ -144,7 +149,7 @@ function createCustomTermsElement() {
144
149
  termsText.className = 'stripe-custom-terms-text';
145
150
  // Build terms HTML with translatable strings
146
151
  var stripeTermsLink = "<a href=\"".concat(ACH_TERMS_URL.STRIPE_ACH_AUTHORIZATION, "\" target=\"_blank\" rel=\"noopener noreferrer\">").concat(ACH_TERMS_TEXT.STRIPE_TERMS_LINK_TEXT, "</a>");
147
- var expandableToggle = "<span class=\"stripe-expandable-terms-toggle\">".concat(ACH_TERMS_TEXT.EXPANDABLE_TERMS_LINK_TEXT, " <span class=\"stripe-terms-triangle\">\u25BC</span></span>");
152
+ var expandableToggle = "<span class=\"stripe-expandable-terms-toggle\" role=\"button\" tabindex=\"0\" aria-expanded=\"false\">".concat(ACH_TERMS_TEXT.EXPANDABLE_TERMS_LINK_TEXT, " ").concat(CHEVRON_DOWN_SVG, "</span>");
148
153
  termsText.innerHTML = "".concat(ACH_TERMS_TEXT.TERMS_PREFIX, " ").concat(stripeTermsLink, " ").concat(ACH_TERMS_TEXT.TERMS_CONJUNCTION, " ").concat(expandableToggle);
149
154
  // Create expandable terms content
150
155
  var expandableContent = document.createElement('div');
@@ -155,14 +160,13 @@ function createCustomTermsElement() {
155
160
  termsContainer.appendChild(expandableContent);
156
161
  // Add click handler for expandable toggle
157
162
  var toggle = termsText.querySelector('.stripe-expandable-terms-toggle');
158
- var triangle = termsText.querySelector('.stripe-terms-triangle');
159
- if (toggle && triangle) {
163
+ if (toggle) {
160
164
  toggle.addEventListener('click', function (e) {
161
165
  e.preventDefault();
162
166
  var isExpanded = expandableContent.style.display !== 'none';
163
167
  expandableContent.style.display = isExpanded ? 'none' : 'block';
164
- triangle.textContent = isExpanded ? '▼' : '▲';
165
168
  toggle.classList.toggle('expanded', !isExpanded);
169
+ toggle.setAttribute('aria-expanded', String(!isExpanded));
166
170
  });
167
171
  }
168
172
  return termsContainer;
package/dist/v1/stripe/themes.js CHANGED
@@ -36,7 +36,7 @@ function ensureThemeStylesheet() {
36
36
  }
37
37
  var styleElement = document.createElement('style');
38
38
  styleElement.id = THEME_STYLESHEET_ID;
39
- 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-triangle {\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 ");
39
+ 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
40
  document.head.appendChild(styleElement);
41
41
  }
42
42
  /**
@@ -82,7 +82,7 @@ export function getThemeConfig(theme) {
82
82
  appearance: {
83
83
  theme: 'night',
84
84
  },
85
- fonts: []
85
+ fonts: [],
86
86
  };
87
87
  default:
88
88
  return undefined;
package/dist/version.d.ts CHANGED
@@ -1 +1 @@
1
- export declare const SDK_VERSION = "1.4.0";
1
+ export declare const SDK_VERSION = "1.4.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.4.0';
3
+ export var SDK_VERSION = '1.4.1';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lightspeed/online-payments-sdk",
3
- "version": "1.4.0",
3
+ "version": "1.4.1",
4
4
  "description": "Process online-payments with Lightspeed Payments",
5
5
  "author": "Lightspeed Commerce Inc.",
6
6
  "license": "SEE LICENSE IN LICENSE.md",
package/styles/lightspeed-global-styles.css CHANGED
@@ -1,18 +1,22 @@
1
1
  @import '@adyen/adyen-web/styles/adyen.css';
2
2
 
3
- /* Custom Terms & Conditions for US Bank Account (ACH) payments */
3
+ /* Custom Terms & Conditions for US Bank Account (ACH) payments.
4
+ Values are chosen to match Stripe's PaymentElement checkbox label
5
+ ("Save payment details for future purchases") which renders inside
6
+ an iframe with its own typography. */
7
+
4
8
  .stripe-custom-terms-container {
5
- margin-top: 12px;
6
9
  padding: 0;
7
10
  }
8
11
 
9
12
  .stripe-custom-terms-text {
10
- margin: 0;
11
- font-size: 12px;
12
- line-height: 16px;
13
- color: #6b7280;
14
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
13
+ margin: 16px 0 0 0;
14
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
15
+ Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
16
+ font-size: 0.93rem;
15
17
  font-weight: 400;
18
+ line-height: 1.5;
19
+ color: #30313d;
16
20
  }
17
21
 
18
22
  .stripe-custom-terms-text a {
@@ -20,21 +24,28 @@
20
24
  text-decoration: underline;
21
25
  }
22
26
 
23
- /* Expandable terms toggle */
24
27
  .stripe-expandable-terms-toggle {
25
28
  color: #635bff;
26
29
  cursor: pointer;
27
30
  text-decoration: underline;
31
+ display: inline-flex;
32
+ align-items: center;
33
+ gap: 4px;
34
+ user-select: none;
28
35
  }
29
36
 
30
- .stripe-terms-triangle {
37
+ .stripe-terms-chevron-icon {
31
38
  display: inline-block;
32
- font-size: 10px;
33
- color: #000000;
34
- margin-left: 2px;
39
+ width: 12px;
40
+ height: 12px;
41
+ transition: transform 150ms ease;
42
+ flex-shrink: 0;
43
+ }
44
+
45
+ .stripe-expandable-terms-toggle.expanded .stripe-terms-chevron-icon {
46
+ transform: rotate(180deg);
35
47
  }
36
48
 
37
- /* Expandable terms content */
38
49
  .stripe-expandable-terms-content {
39
50
  margin-top: 8px;
40
51
  padding: 0;
@@ -42,13 +53,31 @@
42
53
 
43
54
  .stripe-expandable-terms-content p {
44
55
  margin: 0 0 8px 0;
45
- font-size: 12px;
46
- line-height: 18px;
47
- color: #6b7280;
48
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
56
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
57
+ Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
58
+ font-size: 0.93rem;
49
59
  font-weight: 400;
60
+ line-height: 1.5;
61
+ color: #30313d;
50
62
  }
51
63
 
52
64
  .stripe-expandable-terms-content p:last-child {
53
65
  margin-bottom: 0;
54
66
  }
67
+
68
+ /* Invoicing theme: only override font-family to match the Inter font
69
+ passed to Stripe Elements via the invoicing theme config. */
70
+
71
+ .lsp-theme-invoicing {
72
+ padding-bottom: 0 !important;
73
+ }
74
+
75
+ .lsp-theme-invoicing .stripe-custom-terms-text,
76
+ .lsp-theme-invoicing .stripe-expandable-terms-content p {
77
+ font-family: 'Inter', system-ui, sans-serif;
78
+ }
79
+
80
+ .lsp-theme-invoicing .stripe-custom-terms-text a,
81
+ .lsp-theme-invoicing .stripe-expandable-terms-toggle {
82
+ color: var(--accent-9, #635bff);
83
+ }