@lightspeed/online-payments-sdk 1.4.0 → 1.4.2

package/dist/cjs/v1/stripe/shared.js

@@ -144,6 +144,11 @@ function createAddressElementOptions(defaultValues) {
     }
     return addressOptions;
 }
+/**
+ * Inline SVG markup for the chevron-down icon used in the expandable terms
+ * toggle. The icon is rotated 180deg via CSS when the toggle is expanded.
+ */
+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>';
 /**
  * Create custom Terms & Conditions element for US Bank Account payments
  * Styling is defined in lightspeed-global-styles.css
@@ -156,25 +161,26 @@ function createCustomTermsElement() {
     termsText.className = 'stripe-custom-terms-text';
     // Build terms HTML with translatable strings
     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>");
-    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>");
+    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>");
     termsText.innerHTML = "".concat(terms_1.ACH_TERMS_TEXT.TERMS_PREFIX, " ").concat(stripeTermsLink, " ").concat(terms_1.ACH_TERMS_TEXT.TERMS_CONJUNCTION, " ").concat(expandableToggle);
-    // Create expandable terms content
+    // Create expandable terms content from plain-text paragraphs
     var expandableContent = document.createElement('div');
     expandableContent.className = 'stripe-expandable-terms-content';
     expandableContent.style.display = 'none';
-    expandableContent.innerHTML = "<p>".concat(terms_1.ACH_TERMS_TEXT.EXPANDED_TERMS_CONTENT, "</p>");
+    var paragraphs = terms_1.ACH_TERMS_TEXT.EXPANDED_TERMS_PARAGRAPHS.map(function (text) { return "<p>".concat(text, "</p>"); }).join('');
+    var privacyLink = "<a href=\"".concat(terms_1.ACH_TERMS_URL.PRIVACY_POLICY, "\" target=\"_blank\" rel=\"noopener noreferrer\">").concat(terms_1.ACH_TERMS_TEXT.PRIVACY_POLICY_LINK_TEXT, "</a>");
+    expandableContent.innerHTML = "".concat(paragraphs, "<p>").concat(terms_1.ACH_TERMS_TEXT.EXPANDED_TERMS_PRIVACY_PREFIX, " ").concat(privacyLink, ".</p>");
     termsContainer.appendChild(termsText);
     termsContainer.appendChild(expandableContent);
     // Add click handler for expandable toggle
     var toggle = termsText.querySelector('.stripe-expandable-terms-toggle');
-    var triangle = termsText.querySelector('.stripe-terms-triangle');
-    if (toggle && triangle) {
+    if (toggle) {
         toggle.addEventListener('click', function (e) {
             e.preventDefault();
             var isExpanded = expandableContent.style.display !== 'none';
             expandableContent.style.display = isExpanded ? 'none' : 'block';
-            triangle.textContent = isExpanded ? '▼' : '▲';
             toggle.classList.toggle('expanded', !isExpanded);
+            toggle.setAttribute('aria-expanded', String(!isExpanded));
         });
     }
     return termsContainer;

package/dist/cjs/v1/stripe/terms.js

@@ -20,10 +20,24 @@ exports.ACH_TERMS_TEXT = {
     EXPANDABLE_TERMS_LINK_TEXT: 'these terms',
     /**
      * Expanded terms content for ACH authorization.
-     * This is the detailed legal text shown when user expands "these terms".
+     * Each entry is a separate paragraph rendered when the user expands
+     * "these terms". Kept as plain text — HTML structure is built in code.
      */
-    EXPANDED_TERMS_CONTENT: 'By providing your bank account details and confirming this payment, you authorize the merchant to debit your account for the amount shown. If you choose to save your bank account for future payments, this authorization will also apply to any future amounts owed for products or services provided by the merchant, until you cancel it. You also authorize the merchant to credit your account as necessary to correct any erroneous debits. You may revoke authorization at any time by contacting the merchant, allowing up to thirty (30) days for processing. You confirm that you are an authorized signer on the account and that sufficient funds will be available for each payment. ACH payments may take up to five (5) business days to complete, and you may be responsible for fees if a payment is returned.',
+    EXPANDED_TERMS_PARAGRAPHS: [
+        'By providing your bank account details and confirming this payment, you authorize the merchant to debit your account for the amount shown.',
+        'If you choose to save your bank account for future payments, this authorization will also apply to any amounts now or hereafter due and payable, including amounts previously invoiced, accrued, outstanding, or otherwise payable, in addition to current, and future payment obligations owed for products or services provided by the merchant, until you cancel it.',
+        'You also authorize the merchant to credit your account as necessary to correct any erroneous debits.',
+        'You may revoke authorization at any time by contacting the merchant, allowing up to thirty (30) days for processing.\nYou confirm that you are an authorized signer on the account and that sufficient funds will be available for each payment.\nACH payments may take up to five (5) business days to complete, and you may be responsible for fees if a payment is returned.',
+    ],
+    /**
+     * Final paragraph containing a link to the Privacy Policy.
+     * The link text and URL are defined separately so translators only
+     * localize the surrounding copy, not the URL.
+     */
+    EXPANDED_TERMS_PRIVACY_PREFIX: 'Lightspeed may collect or access certain payment-related information as described in the platform agreement and',
+    PRIVACY_POLICY_LINK_TEXT: 'Privacy Policy',
 };
 exports.ACH_TERMS_URL = {
     STRIPE_ACH_AUTHORIZATION: 'https://stripe.com/legal/ach-payments/authorization',
+    PRIVACY_POLICY: 'https://www.lightspeedhq.com/legal/privacy-policy/',
 };

