@lightspeed/online-payments-sdk 1.7.2 → 1.8.0

package/README.md

@@ -1,6 +1,11 @@
 # Lightspeed Online Payments SDK
 
-`@lightspeed/online-payments-sdk` is a browser SDK for mounting Lightspeed Payments widgets (Stripe and Adyen) in web applications.
+`@lightspeed/online-payments-sdk` is a browser SDK for displaying Lightspeed Payments widgets in your web application.
+
+This is intended for partners who wish to add payments functionality to an integration with a Lightspeed product.
+
+For onboarding questions, account configuration, or production enablement: contact your Lightspeed
+representative.
 
 ## Installation
 
@@ -8,94 +13,123 @@
 npm install @lightspeed/online-payments-sdk
 ```
 
-## Quick start
-
-```ts
-import {LightspeedPayments} from '@lightspeed/online-payments-sdk';
-
-const controller = await LightspeedPayments.v1.mountPaymentWidget(sessionToken, {
-  mountPoint: document.getElementById('payment-widget')!,
-});
+## Requirements
 
-controller.unmount();
-```
+- A browser environment with `window` and `document`
+- A payment session obtained from your Lightspeed Payments integration
+- An HTML element where the payment widget can be mounted
 
-## Compatibility
-
-- TypeScript/JavaScript
-- Browser runtime (requires `window`)
-
-## Theming
+## Quick start
 
-The SDK supports custom themes. If no theme is specified, Stripe defaults are used.
+Add a mount element to your page:
 
-### Available themes
+```html
+<div id="payment-widget"></div>
+```
 
-- default (no `theme` value)
-- `invoicing`
-- `dark`
+Mount the widget with the payment session from your integration:
 
 ```ts
 import {LightspeedPayments} from '@lightspeed/online-payments-sdk';
 
