@lightspeed/online-payments-sdk 1.8.0 → 1.9.0

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

@@ -0,0 +1,200 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { ProcessingError } from '../../error';
+import { EventBuilder } from '../ResultBuilder';
+import { getCardDeclinedText } from '../localizedText';
+import { cleanupElements, createPaymentElement, createPaymentElementOptions, createSavePaymentMethodElement, initStripe, setupChangeEventHandler, } from '../shared';
+function publishStripeError(error, eventBroadcaster) {
+    return eventBroadcaster.publish(EventBuilder.fromStripeError(error));
+}
+export function mountDeferredMotoWidget(mountElement, session, eventBroadcaster, defaultValues, theme) {
+    return __awaiter(this, void 0, void 0, function () {
+        var _a, stripe, elements, paymentOptions, _b, paymentElement, paymentContainer, customTermsContainer, finalizationError, savePaymentMethod, revision, unmounted, completedSubmission, clearFinalizationError, invalidateSubmission, hasSaveOption, updateSaveCheckboxState, savePaymentMethodContainer, submission, failSubmission, submit;
+        var _this = this;
+        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, false, session.context.businessName);
+                    _b = createPaymentElement(elements, paymentOptions, mountElement, eventBroadcaster), paymentElement = _b.element, paymentContainer = _b.container, customTermsContainer = _b.customTermsContainer;
+                    finalizationError = document.createElement('p');
+                    finalizationError.className = 'stripe-finalization-error';
+                    finalizationError.setAttribute('role', 'alert');
+                    finalizationError.hidden = true;
+                    paymentContainer.insertAdjacentElement('afterend', finalizationError);
+                    savePaymentMethod = false;
+                    revision = 0;
+                    unmounted = false;
+                    clearFinalizationError = function () {
+                        finalizationError.hidden = true;
+                        finalizationError.textContent = '';
+                    };
+                    invalidateSubmission = function () {
+                        revision += 1;
+                        completedSubmission = undefined;
+                        clearFinalizationError();
+                    };
+                    hasSaveOption = session.metadata.sessionType === 'moto-with-save';
+                    updateSaveCheckboxState = setupChangeEventHandler(paymentElement, eventBroadcaster, null, invalidateSubmission, hasSaveOption ? false : undefined);
+                    if (hasSaveOption) {
+                        savePaymentMethodContainer = createSavePaymentMethodElement(mountElement, function (checked) {
+                            savePaymentMethod = checked;
+                            invalidateSubmission();
+                            updateSaveCheckboxState(savePaymentMethod);
+                        }, session.context.locale);
+                    }
+                    failSubmission = function (message) {
+                        eventBroadcaster.publish({ status: 'Error', code: 'Processing' });
+                        throw new ProcessingError(message);
+                    };
+                    submit = function () {
+                        if (unmounted) {
+                            eventBroadcaster.publish({ status: 'Error', code: 'Processing' });
+                            return Promise.reject(new ProcessingError('The payment widget has been unmounted'));
+                        }
+                        if ((completedSubmission === null || completedSubmission === void 0 ? void 0 : completedSubmission.revision) === revision) {
+                            return Promise.resolve(completedSubmission.result);
+                        }
+                        if (submission) {
+                            if (submission.revision === revision) {
+                                return submission.promise;
+                            }
+                            return submission.promise.then(submit, submit);
+                        }
+                        var submissionRevision = revision;
+                        var submissionSavePaymentMethod = savePaymentMethod;
+                        clearFinalizationError();
+                        var assertSubmissionIsCurrent = function () {
+                            if (unmounted) {
+                                return failSubmission('The payment widget was unmounted during submission');
+                            }
+                            if (revision !== submissionRevision) {
+                                return failSubmission('Payment details or save consent changed during submission');
+                            }
+                        };
+                        var promise = (function () { return __awaiter(_this, void 0, void 0, function () {
+                            var submitResult, paymentMethodResult, result;
+                            var _a;
+                            return __generator(this, function (_b) {
+                                switch (_b.label) {
+                                    case 0: return [4 /*yield*/, elements.submit()];
+                                    case 1:
+                                        submitResult = _b.sent();
+                                        assertSubmissionIsCurrent();
+                                        if (submitResult.error) {
+                                            return [2 /*return*/, publishStripeError(submitResult.error, eventBroadcaster)];
+                                        }
+                                        return [4 /*yield*/, stripe.createPaymentMethod({ elements: elements })];
+                                    case 2:
+                                        paymentMethodResult = _b.sent();
+                                        assertSubmissionIsCurrent();
+                                        if (paymentMethodResult.error) {
+                                            return [2 /*return*/, publishStripeError(paymentMethodResult.error, eventBroadcaster)];
+                                        }
+                                        if (!((_a = paymentMethodResult.paymentMethod) === null || _a === void 0 ? void 0 : _a.id)) {
+                                            eventBroadcaster.publish({ status: 'Error', code: 'Unexpected' });
+                                            throw new ProcessingError('Stripe did not return a PaymentMethod ID');
+                                        }
+                                        result = {
+                                            status: 'RequiresFinalization',
+                                            code: 'RequiresFinalization',
+                                            finalizationRequest: {
+                                                paymentData: {
+                                                    type: 'payment-method',
+                                                    id: paymentMethodResult.paymentMethod.id,
+                                                },
+                                                options: {
+                                                    savePaymentMethod: submissionSavePaymentMethod,
+                                                },
+                                            },
+                                        };
+                                        completedSubmission = { revision: submissionRevision, result: result };
+                                        return [2 /*return*/, result];
+                                }
+                            });
+                        }); })();
+                        var currentSubmission = { revision: submissionRevision, promise: promise };
+                        submission = currentSubmission;
+                        var clearSubmission = function () {
+                            if (submission === currentSubmission) {
+                                submission = undefined;
+                            }
+                        };
+                        promise.then(clearSubmission, clearSubmission);
+                        return promise;
+                    };
+                    return [2 /*return*/, {
+                            unmount: function () {
+                                if (unmounted) {
+                                    return;
+                                }
+                                unmounted = true;
+                                revision += 1;
+                                completedSubmission = undefined;
+                                cleanupElements(paymentElement, null, paymentContainer, null, customTermsContainer);
+                                finalizationError.remove();
+                                savePaymentMethodContainer === null || savePaymentMethodContainer === void 0 ? void 0 : savePaymentMethodContainer.remove();
+                            },
+                            submit: submit,
+                            reportFinalizationDecline: function (result, message) {
+                                if (unmounted ||
+                                    (completedSubmission === null || completedSubmission === void 0 ? void 0 : completedSubmission.revision) !== revision ||
+                                    completedSubmission.result.finalizationRequest.paymentData.type !==
+                                        result.finalizationRequest.paymentData.type ||
+                                    completedSubmission.result.finalizationRequest.paymentData.id !==
+                                        result.finalizationRequest.paymentData.id ||
+                                    completedSubmission.result.finalizationRequest.options
+                                        .savePaymentMethod !==
+                                        result.finalizationRequest.options.savePaymentMethod) {
+                                    return;
+                                }
+                                invalidateSubmission();
+                                var trimmedMessage = message.trim();
+                                finalizationError.textContent =
+                                    trimmedMessage === 'Payment declined.' || !trimmedMessage
+                                        ? getCardDeclinedText(session.context.locale)
+                                        : trimmedMessage;
+                                finalizationError.hidden = false;
+                                paymentElement.focus();
+                                eventBroadcaster.publish({ status: 'Declined', code: 'Generic' });
+                            },
+                        }];
+            }
+        });
+    });
+}

