@lightspeed/online-payments-sdk 1.1.4 → 1.1.6

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/themes.js

@@ -1,6 +1,50 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.THEME_COLORS = void 0;
+exports.applyThemeClass = applyThemeClass;
+exports.removeThemeClass = removeThemeClass;
 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';
+/**
+ * Apply theme class to an element
+ */
+function applyThemeClass(element, theme) {
+    element.classList.add("lsp-theme-".concat(theme));
+}
+/**
+ * Remove theme class from an element
+ */
+function removeThemeClass(element, theme) {
+    if (theme) {
+        element.classList.remove("lsp-theme-".concat(theme));
+    }
+}
+/**
+ * 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  ");
+    document.head.appendChild(styleElement);
+}
 /**
  * Get theme configuration based on theme name
  */
@@ -37,6 +81,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

@@ -40,27 +40,57 @@ exports.StripeWidget = void 0;
 exports.mount = mount;
 var payment_1 = require("./widgets/payment");
 var moto_1 = require("./widgets/moto");
+var themes_1 = require("./themes");
 /**
  * Main mount function that delegates to appropriate widget based on session type
  */
 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:
+                    // Apply theme class to mount element
+                    if (theme) {
+                        (0, themes_1.applyThemeClass)(mountElement, theme);
+                    }
+                    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 () {
+                        (0, themes_1.removeThemeClass)(mountElement, theme);
+                        originalUnmount_1();
+                    };
+                    return [2 /*return*/, widgetController];
+                case 8:
+                    error_1 = _b.sent();
+                    // Clean up theme class if mounting fails
+                    (0, themes_1.removeThemeClass)(mountElement, theme);
+                    throw error_1;
+                case 9: return [2 /*return*/];
             }
-            return [2 /*return*/];
         });
     });
 }

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/themes.d.ts

@@ -1,5 +1,23 @@
 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";
+    };
+};
+/**
+ * Apply theme class to an element
+ */
+export declare function applyThemeClass(element: HTMLElement, theme: PaymentWidgetTheme): void;
+/**
+ * Remove theme class from an element
+ */
+export declare function removeThemeClass(element: HTMLElement, theme?: PaymentWidgetTheme): void;
 /**
  * Theme configuration for Stripe Elements appearance
  */

package/dist/v1/stripe/themes.js

@@ -1,3 +1,44 @@
+/**
+ * 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';
+/**
+ * Apply theme class to an element
+ */
+export function applyThemeClass(element, theme) {
+    element.classList.add("lsp-theme-".concat(theme));
+}
+/**
+ * Remove theme class from an element
+ */
+export function removeThemeClass(element, theme) {
+    if (theme) {
+        element.classList.remove("lsp-theme-".concat(theme));
+    }
+}
+/**
+ * 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  ");
+    document.head.appendChild(styleElement);
+}
 /**
  * Get theme configuration based on theme name
  */
@@ -34,6 +75,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

@@ -36,27 +36,57 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 };
 import { mountPaymentWidget } from './widgets/payment';
 import { mountMotoWidget } from './widgets/moto';
+import { applyThemeClass, removeThemeClass } from './themes';
 /**
  * Main mount function that delegates to appropriate widget based on session type
  */
 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:
+                    // Apply theme class to mount element
+                    if (theme) {
+                        applyThemeClass(mountElement, theme);
+                    }
+                    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 () {
+                        removeThemeClass(mountElement, theme);
+                        originalUnmount_1();
+                    };
+                    return [2 /*return*/, widgetController];
+                case 8:
+                    error_1 = _b.sent();
+                    // Clean up theme class if mounting fails
+                    removeThemeClass(mountElement, theme);
+                    throw error_1;
+                case 9: return [2 /*return*/];
             }
-            return [2 /*return*/];
         });
     });
 }

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

package/styles/lightspeed-global-styles.css

@@ -20,10 +20,6 @@
   text-decoration: underline;
 }
 
-.stripe-custom-terms-text a:hover {
-  color: #0a2540;
-}
-
 /* Expandable terms toggle */
 .stripe-expandable-terms-toggle {
   color: #635bff;
@@ -31,10 +27,6 @@
   text-decoration: underline;
 }
 
-.stripe-expandable-terms-toggle:hover {
-  color: #0a2540;
-}
-
 .stripe-terms-triangle {
   display: inline-block;
   font-size: 10px;