@lightspeed/online-payments-sdk 1.7.3 → 1.9.0

package/dist/v1/adyen/widget.js

@@ -36,13 +36,31 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 };
 import { AdyenCheckout, Dropin, ApplePay, Bancontact, Card, GooglePay, Redirect, Twint, } from '@adyen/adyen-web';
 import { ResultBuilder } from './ResultBuilder';
+import { buildNoShowConsentText } from './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*/, AdyenCheckout(checkoutConfig)];
                 case 1:
                     checkout = _a.sent();
@@ -63,7 +81,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*/, AdyenCheckout(checkoutConfig)];
+                case 1:
+                    checkout = _b.sent();
+                    dropinConfiguration = {
+                        paymentMethodComponents: [Card, ApplePay, GooglePay, 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 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: {
@@ -71,15 +245,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.fromPaymentCompletedData(data));
         },
@@ -96,6 +265,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 = 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: [Card, ApplePay, Bancontact, GooglePay, Redirect, Twint],
@@ -103,4 +309,5 @@ function createDropinConfiguration() {
 }
 export var AdyenWidget = {
     mount: mount,
+    mountMultiStep: mountMultiStep,
 };

package/dist/v1/common.d.ts

@@ -1,10 +1,38 @@
-import { EventBroadcaster, Event } from './EventBroadcaster';
+import { EventBroadcaster, Event, RequiresFinalizationResult } from './EventBroadcaster';
 import { Session } from './session';
 import { PaymentWidgetTheme } from './widget';
 export type SessionType = 'payment' | 'payment-with-save' | 'moto' | 'moto-with-save' | 'save';
+export type WidgetSubmitResult = Event | RequiresFinalizationResult;
 export type WidgetController = {
     unmount: () => void;
-    submit: () => Promise<Event>;
+    submit: () => Promise<WidgetSubmitResult>;
+    /**
+     * Deferred MOTO only. Reports a definitive backend decline so the widget can
+     * present it and collect a fresh PaymentMethod on the next submission.
+     */
+    reportFinalizationDecline?: (result: RequiresFinalizationResult, message: string) => void;
+};
+export type MultiStepResult = {
+    status: 'RequiresFinalization';
+    paymentData: unknown;
+    saveSessionId?: string;
+} | {
+    status: 'RequiresAction';
+    paymentData: unknown;
+    saveSessionId?: string;
+} | {
+    status: 'Complete';
+    resultCode: string;
+} | {
+    status: 'Invalid';
+} | {
+    status: 'Error';
+    error: unknown;
+};
+export type MultiStepController = {
+    unmount: () => void;
+    submit: () => Promise<MultiStepResult>;
+    handleNextAction: (serverResponse: unknown) => Promise<MultiStepResult>;
 };
 export type DefaultValues = {
     country?: string;

package/dist/v1/index.d.ts

@@ -4,10 +4,10 @@
  * and handling errors related to payment sessions.
  * Don't use * for exports. Be specific to prevent leaking internal APIs.
  */
-import { WidgetController } from './common';
+import { WidgetController, MultiStepController } from './common';
 import { PaymentWidgetConfiguration } from './widget';
-export type { WidgetController, SessionType, DefaultValues } from './common';
-export type { Event } from './EventBroadcaster';
+export type { WidgetController, MultiStepController, MultiStepResult, SessionType, DefaultValues, WidgetSubmitResult, } from './common';
+export type { Event, RequiresFinalizationResult } from './EventBroadcaster';
 export { UnsupportedLocationError, InvalidSessionPayloadError, InvalidSessionError, ProcessingError, } from './error';
 export type { PaymentWidgetConfiguration, PaymentWidgetTheme } from './widget';
 export { THEME_COLORS } from './stripe/themes';
@@ -19,5 +19,14 @@ export type LightspeedPaymentsV1 = {
      * @param {PaymentWidgetConfiguration} config - The configuration options for the payment widget.
      */
     mountPaymentWidget(session: string, config: PaymentWidgetConfiguration): Promise<WidgetController>;
+    /**
+     * Mounts the payment widget using the multi-step contract, where the host
+     * owns HTTP transport. Returns a controller whose `submit()` yields the opaque
+     * payment data to POST and whose `handleNextAction()` drives the 3DS2 loop.
+     * @function mountMultiStepWidget
+     * @param {string} session - The base64-encoded session payload from the create-session API.
+     * @param {PaymentWidgetConfiguration} config - The configuration options for the payment widget.
+     */
+    mountMultiStepWidget(session: string, config: PaymentWidgetConfiguration): Promise<MultiStepController>;
 };
 export declare const v1: LightspeedPaymentsV1;

package/dist/v1/index.js

@@ -4,9 +4,10 @@
  * and handling errors related to payment sessions.
  * Don't use * for exports. Be specific to prevent leaking internal APIs.
  */
-import { mountPaymentWidget } from './widget';
+import { mountPaymentWidget, mountMultiStepWidget, } from './widget';
 export { UnsupportedLocationError, InvalidSessionPayloadError, InvalidSessionError, ProcessingError, } from './error';
 export { THEME_COLORS } from './stripe/themes';
 export var v1 = {
     mountPaymentWidget: mountPaymentWidget,
+    mountMultiStepWidget: mountMultiStepWidget,
 };

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

@@ -0,0 +1,3 @@
+/** Locale-selected UI text rendered alongside Stripe Elements. */
+export declare function getSavePaymentMethodText(locale?: string): string;
+export declare function getCardDeclinedText(locale?: string): string;

package/dist/v1/stripe/localizedText.js

@@ -0,0 +1,28 @@
+/** Locale-selected UI text rendered alongside Stripe Elements. */
+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];
+}
+export function getSavePaymentMethodText(locale) {
+    var language = getLanguage(locale);
+    return SAVE_PAYMENT_METHOD_TEXT[language] || SAVE_PAYMENT_METHOD_TEXT.en;
+}
+export function getCardDeclinedText(locale) {
+    var language = getLanguage(locale);
+    return CARD_DECLINED_TEXT[language] || CARD_DECLINED_TEXT.en;
+}

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