package/dist/v1/stripe/widgets/moto.d.ts

@@ -1,4 +1,4 @@
-import { StripeSession } from '../session';
+import { IntentBoundStripeSession } from '../session';
 import { DefaultValues, WidgetController } from '../../common';
 import { EventBroadcaster } from '../../EventBroadcaster';
 import { PaymentWidgetTheme } from '../../widget';
@@ -6,4 +6,4 @@ import { PaymentWidgetTheme } from '../../widget';
  * Mount MOTO widget for moto and moto-with-save session types
  * MOTO (Mail Order/Telephone Order) forms don't require address collection
  */
-export declare function mountMotoWidget(mountElement: HTMLElement, session: StripeSession, eventBroadcaster: EventBroadcaster, defaultValues?: DefaultValues, theme?: PaymentWidgetTheme): Promise<WidgetController>;
+export declare function mountMotoWidget(mountElement: HTMLElement, session: IntentBoundStripeSession, eventBroadcaster: EventBroadcaster, defaultValues?: DefaultValues, theme?: PaymentWidgetTheme): Promise<WidgetController>;

package/dist/v1/stripe/widgets/payment.d.ts

@@ -1,8 +1,8 @@
-import { StripeSession } from '../session';
+import { IntentBoundStripeSession } from '../session';
 import { DefaultValues, WidgetController } from '../../common';
 import { EventBroadcaster } from '../../EventBroadcaster';
 import { PaymentWidgetTheme } from '../../widget';
 /**
  * Mount payment widget for payment and payment-with-save session types
  */