package/dist/cjs/v1/stripe/themes.js

@@ -42,7 +42,7 @@ function ensureThemeStylesheet() {
     }
     var styleElement = document.createElement('style');
     styleElement.id = THEME_STYLESHEET_ID;
-    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  ");
+    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  ");
     document.head.appendChild(styleElement);
 }
 /**
@@ -88,7 +88,7 @@ function getThemeConfig(theme) {
                 appearance: {
                     theme: 'night',
                 },
-                fonts: []
+                fonts: [],
             };
         default:
             return undefined;

package/dist/cjs/version.js

@@ -3,4 +3,4 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SDK_VERSION = void 0;
 // This file is auto-generated during the build process
 // DO NOT EDIT MANUALLY - Version is extracted from package.json
-exports.SDK_VERSION = '1.4.0';
+exports.SDK_VERSION = '1.4.2';

package/dist/v1/stripe/shared.js

@@ -132,6 +132,11 @@ export function createAddressElementOptions(defaultValues) {
     }
     return addressOptions;
 }
+/**
+ * Inline SVG markup for the chevron-down icon used in the expandable terms
+ * toggle. The icon is rotated 180deg via CSS when the toggle is expanded.
+ */
+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>';
 /**
  * Create custom Terms & Conditions element for US Bank Account payments
  * Styling is defined in lightspeed-global-styles.css
@@ -144,25 +149,26 @@ function createCustomTermsElement() {
     termsText.className = 'stripe-custom-terms-text';
     // Build terms HTML with translatable strings
     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>");
-    var expandableToggle = "<span class=\"stripe-expandable-terms-toggle\">".concat(ACH_TERMS_TEXT.EXPANDABLE_TERMS_LINK_TEXT, " <span class=\"stripe-terms-triangle\">\u25BC</span></span>");
+    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>");
     termsText.innerHTML = "".concat(ACH_TERMS_TEXT.TERMS_PREFIX, " ").concat(stripeTermsLink, " ").concat(ACH_TERMS_TEXT.TERMS_CONJUNCTION, " ").concat(expandableToggle);
-    // Create expandable terms content
+    // Create expandable terms content from plain-text paragraphs
     var expandableContent = document.createElement('div');
     expandableContent.className = 'stripe-expandable-terms-content';
     expandableContent.style.display = 'none';
-    expandableContent.innerHTML = "<p>".concat(ACH_TERMS_TEXT.EXPANDED_TERMS_CONTENT, "</p>");
+    var paragraphs = ACH_TERMS_TEXT.EXPANDED_TERMS_PARAGRAPHS.map(function (text) { return "<p>".concat(text, "</p>"); }).join('');
+    var privacyLink = "<a href=\"".concat(ACH_TERMS_URL.PRIVACY_POLICY, "\" target=\"_blank\" rel=\"noopener noreferrer\">").concat(ACH_TERMS_TEXT.PRIVACY_POLICY_LINK_TEXT, "</a>");
+    expandableContent.innerHTML = "".concat(paragraphs, "<p>").concat(ACH_TERMS_TEXT.EXPANDED_TERMS_PRIVACY_PREFIX, " ").concat(privacyLink, ".</p>");
     termsContainer.appendChild(termsText);
     termsContainer.appendChild(expandableContent);
     // Add click handler for expandable toggle
     var toggle = termsText.querySelector('.stripe-expandable-terms-toggle');
-    var triangle = termsText.querySelector('.stripe-terms-triangle');
-    if (toggle && triangle) {
+    if (toggle) {
         toggle.addEventListener('click', function (e) {
             e.preventDefault();
             var isExpanded = expandableContent.style.display !== 'none';
             expandableContent.style.display = isExpanded ? 'none' : 'block';
-            triangle.textContent = isExpanded ? '▼' : '▲';
             toggle.classList.toggle('expanded', !isExpanded);
+            toggle.setAttribute('aria-expanded', String(!isExpanded));
         });
     }
     return termsContainer;

package/dist/v1/stripe/terms.d.ts

@@ -17,10 +17,19 @@ export declare const ACH_TERMS_TEXT: {
     readonly EXPANDABLE_TERMS_LINK_TEXT: "these terms";
     /**
      * Expanded terms content for ACH authorization.
-     * This is the detailed legal text shown when user expands "these terms".
+     * Each entry is a separate paragraph rendered when the user expands
+     * "these terms". Kept as plain text — HTML structure is built in code.
      */
