@lightspeed/online-payments-sdk 1.1.4 → 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

@@ -181,7 +181,11 @@ function createCustomTermsElement() {
 /**
  * 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' });

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

@@ -51,7 +51,7 @@ function mountMotoWidget(mountElement, session, eventBroadcaster, defaultValues,
                 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, customTermsContainer = _b.customTermsContainer;
+                    _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, customTermsContainer);

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

@@ -52,7 +52,7 @@ function mountPaymentWidget(mountElement, session, eventBroadcaster, defaultValu
                     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, true);
-                    _c = (0, shared_1.createPaymentElement)(elements, paymentOptions, mountElement, eventBroadcaster), paymentElement = _c.element, paymentContainer = _c.container, customTermsContainer = _c.customTermsContainer;
+                    _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, customTermsContainer);

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

@@ -30,7 +30,7 @@ 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;

package/dist/v1/stripe/shared.js

@@ -170,7 +170,11 @@ function createCustomTermsElement() {
 /**
  * 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' });

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

@@ -48,7 +48,7 @@ export function mountMotoWidget(mountElement, session, eventBroadcaster, default
                 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, customTermsContainer = _b.customTermsContainer;
+                    _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, customTermsContainer);

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

@@ -49,7 +49,7 @@ export function mountPaymentWidget(mountElement, session, eventBroadcaster, defa
                     addressOptions = createAddressElementOptions(defaultValues);
                     _b = createAddressElement(elements, addressOptions, mountElement), addressElement = _b.element, addressContainer = _b.container;
                     paymentOptions = createPaymentElementOptions(defaultValues, theme, true);
-                    _c = createPaymentElement(elements, paymentOptions, mountElement, eventBroadcaster), paymentElement = _c.element, paymentContainer = _c.container, customTermsContainer = _c.customTermsContainer;
+                    _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, customTermsContainer);

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.4",
+  "version": "1.1.5",
   "description": "Process online-payments with Lightspeed Payments",
   "author": "Lightspeed Commerce Inc.",
   "license": "SEE LICENSE IN LICENSE.md",