@@ -1,15 +1,38 @@
 import { StripeElementLocale } from '@stripe/stripe-js';
 import { BaseSession } from '../session';
-export type StripeSession = BaseSession & {
+export type StripeBaseSession = BaseSession & {
     psp: 'STRIPE';
-    context: StripeContext;
 };
-export type StripeContext = {
-    clientSecret: string;
+type StripeContextBase = {
     publishableKey: string;
+    locale?: StripeElementLocale;
+    businessName?: string;
+};
+export type IntentBoundStripeContext = StripeContextBase & {
+    intentMode?: 'intent-bound';
+    clientSecret: string;
     customerSessionClientSecret?: string;
     intent: 'save-card' | 'payment';
-    locale?: StripeElementLocale;
     redirectUrl?: string;
-    businessName?: string;
 };
+export type DeferredStripeContext = StripeContextBase & {
+    intentMode: 'deferred';
+    intent: 'payment';
+    amount: number;
+    currency: string;
+    paymentMethodTypes: string[];
+    onBehalfOf: string;
+    clientSecret?: never;
+    customerSessionClientSecret?: never;
+};
+export type StripeContext = IntentBoundStripeContext | DeferredStripeContext;
+export type IntentBoundStripeSession = StripeBaseSession & {
+    context: IntentBoundStripeContext;
+};
+export type DeferredStripeSession = StripeBaseSession & {
+    context: DeferredStripeContext;
+};
+export type StripeSession = IntentBoundStripeSession | DeferredStripeSession;
+export declare function isDeferredStripeSession(session: StripeSession): session is DeferredStripeSession;
+export declare function isIntentBoundStripeSession(session: StripeSession): session is IntentBoundStripeSession;
+export {};

package/dist/v1/stripe/session.js

@@ -1 +1,7 @@
-export {};
+export function isDeferredStripeSession(session) {
+    return session.context.intentMode === 'deferred';
+}
+export function isIntentBoundStripeSession(session) {
+    return (session.context.intentMode === undefined ||
+        session.context.intentMode === 'intent-bound');
+}

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

@@ -1,6 +1,6 @@
 import { StripePaymentElementOptions, StripeAddressElementOptions } from '@stripe/stripe-js';
 import type { StripeElements, Stripe, StripeAddressElement, StripePaymentElement } from '@stripe/stripe-js';
-import { StripeContext, StripeSession } from './session';
+import { IntentBoundStripeSession, StripeContext } from './session';
 import { DefaultValues } from '../common';
 import { EventBroadcaster } from '../EventBroadcaster';
 import { PaymentWidgetTheme } from '../widget';
@@ -45,6 +45,7 @@ export declare function buildCardConsentText(businessName: string, reason: strin
  * text.
  */
 export declare function createCardConsentElement(consentText: string): HTMLElement;
+export declare function createSavePaymentMethodElement(mountElement: HTMLElement, onChange: (checked: boolean) => void, locale?: string): HTMLElement;
 /**
  * Create and mount payment element
  */
@@ -61,7 +62,9 @@ export declare function createPaymentElement(elements: StripeElements, options:
  * 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.
  */
-export declare function setupChangeEventHandler(paymentElement: StripePaymentElement, eventBroadcaster: EventBroadcaster, addressElement?: StripeAddressElement | null): void;
+export declare function setupChangeEventHandler(paymentElement: StripePaymentElement, eventBroadcaster: EventBroadcaster, addressElement?: StripeAddressElement | null, onPaymentValueChange?: (value: {
+    savePaymentMethod?: boolean;
+}) => void, initialSaveCheckboxState?: boolean): (saveCheckboxChecked: boolean) => void;
 /**
  * Create and mount address element
  */
@@ -76,12 +79,12 @@ export declare function cleanupElements(paymentElement: StripePaymentElement, ad
 /**
  * Handle save card operation
  */
-export declare function handleSaveCard(stripe: Stripe, elements: StripeElements, session: StripeSession, addressElement?: StripeAddressElement | null): Promise<import("../EventBroadcaster").SucceededResultEvent | import("../EventBroadcaster").PendingResultEvent | import("../EventBroadcaster").DeclinedResultEvent | import("../EventBroadcaster").ErrorResultEvent>;
+export declare function handleSaveCard(stripe: Stripe, elements: StripeElements, session: IntentBoundStripeSession, addressElement?: StripeAddressElement | null): Promise<import("../EventBroadcaster").SucceededResultEvent | import("../EventBroadcaster").PendingResultEvent | import("../EventBroadcaster").DeclinedResultEvent | import("../EventBroadcaster").ErrorResultEvent>;
 /**
  * Handle payment operation
  */
-export declare function handlePayment(stripe: Stripe, elements: StripeElements, session: StripeSession, addressElement?: StripeAddressElement | null): Promise<import("../EventBroadcaster").SucceededResultEvent | import("../EventBroadcaster").PendingResultEvent | import("../EventBroadcaster").DeclinedResultEvent | import("../EventBroadcaster").ErrorResultEvent>;
+export declare function handlePayment(stripe: Stripe, elements: StripeElements, session: IntentBoundStripeSession, addressElement?: StripeAddressElement | null): Promise<import("../EventBroadcaster").SucceededResultEvent | import("../EventBroadcaster").PendingResultEvent | import("../EventBroadcaster").DeclinedResultEvent | import("../EventBroadcaster").ErrorResultEvent>;
 /**
  * Create common submit handler for widgets
  */
-export declare function createSubmitHandler(stripe: Stripe, elements: StripeElements, session: StripeSession, eventBroadcaster: EventBroadcaster, addressElement?: StripeAddressElement | null): () => Promise<import("../EventBroadcaster").SucceededResultEvent | import("../EventBroadcaster").PendingResultEvent | import("../EventBroadcaster").DeclinedResultEvent | import("../EventBroadcaster").ErrorResultEvent>;
+export declare function createSubmitHandler(stripe: Stripe, elements: StripeElements, session: IntentBoundStripeSession, eventBroadcaster: EventBroadcaster, addressElement?: StripeAddressElement | null): () => Promise<import("../EventBroadcaster").SucceededResultEvent | import("../EventBroadcaster").PendingResultEvent | import("../EventBroadcaster").DeclinedResultEvent | import("../EventBroadcaster").ErrorResultEvent>;

package/dist/v1/stripe/shared.js

@@ -49,17 +49,18 @@ import { loadStripe, } from '@stripe/stripe-js';
 import { EventBuilder } from './ResultBuilder';
 import { InvalidSessionPayloadError, ProcessingError } from '../error';
 import { getThemeConfig } from './themes';
-import { ACH_TERMS_TEXT, ACH_TERMS_URL, PARTNER_CARD_CONSENT_TEXT } from './terms';
+import { ACH_TERMS_TEXT, ACH_TERMS_URL, PARTNER_CARD_CONSENT_TEXT, } from './terms';
+import { getSavePaymentMethodText } from './localizedText';
 /**
  * Initialize Stripe with the given context
  */
 export 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*/, loadStripe(publishableKey)];
                 case 1:
                     loadedStripe = _a.sent();
@@ -68,8 +69,15 @@ export function initStripe(context, theme) {
                     }
                     stripe = loadedStripe;
                     themeConfig = 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 }];
             }
         });
@@ -206,6 +214,24 @@ export function createCardConsentElement(consentText) {
     container.appendChild(text);
     return container;
 }
+export 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 = 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
  */
@@ -245,12 +271,12 @@ export function createPaymentElement(elements, options, mountElement, eventBroad
  * 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.
  */
-export function setupChangeEventHandler(paymentElement, eventBroadcaster, addressElement) {
+export 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;
@@ -261,23 +287,30 @@ export function setupChangeEventHandler(paymentElement, eventBroadcaster, addres
         })));
     };
     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();
         }
     });
@@ -290,6 +323,13 @@ export function setupChangeEventHandler(paymentElement, eventBroadcaster, addres
             }
         });
     }
+    return function (saveCheckboxChecked) {
+        if (previousSaveCheckboxState === saveCheckboxChecked) {
+            return;
+        }
+        previousSaveCheckboxState = saveCheckboxChecked;
+        emitChangeEvent();
+    };
 }
 /**
  * Create and mount address element

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

@@ -1,5 +1,5 @@
 /**
- * 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/v1/stripe/terms.js

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