-    readonly EXPANDED_TERMS_CONTENT: "By providing your bank account details and confirming this payment, you authorize the merchant to debit your account for the amount shown. If you choose to save your bank account for future payments, this authorization will also apply to any future amounts owed for products or services provided by the merchant, until you cancel it. You also authorize the merchant to credit your account as necessary to correct any erroneous debits. You may revoke authorization at any time by contacting the merchant, allowing up to thirty (30) days for processing. You confirm that you are an authorized signer on the account and that sufficient funds will be available for each payment. ACH payments may take up to five (5) business days to complete, and you may be responsible for fees if a payment is returned.";
+    readonly EXPANDED_TERMS_PARAGRAPHS: readonly ["By providing your bank account details and confirming this payment, you authorize the merchant to debit your account for the amount shown.", "If you choose to save your bank account for future payments, this authorization will also apply to any amounts now or hereafter due and payable, including amounts previously invoiced, accrued, outstanding, or otherwise payable, in addition to current, and future payment obligations owed for products or services provided by the merchant, until you cancel it.", "You also authorize the merchant to credit your account as necessary to correct any erroneous debits.", "You may revoke authorization at any time by contacting the merchant, allowing up to thirty (30) days for processing.\nYou confirm that you are an authorized signer on the account and that sufficient funds will be available for each payment.\nACH payments may take up to five (5) business days to complete, and you may be responsible for fees if a payment is returned."];
+    /**
+     * Final paragraph containing a link to the Privacy Policy.
+     * The link text and URL are defined separately so translators only
+     * localize the surrounding copy, not the URL.
+     */
+    readonly EXPANDED_TERMS_PRIVACY_PREFIX: "Lightspeed may collect or access certain payment-related information as described in the platform agreement and";
+    readonly PRIVACY_POLICY_LINK_TEXT: "Privacy Policy";
 };
 export declare const ACH_TERMS_URL: {
     readonly STRIPE_ACH_AUTHORIZATION: "https://stripe.com/legal/ach-payments/authorization";
+    readonly PRIVACY_POLICY: "https://www.lightspeedhq.com/legal/privacy-policy/";
 };

package/dist/v1/stripe/terms.js

@@ -17,10 +17,24 @@ export var ACH_TERMS_TEXT = {
     EXPANDABLE_TERMS_LINK_TEXT: 'these terms',
     /**
      * Expanded terms content for ACH authorization.
-     * This is the detailed legal text shown when user expands "these terms".
+     * Each entry is a separate paragraph rendered when the user expands
+     * "these terms". Kept as plain text — HTML structure is built in code.
      */
-    EXPANDED_TERMS_CONTENT: 'By providing your bank account details and confirming this payment, you authorize the merchant to debit your account for the amount shown. If you choose to save your bank account for future payments, this authorization will also apply to any future amounts owed for products or services provided by the merchant, until you cancel it. You also authorize the merchant to credit your account as necessary to correct any erroneous debits. You may revoke authorization at any time by contacting the merchant, allowing up to thirty (30) days for processing. You confirm that you are an authorized signer on the account and that sufficient funds will be available for each payment. ACH payments may take up to five (5) business days to complete, and you may be responsible for fees if a payment is returned.',
+    EXPANDED_TERMS_PARAGRAPHS: [
+        'By providing your bank account details and confirming this payment, you authorize the merchant to debit your account for the amount shown.',
+        'If you choose to save your bank account for future payments, this authorization will also apply to any amounts now or hereafter due and payable, including amounts previously invoiced, accrued, outstanding, or otherwise payable, in addition to current, and future payment obligations owed for products or services provided by the merchant, until you cancel it.',
+        'You also authorize the merchant to credit your account as necessary to correct any erroneous debits.',
+        'You may revoke authorization at any time by contacting the merchant, allowing up to thirty (30) days for processing.\nYou confirm that you are an authorized signer on the account and that sufficient funds will be available for each payment.\nACH payments may take up to five (5) business days to complete, and you may be responsible for fees if a payment is returned.',
+    ],
+    /**
+     * Final paragraph containing a link to the Privacy Policy.
+     * The link text and URL are defined separately so translators only
+     * localize the surrounding copy, not the URL.
+     */
+    EXPANDED_TERMS_PRIVACY_PREFIX: 'Lightspeed may collect or access certain payment-related information as described in the platform agreement and',
+    PRIVACY_POLICY_LINK_TEXT: 'Privacy Policy',
 };
 export var ACH_TERMS_URL = {
     STRIPE_ACH_AUTHORIZATION: 'https://stripe.com/legal/ach-payments/authorization',
+    PRIVACY_POLICY: 'https://www.lightspeedhq.com/legal/privacy-policy/',
 };

