@lightspeed/online-payments-sdk 1.1.3 → 1.1.5

package/dist/cjs/index.js

@@ -1,7 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.LightspeedPayments = void 0;
+exports.LightspeedPayments = exports.THEME_COLORS = void 0;
 var v1_1 = require("./v1");
+var v1_2 = require("./v1");
+Object.defineProperty(exports, "THEME_COLORS", { enumerable: true, get: function () { return v1_2.THEME_COLORS; } });
 exports.LightspeedPayments = {
     v1: v1_1.v1,
 };

package/dist/cjs/v1/index.js

@@ -6,13 +6,15 @@
  * Don't use * for exports. Be specific to prevent leaking internal APIs.
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.v1 = exports.ProcessingError = exports.InvalidSessionError = exports.InvalidSessionPayloadError = exports.UnsupportedLocationError = void 0;
+exports.v1 = exports.THEME_COLORS = exports.ProcessingError = exports.InvalidSessionError = exports.InvalidSessionPayloadError = exports.UnsupportedLocationError = void 0;
 var widget_1 = require("./widget");
 var error_1 = require("./error");
 Object.defineProperty(exports, "UnsupportedLocationError", { enumerable: true, get: function () { return error_1.UnsupportedLocationError; } });
 Object.defineProperty(exports, "InvalidSessionPayloadError", { enumerable: true, get: function () { return error_1.InvalidSessionPayloadError; } });
 Object.defineProperty(exports, "InvalidSessionError", { enumerable: true, get: function () { return error_1.InvalidSessionError; } });
 Object.defineProperty(exports, "ProcessingError", { enumerable: true, get: function () { return error_1.ProcessingError; } });
+var themes_1 = require("./stripe/themes");
+Object.defineProperty(exports, "THEME_COLORS", { enumerable: true, get: function () { return themes_1.THEME_COLORS; } });
 exports.v1 = {
     mountPaymentWidget: widget_1.mountPaymentWidget,
 };

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

@@ -60,6 +60,7 @@ var stripe_js_1 = require("@stripe/stripe-js");
 var ResultBuilder_1 = require("./ResultBuilder");
 var error_1 = require("../error");
 var themes_1 = require("./themes");
+var terms_1 = require("./terms");
 /**
  * Initialize Stripe with the given context
  */
@@ -87,15 +88,25 @@ function initStripe(context, theme) {
 }
 /**
  * Create payment element options with default wallet settings
+ * @param defaultValues - Default values for the payment element
+ * @param theme - Theme configuration
+ * @param hideNameField - Whether to hide the billing details name field (used when address element is present to avoid duplicates with ACH)
  */