-await LightspeedPayments.v1.mountPaymentWidget(paymentSession, {
-  mountPoint: document.getElementById('payment-widget')!,
-  theme: 'dark',
+const mountPoint = document.getElementById('payment-widget');
+
+if (!mountPoint) {
+  throw new Error('Payment widget mount point was not found');
+}
+
+const controller = await LightspeedPayments.v1.mountPaymentWidget(session, {
+  mountPoint,
 });
 ```
 
-### Container styling
+Keep the returned controller to submit the widget or remove it when the containing page or component is no longer needed.
+
+## Configuration
 
-For dark mode, the SDK styles the mount element you pass in `mountPoint`. If you style a parent wrapper, use `THEME_COLORS`.
+`mountPaymentWidget(session, configuration)` accepts a payment session and the following configuration:
+
+| Option          | Description                                                      |
+| --------------- | ---------------------------------------------------------------- |
+| `mountPoint`    | Required `HTMLElement` where the SDK renders the payment widget. |
+| `defaultValues` | Optional initial address values: `country` and `postalCode`.     |
+| `listeners`     | Optional callbacks for widget lifecycle and payment events.      |
+| `theme`         | Optional visual theme: `dark`.                                   |
 
 ```ts
-import {THEME_COLORS} from '@lightspeed/online-payments-sdk';
+const controller = await LightspeedPayments.v1.mountPaymentWidget(session, {
+  mountPoint,
+  defaultValues: {
+    country: 'CA',
+    postalCode: 'H1H1H1',
+  },
+  listeners: {
+    onReady: () => {
+      // The widget is ready for payer input.
+    },
+    onChange: event => {
+      submitButton.disabled = event.code !== 'Complete';
+    },
+    onSucceeded: () => {
+      // Continue after a successful payment or payment-method save.
+    },
+    onDeclined: event => {
+      // Show a decline message appropriate for event.code.
+    },
+    onError: event => {
+      // Handle a widget or processing error.
+    },
+  },
+});
 ```
 
-## Documentation
+### Events
 
-- Datadog logging reference: `packages/lsp-online-payments-sdk/docs/DATADOG_LOGGING.md`
-- Sandbox releases (testing unreleased builds in a real app): `packages/lsp-online-payments-sdk/docs/sandbox-releases.md`
+Listeners receive an event with a `status` and `code`. Available listener names are `onReady`, `onChange`, `onSucceeded`, `onPending`, `onDeclined`, and `onError`.
 
-## Development
+| Status      | Codes                                                                                                          |
+| ----------- | -------------------------------------------------------------------------------------------------------------- |
+| `Ready`     | `Ready`                                                                                                        |
+| `Change`    | `Complete`, `Incomplete`                                                                                       |
+| `Succeeded` | `Authorized`                                                                                                   |
+| `Pending`   | `Processing`                                                                                                   |
+| `Declined`  | `CardValidation`, `Generic`, `PaymentMethodNotSupported`                                                       |
+| `Error`     | `Unexpected`, `InvalidSession`, `InvalidSessionPayload`, `UnsupportedLocation`, `Processing`, `FormValidation` |
 
-Run SDK checks (same order as CI):
+## Submit and unmount
 
-```sh
-npm run lint --workspace @lightspeed/online-payments-sdk
-npm run typecheck --workspace @lightspeed/online-payments-sdk
-npm run test --workspace @lightspeed/online-payments-sdk
-```
+Call `submit()` in response to your application's payment action. Call `unmount()` before removing or replacing the mount element.
 
-Build package:
+```ts
+submitButton.addEventListener('click', async () => {
+  await controller.submit();
+});
 
-```sh
-npm run build --workspace @lightspeed/online-payments-sdk
+// For example, during page or component cleanup.
+controller.unmount();
 ```
 
-Inspect publish contents:
+## Theming
 
-```sh
-npm pack --dry-run
-```
+Use `theme` to select a widget appearance:
 
-## Publishing and release flow
+- Omit `theme` to use the default appearance.
+- `dark` uses a dark appearance and styles the mount element with a dark background.
 
-Publishing is handled by CircleCI (not manual local publish).
+Custom themes can be used with support from the Lightspeed Payments team.
 
-- Release path runs on `main` and `release/*`.
-- CircleCI runs quality gates (`lint`, `typecheck`, unit tests, build, e2e).
-- `verify_package_version` compares local `package.json` version with npm.
-- If local version is not higher, publish is skipped.
-- If local version is higher, the workflow pauses at manual approval (`pause_workflow`).
-- A human must approve before the `release` job runs `npm publish`.
+```ts
+await LightspeedPayments.v1.mountPaymentWidget(session, {
+  mountPoint,
+  theme: 'dark',
+});
+```
 
-In practice: bump `version` in `packages/lsp-online-payments-sdk/package.json`, merge to `main`, then approve the release hold in CircleCI.
+For a wrapper around a widget using the `dark` theme, use `THEME_COLORS` to match the SDK's dark container colors:
 
-### Sandbox releases
+```ts
+import {THEME_COLORS} from '@lightspeed/online-payments-sdk';
 
-To test unreleased SDK changes inside a real app without touching the production
-package on public npm, publish a **sandbox** build to GitHub Packages: push a
-`sandbox/*` branch and approve the `hold_sandbox` step in CircleCI. Consuming an
-app requires no `import` changes — just an `.npmrc` scope + a `package.json`
-alias. See `docs/sandbox-releases.md` for the full publish and consume steps.
+wrapper.style.backgroundColor = THEME_COLORS.DARK.BACKGROUND;
+wrapper.style.color = THEME_COLORS.DARK.TEXT;
+```

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

@@ -37,6 +37,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.mountPaymentWidget = mountPaymentWidget;
+exports.mountMultiStepWidget = mountMultiStepWidget;
 var widget_1 = require("./adyen/widget");
 var widget_2 = require("./stripe/widget");
 var session_1 = require("./session");
@@ -100,3 +101,55 @@ function mountPaymentWidget(session, config) {
         });
     });
 }
+// Internal impl of v1.mountMultiStepWidget (additive; event-based flows unchanged).
+function mountMultiStepWidget(session, config) {
+    return __awaiter(this, void 0, void 0, function () {
+        var eventBroadcaster, decodedSession, logger_3, controller, _a, error_3;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    eventBroadcaster = new EventBroadcaster_1.EventBroadcaster(config.listeners);
+                    _b.label = 1;
+                case 1:
+                    _b.trys.push([1, 6, , 7]);
+                    decodedSession = (0, session_1.decodePaymentSessionToContext)(session);
+                    logger_3 = (0, logger_1.getLogger)(decodedSession.logging);
+                    logger_3.setSessionMetadata(decodedSession.metadata);
+                    eventBroadcaster.registerMiddleware(function (event) {
+                        logger_3.log('info', event.status, { event: event });
+                        return event;
+                    });
+                    logger_3.log('info', 'Mount', {
+                        configuration: {
+                            theme: config.theme || 'none',
+                            listeners: config.listeners ? Object.keys(config.listeners) : [],
+                        },
+                    });
+                    controller = void 0;
+                    _a = decodedSession.psp;
+                    switch (_a) {
+                        case 'ADYEN': return [3 /*break*/, 2];
+                    }
+                    return [3 /*break*/, 4];
+                case 2: return [4 /*yield*/, widget_1.AdyenWidget.mountMultiStep(config.mountPoint, decodedSession, eventBroadcaster, config.onRequiresFinalization)];
+                case 3:
+                    controller = _b.sent();
+                    return [3 /*break*/, 5];
+                case 4: throw new error_1.UnsupportedLocationError();
+                case 5:
+                    controller.submit = (0, common_1.withLogging)(logger_3, 'Submit', controller.submit);
+                    controller.handleNextAction = (0, common_1.withLogging)(logger_3, 'HandleNextAction', controller.handleNextAction);
+                    controller.unmount = (0, common_1.withLogging)(logger_3, 'Unmount', controller.unmount);
+                    return [2 /*return*/, controller];
+                case 6:
+                    error_3 = _b.sent();
+                    eventBroadcaster.publish({
+                        code: 'Unexpected',
+                        status: 'Error',
+                    });
+                    throw error_3;
+                case 7: return [2 /*return*/];
+            }
+        });
+    });
+}

