@lightspeed/online-payments-sdk 1.7.3 → 1.9.0

package/README.md

@@ -31,6 +31,7 @@ Mount the widget with the payment session from your integration:
 
 ```ts
 import {LightspeedPayments} from '@lightspeed/online-payments-sdk';
+import '@lightspeed/online-payments-sdk/styles/lightspeed-global-styles.css';
 
 const mountPoint = document.getElementById('payment-widget');
 
@@ -109,6 +110,23 @@ submitButton.addEventListener('click', async () => {
 controller.unmount();
 ```
 
+`submit()` returns `Promise<WidgetSubmitResult>`. Existing intent-bound Stripe
+and Adyen sessions retain their runtime behavior, but TypeScript integrations
+that explicitly treat the submit result as `Event` must first handle or exclude
+the new `RequiresFinalization` status. Listener callbacks are unchanged and
+continue to receive only `Event`.
+
+### Deferred MOTO payments
+
+Deferred Stripe `moto` and `moto-with-save` sessions return a
+`RequiresFinalization` result for backend finalization instead of reporting
+payment success. Integrations opting into this mode must forward the returned
+artifact unchanged and handle definitive declines through
+`reportFinalizationDecline`.
+
+The complete [deferred Stripe MOTO integration guide](https://github.com/lightspeed-payments/lsp-online-payments-sdk/blob/main/packages/lsp-online-payments-sdk/docs/deferred-stripe-moto.md)
+is maintained in the GitHub repository and is not included in the npm package.
+
 ## Theming
 
 Use `theme` to select a widget appearance:
@@ -133,3 +151,22 @@ import {THEME_COLORS} from '@lightspeed/online-payments-sdk';
 wrapper.style.backgroundColor = THEME_COLORS.DARK.BACKGROUND;
 wrapper.style.color = THEME_COLORS.DARK.TEXT;
 ```
+
+## Checking the SDK version
+
+The running SDK version is available at runtime, matching the version published to npm:
+
+```ts
+import {LightspeedPayments, SDK_VERSION} from '@lightspeed/online-payments-sdk';
+
+console.log(LightspeedPayments.version); // e.g. "1.8.0"
+console.log(SDK_VERSION); // e.g. "1.8.0"
+```
+
+While a widget is mounted, its mount element also carries a `data-lightspeed-payments-sdk-version` attribute, so the running version can be inspected directly in browser devtools without any application code:
+
+```html
+<div id="payment-widget" data-lightspeed-payments-sdk-version="1.8.0"></div>
+```
+
+The attribute is removed when `controller.unmount()` is called.

package/dist/cjs/index.js

@@ -1,9 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.LightspeedPayments = exports.THEME_COLORS = void 0;
+exports.LightspeedPayments = exports.SDK_VERSION = exports.THEME_COLORS = void 0;
 var v1_1 = require("./v1");
+var version_1 = require("./version");
+Object.defineProperty(exports, "SDK_VERSION", { enumerable: true, get: function () { return version_1.SDK_VERSION; } });
 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,
+    version: version_1.SDK_VERSION,
 };

package/dist/cjs/v1/EventBroadcaster.js

@@ -66,6 +66,7 @@ var EventBroadcaster = /** @class */ (function () {
         var processedEvent = this.applyMiddlewares(event);
         var eventListener = this.listenersRegistry[event.status];
         eventListener(processedEvent);
+        return processedEvent;
     };
     return EventBroadcaster;
 }());

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

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NO_SHOW_CONSENT_REASON = exports.NO_SHOW_CONSENT_TEXT = void 0;
+exports.buildNoShowConsentText = buildNoShowConsentText;
+// SDK-owned consent copy for the card-save (no-show) flow — the SDK owns the
+// wording rather than taking free-form text from the backend (mirrors
+// `PARTNER_CARD_CONSENT_TEXT` in `stripe/terms.ts`). Plain constants, so they can
+// be extracted for Transifex later. `{business}`/`{reason}` interpolated at render.
+exports.NO_SHOW_CONSENT_TEXT = {
+    MANDATORY_TEMPLATE: 'By providing your card information, you authorize {business} to charge your card for {reason} in accordance with their terms.',
+};
+// Hardcoded for now; may become a per-session input from the backend later.
+exports.NO_SHOW_CONSENT_REASON = 'a no-show fee if you do not honor your reservation';
+function buildNoShowConsentText(businessName) {
+    return exports.NO_SHOW_CONSENT_TEXT.MANDATORY_TEMPLATE.replace(/\{business\}/g, function () { return businessName; }).replace(/\{reason\}/g, function () { return exports.NO_SHOW_CONSENT_REASON; });
+}

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

@@ -39,13 +39,31 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AdyenWidget = void 0;
 var adyen_web_1 = require("@adyen/adyen-web");
 var ResultBuilder_1 = require("./ResultBuilder");
+var terms_1 = require("./terms");
 function mount(mountElement, session, eventBroadcaster) {
+    return __awaiter(this, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            return [2 /*return*/, mountSessionsFlow(mountElement, session.context, eventBroadcaster)];
+        });
+    });
+}
+// Entry for the multi-step contract (v1.mountMultiStepWidget). Kept separate
+// from `mount` so the event-based Sessions flow keeps its WidgetController shape.
+function mountMultiStep(mountElement, session, eventBroadcaster, onRequiresFinalization) {
+    return __awaiter(this, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            return [2 /*return*/, mountAdvancedFlow(mountElement, session.context, eventBroadcaster, onRequiresFinalization)];
+        });
+    });
+}
+function mountSessionsFlow(mountElement, context, eventBroadcaster) {
     return __awaiter(this, void 0, void 0, function () {
         var checkoutConfig, checkout, dropinConfiguration, dropIn;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
-                    checkoutConfig = createAdyenConfiguration(session.context, eventBroadcaster);
+                    injectAdyenCssModuleFix();
+                    checkoutConfig = createSessionsConfiguration(context, eventBroadcaster);
                     return [4 /*yield*/, (0, adyen_web_1.AdyenCheckout)(checkoutConfig)];
                 case 1:
                     checkout = _a.sent();
@@ -66,7 +84,163 @@ function mount(mountElement, session, eventBroadcaster) {
         });
     });
 }
-function createAdyenConfiguration(context, eventBroadcaster) {
+// Multi-step Advanced flow: submit() surfaces the encrypted payment data for
+// the host to POST; handleNextAction() feeds the server response back to drive
+// native 3DS2. See MultiStepController in common.ts.
+function mountAdvancedFlow(mountElement, context, eventBroadcaster, onRequiresFinalization) {
+    return __awaiter(this, void 0, void 0, function () {
+        var stashedActions, pendingResolve, isValid, checkoutConfig, checkout, dropinConfiguration, dropIn;
+        var _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    isValid = false;
+                    checkoutConfig = {
+                        clientKey: context.clientKey,
+                        environment: context.env,
+                        countryCode: context.countryCode,
+                        locale: context.locale,
+                        amount: { value: (_a = context.amount) !== null && _a !== void 0 ? _a : 0, currency: context.currency },
+                        paymentMethodsResponse: context.paymentMethods,
+                        analytics: { enabled: false },
+                        onSubmit: function (state, _component, actions) {
+                            stashedActions = actions;
+                            var result = {
+                                status: 'RequiresFinalization',
+                                paymentData: {
+                                    paymentMethod: state.data.paymentMethod,
+                                    browserInfo: state.data.browserInfo,
+                                    origin: window.location.origin,
+                                },
+                                saveSessionId: context.saveSessionId,
+                            };
+                            if (pendingResolve) {
+                                pendingResolve(result);
+                                pendingResolve = undefined;
+                            }
+                            else {
+                                // Express methods (Google Pay / Apple Pay) fire onSubmit from their own
+                                // button with no submit() pending — hand the result to the host instead.
+                                onRequiresFinalization === null || onRequiresFinalization === void 0 ? void 0 : onRequiresFinalization(result);
+                            }
+                        },
+                        onAdditionalDetails: function (state, _component, actions) {
+                            stashedActions = actions;
+                            pendingResolve === null || pendingResolve === void 0 ? void 0 : pendingResolve({
+                                status: 'RequiresAction',
+                                paymentData: {
+                                    details: state.data.details,
+                                    paymentData: state.data.paymentData,
+                                },
+                                saveSessionId: context.saveSessionId,
+                            });
+                            pendingResolve = undefined;
+                        },
+                        onError: function (error) {
+                            // Resolve a waiting submit()/handleNextAction() so the host doesn't hang.
+                            if (pendingResolve) {
+                                pendingResolve({ status: 'Error', error: error });
+                                pendingResolve = undefined;
+                                return;
+                            }
+                            eventBroadcaster.publish({
+                                status: 'Error',
+                                code: 'Processing',
+                                loggingEnrichment: error,
+                            });
+                        },
+                        // Surface form validity so the host can gate its own submit button; onSubmit
+                        // never fires for an invalid form, so this is the host's only validity signal.
+                        onChange: function (state) {
+                            var _a;
+                            isValid = state.isValid;
+                            var paymentMethodType = (_a = state.data.paymentMethod) === null || _a === void 0 ? void 0 : _a.type;
+                            eventBroadcaster.publish({
+                                status: 'Change',
+                                code: isValid ? 'Complete' : 'Incomplete',
+                                paymentMethodType: typeof paymentMethodType === 'string' ? paymentMethodType : undefined,
+                            });
+                        },
+                    };
+                    injectAdyenCssModuleFix();
+                    return [4 /*yield*/, (0, adyen_web_1.AdyenCheckout)(checkoutConfig)];
+                case 1:
+                    checkout = _b.sent();
+                    dropinConfiguration = {
+                        paymentMethodComponents: [adyen_web_1.Card, adyen_web_1.ApplePay, adyen_web_1.GooglePay, adyen_web_1.Bancontact],
+                        showStoredPaymentMethods: false,
+                        paymentMethodsConfiguration: {
+                            card: {
+                                // Hide the card's built-in button (host renders its own submit). In
+                                // adyen-web v6 showPayButton is per-component, not Dropin-level. Express
+                                // wallets keep their native buttons.
+                                showPayButton: false,
+                                // Suppress Click to Pay in a zero-value card-save. `_disableClickToPay`
+                                // is an internal adyen-web flag; replace on the next upgrade.
+                                _disableClickToPay: true,
+                            },
+                        },
+                        // Render the consent copy only once the Drop-in has finished loading, so it
+                        // doesn't flash on its own before the card/wallet options appear.
+                        onReady: function () { return renderConsentDisclosure(mountElement, context.businessName); },
+                    };
+                    dropIn = new adyen_web_1.Dropin(checkout, dropinConfiguration).mount(mountElement);
+                    return [2 /*return*/, {
+                            unmount: function () {
+                                dropIn.unmount();
+                                removeConsentDisclosure(mountElement);
+                            },
+                            submit: function () {
+                                return new Promise(function (resolve) {
+                                    // adyen-web renders inline field errors but never calls onSubmit for an
+                                    // invalid form, so waiting on pendingResolve would hang the host. Trigger
+                                    // the field errors and settle deterministically instead.
+                                    if (!isValid) {
+                                        dropIn.submit();
+                                        resolve({ status: 'Invalid' });
+                                        return;
+                                    }
+                                    pendingResolve = resolve;
+                                    dropIn.submit();
+                                });
+                            },
+                            handleNextAction: function (serverResponse) {
+                                return new Promise(function (resolve) {
+                                    var _a;
+                                    var response = (serverResponse !== null && serverResponse !== void 0 ? serverResponse : {});
+                                    if (response.action) {
+                                        // 3DS1 (redirect) is out of scope: surface as an error so the host can
+                                        // ask the shopper for a different card.
+                                        if (response.action.type === 'redirect') {
+                                            resolve({
+                                                status: 'Error',
+                                                error: { code: 'RedirectNotSupported', resultCode: response.resultCode },
+                                            });
+                                            return;
+                                        }
+                                        // Native 3DS2 step: let the component perform it, then resolve once
+                                        // onAdditionalDetails hands us the next payload for the host to POST.
+                                        pendingResolve = resolve;
+                                        stashedActions === null || stashedActions === void 0 ? void 0 : stashedActions.resolve(response);
+                                        return;
+                                    }
+                                    // Terminal response: let the component finalize its UI (its own result
+                                    // screen), drop the now-stale pre-submission consent, report Complete.
+                                    stashedActions === null || stashedActions === void 0 ? void 0 : stashedActions.resolve(response);
+                                    removeConsentDisclosure(mountElement);
+                                    resolve({ status: 'Complete', resultCode: (_a = response.resultCode) !== null && _a !== void 0 ? _a : 'Unknown' });
+                                });
+                            },
+                        }];
+            }
+        });
+    });
+}
+function createSessionsConfiguration(context, eventBroadcaster) {
+    var _a;
+    if (!context.sessionId || !context.sessionData) {
+        throw new Error('Sessions flow requires sessionId and sessionData; received an advanced-flow session.');
+    }
     return {
         clientKey: context.clientKey,
         session: {
@@ -74,15 +248,10 @@ function createAdyenConfiguration(context, eventBroadcaster) {
             sessionData: context.sessionData,
         },
         countryCode: context.countryCode,
-        amount: {
-            value: context.amount,
-            currency: context.currency,
-        },
+        amount: { value: (_a = context.amount) !== null && _a !== void 0 ? _a : 0, currency: context.currency },
         locale: context.locale,
         environment: context.env,
-        analytics: {
-            enabled: false,
-        },
+        analytics: { enabled: false },
         onPaymentCompleted: function (data) {
             eventBroadcaster.publish(ResultBuilder_1.ResultBuilder.fromPaymentCompletedData(data));
         },
@@ -99,6 +268,43 @@ function createAdyenConfiguration(context, eventBroadcaster) {
         paymentMethodsResponse: context.paymentMethods,
     };
 }
+// Appends the SDK-owned no-show consent copy under the Drop-in. Idempotent, so
+// a repeated onReady never duplicates it; a no-op when no business name is set.
+function renderConsentDisclosure(mountElement, businessName) {
+    if (!businessName)
+        return;
+    if (mountElement.querySelector('[data-lspay="consent-disclosure"]'))
+        return;
+    var disclosure = document.createElement('p');
+    disclosure.setAttribute('data-lspay', 'consent-disclosure');
+    disclosure.style.marginTop = '16px';
+    disclosure.textContent = (0, terms_1.buildNoShowConsentText)(businessName);
+    mountElement.appendChild(disclosure);
+}
+// Removes the consent copy once the flow finalizes or unmounts, so it doesn't
+// linger on the Drop-in's result screen (it only applies pre-submission).
+function removeConsentDisclosure(mountElement) {
+    var _a;
+    (_a = mountElement.querySelector('[data-lspay="consent-disclosure"]')) === null || _a === void 0 ? void 0 : _a.remove();
+}
+// Adyen's Drop-in CSS uses hashed class names (e.g. .loading-input__spinner--abc123),
+// but when the host app's bundler processes the CSS as modules it rehashes them,
+// causing a mismatch with the unhashed class names Adyen writes to the DOM.
+// We inject plain (unhashed) rules so the spinner/loading states render correctly.
+var adyenCssFixInjected = false;
+function injectAdyenCssModuleFix() {
+    if (adyenCssFixInjected)
+        return;
+    adyenCssFixInjected = true;
+    var style = document.createElement('style');
+    style.setAttribute('data-lspay', 'adyen-css-module-fix');
+    style.textContent = [
+        ".loading-input__spinner { z-index: 1; width: 100%; height: 100%; display: none; position: absolute; top: 0; left: 0; }",
+        ".loading-input__spinner--active { display: flex; align-items: center; justify-content: center; }",
+        ".loading-input__form--loading { opacity: 0; }",
+    ].join('\n');
+    document.head.appendChild(style);
+}
 function createDropinConfiguration() {
     return {
         paymentMethodComponents: [adyen_web_1.Card, adyen_web_1.ApplePay, adyen_web_1.Bancontact, adyen_web_1.GooglePay, adyen_web_1.Redirect, adyen_web_1.Twint],
@@ -106,4 +312,5 @@ function createDropinConfiguration() {
 }
 exports.AdyenWidget = {
     mount: mount,
+    mountMultiStep: mountMultiStep,
 };

package/dist/cjs/v1/index.js

@@ -17,4 +17,5 @@ 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,
+    mountMultiStepWidget: widget_1.mountMultiStepWidget,
 };

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

@@ -0,0 +1,32 @@
+"use strict";
+/** Locale-selected UI text rendered alongside Stripe Elements. */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getSavePaymentMethodText = getSavePaymentMethodText;
+exports.getCardDeclinedText = getCardDeclinedText;
+var SAVE_PAYMENT_METHOD_TEXT = {
+    de: 'Zahlungsinformationen für zukünftige Einkäufe speichern',
+    en: 'Save payment details for future purchases',
+    fr: 'Enregistrer les informations de paiement pour vos prochains achats',
+    nl: 'Betaalgegevens opslaan voor toekomstige aankopen',
+};
+var CARD_DECLINED_TEXT = {
+    de: 'Ihre Karte wurde abgelehnt.',
+    en: 'Your card was declined.',
+    fr: 'Votre carte a été refusée.',
+    nl: 'Uw kaart is geweigerd.',
+};
+function getLanguage(locale) {
+    var _a;
+    var resolvedLocale = !locale || locale === 'auto'
+        ? ((_a = globalThis.navigator) === null || _a === void 0 ? void 0 : _a.language) || 'en'
+        : locale;
+    return resolvedLocale.toLowerCase().split('-')[0];
+}
+function getSavePaymentMethodText(locale) {
+    var language = getLanguage(locale);
+    return SAVE_PAYMENT_METHOD_TEXT[language] || SAVE_PAYMENT_METHOD_TEXT.en;
+}
+function getCardDeclinedText(locale) {
+    var language = getLanguage(locale);
+    return CARD_DECLINED_TEXT[language] || CARD_DECLINED_TEXT.en;
+}

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

@@ -1,2 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.isDeferredStripeSession = isDeferredStripeSession;
+exports.isIntentBoundStripeSession = isIntentBoundStripeSession;
+function isDeferredStripeSession(session) {
+    return session.context.intentMode === 'deferred';
+}
+function isIntentBoundStripeSession(session) {
+    return (session.context.intentMode === undefined ||
+        session.context.intentMode === 'intent-bound');
+}

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

@@ -52,6 +52,7 @@ exports.createPaymentElementOptions = createPaymentElementOptions;
 exports.createAddressElementOptions = createAddressElementOptions;
 exports.buildCardConsentText = buildCardConsentText;
 exports.createCardConsentElement = createCardConsentElement;
+exports.createSavePaymentMethodElement = createSavePaymentMethodElement;
 exports.createPaymentElement = createPaymentElement;
 exports.setupChangeEventHandler = setupChangeEventHandler;
 exports.createAddressElement = createAddressElement;
@@ -64,16 +65,17 @@ var ResultBuilder_1 = require("./ResultBuilder");
 var error_1 = require("../error");
 var themes_1 = require("./themes");
 var terms_1 = require("./terms");
+var localizedText_1 = require("./localizedText");
 /**
  * Initialize Stripe with the given context
  */
 function initStripe(context, theme) {
     return __awaiter(this, void 0, void 0, function () {
-        var publishableKey, clientSecret, customerSessionClientSecret, loadedStripe, stripe, themeConfig, elementsOptions, elements;
+        var publishableKey, loadedStripe, stripe, themeConfig, sharedElementsOptions, elements, elementsOptions, elementsOptions;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
-                    publishableKey = context.publishableKey, clientSecret = context.clientSecret, customerSessionClientSecret = context.customerSessionClientSecret;
+                    publishableKey = context.publishableKey;
                     return [4 /*yield*/, (0, stripe_js_1.loadStripe)(publishableKey)];
                 case 1:
                     loadedStripe = _a.sent();
@@ -82,8 +84,15 @@ function initStripe(context, theme) {
                     }
                     stripe = loadedStripe;
                     themeConfig = (0, themes_1.getThemeConfig)(theme);
-                    elementsOptions = __assign(__assign(__assign({ clientSecret: clientSecret, customerSessionClientSecret: customerSessionClientSecret }, (context.locale && { locale: context.locale })), (themeConfig && { appearance: themeConfig.appearance })), (themeConfig && { fonts: themeConfig.fonts }));
-                    elements = stripe.elements(elementsOptions);
+                    sharedElementsOptions = __assign(__assign(__assign({}, (context.locale && { locale: context.locale })), (themeConfig && { appearance: themeConfig.appearance })), (themeConfig && { fonts: themeConfig.fonts }));
+                    if (context.intentMode === 'deferred') {
+                        elementsOptions = __assign(__assign(__assign({}, sharedElementsOptions), { mode: 'payment', amount: context.amount, currency: context.currency.toLowerCase(), paymentMethodTypes: context.paymentMethodTypes, paymentMethodCreation: 'manual' }), (context.onBehalfOf && { onBehalfOf: context.onBehalfOf }));
+                        elements = stripe.elements(elementsOptions);
+                    }
+                    else {
+                        elementsOptions = __assign(__assign({}, sharedElementsOptions), { clientSecret: context.clientSecret, customerSessionClientSecret: context.customerSessionClientSecret });
+                        elements = stripe.elements(elementsOptions);
+                    }
                     return [2 /*return*/, { stripe: stripe, elements: elements }];
             }
         });
@@ -220,6 +229,24 @@ function createCardConsentElement(consentText) {
     container.appendChild(text);
     return container;
 }
+function createSavePaymentMethodElement(mountElement, onChange, locale) {
+    var label = document.createElement('label');
+    label.className = 'stripe-save-payment-method-container';
+    var checkbox = document.createElement('input');
+    checkbox.type = 'checkbox';
+    checkbox.className = 'stripe-save-payment-method-checkbox';
+    checkbox.dataset.testid = 'save-payment-method-checkbox';
+    var text = document.createElement('span');
+    text.className = 'stripe-save-payment-method-text';
+    text.textContent = (0, localizedText_1.getSavePaymentMethodText)(locale);
+    label.appendChild(checkbox);
+    label.appendChild(text);
+    mountElement.appendChild(label);
+    // The label must remain clickable, but its consent text is not selectable.
+    label.addEventListener('selectstart', function (event) { return event.preventDefault(); });
+    checkbox.addEventListener('change', function () { return onChange(checkbox.checked); });
+    return label;
+}
 /**
  * Create and mount payment element
  */
@@ -259,12 +286,12 @@ function createPaymentElement(elements, options, mountElement, eventBroadcaster)
  * Also includes the current save-payment-method checkbox state (when present) on every Change event,
  * and emits a Change event when that checkbox state changes.
  */
-function setupChangeEventHandler(paymentElement, eventBroadcaster, addressElement) {
+function setupChangeEventHandler(paymentElement, eventBroadcaster, addressElement, onPaymentValueChange, initialSaveCheckboxState) {
     var paymentComplete = false;
     var addressComplete = !addressElement; // If no address element, consider it complete
     var previousComplete = null;
     var previousMethodType;
-    var previousSaveCheckboxState; // Track save checkbox state
+    var previousSaveCheckboxState = initialSaveCheckboxState;
     var emitChangeEvent = function () {
         var complete = paymentComplete && addressComplete;
         previousComplete = complete;
@@ -275,23 +302,30 @@ function setupChangeEventHandler(paymentElement, eventBroadcaster, addressElemen
         })));
     };
     paymentElement.on('change', function (event) {
-        var _a, _b;
+        var _a, _b, _c;
         paymentComplete = event.complete;
+        onPaymentValueChange === null || onPaymentValueChange === void 0 ? void 0 : onPaymentValueChange({
+            savePaymentMethod: (_a = event.value) === null || _a === void 0 ? void 0 : _a.savePaymentMethod,
+        });
         var completenessChanged = (paymentComplete && addressComplete) !== previousComplete;
-        var methodType = (_a = event.value) === null || _a === void 0 ? void 0 : _a.type;
+        var methodType = (_b = event.value) === null || _b === void 0 ? void 0 : _b.type;
         var methodTypeChanged = methodType !== undefined && methodType !== previousMethodType;
         if (methodType !== undefined) {
             previousMethodType = methodType;
         }
         // `savePaymentMethod` reflects the "save for future use" checkbox; it is only
         // present on the change event when the element renders that checkbox.
-        var saveCheckboxChanged = false;
-        var saveCheckboxState = (_b = event.value) === null || _b === void 0 ? void 0 : _b.savePaymentMethod;
-        if (saveCheckboxState !== undefined) {
-            saveCheckboxChanged = previousSaveCheckboxState !== saveCheckboxState;
-            previousSaveCheckboxState = saveCheckboxState;
+        var stripeSaveCheckboxChanged = false;
+        var stripeSaveCheckboxState = (_c = event.value) === null || _c === void 0 ? void 0 : _c.savePaymentMethod;
+        if (initialSaveCheckboxState === undefined &&
+            stripeSaveCheckboxState !== undefined) {
+            stripeSaveCheckboxChanged =
+                previousSaveCheckboxState !== stripeSaveCheckboxState;
+            previousSaveCheckboxState = stripeSaveCheckboxState;
         }
-        if (completenessChanged || methodTypeChanged || saveCheckboxChanged) {
+        if (completenessChanged ||
+            methodTypeChanged ||
+            stripeSaveCheckboxChanged) {
             emitChangeEvent();
         }
     });
@@ -304,6 +338,13 @@ function setupChangeEventHandler(paymentElement, eventBroadcaster, addressElemen
             }
         });
     }
+    return function (saveCheckboxChecked) {
+        if (previousSaveCheckboxState === saveCheckboxChecked) {
+            return;
+        }
+        previousSaveCheckboxState = saveCheckboxChecked;
+        emitChangeEvent();
+    };
 }
 /**
  * Create and mount address element

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

@@ -1,6 +1,6 @@
 "use strict";
 /**
- * Translatable strings for Stripe payment elements.
+ * Terms and consent text for Stripe payment elements.
  * These strings are prepared for Transifex extraction.
  *
  * Usage with Transifex:

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

@@ -53,7 +53,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-chevron-icon {\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  ");
+    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-chevron-icon {\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    .lsp-theme-dark .stripe-save-payment-method-container {\n      color: ").concat(exports.THEME_COLORS.DARK.TEXT, " !important;\n    }\n    .lsp-theme-dark .stripe-finalization-error {\n      color: #ff8a8a !important;\n    }\n    .lsp-theme-dark .stripe-save-payment-method-checkbox {\n      border-color: #697386;\n      background-color: #30313d;\n    }\n    .lsp-theme-dark .stripe-save-payment-method-checkbox:checked {\n      border-color: #007ea3;\n      background-color: #007ea3;\n    }\n    .lsp-theme-dark .stripe-save-payment-method-checkbox:focus-visible {\n      border-color: #00d4ff;\n      box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.25);\n    }\n  ");
     document.head.appendChild(styleElement);
 }
 /**
@@ -77,7 +77,7 @@ function ensureInvoicingDarkStylesheet() {
     }
     var styleElement = document.createElement('style');
     styleElement.id = INVOICING_DARK_STYLESHEET_ID;
-    styleElement.textContent = "\n    /*\n     * Mirror the non-colour .lsp-theme-invoicing rules from\n     * lightspeed-global-styles.css. Class selectors match whole tokens, so an\n     * element carrying the class lsp-theme-invoicing-dark is never matched by\n     * the selector .lsp-theme-invoicing; without these the terms text would\n     * fall back to the system font while the Elements iframe renders Inter.\n     */\n    .lsp-theme-invoicing-dark {\n      color: #e3e4e9;\n      padding-bottom: 0 !important;\n    }\n    .lsp-theme-invoicing-dark .stripe-custom-terms-text,\n    .lsp-theme-invoicing-dark .stripe-expandable-terms-content p {\n      color: #e3e4e9;\n      font-family: 'Inter', system-ui, sans-serif;\n    }\n    /*\n     * Links and the expand toggle. lightspeed-global-styles.css colours these\n     * #635bff, which is close to unreadable on a dark surface, so they take the\n     * consumer dark interactive colour instead. The chevron inherits from its\n     * toggle so the two can never drift apart.\n     */\n    .lsp-theme-invoicing-dark .stripe-custom-terms-text a,\n    .lsp-theme-invoicing-dark .stripe-expandable-terms-content a,\n    .lsp-theme-invoicing-dark .stripe-expandable-terms-toggle {\n      color: #6cb5fb;\n    }\n    .lsp-theme-invoicing-dark .stripe-terms-chevron-icon {\n      color: inherit;\n    }\n  ";
+    styleElement.textContent = "\n    /*\n     * Mirror the non-colour .lsp-theme-invoicing rules from\n     * lightspeed-global-styles.css. Class selectors match whole tokens, so an\n     * element carrying the class lsp-theme-invoicing-dark is never matched by\n     * the selector .lsp-theme-invoicing; without these the terms text would\n     * fall back to the system font while the Elements iframe renders Inter.\n     */\n    .lsp-theme-invoicing-dark {\n      color: #e3e4e9;\n      padding-bottom: 0 !important;\n    }\n    .lsp-theme-invoicing-dark .stripe-custom-terms-text,\n    .lsp-theme-invoicing-dark .stripe-expandable-terms-content p,\n    .lsp-theme-invoicing-dark .stripe-save-payment-method-container,\n    .lsp-theme-invoicing-dark .stripe-finalization-error {\n      color: #e3e4e9;\n      font-family: 'Inter', system-ui, sans-serif;\n    }\n    .lsp-theme-invoicing-dark .stripe-finalization-error {\n      color: #ffa597;\n    }\n    .lsp-theme-invoicing-dark .stripe-save-payment-method-checkbox {\n      border-color: #525256;\n      background-color: #242427;\n    }\n    .lsp-theme-invoicing-dark .stripe-save-payment-method-checkbox:checked {\n      border-color: #286ea8;\n      background-color: #286ea8;\n    }\n    .lsp-theme-invoicing-dark .stripe-save-payment-method-checkbox:focus-visible {\n      border-color: #6cb5fb;\n      box-shadow: 0 0 0 3px rgba(108, 181, 251, 0.25);\n    }\n    /*\n     * Links and the expand toggle. lightspeed-global-styles.css colours these\n     * #635bff, which is close to unreadable on a dark surface, so they take the\n     * consumer dark interactive colour instead. The chevron inherits from its\n     * toggle so the two can never drift apart.\n     */\n    .lsp-theme-invoicing-dark .stripe-custom-terms-text a,\n    .lsp-theme-invoicing-dark .stripe-expandable-terms-content a,\n    .lsp-theme-invoicing-dark .stripe-expandable-terms-toggle {\n      color: #6cb5fb;\n    }\n    .lsp-theme-invoicing-dark .stripe-terms-chevron-icon {\n      color: inherit;\n    }\n  ";
     document.head.appendChild(styleElement);
 }
 /**