-function createPaymentElementOptions(defaultValues, theme) {
-    var options = {
-        wallets: {
+function createPaymentElementOptions(defaultValues, theme, hideNameField) {
+    if (hideNameField === void 0) { hideNameField = false; }
+    var options = __assign(__assign({ wallets: {
             applePay: 'never',
             googlePay: 'never',
             link: 'never',
+        } }, (hideNameField && {
+        fields: {
+            billingDetails: {
+                name: 'never', // prevent duplicate Name field on the form when using ACH (only when address element is present)
+            },
         },
-    };
+    })), { terms: {
+            usBankAccount: 'never', // Hide Stripe's default T&Cs (shown for ACH payments)
+        } });
     if (defaultValues) {
         options.defaultValues = {
             billingDetails: {
@@ -132,10 +143,49 @@ function createAddressElementOptions(defaultValues) {
     }
     return addressOptions;
 }
+/**
+ * Create custom Terms & Conditions element for US Bank Account payments
+ * Styling is defined in lightspeed-global-styles.css
+ */
+function createCustomTermsElement() {
+    var termsContainer = document.createElement('div');
+    termsContainer.className = 'stripe-custom-terms-container';
+    termsContainer.style.display = 'none'; // Hidden by default
+    var termsText = document.createElement('p');
+    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>");
+    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
+    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>");
+    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) {
+        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);
+        });
+    }
+    return termsContainer;
+}
 /**
  * Create and mount payment element
  */
-function createPaymentElement(elements, options, mountElement, eventBroadcaster) {
+function createPaymentElement(elements, options, mountElement, eventBroadcaster, theme) {
+    // Apply theme class to mount element (generic approach)
+    if (theme) {
+        mountElement.classList.add("lsp-theme-".concat(theme));
+    }
     var paymentElement = elements.create('payment', options);
     paymentElement.on('ready', function () {
         return eventBroadcaster.publish({ status: 'Ready', code: 'Ready' });
@@ -144,7 +194,25 @@ function createPaymentElement(elements, options, mountElement, eventBroadcaster)
     paymentContainer.className = 'stripe-payment-element-container';
     mountElement.appendChild(paymentContainer);
     paymentElement.mount(paymentContainer);
-    return { element: paymentElement, container: paymentContainer };
+    // Create custom terms element for US Bank Account
+    var customTermsElement = createCustomTermsElement();
+    mountElement.appendChild(customTermsElement);
+    // Listen for payment method changes to show/hide custom terms
+    paymentElement.on('change', function (event) {
+        var _a;
+        // Show custom terms only when US Bank Account is selected
+        if (((_a = event.value) === null || _a === void 0 ? void 0 : _a.type) === 'us_bank_account') {
+            customTermsElement.style.display = 'block';
+        }
+        else {
+            customTermsElement.style.display = 'none';
+        }
+    });
+    return {
+        element: paymentElement,
+        container: paymentContainer,
+        customTermsContainer: customTermsElement,
+    };
 }
 /**
  * Create and mount address element
@@ -160,7 +228,7 @@ function createAddressElement(elements, options, mountElement) {
 /**
  * Clean up elements and containers
  */
-function cleanupElements(paymentElement, addressElement, paymentContainer, addressContainer) {
+function cleanupElements(paymentElement, addressElement, paymentContainer, addressContainer, customTermsContainer) {
     paymentElement.unmount();
     if (addressElement) {
         addressElement.unmount();
@@ -172,24 +240,44 @@ function cleanupElements(paymentElement, addressElement, paymentContainer, addre
     if (paymentContainer) {
         paymentContainer.remove();
     }
+    if (customTermsContainer) {
+        customTermsContainer.remove();
+    }
 }
 /**
  * Handle save card operation
  */
-function handleSaveCard(stripe, elements, session) {
+function handleSaveCard(stripe, elements, session, addressElement) {
     return __awaiter(this, void 0, void 0, function () {
-        var _a, error, setupIntent;
-        return __generator(this, function (_b) {
-            switch (_b.label) {
-                case 0: return [4 /*yield*/, stripe.confirmSetup({
-                        elements: elements,
-                        redirect: 'if_required',
-                        confirmParams: {
-                            return_url: session.context.redirectUrl || window.location.href,
-                        },
-                    })];
+        var addressValue, _a, billingName, _b, error, setupIntent;
+        var _c;
+        return __generator(this, function (_d) {
+            switch (_d.label) {
+                case 0:
+                    if (!addressElement) return [3 /*break*/, 2];
+                    return [4 /*yield*/, addressElement.getValue()];
                 case 1:
-                    _a = _b.sent(), error = _a.error, setupIntent = _a.setupIntent;
+                    _a = _d.sent();
+                    return [3 /*break*/, 3];
+                case 2:
+                    _a = null;
+                    _d.label = 3;
+                case 3:
+                    addressValue = _a;
+                    billingName = (_c = addressValue === null || addressValue === void 0 ? void 0 : addressValue.value) === null || _c === void 0 ? void 0 : _c.name;
+                    return [4 /*yield*/, stripe.confirmSetup({
+                            elements: elements,
+                            redirect: 'if_required',
+                            confirmParams: __assign({ return_url: session.context.redirectUrl || window.location.href }, (billingName && {
+                                payment_method_data: {
+                                    billing_details: {
+                                        name: billingName,
+                                    },
+                                },
+                            })),
+                        })];
+                case 4:
+                    _b = _d.sent(), error = _b.error, setupIntent = _b.setupIntent;
                     return [2 /*return*/, error
                             ? ResultBuilder_1.EventBuilder.fromStripeError(error)
                             : ResultBuilder_1.EventBuilder.fromSetupIntent(setupIntent)];
@@ -200,20 +288,37 @@ function handleSaveCard(stripe, elements, session) {
 /**
  * Handle payment operation
  */
-function handlePayment(stripe, elements, session) {
+function handlePayment(stripe, elements, session, addressElement) {
     return __awaiter(this, void 0, void 0, function () {
-        var _a, error, paymentIntent;
-        return __generator(this, function (_b) {
-            switch (_b.label) {
-                case 0: return [4 /*yield*/, stripe.confirmPayment({
-                        elements: elements,
-                        redirect: 'if_required',
-                        confirmParams: {
-                            return_url: session.context.redirectUrl || window.location.href,
-                        },
-                    })];
+        var addressValue, _a, billingName, _b, error, paymentIntent;
+        var _c;
+        return __generator(this, function (_d) {
+            switch (_d.label) {
+                case 0:
+                    if (!addressElement) return [3 /*break*/, 2];
+                    return [4 /*yield*/, addressElement.getValue()];
                 case 1:
-                    _a = _b.sent(), error = _a.error, paymentIntent = _a.paymentIntent;
+                    _a = _d.sent();
+                    return [3 /*break*/, 3];
+                case 2:
+                    _a = null;
+                    _d.label = 3;
+                case 3:
+                    addressValue = _a;
+                    billingName = (_c = addressValue === null || addressValue === void 0 ? void 0 : addressValue.value) === null || _c === void 0 ? void 0 : _c.name;
+                    return [4 /*yield*/, stripe.confirmPayment({
+                            elements: elements,
+                            redirect: 'if_required',
+                            confirmParams: __assign({ return_url: session.context.redirectUrl || window.location.href }, (billingName && {
+                                payment_method_data: {
+                                    billing_details: {
+                                        name: billingName,
+                                    },
+                                },
+                            })),
+                        })];
+                case 4:
+                    _b = _d.sent(), error = _b.error, paymentIntent = _b.paymentIntent;
                     return [2 /*return*/, error
                             ? ResultBuilder_1.EventBuilder.fromStripeError(error)
                             : ResultBuilder_1.EventBuilder.fromPaymentIntent(paymentIntent)];
@@ -224,7 +329,7 @@ function handlePayment(stripe, elements, session) {
 /**
  * Create common submit handler for widgets
  */
-function createSubmitHandler(stripe, elements, session, eventBroadcaster) {
+function createSubmitHandler(stripe, elements, session, eventBroadcaster, addressElement) {
     var _this = this;
     return function () { return __awaiter(_this, void 0, void 0, function () {
         var result;
@@ -244,13 +349,13 @@ function createSubmitHandler(stripe, elements, session, eventBroadcaster) {
                         throw new error_1.InvalidSessionPayloadError();
                     }
                     if (!(session.context.intent === 'save-card')) return [3 /*break*/, 2];
-                    return [4 /*yield*/, handleSaveCard(stripe, elements, session)];
+                    return [4 /*yield*/, handleSaveCard(stripe, elements, session, addressElement)];
                 case 1:
                     result = _a.sent();
                     _a.label = 2;
                 case 2:
                     if (!(session.context.intent === 'payment')) return [3 /*break*/, 4];
-                    return [4 /*yield*/, handlePayment(stripe, elements, session)];
+                    return [4 /*yield*/, handlePayment(stripe, elements, session, addressElement)];
                 case 3:
                     result = _a.sent();
                     _a.label = 4;

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

@@ -0,0 +1,29 @@
+"use strict";
+/**
+ * Translatable strings for Stripe payment elements.
+ * These strings are prepared for Transifex extraction.
+ *
+ * Usage with Transifex:
+ * - Extract these strings using Transifex CLI or integration
+ * - Replace with translated versions based on locale
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ACH_TERMS_URL = exports.ACH_TERMS_TEXT = void 0;
+exports.ACH_TERMS_TEXT = {
+    /**
+     * Main terms text displayed for US Bank Account payments.
+     * Contains placeholders for links that will be injected.
+     */
+    TERMS_PREFIX: 'By submitting your payment, you agree to authorize payments pursuant to',
+    STRIPE_TERMS_LINK_TEXT: "Stripe's terms",
+    TERMS_CONJUNCTION: 'and',
+    EXPANDABLE_TERMS_LINK_TEXT: 'these terms',
+    /**
+     * Expanded terms content for ACH authorization.
+     * This is the detailed legal text shown when user expands "these terms".
+     */
+    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.',
+};
+exports.ACH_TERMS_URL = {
+    STRIPE_ACH_AUTHORIZATION: 'https://stripe.com/legal/ach-payments/authorization',
+};

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

@@ -1,6 +1,34 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.THEME_COLORS = void 0;
 exports.getThemeConfig = getThemeConfig;
+/**
+ * Theme color constants for styling containers
+ * Use these to match the SDK's dark theme colors in your application
+ */
+exports.THEME_COLORS = {
+    DARK: {
+        BACKGROUND: '#1a1a1a',
+        TEXT: '#ffffff',
+    },
+};
+/**
+ * ID for the injected theme stylesheet element
+ */
+var THEME_STYLESHEET_ID = 'lsp-theme-styles';
+/**
+ * Inject theme stylesheets into the document head
+ * Each theme can define its own container styling
+ */
+function ensureThemeStylesheet() {
+    if (document.getElementById(THEME_STYLESHEET_ID)) {
+        return;
+    }
+    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    \n    /* Invoicing theme - no container styling needed */\n    /* .lsp-theme-invoicing { } */\n  ");
+    document.head.appendChild(styleElement);
+}
 /**
  * Get theme configuration based on theme name
  */
@@ -37,6 +65,18 @@ function getThemeConfig(theme) {
                     type: 'tabs',
                 },
             };
+        case 'dark':
+            // Ensure theme stylesheet is injected
+            ensureThemeStylesheet();
+            return {
+                appearance: {
+                    theme: 'night',
+                },
+                fonts: [],
+                layout: {
+                    type: 'tabs',
+                },
+            };
         default:
             return undefined;
     }

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

@@ -45,22 +45,52 @@ var moto_1 = require("./widgets/moto");
  */
 function mount(mountElement, session, eventBroadcaster, defaultValues, theme) {
     return __awaiter(this, void 0, void 0, function () {
-        var sessionType;
-        return __generator(this, function (_a) {
-            sessionType = session.metadata.sessionType;
-            // Route to appropriate widget based on session type
-            switch (sessionType) {
-                case 'payment':
-                case 'payment-with-save':
-                    return [2 /*return*/, (0, payment_1.mountPaymentWidget)(mountElement, session, eventBroadcaster, defaultValues, theme)];
-                case 'moto':
-                case 'moto-with-save':
-                case 'save':
-                    return [2 /*return*/, (0, moto_1.mountMotoWidget)(mountElement, session, eventBroadcaster, defaultValues, theme)];
-                default:
-                    throw new Error("Unsupported session type: ".concat(sessionType));
+        var sessionType, widgetController, _a, originalUnmount_1, error_1;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    sessionType = session.metadata.sessionType;
+                    _b.label = 1;
+                case 1:
+                    _b.trys.push([1, 8, , 9]);
+                    widgetController = void 0;
+                    _a = sessionType;
+                    switch (_a) {
+                        case 'payment': return [3 /*break*/, 2];
+                        case 'payment-with-save': return [3 /*break*/, 2];
+                        case 'moto': return [3 /*break*/, 4];
+                        case 'moto-with-save': return [3 /*break*/, 4];
+                        case 'save': return [3 /*break*/, 4];
+                    }
+                    return [3 /*break*/, 6];
+                case 2: return [4 /*yield*/, (0, payment_1.mountPaymentWidget)(mountElement, session, eventBroadcaster, defaultValues, theme)];
+                case 3:
+                    widgetController = _b.sent();
+                    return [3 /*break*/, 7];
+                case 4: return [4 /*yield*/, (0, moto_1.mountMotoWidget)(mountElement, session, eventBroadcaster, defaultValues, theme)];
+                case 5:
+                    widgetController = _b.sent();
+                    return [3 /*break*/, 7];
+                case 6: throw new Error("Unsupported session type: ".concat(sessionType));
+                case 7:
+                    originalUnmount_1 = widgetController.unmount;
+                    widgetController.unmount = function () {
+                        // Remove theme class on unmount (generic cleanup)
+                        if (theme) {
+                            mountElement.classList.remove("lsp-theme-".concat(theme));
+                        }
+                        originalUnmount_1();
+                    };
+                    return [2 /*return*/, widgetController];
+                case 8:
+                    error_1 = _b.sent();
+                    // Clean up theme class if mounting fails
+                    if (theme) {
+                        mountElement.classList.remove("lsp-theme-".concat(theme));
+                    }
+                    throw error_1;
+                case 9: return [2 /*return*/];
             }
-            return [2 /*return*/];
         });
     });
 }

package/dist/cjs/v1/stripe/widgets/moto.js

@@ -44,19 +44,19 @@ var shared_1 = require("../shared");
  */
 function mountMotoWidget(mountElement, session, eventBroadcaster, defaultValues, theme) {
     return __awaiter(this, void 0, void 0, function () {
-        var _a, stripe, elements, paymentOptions, _b, paymentElement, paymentContainer;
+        var _a, stripe, elements, paymentOptions, _b, paymentElement, paymentContainer, customTermsContainer;
         return __generator(this, function (_c) {
             switch (_c.label) {
                 case 0: return [4 /*yield*/, (0, shared_1.initStripe)(session.context, theme)];
                 case 1:
                     _a = _c.sent(), stripe = _a.stripe, elements = _a.elements;
                     paymentOptions = (0, shared_1.createPaymentElementOptions)(defaultValues, theme);
-                    _b = (0, shared_1.createPaymentElement)(elements, paymentOptions, mountElement, eventBroadcaster), paymentElement = _b.element, paymentContainer = _b.container;
+                    _b = (0, shared_1.createPaymentElement)(elements, paymentOptions, mountElement, eventBroadcaster, theme), paymentElement = _b.element, paymentContainer = _b.container, customTermsContainer = _b.customTermsContainer;
                     return [2 /*return*/, {
                             unmount: function () {
-                                (0, shared_1.cleanupElements)(paymentElement, null, paymentContainer, null);
+                                (0, shared_1.cleanupElements)(paymentElement, null, paymentContainer, null, customTermsContainer);
                             },
-                            submit: (0, shared_1.createSubmitHandler)(stripe, elements, session, eventBroadcaster),
+                            submit: (0, shared_1.createSubmitHandler)(stripe, elements, session, eventBroadcaster, null),
                         }];
             }
         });

package/dist/cjs/v1/stripe/widgets/payment.js

@@ -43,7 +43,7 @@ var shared_1 = require("../shared");
  */
 function mountPaymentWidget(mountElement, session, eventBroadcaster, defaultValues, theme) {
     return __awaiter(this, void 0, void 0, function () {
-        var _a, stripe, elements, addressOptions, _b, addressElement, addressContainer, paymentOptions, _c, paymentElement, paymentContainer;
+        var _a, stripe, elements, addressOptions, _b, addressElement, addressContainer, paymentOptions, _c, paymentElement, paymentContainer, customTermsContainer;
         return __generator(this, function (_d) {
             switch (_d.label) {
                 case 0: return [4 /*yield*/, (0, shared_1.initStripe)(session.context, theme)];
@@ -51,13 +51,13 @@ function mountPaymentWidget(mountElement, session, eventBroadcaster, defaultValu
                     _a = _d.sent(), stripe = _a.stripe, elements = _a.elements;
                     addressOptions = (0, shared_1.createAddressElementOptions)(defaultValues);
                     _b = (0, shared_1.createAddressElement)(elements, addressOptions, mountElement), addressElement = _b.element, addressContainer = _b.container;
-                    paymentOptions = (0, shared_1.createPaymentElementOptions)(defaultValues, theme);
-                    _c = (0, shared_1.createPaymentElement)(elements, paymentOptions, mountElement, eventBroadcaster), paymentElement = _c.element, paymentContainer = _c.container;
+                    paymentOptions = (0, shared_1.createPaymentElementOptions)(defaultValues, theme, true);
+                    _c = (0, shared_1.createPaymentElement)(elements, paymentOptions, mountElement, eventBroadcaster, theme), paymentElement = _c.element, paymentContainer = _c.container, customTermsContainer = _c.customTermsContainer;
                     return [2 /*return*/, {
                             unmount: function () {
-                                (0, shared_1.cleanupElements)(paymentElement, addressElement, paymentContainer, addressContainer);
+                                (0, shared_1.cleanupElements)(paymentElement, addressElement, paymentContainer, addressContainer, customTermsContainer);
                             },
-                            submit: (0, shared_1.createSubmitHandler)(stripe, elements, session, eventBroadcaster),
+                            submit: (0, shared_1.createSubmitHandler)(stripe, elements, session, eventBroadcaster, addressElement),
                         }];
             }
         });

package/dist/cjs/v1/widget.js

@@ -46,7 +46,7 @@ var common_1 = require("./logging/common");
 var EventBroadcaster_1 = require("./EventBroadcaster");
 function mountPaymentWidget(session, config) {
     return __awaiter(this, void 0, void 0, function () {
-        var eventBroadcaster, decodedSession, logger_2, widgetController, _a, error_2;
+        var eventBroadcaster, decodedSession, logger_2, configSummary, widgetController, _a, error_2;
         return __generator(this, function (_b) {
             switch (_b.label) {
                 case 0:
@@ -62,7 +62,12 @@ function mountPaymentWidget(session, config) {
                         logger_2.log('info', event.status, { event: event });
                         return event;
                     });
-                    logger_2.log('info', 'Mount');
+                    configSummary = {
+                        theme: config.theme || 'none',
+                        listeners: config.listeners ? Object.keys(config.listeners) : [],
+                        defaultValues: config.defaultValues ? Object.keys(config.defaultValues) : undefined,
+                    };
+                    logger_2.log('info', 'Mount', { configuration: configSummary });
                     widgetController = void 0;
                     _a = decodedSession.psp;
                     switch (_a) {

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export type * from './v1';
+export { THEME_COLORS } from './v1';
 export declare const LightspeedPayments: {
     v1: import("./v1").LightspeedPaymentsV1;
 };

package/dist/index.js

@@ -1,4 +1,5 @@
 import { v1 } from './v1';
+export { THEME_COLORS } from './v1';
 export var LightspeedPayments = {
     v1: v1,
 };

package/dist/v1/index.d.ts

@@ -10,6 +10,7 @@ export type { WidgetController, SessionType, DefaultValues } from './common';
 export type { Event } from './EventBroadcaster';
 export { UnsupportedLocationError, InvalidSessionPayloadError, InvalidSessionError, ProcessingError, } from './error';
 export type { PaymentWidgetConfiguration, PaymentWidgetTheme } from './widget';
+export { THEME_COLORS } from './stripe/themes';
 export type LightspeedPaymentsV1 = {
     /**
      * Mounts the payment widget to the specified mount point.

package/dist/v1/index.js

@@ -6,6 +6,7 @@
  */
 import { mountPaymentWidget } from './widget';
 export { UnsupportedLocationError, InvalidSessionPayloadError, InvalidSessionError, ProcessingError, } from './error';
+export { THEME_COLORS } from './stripe/themes';
 export var v1 = {
     mountPaymentWidget: mountPaymentWidget,
 };

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

@@ -18,8 +18,11 @@ export interface ElementContainers {
 export declare function initStripe(context: StripeContext, theme?: PaymentWidgetTheme): Promise<StripeInitResult>;
 /**
  * Create payment element options with default wallet settings
+ * @param defaultValues - Default values for the payment element
+ * @param theme - Theme configuration
+ * @param hideNameField - Whether to hide the billing details name field (used when address element is present to avoid duplicates with ACH)
  */
-export declare function createPaymentElementOptions(defaultValues?: DefaultValues, theme?: PaymentWidgetTheme): StripePaymentElementOptions;
+export declare function createPaymentElementOptions(defaultValues?: DefaultValues, theme?: PaymentWidgetTheme, hideNameField?: boolean): StripePaymentElementOptions;
 /**
  * Create address element options
  */
@@ -27,9 +30,10 @@ export declare function createAddressElementOptions(defaultValues?: DefaultValue
 /**
  * Create and mount payment element
  */
-export declare function createPaymentElement(elements: StripeElements, options: StripePaymentElementOptions, mountElement: HTMLElement, eventBroadcaster: EventBroadcaster): {
+export declare function createPaymentElement(elements: StripeElements, options: StripePaymentElementOptions, mountElement: HTMLElement, eventBroadcaster: EventBroadcaster, theme?: PaymentWidgetTheme): {
     element: StripePaymentElement;
     container: HTMLElement;
+    customTermsContainer: HTMLElement;
 };
 /**
  * Create and mount address element
@@ -41,16 +45,16 @@ export declare function createAddressElement(elements: StripeElements, options:
 /**
  * Clean up elements and containers
  */
-export declare function cleanupElements(paymentElement: StripePaymentElement, addressElement: StripeAddressElement | null, paymentContainer: HTMLElement, addressContainer: HTMLElement | null): void;
+export declare function cleanupElements(paymentElement: StripePaymentElement, addressElement: StripeAddressElement | null, paymentContainer: HTMLElement, addressContainer: HTMLElement | null, customTermsContainer?: HTMLElement): void;
 /**
  * Handle save card operation
  */
-export declare function handleSaveCard(stripe: Stripe, elements: StripeElements, session: StripeSession): Promise<import("../EventBroadcaster").SucceededResultEvent | import("../EventBroadcaster").PendingResultEvent | import("../EventBroadcaster").DeclinedResultEvent | import("../EventBroadcaster").ErrorResultEvent>;
+export declare function handleSaveCard(stripe: Stripe, elements: StripeElements, session: StripeSession, addressElement?: StripeAddressElement | null): Promise<import("../EventBroadcaster").SucceededResultEvent | import("../EventBroadcaster").PendingResultEvent | import("../EventBroadcaster").DeclinedResultEvent | import("../EventBroadcaster").ErrorResultEvent>;
 /**
  * Handle payment operation
  */
-export declare function handlePayment(stripe: Stripe, elements: StripeElements, session: StripeSession): Promise<import("../EventBroadcaster").SucceededResultEvent | import("../EventBroadcaster").PendingResultEvent | import("../EventBroadcaster").DeclinedResultEvent | import("../EventBroadcaster").ErrorResultEvent>;
+export declare function handlePayment(stripe: Stripe, elements: StripeElements, session: StripeSession, addressElement?: StripeAddressElement | null): Promise<import("../EventBroadcaster").SucceededResultEvent | import("../EventBroadcaster").PendingResultEvent | import("../EventBroadcaster").DeclinedResultEvent | import("../EventBroadcaster").ErrorResultEvent>;
 /**
  * Create common submit handler for widgets
  */
-export declare function createSubmitHandler(stripe: Stripe, elements: StripeElements, session: StripeSession, eventBroadcaster: EventBroadcaster): () => Promise<import("../EventBroadcaster").SucceededResultEvent | import("../EventBroadcaster").PendingResultEvent | import("../EventBroadcaster").DeclinedResultEvent | import("../EventBroadcaster").ErrorResultEvent>;
+export declare function createSubmitHandler(stripe: Stripe, elements: StripeElements, session: StripeSession, eventBroadcaster: EventBroadcaster, addressElement?: StripeAddressElement | null): () => Promise<import("../EventBroadcaster").SucceededResultEvent | import("../EventBroadcaster").PendingResultEvent | import("../EventBroadcaster").DeclinedResultEvent | import("../EventBroadcaster").ErrorResultEvent>;

package/dist/v1/stripe/shared.js

@@ -49,6 +49,7 @@ import { loadStripe, } from '@stripe/stripe-js';
 import { EventBuilder } from './ResultBuilder';
 import { InvalidSessionPayloadError, ProcessingError } from '../error';
 import { getThemeConfig } from './themes';
+import { ACH_TERMS_TEXT, ACH_TERMS_URL } from './terms';
 /**
  * Initialize Stripe with the given context
  */
@@ -76,15 +77,25 @@ export function initStripe(context, theme) {
 }
 /**
  * Create payment element options with default wallet settings
+ * @param defaultValues - Default values for the payment element
+ * @param theme - Theme configuration
+ * @param hideNameField - Whether to hide the billing details name field (used when address element is present to avoid duplicates with ACH)
  */
-export function createPaymentElementOptions(defaultValues, theme) {
-    var options = {
-        wallets: {
+export function createPaymentElementOptions(defaultValues, theme, hideNameField) {
+    if (hideNameField === void 0) { hideNameField = false; }
+    var options = __assign(__assign({ wallets: {
             applePay: 'never',
             googlePay: 'never',
             link: 'never',
+        } }, (hideNameField && {
+        fields: {
+            billingDetails: {
+                name: 'never', // prevent duplicate Name field on the form when using ACH (only when address element is present)
+            },
         },
-    };
+    })), { terms: {
+            usBankAccount: 'never', // Hide Stripe's default T&Cs (shown for ACH payments)
+        } });
     if (defaultValues) {
         options.defaultValues = {
             billingDetails: {
@@ -121,10 +132,49 @@ export function createAddressElementOptions(defaultValues) {
     }
     return addressOptions;
 }
+/**
+ * Create custom Terms & Conditions element for US Bank Account payments
+ * Styling is defined in lightspeed-global-styles.css
+ */
+function createCustomTermsElement() {
+    var termsContainer = document.createElement('div');
+    termsContainer.className = 'stripe-custom-terms-container';
+    termsContainer.style.display = 'none'; // Hidden by default
+    var termsText = document.createElement('p');
+    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>");
+    termsText.innerHTML = "".concat(ACH_TERMS_TEXT.TERMS_PREFIX, " ").concat(stripeTermsLink, " ").concat(ACH_TERMS_TEXT.TERMS_CONJUNCTION, " ").concat(expandableToggle);
+    // Create expandable terms content
+    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>");
+    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) {
+        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);
+        });
+    }
+    return termsContainer;
+}
 /**
  * Create and mount payment element
  */
-export function createPaymentElement(elements, options, mountElement, eventBroadcaster) {
+export function createPaymentElement(elements, options, mountElement, eventBroadcaster, theme) {
+    // Apply theme class to mount element (generic approach)
+    if (theme) {
+        mountElement.classList.add("lsp-theme-".concat(theme));
+    }
     var paymentElement = elements.create('payment', options);
     paymentElement.on('ready', function () {
         return eventBroadcaster.publish({ status: 'Ready', code: 'Ready' });
@@ -133,7 +183,25 @@ export function createPaymentElement(elements, options, mountElement, eventBroad
     paymentContainer.className = 'stripe-payment-element-container';
     mountElement.appendChild(paymentContainer);
     paymentElement.mount(paymentContainer);
-    return { element: paymentElement, container: paymentContainer };
+    // Create custom terms element for US Bank Account
+    var customTermsElement = createCustomTermsElement();
+    mountElement.appendChild(customTermsElement);
+    // Listen for payment method changes to show/hide custom terms
+    paymentElement.on('change', function (event) {
+        var _a;
+        // Show custom terms only when US Bank Account is selected
+        if (((_a = event.value) === null || _a === void 0 ? void 0 : _a.type) === 'us_bank_account') {
+            customTermsElement.style.display = 'block';
+        }
+        else {
+            customTermsElement.style.display = 'none';
+        }
+    });
+    return {
+        element: paymentElement,
+        container: paymentContainer,
+        customTermsContainer: customTermsElement,
+    };
 }
 /**
  * Create and mount address element
@@ -149,7 +217,7 @@ export function createAddressElement(elements, options, mountElement) {
 /**
  * Clean up elements and containers
  */
-export function cleanupElements(paymentElement, addressElement, paymentContainer, addressContainer) {
+export function cleanupElements(paymentElement, addressElement, paymentContainer, addressContainer, customTermsContainer) {
     paymentElement.unmount();
     if (addressElement) {
         addressElement.unmount();
@@ -161,24 +229,44 @@ export function cleanupElements(paymentElement, addressElement, paymentContainer
     if (paymentContainer) {
         paymentContainer.remove();
     }
+    if (customTermsContainer) {
+        customTermsContainer.remove();
+    }
 }
 /**
  * Handle save card operation
  */
-export function handleSaveCard(stripe, elements, session) {
+export function handleSaveCard(stripe, elements, session, addressElement) {
     return __awaiter(this, void 0, void 0, function () {
-        var _a, error, setupIntent;
-        return __generator(this, function (_b) {
-            switch (_b.label) {
-                case 0: return [4 /*yield*/, stripe.confirmSetup({
-                        elements: elements,
-                        redirect: 'if_required',
-                        confirmParams: {
-                            return_url: session.context.redirectUrl || window.location.href,
-                        },
-                    })];
+        var addressValue, _a, billingName, _b, error, setupIntent;
+        var _c;
+        return __generator(this, function (_d) {
+            switch (_d.label) {
+                case 0:
+                    if (!addressElement) return [3 /*break*/, 2];
+                    return [4 /*yield*/, addressElement.getValue()];
                 case 1:
-                    _a = _b.sent(), error = _a.error, setupIntent = _a.setupIntent;
+                    _a = _d.sent();
+                    return [3 /*break*/, 3];
+                case 2:
+                    _a = null;
+                    _d.label = 3;
+                case 3:
+                    addressValue = _a;
+                    billingName = (_c = addressValue === null || addressValue === void 0 ? void 0 : addressValue.value) === null || _c === void 0 ? void 0 : _c.name;
+                    return [4 /*yield*/, stripe.confirmSetup({
+                            elements: elements,
+                            redirect: 'if_required',
+                            confirmParams: __assign({ return_url: session.context.redirectUrl || window.location.href }, (billingName && {
+                                payment_method_data: {
+                                    billing_details: {
+                                        name: billingName,
+                                    },
+                                },
+                            })),
+                        })];
+                case 4:
+                    _b = _d.sent(), error = _b.error, setupIntent = _b.setupIntent;
                     return [2 /*return*/, error
                             ? EventBuilder.fromStripeError(error)
                             : EventBuilder.fromSetupIntent(setupIntent)];
@@ -189,20 +277,37 @@ export function handleSaveCard(stripe, elements, session) {
 /**
  * Handle payment operation
  */
-export function handlePayment(stripe, elements, session) {
+export function handlePayment(stripe, elements, session, addressElement) {
     return __awaiter(this, void 0, void 0, function () {
-        var _a, error, paymentIntent;
-        return __generator(this, function (_b) {
-            switch (_b.label) {
-                case 0: return [4 /*yield*/, stripe.confirmPayment({
-                        elements: elements,
-                        redirect: 'if_required',
-                        confirmParams: {
-                            return_url: session.context.redirectUrl || window.location.href,
-                        },
-                    })];
+        var addressValue, _a, billingName, _b, error, paymentIntent;
+        var _c;
+        return __generator(this, function (_d) {
+            switch (_d.label) {
+                case 0:
+                    if (!addressElement) return [3 /*break*/, 2];
+                    return [4 /*yield*/, addressElement.getValue()];
                 case 1:
-                    _a = _b.sent(), error = _a.error, paymentIntent = _a.paymentIntent;
+                    _a = _d.sent();
+                    return [3 /*break*/, 3];
+                case 2:
+                    _a = null;
+                    _d.label = 3;
+                case 3:
+                    addressValue = _a;
+                    billingName = (_c = addressValue === null || addressValue === void 0 ? void 0 : addressValue.value) === null || _c === void 0 ? void 0 : _c.name;
+                    return [4 /*yield*/, stripe.confirmPayment({
+                            elements: elements,
+                            redirect: 'if_required',
+                            confirmParams: __assign({ return_url: session.context.redirectUrl || window.location.href }, (billingName && {
+                                payment_method_data: {
+                                    billing_details: {
+                                        name: billingName,
+                                    },
+                                },
+                            })),
+                        })];
+                case 4:
+                    _b = _d.sent(), error = _b.error, paymentIntent = _b.paymentIntent;
                     return [2 /*return*/, error
                             ? EventBuilder.fromStripeError(error)
                             : EventBuilder.fromPaymentIntent(paymentIntent)];
@@ -213,7 +318,7 @@ export function handlePayment(stripe, elements, session) {
 /**
  * Create common submit handler for widgets
  */
-export function createSubmitHandler(stripe, elements, session, eventBroadcaster) {
+export function createSubmitHandler(stripe, elements, session, eventBroadcaster, addressElement) {
     var _this = this;
     return function () { return __awaiter(_this, void 0, void 0, function () {
         var result;
@@ -233,13 +338,13 @@ export function createSubmitHandler(stripe, elements, session, eventBroadcaster)
                         throw new InvalidSessionPayloadError();
                     }
                     if (!(session.context.intent === 'save-card')) return [3 /*break*/, 2];
-                    return [4 /*yield*/, handleSaveCard(stripe, elements, session)];
+                    return [4 /*yield*/, handleSaveCard(stripe, elements, session, addressElement)];
                 case 1:
                     result = _a.sent();
                     _a.label = 2;
                 case 2:
                     if (!(session.context.intent === 'payment')) return [3 /*break*/, 4];
-                    return [4 /*yield*/, handlePayment(stripe, elements, session)];
+                    return [4 /*yield*/, handlePayment(stripe, elements, session, addressElement)];
                 case 3:
                     result = _a.sent();
                     _a.label = 4;

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

@@ -0,0 +1,26 @@
+/**
+ * Translatable strings for Stripe payment elements.
+ * These strings are prepared for Transifex extraction.
+ *
+ * Usage with Transifex:
+ * - Extract these strings using Transifex CLI or integration
+ * - Replace with translated versions based on locale
+ */
+export declare const ACH_TERMS_TEXT: {
+    /**
+     * Main terms text displayed for US Bank Account payments.
+     * Contains placeholders for links that will be injected.
+     */
+    readonly TERMS_PREFIX: "By submitting your payment, you agree to authorize payments pursuant to";
+    readonly STRIPE_TERMS_LINK_TEXT: "Stripe's terms";
+    readonly TERMS_CONJUNCTION: "and";
+    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".
+     */
+    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.";
+};
+export declare const ACH_TERMS_URL: {
+    readonly STRIPE_ACH_AUTHORIZATION: "https://stripe.com/legal/ach-payments/authorization";
+};

package/dist/v1/stripe/terms.js

@@ -0,0 +1,26 @@
+/**
+ * Translatable strings for Stripe payment elements.
+ * These strings are prepared for Transifex extraction.
+ *
+ * Usage with Transifex:
+ * - Extract these strings using Transifex CLI or integration
+ * - Replace with translated versions based on locale
+ */
+export var ACH_TERMS_TEXT = {
+    /**
+     * Main terms text displayed for US Bank Account payments.
+     * Contains placeholders for links that will be injected.
+     */
+    TERMS_PREFIX: 'By submitting your payment, you agree to authorize payments pursuant to',
+    STRIPE_TERMS_LINK_TEXT: "Stripe's terms",
+    TERMS_CONJUNCTION: 'and',
+    EXPANDABLE_TERMS_LINK_TEXT: 'these terms',
+    /**
+     * Expanded terms content for ACH authorization.
+     * This is the detailed legal text shown when user expands "these terms".
+     */
+    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.',
+};
+export var ACH_TERMS_URL = {
+    STRIPE_ACH_AUTHORIZATION: 'https://stripe.com/legal/ach-payments/authorization',
+};

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

@@ -1,5 +1,15 @@
 import type { Appearance } from '@stripe/stripe-js';
 import { PaymentWidgetTheme } from '../widget';
+/**
+ * Theme color constants for styling containers
+ * Use these to match the SDK's dark theme colors in your application
+ */
+export declare const THEME_COLORS: {
+    readonly DARK: {
+        readonly BACKGROUND: "#1a1a1a";
+        readonly TEXT: "#ffffff";
+    };
+};
 /**
  * Theme configuration for Stripe Elements appearance
  */

package/dist/v1/stripe/themes.js

@@ -1,3 +1,30 @@
+/**
+ * Theme color constants for styling containers
+ * Use these to match the SDK's dark theme colors in your application
+ */
+export var THEME_COLORS = {
+    DARK: {
+        BACKGROUND: '#1a1a1a',
+        TEXT: '#ffffff',
+    },
+};
+/**
+ * ID for the injected theme stylesheet element
+ */
+var THEME_STYLESHEET_ID = 'lsp-theme-styles';
+/**
+ * Inject theme stylesheets into the document head
+ * Each theme can define its own container styling
+ */
+function ensureThemeStylesheet() {
+    if (document.getElementById(THEME_STYLESHEET_ID)) {
+        return;
+    }
+    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    \n    /* Invoicing theme - no container styling needed */\n    /* .lsp-theme-invoicing { } */\n  ");
+    document.head.appendChild(styleElement);
+}
 /**
  * Get theme configuration based on theme name
  */
@@ -34,6 +61,18 @@ export function getThemeConfig(theme) {
                     type: 'tabs',
                 },
             };
+        case 'dark':
+            // Ensure theme stylesheet is injected
+            ensureThemeStylesheet();
+            return {
+                appearance: {
+                    theme: 'night',
+                },
+                fonts: [],
+                layout: {
+                    type: 'tabs',
+                },
+            };
         default:
             return undefined;
     }

package/dist/v1/stripe/widget.js

@@ -41,22 +41,52 @@ import { mountMotoWidget } from './widgets/moto';
  */
 export function mount(mountElement, session, eventBroadcaster, defaultValues, theme) {
     return __awaiter(this, void 0, void 0, function () {
-        var sessionType;
-        return __generator(this, function (_a) {
-            sessionType = session.metadata.sessionType;
-            // Route to appropriate widget based on session type
-            switch (sessionType) {
-                case 'payment':
-                case 'payment-with-save':
-                    return [2 /*return*/, mountPaymentWidget(mountElement, session, eventBroadcaster, defaultValues, theme)];
-                case 'moto':
-                case 'moto-with-save':
-                case 'save':
-                    return [2 /*return*/, mountMotoWidget(mountElement, session, eventBroadcaster, defaultValues, theme)];
-                default:
-                    throw new Error("Unsupported session type: ".concat(sessionType));
+        var sessionType, widgetController, _a, originalUnmount_1, error_1;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    sessionType = session.metadata.sessionType;
+                    _b.label = 1;
+                case 1:
+                    _b.trys.push([1, 8, , 9]);
+                    widgetController = void 0;
+                    _a = sessionType;
+                    switch (_a) {
+                        case 'payment': return [3 /*break*/, 2];
+                        case 'payment-with-save': return [3 /*break*/, 2];
+                        case 'moto': return [3 /*break*/, 4];
+                        case 'moto-with-save': return [3 /*break*/, 4];
+                        case 'save': return [3 /*break*/, 4];
+                    }
+                    return [3 /*break*/, 6];
+                case 2: return [4 /*yield*/, mountPaymentWidget(mountElement, session, eventBroadcaster, defaultValues, theme)];
+                case 3:
+                    widgetController = _b.sent();
+                    return [3 /*break*/, 7];
+                case 4: return [4 /*yield*/, mountMotoWidget(mountElement, session, eventBroadcaster, defaultValues, theme)];
+                case 5:
+                    widgetController = _b.sent();
+                    return [3 /*break*/, 7];
+                case 6: throw new Error("Unsupported session type: ".concat(sessionType));
+                case 7:
+                    originalUnmount_1 = widgetController.unmount;
+                    widgetController.unmount = function () {
+                        // Remove theme class on unmount (generic cleanup)
+                        if (theme) {
+                            mountElement.classList.remove("lsp-theme-".concat(theme));
+                        }
+                        originalUnmount_1();
+                    };
+                    return [2 /*return*/, widgetController];
+                case 8:
+                    error_1 = _b.sent();
+                    // Clean up theme class if mounting fails
+                    if (theme) {
+                        mountElement.classList.remove("lsp-theme-".concat(theme));
+                    }
+                    throw error_1;
+                case 9: return [2 /*return*/];
             }
-            return [2 /*return*/];
         });
     });
 }

package/dist/v1/stripe/widgets/moto.js

@@ -41,19 +41,19 @@ import { initStripe, createPaymentElementOptions, createPaymentElement, cleanupE
  */
 export function mountMotoWidget(mountElement, session, eventBroadcaster, defaultValues, theme) {
     return __awaiter(this, void 0, void 0, function () {
-        var _a, stripe, elements, paymentOptions, _b, paymentElement, paymentContainer;
+        var _a, stripe, elements, paymentOptions, _b, paymentElement, paymentContainer, customTermsContainer;
         return __generator(this, function (_c) {
             switch (_c.label) {
                 case 0: return [4 /*yield*/, initStripe(session.context, theme)];
                 case 1:
                     _a = _c.sent(), stripe = _a.stripe, elements = _a.elements;
                     paymentOptions = createPaymentElementOptions(defaultValues, theme);
-                    _b = createPaymentElement(elements, paymentOptions, mountElement, eventBroadcaster), paymentElement = _b.element, paymentContainer = _b.container;
+                    _b = createPaymentElement(elements, paymentOptions, mountElement, eventBroadcaster, theme), paymentElement = _b.element, paymentContainer = _b.container, customTermsContainer = _b.customTermsContainer;
                     return [2 /*return*/, {
                             unmount: function () {
-                                cleanupElements(paymentElement, null, paymentContainer, null);
+                                cleanupElements(paymentElement, null, paymentContainer, null, customTermsContainer);
                             },
-                            submit: createSubmitHandler(stripe, elements, session, eventBroadcaster),
+                            submit: createSubmitHandler(stripe, elements, session, eventBroadcaster, null),
                         }];
             }
         });

package/dist/v1/stripe/widgets/payment.js

@@ -40,7 +40,7 @@ import { initStripe, createPaymentElementOptions, createAddressElementOptions, c
  */
 export function mountPaymentWidget(mountElement, session, eventBroadcaster, defaultValues, theme) {
     return __awaiter(this, void 0, void 0, function () {
-        var _a, stripe, elements, addressOptions, _b, addressElement, addressContainer, paymentOptions, _c, paymentElement, paymentContainer;
+        var _a, stripe, elements, addressOptions, _b, addressElement, addressContainer, paymentOptions, _c, paymentElement, paymentContainer, customTermsContainer;
         return __generator(this, function (_d) {
             switch (_d.label) {
                 case 0: return [4 /*yield*/, initStripe(session.context, theme)];
@@ -48,13 +48,13 @@ export function mountPaymentWidget(mountElement, session, eventBroadcaster, defa
                     _a = _d.sent(), stripe = _a.stripe, elements = _a.elements;
                     addressOptions = createAddressElementOptions(defaultValues);
                     _b = createAddressElement(elements, addressOptions, mountElement), addressElement = _b.element, addressContainer = _b.container;
-                    paymentOptions = createPaymentElementOptions(defaultValues, theme);
-                    _c = createPaymentElement(elements, paymentOptions, mountElement, eventBroadcaster), paymentElement = _c.element, paymentContainer = _c.container;
+                    paymentOptions = createPaymentElementOptions(defaultValues, theme, true);
+                    _c = createPaymentElement(elements, paymentOptions, mountElement, eventBroadcaster, theme), paymentElement = _c.element, paymentContainer = _c.container, customTermsContainer = _c.customTermsContainer;
                     return [2 /*return*/, {
                             unmount: function () {
-                                cleanupElements(paymentElement, addressElement, paymentContainer, addressContainer);
+                                cleanupElements(paymentElement, addressElement, paymentContainer, addressContainer, customTermsContainer);
                             },
-                            submit: createSubmitHandler(stripe, elements, session, eventBroadcaster),
+                            submit: createSubmitHandler(stripe, elements, session, eventBroadcaster, addressElement),
                         }];
             }
         });

package/dist/v1/widget.d.ts

@@ -1,6 +1,6 @@
 import { WidgetController, DefaultValues } from './common';
 import { EventListeners } from './EventBroadcaster';
-export type PaymentWidgetTheme = 'invoicing';
+export type PaymentWidgetTheme = 'invoicing' | 'dark';
 export type PaymentWidgetConfiguration = {
     mountPoint: HTMLElement;
     defaultValues?: DefaultValues;

package/dist/v1/widget.js

@@ -43,7 +43,7 @@ import { withLogging } from './logging/common';
 import { EventBroadcaster } from './EventBroadcaster';
 export function mountPaymentWidget(session, config) {
     return __awaiter(this, void 0, void 0, function () {
-        var eventBroadcaster, decodedSession, logger_1, widgetController, _a, error_1;
+        var eventBroadcaster, decodedSession, logger_1, configSummary, widgetController, _a, error_1;
         return __generator(this, function (_b) {
             switch (_b.label) {
                 case 0:
@@ -59,7 +59,12 @@ export function mountPaymentWidget(session, config) {
                         logger_1.log('info', event.status, { event: event });
                         return event;
                     });
-                    logger_1.log('info', 'Mount');
+                    configSummary = {
+                        theme: config.theme || 'none',
+                        listeners: config.listeners ? Object.keys(config.listeners) : [],
+                        defaultValues: config.defaultValues ? Object.keys(config.defaultValues) : undefined,
+                    };
+                    logger_1.log('info', 'Mount', { configuration: configSummary });
                     widgetController = void 0;
                     _a = decodedSession.psp;
                     switch (_a) {

package/package.json

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

package/styles/lightspeed-global-styles.css

@@ -1 +1,62 @@
 @import '@adyen/adyen-web/styles/adyen.css';
+
+/* Custom Terms & Conditions for US Bank Account (ACH) payments */
+.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;
+  font-weight: 400;
+}
+
+.stripe-custom-terms-text a {
+  color: #635bff;
+  text-decoration: underline;
+}
+
+.stripe-custom-terms-text a:hover {
+  color: #0a2540;
+}
+
+/* Expandable terms toggle */
+.stripe-expandable-terms-toggle {
+  color: #635bff;
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+.stripe-expandable-terms-toggle:hover {
+  color: #0a2540;
+}
+
+.stripe-terms-triangle {
+  display: inline-block;
+  font-size: 10px;
+  color: #000000;
+  margin-left: 2px;
+}
+
+/* Expandable terms content */
+.stripe-expandable-terms-content {
+  margin-top: 8px;
+  padding: 0;
+}
+
+.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-weight: 400;
+}
+
+.stripe-expandable-terms-content p:last-child {
+  margin-bottom: 0;
+}