package/dist/cjs/version.js

@@ -3,4 +3,4 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SDK_VERSION = void 0;
 // This file is auto-generated during the build process
 // DO NOT EDIT MANUALLY - Version is extracted from package.json
-exports.SDK_VERSION = '1.7.2';
+exports.SDK_VERSION = '1.8.0';

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

@@ -6,12 +6,15 @@ export type AdyenSession = BaseSession & {
 };
 export type AdyenContext = {
     clientKey: string;
-    sessionId: string;
-    sessionData: string;
+    sessionId?: string;
+    sessionData?: string;
     locale: string;
     countryCode: string;
-    amount: number;
+    amount?: number;
     currency: string;
     env: 'test' | 'live';
     paymentMethods: PaymentMethodsResponse;
+    intent?: 'payment' | 'save-card';
+    businessName?: string;
+    saveSessionId?: string;
 };

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

@@ -0,0 +1,5 @@
+export declare const NO_SHOW_CONSENT_TEXT: {
+    readonly MANDATORY_TEMPLATE: "By providing your card information, you authorize {business} to charge your card for {reason} in accordance with their terms.";
+};
+export declare const NO_SHOW_CONSENT_REASON = "a no-show fee if you do not honor your reservation";
+export declare function buildNoShowConsentText(businessName: string): string;

package/dist/v1/adyen/terms.js

@@ -0,0 +1,12 @@
+// 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.
+export var 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.
+export var NO_SHOW_CONSENT_REASON = 'a no-show fee if you do not honor your reservation';
+export function buildNoShowConsentText(businessName) {
+    return NO_SHOW_CONSENT_TEXT.MANDATORY_TEMPLATE.replace(/\{business\}/g, function () { return businessName; }).replace(/\{reason\}/g, function () { return NO_SHOW_CONSENT_REASON; });
+}

package/dist/v1/adyen/widget.d.ts

@@ -1,3 +1,10 @@
 import { AdyenSession } from './session';
-import { WidgetInterface } from '../common';
-export declare const AdyenWidget: WidgetInterface<AdyenSession>;
+import { WidgetController, MultiStepController, MultiStepResult } from '../common';
+import { EventBroadcaster } from '../EventBroadcaster';
+declare function mount(mountElement: HTMLElement, session: AdyenSession, eventBroadcaster: EventBroadcaster): Promise<WidgetController>;
+declare function mountMultiStep(mountElement: HTMLElement, session: AdyenSession, eventBroadcaster: EventBroadcaster, onRequiresFinalization?: (result: MultiStepResult) => void): Promise<MultiStepController>;
+export declare const AdyenWidget: {
+    mount: typeof mount;
+    mountMultiStep: typeof mountMultiStep;
+};
+export {};

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