package/dist/v1/stripe/themes.js

@@ -36,7 +36,7 @@ function ensureThemeStylesheet() {
     }
     var styleElement = document.createElement('style');
     styleElement.id = THEME_STYLESHEET_ID;
-    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  ");
+    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  ");
     document.head.appendChild(styleElement);
 }
 /**
@@ -82,7 +82,7 @@ export function getThemeConfig(theme) {
                 appearance: {
                     theme: 'night',
                 },
-                fonts: []
+                fonts: [],
             };
         default:
             return undefined;

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const SDK_VERSION = "1.4.0";
+export declare const SDK_VERSION = "1.4.2";

package/dist/version.js

@@ -1,3 +1,3 @@
 // This file is auto-generated during the build process
 // DO NOT EDIT MANUALLY - Version is extracted from package.json
-export var SDK_VERSION = '1.4.0';
+export var SDK_VERSION = '1.4.2';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightspeed/online-payments-sdk",
-  "version": "1.4.0",
+  "version": "1.4.2",
   "description": "Process online-payments with Lightspeed Payments",
   "author": "Lightspeed Commerce Inc.",
   "license": "SEE LICENSE IN LICENSE.md",

package/styles/lightspeed-global-styles.css

@@ -1,40 +1,52 @@
 @import '@adyen/adyen-web/styles/adyen.css';
 
-/* Custom Terms & Conditions for US Bank Account (ACH) payments */
+/* Custom Terms & Conditions for US Bank Account (ACH) payments.
+   Values are chosen to match Stripe's PaymentElement checkbox label
+   ("Save payment details for future purchases") which renders inside
+   an iframe with its own typography. */
+
 .stripe-custom-terms-container {
-  margin-top: 12px;
   padding: 0;
 }
 
 .stripe-custom-terms-text {
-  margin: 0;
-  font-size: 12px;
-  line-height: 16px;
-  color: #6b7280;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  margin: 16px 0 0 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
+    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  font-size: 0.93rem;
   font-weight: 400;
+  line-height: 1.5;
+  color: #30313d;
 }
 
-.stripe-custom-terms-text a {
+.stripe-custom-terms-text a,
+.stripe-expandable-terms-content a {
   color: #635bff;
   text-decoration: underline;
 }
 
-/* Expandable terms toggle */
 .stripe-expandable-terms-toggle {
   color: #635bff;
   cursor: pointer;
   text-decoration: underline;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  user-select: none;
 }
 
-.stripe-terms-triangle {
+.stripe-terms-chevron-icon {
   display: inline-block;
-  font-size: 10px;
-  color: #000000;
-  margin-left: 2px;
+  width: 12px;
+  height: 12px;
+  transition: transform 150ms ease;
+  flex-shrink: 0;
+}
+
+.stripe-expandable-terms-toggle.expanded .stripe-terms-chevron-icon {
+  transform: rotate(180deg);
 }
 
-/* Expandable terms content */
 .stripe-expandable-terms-content {
   margin-top: 8px;
   padding: 0;
@@ -42,13 +54,32 @@
 
 .stripe-expandable-terms-content p {
   margin: 0 0 8px 0;
-  font-size: 12px;
-  line-height: 18px;
-  color: #6b7280;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
+    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  font-size: 0.93rem;
   font-weight: 400;
+  line-height: 1.5;
+  color: #30313d;
 }
 
 .stripe-expandable-terms-content p:last-child {
   margin-bottom: 0;
 }
+
+/* Invoicing theme: only override font-family to match the Inter font
+   passed to Stripe Elements via the invoicing theme config. */
+
+.lsp-theme-invoicing {
+  padding-bottom: 0 !important;
+}
+
+.lsp-theme-invoicing .stripe-custom-terms-text,
+.lsp-theme-invoicing .stripe-expandable-terms-content p {
+  font-family: 'Inter', system-ui, sans-serif;
+}
+
+.lsp-theme-invoicing .stripe-custom-terms-text a,
+.lsp-theme-invoicing .stripe-expandable-terms-toggle,
+.lsp-theme-invoicing .stripe-expandable-terms-content a {
+  color: var(--accent-9, #635bff);
+}