@lightspeed/online-payments-sdk 1.1.5 → 1.2.0

package/dist/cjs/v1/EventBroadcaster.js

@@ -22,6 +22,7 @@ var EventBroadcaster = /** @class */ (function () {
             Pending: (listeners === null || listeners === void 0 ? void 0 : listeners.onPending) || noOpListener,
             Error: (listeners === null || listeners === void 0 ? void 0 : listeners.onError) || noOpListener,
             Ready: (listeners === null || listeners === void 0 ? void 0 : listeners.onReady) || noOpListener,
+            Change: (listeners === null || listeners === void 0 ? void 0 : listeners.onChange) || noOpListener,
         };
     }
     EventBroadcaster.prototype.convertInternalEventToExternal = function (event) {

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

@@ -181,11 +181,7 @@ function createCustomTermsElement() {
 /**
  * Create and mount payment element
  */
-function createPaymentElement(elements, options, mountElement, eventBroadcaster, theme) {
-    // Apply theme class to mount element (generic approach)
-    if (theme) {
-        mountElement.classList.add("lsp-theme-".concat(theme));
-    }
+function createPaymentElement(elements, options, mountElement, eventBroadcaster) {
     var paymentElement = elements.create('payment', options);
     paymentElement.on('ready', function () {
         return eventBroadcaster.publish({ status: 'Ready', code: 'Ready' });
@@ -197,9 +193,18 @@ function createPaymentElement(elements, options, mountElement, eventBroadcaster,
     // Create custom terms element for US Bank Account
     var customTermsElement = createCustomTermsElement();
     mountElement.appendChild(customTermsElement);
-    // Listen for payment method changes to show/hide custom terms
+    // Track previous complete state to only emit onChange event on state transitions
+    var previousComplete = null;
     paymentElement.on('change', function (event) {
         var _a;
+        // Emit onChange event only when "complete" status transitions
+        if (event.complete !== previousComplete) {
+            previousComplete = event.complete;
+            eventBroadcaster.publish({
+                status: 'Change',
+                code: event.complete ? 'Complete' : 'Incomplete',
+            });
+        }
         // 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';

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

@@ -1,6 +1,8 @@
 "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
@@ -16,6 +18,20 @@ exports.THEME_COLORS = {
  * 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
@@ -26,7 +42,7 @@ function ensureThemeStylesheet() {
     }
     var styleElement = document.createElement('style');
     styleElement.id = THEME_STYLESHEET_ID;
-    styleElement.textContent = "\n    /* Dark theme styles for the mount element */\n    .lsp-theme-dark {\n      background-color: ".concat(exports.THEME_COLORS.DARK.BACKGROUND, " !important;\n      color: ").concat(exports.THEME_COLORS.DARK.TEXT, " !important;\n    }\n    /* Dark theme styles for Stripe custom terms elements */\n    .lsp-theme-dark .stripe-terms-triangle {\n      color: ").concat(exports.THEME_COLORS.DARK.TEXT, " !important;\n    }\n    .lsp-theme-dark .stripe-custom-terms-text {\n      color: ").concat(exports.THEME_COLORS.DARK.TEXT, " !important;\n    }\n    .lsp-theme-dark .stripe-expandable-terms-content p {\n      color: ").concat(exports.THEME_COLORS.DARK.TEXT, " !important;\n    }\n    \n    /* Invoicing theme - no container styling needed */\n    /* .lsp-theme-invoicing { } */\n  ");
+    styleElement.textContent = "\n    /* Dark theme styles for the mount element */\n    .lsp-theme-dark {\n      background-color: ".concat(exports.THEME_COLORS.DARK.BACKGROUND, " !important;\n      color: ").concat(exports.THEME_COLORS.DARK.TEXT, " !important;\n    }\n    /* Dark theme styles for Stripe custom terms elements */\n    .lsp-theme-dark .stripe-terms-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);
 }
 /**

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

@@ -40,6 +40,7 @@ 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
  */
@@ -49,6 +50,10 @@ function mount(mountElement, session, eventBroadcaster, defaultValues, theme) {
         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:
@@ -75,19 +80,14 @@ function mount(mountElement, session, eventBroadcaster, defaultValues, theme) {
                 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));
-                        }
+                        (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
-                    if (theme) {
-                        mountElement.classList.remove("lsp-theme-".concat(theme));
-                    }
+                    (0, themes_1.removeThemeClass)(mountElement, theme);
                     throw error_1;
                 case 9: 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, theme), paymentElement = _b.element, paymentContainer = _b.container, customTermsContainer = _b.customTermsContainer;
+                    _b = (0, shared_1.createPaymentElement)(elements, paymentOptions, mountElement, eventBroadcaster), 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, theme), paymentElement = _c.element, paymentContainer = _c.container, customTermsContainer = _c.customTermsContainer;
+                    _c = (0, shared_1.createPaymentElement)(elements, paymentOptions, mountElement, eventBroadcaster), 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/v1/EventBroadcaster.d.ts

@@ -1,5 +1,5 @@
 import { SupportedErrorCodes } from './error';
-export type Status = 'Succeeded' | 'Declined' | 'Pending' | 'Error' | 'Ready';
+export type Status = 'Succeeded' | 'Declined' | 'Pending' | 'Error' | 'Ready' | 'Change';
 export type BaseEvent = {
     loggingEnrichment?: object;
 };
@@ -19,11 +19,15 @@ export type ReadyEvent = BaseEvent & {
     status: 'Ready';
     code: 'Ready';
 };
+export type ChangeEvent = BaseEvent & {
+    status: 'Change';
+    code: 'Complete' | 'Incomplete';
+};
 export type ErrorResultEvent = BaseEvent & {
     code: SupportedErrorCodes;
     status: 'Error';
 };
-export type InternalEvent = SucceededResultEvent | PendingResultEvent | DeclinedResultEvent | ErrorResultEvent | ReadyEvent;
+export type InternalEvent = SucceededResultEvent | PendingResultEvent | DeclinedResultEvent | ErrorResultEvent | ReadyEvent | ChangeEvent;
 export type Event = Omit<InternalEvent, 'loggingEnrichment'>;
 export type EventHandler = (result: Event) => void;
 export type EventMiddleware = (event: InternalEvent) => InternalEvent | void;

package/dist/v1/EventBroadcaster.js

@@ -19,6 +19,7 @@ var EventBroadcaster = /** @class */ (function () {
             Pending: (listeners === null || listeners === void 0 ? void 0 : listeners.onPending) || noOpListener,
             Error: (listeners === null || listeners === void 0 ? void 0 : listeners.onError) || noOpListener,
             Ready: (listeners === null || listeners === void 0 ? void 0 : listeners.onReady) || noOpListener,
+            Change: (listeners === null || listeners === void 0 ? void 0 : listeners.onChange) || noOpListener,
         };
     }
     EventBroadcaster.prototype.convertInternalEventToExternal = function (event) {

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, theme?: PaymentWidgetTheme): {
+export declare function createPaymentElement(elements: StripeElements, options: StripePaymentElementOptions, mountElement: HTMLElement, eventBroadcaster: EventBroadcaster): {
     element: StripePaymentElement;
     container: HTMLElement;
     customTermsContainer: HTMLElement;

package/dist/v1/stripe/shared.js

@@ -170,11 +170,7 @@ function createCustomTermsElement() {
 /**
  * Create and mount payment element
  */
-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));
-    }
+export function createPaymentElement(elements, options, mountElement, eventBroadcaster) {
     var paymentElement = elements.create('payment', options);
     paymentElement.on('ready', function () {
         return eventBroadcaster.publish({ status: 'Ready', code: 'Ready' });
@@ -186,9 +182,18 @@ export function createPaymentElement(elements, options, mountElement, eventBroad
     // Create custom terms element for US Bank Account
     var customTermsElement = createCustomTermsElement();
     mountElement.appendChild(customTermsElement);
-    // Listen for payment method changes to show/hide custom terms
+    // Track previous complete state to only emit onChange event on state transitions
+    var previousComplete = null;
     paymentElement.on('change', function (event) {
         var _a;
+        // Emit onChange event only when "complete" status transitions
+        if (event.complete !== previousComplete) {
+            previousComplete = event.complete;
+            eventBroadcaster.publish({
+                status: 'Change',
+                code: event.complete ? 'Complete' : 'Incomplete',
+            });
+        }
         // 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';

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

@@ -10,6 +10,14 @@ export declare const THEME_COLORS: {
         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

@@ -12,6 +12,20 @@ export var THEME_COLORS = {
  * 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
@@ -22,7 +36,7 @@ function ensureThemeStylesheet() {
     }
     var styleElement = document.createElement('style');
     styleElement.id = THEME_STYLESHEET_ID;
-    styleElement.textContent = "\n    /* Dark theme styles for the mount element */\n    .lsp-theme-dark {\n      background-color: ".concat(THEME_COLORS.DARK.BACKGROUND, " !important;\n      color: ").concat(THEME_COLORS.DARK.TEXT, " !important;\n    }\n    /* Dark theme styles for Stripe custom terms elements */\n    .lsp-theme-dark .stripe-terms-triangle {\n      color: ").concat(THEME_COLORS.DARK.TEXT, " !important;\n    }\n    .lsp-theme-dark .stripe-custom-terms-text {\n      color: ").concat(THEME_COLORS.DARK.TEXT, " !important;\n    }\n    .lsp-theme-dark .stripe-expandable-terms-content p {\n      color: ").concat(THEME_COLORS.DARK.TEXT, " !important;\n    }\n    \n    /* Invoicing theme - no container styling needed */\n    /* .lsp-theme-invoicing { } */\n  ");
+    styleElement.textContent = "\n    /* Dark theme styles for the mount element */\n    .lsp-theme-dark {\n      background-color: ".concat(THEME_COLORS.DARK.BACKGROUND, " !important;\n      color: ").concat(THEME_COLORS.DARK.TEXT, " !important;\n    }\n    /* Dark theme styles for Stripe custom terms elements */\n    .lsp-theme-dark .stripe-terms-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);
 }
 /**

package/dist/v1/stripe/widget.js

@@ -36,6 +36,7 @@ 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
  */
@@ -45,6 +46,10 @@ export function mount(mountElement, session, eventBroadcaster, defaultValues, th
         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:
@@ -71,19 +76,14 @@ export function mount(mountElement, session, eventBroadcaster, defaultValues, th
                 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));
-                        }
+                        removeThemeClass(mountElement, 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));
-                    }
+                    removeThemeClass(mountElement, theme);
                     throw error_1;
                 case 9: 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, theme), paymentElement = _b.element, paymentContainer = _b.container, customTermsContainer = _b.customTermsContainer;
+                    _b = createPaymentElement(elements, paymentOptions, mountElement, eventBroadcaster), 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, theme), paymentElement = _c.element, paymentContainer = _c.container, customTermsContainer = _c.customTermsContainer;
+                    _c = createPaymentElement(elements, paymentOptions, mountElement, eventBroadcaster), paymentElement = _c.element, paymentContainer = _c.container, customTermsContainer = _c.customTermsContainer;
                     return [2 /*return*/, {
                             unmount: function () {
                                 cleanupElements(paymentElement, addressElement, paymentContainer, addressContainer, customTermsContainer);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightspeed/online-payments-sdk",
-  "version": "1.1.5",
+  "version": "1.2.0",
   "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;