-export declare function mountPaymentWidget(mountElement: HTMLElement, session: StripeSession, eventBroadcaster: EventBroadcaster, defaultValues?: DefaultValues, theme?: PaymentWidgetTheme): Promise<WidgetController>;
+export declare function mountPaymentWidget(mountElement: HTMLElement, session: IntentBoundStripeSession, eventBroadcaster: EventBroadcaster, defaultValues?: DefaultValues, theme?: PaymentWidgetTheme): Promise<WidgetController>;

package/dist/v1/widget.js

@@ -41,9 +41,19 @@ import { UnsupportedLocationError } from './error';
 import { getLogger } from './logging/logger';
 import { withLogging } from './logging/common';
 import { EventBroadcaster } from './EventBroadcaster';
+import { SDK_VERSION } from '../version';
+// Exposes the running SDK version on the mount point so it can be inspected
+// in browser devtools (e.g. `document.querySelector('[data-lightspeed-payments-sdk-version]')`).
+var SDK_VERSION_ATTRIBUTE = 'data-lightspeed-payments-sdk-version';
+function markMountPointWithSdkVersion(mountPoint) {
+    mountPoint.setAttribute(SDK_VERSION_ATTRIBUTE, SDK_VERSION);
+}
+function unmarkMountPointWithSdkVersion(mountPoint) {
+    mountPoint.removeAttribute(SDK_VERSION_ATTRIBUTE);
+}
 export function mountPaymentWidget(session, config) {
     return __awaiter(this, void 0, void 0, function () {
-        var eventBroadcaster, decodedSession, logger_1, configSummary, widgetController, _a, error_1;
+        var eventBroadcaster, decodedSession, logger_1, configSummary, widgetController, _a, unmount_1, error_1;
         return __generator(this, function (_b) {
             switch (_b.label) {
                 case 0:
@@ -82,8 +92,17 @@ export function mountPaymentWidget(session, config) {
                     return [3 /*break*/, 7];
                 case 6: throw new UnsupportedLocationError();
                 case 7:
+                    markMountPointWithSdkVersion(config.mountPoint);
                     widgetController.submit = withLogging(logger_1, 'Submit', widgetController.submit);
-                    widgetController.unmount = withLogging(logger_1, 'Unmount', widgetController.unmount);
+                    unmount_1 = widgetController.unmount;
+                    widgetController.unmount = withLogging(logger_1, 'Unmount', function () {
+                        try {
+                            unmount_1();
+                        }
+                        finally {
+                            unmarkMountPointWithSdkVersion(config.mountPoint);
+                        }
+                    });
                     return [2 /*return*/, widgetController];
                 case 8:
                     error_1 = _b.sent();
@@ -100,7 +119,7 @@ export function mountPaymentWidget(session, config) {
 // Internal impl of v1.mountMultiStepWidget (additive; event-based flows unchanged).
 export function mountMultiStepWidget(session, config) {
     return __awaiter(this, void 0, void 0, function () {
-        var eventBroadcaster, decodedSession, logger_2, controller, _a, error_2;
+        var eventBroadcaster, decodedSession, logger_2, controller, _a, unmount_2, error_2;
         return __generator(this, function (_b) {
             switch (_b.label) {
                 case 0:
@@ -133,9 +152,18 @@ export function mountMultiStepWidget(session, config) {
                     return [3 /*break*/, 5];
                 case 4: throw new UnsupportedLocationError();
                 case 5:
+                    markMountPointWithSdkVersion(config.mountPoint);
                     controller.submit = withLogging(logger_2, 'Submit', controller.submit);
                     controller.handleNextAction = withLogging(logger_2, 'HandleNextAction', controller.handleNextAction);
-                    controller.unmount = withLogging(logger_2, 'Unmount', controller.unmount);
+                    unmount_2 = controller.unmount;
+                    controller.unmount = withLogging(logger_2, 'Unmount', function () {
+                        try {
+                            unmount_2();
+                        }
+                        finally {
+                            unmarkMountPointWithSdkVersion(config.mountPoint);
+                        }
+                    });
                     return [2 /*return*/, controller];
                 case 6:
                     error_2 = _b.sent();

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const SDK_VERSION = "1.8.0";
+export declare const SDK_VERSION = "1.9.0";

package/dist/version.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightspeed/online-payments-sdk",
-  "version": "1.8.0",
+  "version": "1.9.0",
   "description": "Process online-payments with Lightspeed Payments",
   "author": "Lightspeed Commerce Inc.",
   "license": "SEE LICENSE IN LICENSE.md",
@@ -14,8 +14,11 @@
     "dist",
     "styles"
   ],
-  "sideEffects": false,
+  "sideEffects": [
+    "styles/**/*.css"
+  ],
   "scripts": {
+    "pretest": "node scripts/generate-version.js",
     "test": "jest --no-cache --detectOpenHandles",
     "lint": "gts lint",
     "fix": "gts fix",
@@ -25,8 +28,10 @@
     "check-package-content": "npm pack --dry-run",
     "prebuild": "node scripts/generate-version.js",
     "build": "npm run build:esm && npm run build:cjs",
+    "postbuild": "node scripts/check-version.js",
     "build:esm": "tsc --module esnext --target es5 --outDir dist --downlevelIteration",
-    "build:cjs": "tsc --module commonjs --target es5 --outDir dist/cjs --downlevelIteration --declaration false"
+    "build:cjs": "tsc --module commonjs --target es5 --outDir dist/cjs --downlevelIteration --declaration false",
+    "prepack": "node scripts/check-version.js"
   },
   "devDependencies": {
     "@eslint/js": "^9.33.0",

package/styles/lightspeed-global-styles.css

@@ -84,6 +84,84 @@
   color: #30313d;
 }
 
+.stripe-save-payment-method-container {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin: 16px 0 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
+    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  font-size: 0.93rem;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #30313d;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+.stripe-save-payment-method-checkbox {
+  appearance: none;
+  -webkit-appearance: none;
+  -webkit-user-select: none;
+  box-sizing: border-box;
+  flex: 0 0 20px;
+  width: 20px;
+  height: 20px;
+  margin: 0;
+  border: 1px solid #cfd7df;
+  border-radius: 5px;
+  background-color: #ffffff;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
+  cursor: pointer;
+  transition:
+    background-color 100ms ease,
+    border-color 100ms ease,
+    box-shadow 100ms ease;
+  user-select: none;
+}
+
+.stripe-save-payment-method-checkbox:hover {
+  border-color: #8792a2;
+}
+
+.stripe-save-payment-method-checkbox:focus-visible {
+  border-color: #0570de;
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(5, 112, 222, 0.2);
+}
+
+.stripe-save-payment-method-checkbox:checked {
+  border-color: #0570de;
+  background-color: #0570de;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.25' d='m3.25 8.25 3 3 6.5-6.5'/%3E%3C/svg%3E");
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 16px 16px;
+  box-shadow: 0 0 0 3px rgba(5, 112, 222, 0.2);
+}
+
+.stripe-save-payment-method-checkbox:checked:focus-visible {
+  box-shadow: 0 0 0 3px rgba(5, 112, 222, 0.28);
+}
+
+.stripe-save-payment-method-text {
+  min-width: 0;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+.stripe-finalization-error {
+  margin: 12px 0 0;
+  color: #df1b41;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
+    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  font-size: 0.93rem;
+  font-weight: 400;
+  line-height: 1.5;
+}
+
 /* Invoicing theme: only override font-family to match the Inter font
    passed to Stripe Elements via the invoicing theme config. */
 
@@ -93,7 +171,9 @@
 
 .lsp-theme-invoicing .stripe-custom-terms-text,
 .lsp-theme-invoicing .stripe-expandable-terms-content p,
-.lsp-theme-invoicing .stripe-card-consent-text {
+.lsp-theme-invoicing .stripe-card-consent-text,
+.lsp-theme-invoicing .stripe-save-payment-method-container,
+.lsp-theme-invoicing .stripe-finalization-error {
   font-family: 'Inter', system-ui, sans-serif;
 }