@@ -6,6 +6,28 @@ export type WidgetController = {
     unmount: () => void;
     submit: () => Promise<Event>;
 };
+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;
     postalCode?: string;

package/dist/v1/index.d.ts

@@ -4,9 +4,9 @@
  * 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 { WidgetController, MultiStepController, MultiStepResult, SessionType, DefaultValues, } from './common';
 export type { Event } from './EventBroadcaster';
 export { UnsupportedLocationError, InvalidSessionPayloadError, InvalidSessionError, ProcessingError, } from './error';
 export type { PaymentWidgetConfiguration, PaymentWidgetTheme } from './widget';
@@ -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/widget.d.ts

@@ -1,4 +1,4 @@
-import { WidgetController, DefaultValues } from './common';
+import { WidgetController, MultiStepController, MultiStepResult, DefaultValues } from './common';
 import { EventListeners } from './EventBroadcaster';
 export type PaymentWidgetTheme = 'invoicing' | 'dark' | 'invoicing-dark';
 export type PaymentWidgetConfiguration = {
@@ -6,5 +6,12 @@ export type PaymentWidgetConfiguration = {
     defaultValues?: DefaultValues;
     listeners?: EventListeners;
     theme?: PaymentWidgetTheme;
+    /**
+     * Multi-step flow only. Fired when an express method (Google Pay / Apple Pay)
+     * submits from its own button with no host `submit()` pending; the host handles
+     * the result the same way it handles `submit()`'s return.
+     */
+    onRequiresFinalization?: (result: MultiStepResult) => void;
 };
 export declare function mountPaymentWidget(session: string, config: PaymentWidgetConfiguration): Promise<WidgetController>;
+export declare function mountMultiStepWidget(session: string, config: PaymentWidgetConfiguration): Promise<MultiStepController>;

package/dist/v1/widget.js

@@ -97,3 +97,55 @@ 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;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    eventBroadcaster = new EventBroadcaster(config.listeners);
+                    _b.label = 1;
+                case 1:
+                    _b.trys.push([1, 6, , 7]);
+                    decodedSession = decodePaymentSessionToContext(session);
+                    logger_2 = getLogger(decodedSession.logging);
+                    logger_2.setSessionMetadata(decodedSession.metadata);
+                    eventBroadcaster.registerMiddleware(function (event) {
+                        logger_2.log('info', event.status, { event: event });
+                        return event;
+                    });
+                    logger_2.log('info', 'Mount', {
+                        configuration: {
+                            theme: config.theme || 'none',
+                            listeners: config.listeners ? Object.keys(config.listeners) : [],
+                        },
+                    });
+                    controller = void 0;
+                    _a = decodedSession.psp;
+                    switch (_a) {
+                        case 'ADYEN': return [3 /*break*/, 2];
+                    }
+                    return [3 /*break*/, 4];
+                case 2: return [4 /*yield*/, AdyenWidget.mountMultiStep(config.mountPoint, decodedSession, eventBroadcaster, config.onRequiresFinalization)];
+                case 3:
+                    controller = _b.sent();
+                    return [3 /*break*/, 5];
+                case 4: throw new UnsupportedLocationError();
+                case 5:
+                    controller.submit = withLogging(logger_2, 'Submit', controller.submit);
+                    controller.handleNextAction = withLogging(logger_2, 'HandleNextAction', controller.handleNextAction);
+                    controller.unmount = withLogging(logger_2, 'Unmount', controller.unmount);
+                    return [2 /*return*/, controller];
+                case 6:
+                    error_2 = _b.sent();
+                    eventBroadcaster.publish({
+                        code: 'Unexpected',
+                        status: 'Error',
+                    });
+                    throw error_2;
+                case 7: return [2 /*return*/];
+            }
+        });
+    });
+}

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const SDK_VERSION = "1.7.2";
+export declare const SDK_VERSION = "1.8.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.7.2';
+export var SDK_VERSION = '1.8.0';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightspeed/online-payments-sdk",
-  "version": "1.7.2",
+  "version": "1.8.0",
   "description": "Process online-payments with Lightspeed Payments",
   "author": "Lightspeed Commerce Inc.",
   "license": "SEE LICENSE IN LICENSE.md",