@flopay/vue 0.0.0-stage → 1.13.1

package/dist/payment-method-setup-entry.cjs

@@ -0,0 +1,1809 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/context.ts
+var FLOPAY_CONTEXT;
+var init_context = __esm({
+  "src/context.ts"() {
+    "use strict";
+    FLOPAY_CONTEXT = /* @__PURE__ */ Symbol("flopay.vue.provider");
+  }
+});
+
+// src/provider.ts
+function telemetryBridge(flopay) {
+  return flopay[FLOPAY_TELEMETRY_BRIDGE];
+}
+function isPromiseLike(value) {
+  return typeof value?.then === "function";
+}
+function createInstrumentEmitter(notify) {
+  const emittedOnce = /* @__PURE__ */ new Set();
+  return (source) => {
+    const event = (0, import_shared3.projectFloInstrument)(source);
+    if (!event) return;
+    if (import_shared3.FLO_INSTRUMENT_ONCE_NAMES.has(event.name)) {
+      if (emittedOnce.has(event.name)) return;
+      emittedOnce.add(event.name);
+    }
+    (0, import_shared3.invokeMerchantCallback)(() => notify(event));
+  };
+}
+var import_shared3, import_vue4, FLOPAY_TELEMETRY_BRIDGE, FloPayProvider;
+var init_provider = __esm({
+  "src/provider.ts"() {
+    "use strict";
+    import_shared3 = require("@flopay/shared");
+    import_vue4 = require("vue");
+    init_context();
+    FLOPAY_TELEMETRY_BRIDGE = /* @__PURE__ */ Symbol.for("@flopay/js.telemetry.bridge.v1");
+    FloPayProvider = (0, import_vue4.defineComponent)({
+      name: "FloPayProvider",
+      props: {
+        flopay: {
+          type: [Object, Promise],
+          default: null
+        },
+        paypalFlopay: {
+          type: [Object, Promise],
+          default: null
+        },
+        options: { type: Object, default: void 0 }
+      },
+      emits: { instrument: (_event) => true },
+      setup(props, { emit, slots }) {
+        const initial = (source) => isPromiseLike(source) ? null : source ?? null;
+        const flopay = (0, import_vue4.shallowRef)(initial(props.flopay));
+        const paypalFlopay = (0, import_vue4.shallowRef)(initial(props.paypalFlopay));
+        const component = (0, import_vue4.getCurrentInstance)();
+        const emitInstrument = createInstrumentEmitter((event) => {
+          const listener = component?.vnode.props?.onInstrument;
+          if (!listener) return emit("instrument", event);
+          for (const handler of [listener].flat()) handler(event);
+        });
+        (0, import_vue4.provide)(FLOPAY_CONTEXT, {
+          flopay,
+          paypalFlopay,
+          billingApiUrl: () => (0, import_shared3.resolveBillingApiUrl)(props.options?.billingApiUrl),
+          emitInstrument
+        });
+        const follow = (read, target, provider) => (0, import_vue4.watch)(
+          read,
+          (source, _previous, onCleanup) => {
+            let active = true;
+            onCleanup(() => {
+              active = false;
+            });
+            if (!isPromiseLike(source)) {
+              target.value = source ?? null;
+              return;
+            }
+            if (provider === "paypal") target.value = null;
+            source.then(
+              (instance) => {
+                if (active) target.value = instance;
+              },
+              () => {
+                if (!active) return;
+                emitInstrument({
+                  class: "technical_error",
+                  errorCode: "SDK_INITIALIZATION_FAILED",
+                  ...provider ? { provider } : {}
+                });
+              }
+            );
+          },
+          { immediate: true }
+        );
+        (0, import_vue4.onMounted)(() => {
+          emitInstrument({ class: "lifecycle", name: "checkout.mount" });
+          follow(() => props.flopay, flopay);
+          follow(() => props.paypalFlopay, paypalFlopay, "paypal");
+          (0, import_vue4.watch)(
+            flopay,
+            (instance, _previous, onCleanup) => {
+              if (!instance) return;
+              emitInstrument({ class: "lifecycle", name: "sdk.initialize.ready" });
+              const unsubscribe = telemetryBridge(instance)?.subscribe?.(emitInstrument);
+              onCleanup(() => unsubscribe?.());
+              void (0, import_vue4.nextTick)(() => emitInstrument({ class: "lifecycle", name: "checkout.rendered" }));
+            },
+            { immediate: true }
+          );
+          (0, import_vue4.watch)(paypalFlopay, (instance, _previous, onCleanup) => {
+            if (!instance || instance === flopay.value) return;
+            const unsubscribe = telemetryBridge(instance)?.subscribe?.(emitInstrument);
+            onCleanup(() => unsubscribe?.());
+          });
+        });
+        return () => slots.default?.();
+      }
+    });
+  }
+});
+
+// src/stripe-paypal-continuation.ts
+function sessionStore() {
+  if (typeof window === "undefined") return null;
+  try {
+    return window.sessionStorage;
+  } catch {
+    return null;
+  }
+}
+function createStripePayPalAttempt() {
+  const random = globalThis.crypto?.randomUUID?.();
+  if (random) return random;
+  return `${Date.now().toString(36)}${Math.random().toString(36).slice(2, 12)}`;
+}
+function saveStripePayPalContinuation(continuation) {
+  const store = sessionStore();
+  if (!store) return false;
+  try {
+    store.setItem(
+      STRIPE_PAYPAL_CONTINUATION_KEY,
+      JSON.stringify({
+        attempt: continuation.attempt,
+        sessionId: continuation.sessionId,
+        ...continuation.nonce ? { nonce: continuation.nonce } : {}
+      })
+    );
+    return true;
+  } catch {
+    return false;
+  }
+}
+function clearStripePayPalContinuation() {
+  try {
+    sessionStore()?.removeItem(STRIPE_PAYPAL_CONTINUATION_KEY);
+  } catch {
+  }
+}
+function stripePayPalReturnUrl(attempt) {
+  const url = new URL((0, import_shared4.stripeRedirectReturnUrl)());
+  url.searchParams.delete(STRIPE_PAYPAL_ATTEMPT_PARAM);
+  if (attempt) url.searchParams.set(STRIPE_PAYPAL_ATTEMPT_PARAM, attempt);
+  return url.toString();
+}
+function readStripePayPalReturnContinuation() {
+  if (typeof window === "undefined") return null;
+  const [paymentIntentId] = (0, import_shared4.readStripeRedirectParams)();
+  if (!paymentIntentId) return null;
+  const attempt = new URLSearchParams(window.location.search).get(STRIPE_PAYPAL_ATTEMPT_PARAM);
+  if (!attempt) return null;
+  try {
+    const raw = sessionStore()?.getItem(STRIPE_PAYPAL_CONTINUATION_KEY);
+    if (!raw) return null;
+    const parsed = JSON.parse(raw);
+    if (!parsed || parsed.attempt !== attempt || typeof parsed.sessionId !== "string") return null;
+    return {
+      attempt,
+      sessionId: parsed.sessionId,
+      ...typeof parsed.nonce === "string" ? { nonce: parsed.nonce } : {}
+    };
+  } catch {
+    return null;
+  }
+}
+function consumeStripePayPalReturn() {
+  clearStripePayPalContinuation();
+  window.history.replaceState({}, "", stripePayPalReturnUrl());
+}
+var import_shared4, STRIPE_PAYPAL_CONTINUATION_KEY, STRIPE_PAYPAL_ATTEMPT_PARAM;
+var init_stripe_paypal_continuation = __esm({
+  "src/stripe-paypal-continuation.ts"() {
+    "use strict";
+    import_shared4 = require("@flopay/shared");
+    STRIPE_PAYPAL_CONTINUATION_KEY = "flopay_vue_paypal_resume";
+    STRIPE_PAYPAL_ATTEMPT_PARAM = "flopay_paypal_attempt";
+  }
+});
+
+// src/stripe-elements.ts
+var stripe_elements_exports = {};
+__export(stripe_elements_exports, {
+  StripePaymentMethods: () => StripePaymentMethods
+});
+function checkoutButtonMethodFromProviderMethod(method) {
+  if (method === "paypal") return "paypal";
+  if (method === "apple_pay") return "apple_pay";
+  return "google_pay";
+}
+function walletClockNow() {
+  return globalThis.performance?.now() ?? Date.now();
+}
+function stripeMethodCategory(method) {
+  return WALLET_METHODS.has(method) ? "wallet" : "apm";
+}
+function declineReason(error) {
+  return error.decline_code ?? error.code ?? "provider_declined";
+}
+var import_card_setup2, import_shared5, import_vue5, WALLET_METHODS, EXPRESS_CHECKOUT_CLICK_BUDGET_MS, PAYPAL_REDIRECT_TILE_HEIGHT, stripePayPalResumeAttempts, StripePaymentMethods;
+var init_stripe_elements = __esm({
+  "src/stripe-elements.ts"() {
+    "use strict";
+    import_card_setup2 = require("@flopay/js/card-setup");
+    import_shared5 = require("@flopay/shared");
+    import_vue5 = require("vue");
+    init_context();
+    init_provider();
+    init_stripe_paypal_continuation();
+    WALLET_METHODS = /* @__PURE__ */ new Set(["apple_pay", "google_pay", "link", "paypal", "amazon_pay"]);
+    EXPRESS_CHECKOUT_CLICK_BUDGET_MS = 900;
+    PAYPAL_REDIRECT_TILE_HEIGHT = 44;
+    stripePayPalResumeAttempts = /* @__PURE__ */ new Map();
+    StripePaymentMethods = (0, import_vue5.defineComponent)({
+      name: "FloPayStripePaymentMethods",
+      props: {
+        session: { type: Object, default: null },
+        sessionId: { type: String, required: true },
+        nonce: { type: String, default: void 0 },
+        billingApiUrl: { type: String, required: true },
+        publishableKey: { type: String, required: true },
+        methods: { type: Array, required: true },
+        /** `payment` for checkout, `setup` for payment-method setup. */
+        intentKind: { type: String, default: "payment" },
+        currency: { type: String, default: void 0 },
+        amount: { type: Number, default: 0 },
+        /**
+         * React's `totalAmount`: the cart total due today, in minor units. When it
+         * is given on a checkout (`intentKind: 'payment'`), the wallet row follows
+         * React's wallet group: its Elements mode, amount and capture method come
+         * from the shared `resolveWalletModeOptions` (setup mode for a $0 total),
+         * and its intent is `totalAmount > 0 ? 'payment' : 'setup'`.
+         */
+        totalAmount: { type: Number, default: void 0 },
+        returnUrl: { type: String, default: void 0 },
+        /** The theme's appearance, normalized for Stripe Elements (React's setup branch does the same). */
+        appearance: { type: Object, default: void 0 },
+        /**
+         * React's `stripePayPalPresentation`, which the form resolves from its
+         * `walletPresentation` prop through the shared
+         * `resolveStripePayPalPresentation`. With `redirect`, Stripe-routed PayPal
+         * leaves the wallet row and renders as React's full-page "Pay with PayPal"
+         * redirect tile, which resumes the payment when the buyer returns.
+         */
+        paypalPresentation: { type: String, default: "popup" },
+        /**
+         * The form's click gate (React's `runBeforeButtonClick`), run by the
+         * redirect tile and by the wallet row's Express Checkout click.
+         */
+        runBeforeButtonClick: {
+          type: Function,
+          default: void 0
+        },
+        /**
+         * React's `onTokenizedBody={dispatchTokenizedBody}` for the redirect tile:
+         * the form posts `/process` with the approved payment. Without it, the
+         * tile reports `complete` itself, as this component's wallet row does.
+         */
+        onTokenizedBody: {
+          type: Function,
+          default: void 0
+        },
+        /**
+         * React's `isProcessing={isSubmitting}`: while the form is processing, the
+         * PayPal redirect tile and the APM button are disabled and ignore clicks.
+         */
+        isProcessing: { type: Boolean, default: false },
+        /**
+         * The form's storage-free stand-in for the click-time account patch React
+         * restores from its `localStorage` continuation (issue #410, triage AC 4:
+         * Vue never stores it). On an authorized redirect return it is asked once
+         * for the account, with the returned session id; what it answers goes to
+         * `onTokenizedBody` as the attempt's `accountPatch`. A throw or no answer
+         * continues without one, because the payment is already authorized.
+         */
+        recoverAccountPatch: {
+          type: Function,
+          default: void 0
+        }
+      },
+      emits: {
+        /** The buyer confirmed a wallet or APM and its element validated: the attempt starts. */
+        submitting: () => true,
+        complete: (_result) => true,
+        decline: (_decline) => true,
+        error: (_error) => true
+      },
+      setup(props, { emit }) {
+        const walletContainer = (0, import_vue5.ref)(null);
+        const apmContainer = (0, import_vue5.ref)(null);
+        const processing = (0, import_vue5.ref)(false);
+        const busy = () => processing.value || props.isProcessing;
+        const cleanups = [];
+        let apmElements = null;
+        let stripe = null;
+        const elementsOptions = (methods, surface) => {
+          const setupFutureUsage = (0, import_shared5.resolveSetupFutureUsage)(props.session, methods, surface);
+          const currency = (props.currency ?? props.session?.currency ?? "usd").toLowerCase();
+          const appearance = props.appearance ? { appearance: (0, import_shared5.toStripeAppearance)(props.appearance) } : {};
+          return props.intentKind === "setup" ? { mode: "setup", currency, paymentMethodTypes: methods, ...appearance } : {
+            mode: props.session?.mode === "subscription" ? "subscription" : "payment",
+            amount: props.amount,
+            currency,
+            paymentMethodTypes: methods,
+            ...setupFutureUsage ? { setupFutureUsage } : {},
+            ...appearance
+          };
+        };
+        const walletFollowsTotal = () => props.intentKind === "payment" && typeof props.totalAmount === "number";
+        const walletIntentKind = () => {
+          if (!walletFollowsTotal()) return props.intentKind;
+          return (props.totalAmount ?? 0) > 0 ? "payment" : "setup";
+        };
+        const walletElementsOptions = (methods) => {
+          if (!walletFollowsTotal()) return elementsOptions(methods, "wallet");
+          const setupFutureUsage = (0, import_shared5.resolveSetupFutureUsage)(props.session, methods, "wallet");
+          const currency = (props.currency ?? props.session?.currency ?? "usd").toLowerCase();
+          return {
+            ...(0, import_shared5.resolveWalletModeOptions)(props.totalAmount, props.session?.captureMethod),
+            currency,
+            paymentMethodTypes: methods,
+            ...setupFutureUsage ? { setupFutureUsage } : {},
+            ...props.appearance ? { appearance: (0, import_shared5.toStripeAppearance)(props.appearance) } : {}
+          };
+        };
+        let walletAttempt = null;
+        const floPayContext = (0, import_vue5.inject)(FLOPAY_CONTEXT, null);
+        const walletTelemetry = () => {
+          const instance = floPayContext?.flopay.value;
+          return instance ? telemetryBridge(instance) : void 0;
+        };
+        let walletSheetClick = null;
+        let walletSheetAttempts = 0;
+        const endWalletSheetClick = () => {
+          walletSheetClick?.stopObserving();
+          walletSheetClick = null;
+        };
+        const observeWalletSheetClick = (method, startedAt) => {
+          endWalletSheetClick();
+          walletSheetAttempts += 1;
+          const click = {
+            attempt: walletSheetAttempts,
+            method,
+            startedAt,
+            handoffObserved: false,
+            stopObserving: () => {
+            }
+          };
+          const onBlur = () => {
+            click.handoffObserved = true;
+          };
+          const onVisibilityChange = () => {
+            if (document.visibilityState === "hidden") click.handoffObserved = true;
+          };
+          window.addEventListener("blur", onBlur);
+          document.addEventListener("visibilitychange", onVisibilityChange);
+          click.stopObserving = () => {
+            window.removeEventListener("blur", onBlur);
+            document.removeEventListener("visibilitychange", onVisibilityChange);
+          };
+          walletSheetClick = click;
+        };
+        cleanups.push(endWalletSheetClick);
+        const reportWalletSheetRefusal = (click) => {
+          const environment = (0, import_shared5.detectPayPalEnvironment)();
+          walletTelemetry()?.error?.({
+            errorCode: "PROVIDER_RUNTIME_FAILED",
+            failureCategory: "provider_runtime",
+            stage: "overlay_open",
+            provider: "stripe",
+            paymentMethodCategory: "wallet",
+            requestCategory: "provider_sdk",
+            terminalReason: "provider_error",
+            attempt: click.attempt,
+            walletType: "google_pay",
+            ...environment,
+            presentationMode: "popup"
+          });
+          const failure = new import_shared5.FloPayError((0, import_shared5.buildWalletSheetWindowMessage)("Google Pay"), "api_error", {
+            code: "external_payment_method_failed",
+            param: click.method,
+            details: {
+              providerCode: import_shared5.WALLET_SHEET_WINDOW_TOO_SMALL_CODE,
+              popupBlocked: false,
+              ...environment,
+              presentationMode: "popup"
+            }
+          });
+          (0, import_shared5.invokeMerchantCallback)(() => emit("error", failure));
+        };
+        const gateWalletClick = async (event) => {
+          const clickStartedAt = walletClockNow();
+          walletAttempt = null;
+          endWalletSheetClick();
+          const gate = props.runBeforeButtonClick;
+          if (!gate) {
+            observeWalletSheetClick(event.expressPaymentType, clickStartedAt);
+            event.resolve();
+            return;
+          }
+          let clickActive = true;
+          const clickTimer = setTimeout(() => {
+            clickActive = false;
+            event.reject();
+          }, EXPRESS_CHECKOUT_CLICK_BUDGET_MS);
+          let beforeClick;
+          try {
+            beforeClick = await gate(checkoutButtonMethodFromProviderMethod(event.expressPaymentType));
+          } catch {
+            beforeClick = { proceed: false };
+          } finally {
+            clearTimeout(clickTimer);
+          }
+          if (!clickActive) return;
+          if (!beforeClick.proceed) {
+            event.reject();
+            return;
+          }
+          walletAttempt = {
+            method: event.expressPaymentType,
+            ...beforeClick.sessionId ? { sessionId: beforeClick.sessionId } : {},
+            ...beforeClick.nonce ? { nonce: beforeClick.nonce } : {}
+          };
+          observeWalletSheetClick(event.expressPaymentType, clickStartedAt);
+          event.resolve();
+        };
+        const confirm = async (elements, method, intentKind = props.intentKind, attempt = null) => {
+          if (!stripe || processing.value) return;
+          processing.value = true;
+          const api = new import_card_setup2.PaymentAPI(props.billingApiUrl, { telemetry: false });
+          const category = stripeMethodCategory(method);
+          const sessionId = attempt?.sessionId ?? props.sessionId;
+          const nonce = attempt?.nonce ?? props.nonce;
+          try {
+            const submitted = await elements.submit();
+            if (submitted.error) return;
+            (0, import_shared5.invokeMerchantCallback)(() => emit("submitting"));
+            const intent = await api.createSessionIntent(sessionId, nonce ?? "", {
+              provider: "stripe",
+              paymentMethodCategory: category,
+              paymentMethodType: method,
+              paymentMethodId: null,
+              intentKind
+            });
+            const clientSecret = intent.clientSecret ?? "";
+            const returnUrl = props.returnUrl ?? window.location.href;
+            const { error } = intentKind === "setup" ? await stripe.confirmSetup({
+              elements,
+              clientSecret,
+              confirmParams: { return_url: returnUrl },
+              redirect: "if_required"
+            }) : await stripe.confirmPayment({
+              elements,
+              clientSecret,
+              confirmParams: { return_url: returnUrl },
+              redirect: "if_required"
+            });
+            if (error) {
+              if (intentKind === "payment") {
+                void api.reportSessionIntentDecline(sessionId, nonce ?? "", {
+                  provider: "stripe",
+                  paymentMethodCategory: category,
+                  paymentMethodType: method,
+                  providerDeclineReason: declineReason(error),
+                  providerIntentId: intent.providerObjectId
+                }).catch(() => {
+                });
+              }
+              const decline = {
+                method,
+                message: error.message ?? "Your payment was declined.",
+                code: error.code,
+                declineCode: error.decline_code ?? error.code,
+                sessionId
+              };
+              (0, import_shared5.invokeMerchantCallback)(() => emit("decline", decline));
+              return;
+            }
+            const result = {
+              status: "succeeded",
+              paymentIntentId: intent.providerObjectId,
+              checkoutMethod: method
+            };
+            (0, import_shared5.invokeMerchantCallback)(() => emit("complete", result));
+          } catch (error) {
+            const failure = error instanceof import_shared5.FloPayError ? error : new import_shared5.FloPayError(
+              error instanceof Error ? error.message : "Payment failed.",
+              "api_error"
+            );
+            (0, import_shared5.invokeMerchantCallback)(() => emit("error", failure));
+          } finally {
+            processing.value = false;
+          }
+        };
+        const paypalRedirect = () => props.paypalPresentation === "redirect" && props.intentKind === "payment" && props.methods.includes("paypal");
+        let active = true;
+        const emitPayPalDecline = (message, sessionId, error) => {
+          const decline = {
+            method: "paypal",
+            message,
+            ...error ? { code: error.code, declineCode: error.decline_code ?? error.code } : {},
+            sessionId
+          };
+          (0, import_shared5.invokeMerchantCallback)(() => emit("decline", decline));
+        };
+        const emitPayPalFailure = (message, code) => {
+          const failure = new import_shared5.FloPayError(message, "api_error", code ? { code } : void 0);
+          (0, import_shared5.invokeMerchantCallback)(() => emit("error", failure));
+        };
+        const handOffPayPal = (body, overrides) => {
+          if (props.onTokenizedBody) {
+            props.onTokenizedBody(body, overrides);
+            return;
+          }
+          const result = {
+            status: "succeeded",
+            paymentIntentId: body.threeDSecureActionResultTokenId,
+            checkoutMethod: "paypal"
+          };
+          (0, import_shared5.invokeMerchantCallback)(() => emit("complete", result));
+        };
+        const redirectToPayPal = async () => {
+          if (!stripe || busy()) return;
+          processing.value = true;
+          const api = new import_card_setup2.PaymentAPI(props.billingApiUrl, { telemetry: false });
+          let sessionId = props.sessionId;
+          try {
+            const beforeClick = props.runBeforeButtonClick ? await props.runBeforeButtonClick("paypal") : { proceed: true };
+            if (!beforeClick.proceed) return;
+            sessionId = beforeClick.sessionId ?? props.sessionId;
+            const nonce = beforeClick.nonce ?? props.nonce;
+            const createPaymentMethod = stripe.createPaymentMethod;
+            const { error: pmError, paymentMethod } = await createPaymentMethod.call(stripe, {
+              type: "paypal"
+            });
+            if (pmError) {
+              emitPayPalFailure(
+                pmError.message ?? "PayPal could not be started.",
+                "stripe_paypal_create_payment_method_failed"
+              );
+              return;
+            }
+            const intent = await api.createSessionIntent(sessionId, nonce ?? "", {
+              provider: "stripe",
+              paymentMethodCategory: "wallet",
+              paymentMethodType: "paypal",
+              paymentMethodId: paymentMethod?.id ?? null,
+              intentKind: "payment"
+            });
+            if (intent.provider !== "stripe") {
+              throw new Error("Invalid provider returned for PayPal intent");
+            }
+            const clientSecret = intent.clientSecret ?? "";
+            const attempt = createStripePayPalAttempt();
+            const continuationSaved = saveStripePayPalContinuation({ attempt, sessionId, nonce });
+            if (!continuationSaved) {
+              throw new Error("Unable to save PayPal checkout progress. Please try again.");
+            }
+            const { error, paymentIntent } = await stripe.confirmPayment({
+              clientSecret,
+              confirmParams: {
+                return_url: stripePayPalReturnUrl(attempt),
+                ...paymentMethod?.id ? { payment_method: paymentMethod.id } : {}
+              },
+              redirect: "if_required"
+            });
+            clearStripePayPalContinuation();
+            if (error) {
+              if ((0, import_shared5.isProviderDecline)(error)) {
+                void api.reportSessionIntentDecline(sessionId, nonce ?? "", {
+                  provider: "stripe",
+                  paymentMethodCategory: "wallet",
+                  paymentMethodType: "paypal",
+                  providerDeclineReason: error.code ?? "provider_declined",
+                  providerIntentId: intent.providerObjectId
+                }).catch(() => {
+                });
+                emitPayPalDecline(error.message ?? "Your payment was declined.", sessionId, error);
+                return;
+              }
+              emitPayPalFailure(
+                error.message ?? "PayPal payment failed.",
+                "stripe_paypal_confirm_failed"
+              );
+              return;
+            }
+            const paymentMethodId = typeof paymentIntent?.payment_method === "string" ? paymentIntent.payment_method : paymentIntent?.payment_method?.id;
+            handOffPayPal(
+              {
+                id: paymentMethodId ?? paymentIntent?.id,
+                type: "card",
+                threeDSecureActionResultTokenId: paymentIntent?.id,
+                isPaypal: true
+              },
+              {
+                accountPatch: beforeClick.accountPatch,
+                paymentMethodCategory: "paypal",
+                presentationMode: "redirect",
+                sessionId,
+                nonce
+              }
+            );
+          } catch (error) {
+            emitPayPalFailure(
+              error instanceof Error ? error.message : "PayPal payment failed.",
+              "stripe_paypal_failed"
+            );
+          } finally {
+            processing.value = false;
+          }
+        };
+        const recoverReturnAccount = async (sessionId) => {
+          const recover = props.recoverAccountPatch;
+          if (!recover) return void 0;
+          try {
+            return await recover(sessionId) ?? void 0;
+          } catch {
+            return void 0;
+          }
+        };
+        const continueAuthorizedReturn = async (paymentIntent, continuation) => {
+          const paymentMethodId = typeof paymentIntent.payment_method === "string" ? paymentIntent.payment_method : paymentIntent.payment_method?.id;
+          const accountPatch = await recoverReturnAccount(continuation.sessionId);
+          if (!active) return;
+          handOffPayPal(
+            {
+              id: paymentMethodId ?? paymentIntent.id,
+              type: "card",
+              threeDSecureActionResultTokenId: paymentIntent.id,
+              isPaypal: true
+            },
+            {
+              ...accountPatch ? { accountPatch } : {},
+              sessionId: continuation.sessionId,
+              nonce: continuation.nonce,
+              presentationMode: "redirect"
+            }
+          );
+        };
+        const resumeStripePayPal = async (provider) => {
+          const [paymentIntentId, clientSecret, redirectStatus] = (0, import_shared5.readStripeRedirectParams)();
+          if (!paymentIntentId || !clientSecret) return;
+          const continuation = readStripePayPalReturnContinuation();
+          if (!continuation) return;
+          const sessionId = continuation.sessionId;
+          const retrievalKey = continuation.attempt;
+          let retrieval = stripePayPalResumeAttempts.get(retrievalKey);
+          if (!retrieval) {
+            retrieval = redirectStatus === "failed" ? Promise.resolve(null) : Promise.resolve().then(() => provider.retrievePaymentIntent(clientSecret));
+            stripePayPalResumeAttempts.set(retrievalKey, retrieval);
+          }
+          processing.value = true;
+          try {
+            const result = await retrieval;
+            if (!active) return;
+            if (result?.error) {
+              stripePayPalResumeAttempts.delete(retrievalKey);
+              emitPayPalFailure(
+                result.error.message ?? "Failed to retrieve PayPal payment status.",
+                "REDIRECT_RESUME_FAILED"
+              );
+              return;
+            }
+            consumeStripePayPalReturn();
+            stripePayPalResumeAttempts.delete(retrievalKey);
+            if (redirectStatus === "failed") {
+              emitPayPalDecline("PayPal payment was declined. Please try again.", sessionId);
+              return;
+            }
+            const paymentIntent = result?.paymentIntent;
+            if (paymentIntent && paymentIntent.id !== paymentIntentId) {
+              emitPayPalFailure(
+                "Failed to match the returned PayPal payment.",
+                "REDIRECT_RESUME_FAILED"
+              );
+              return;
+            }
+            if (paymentIntent && (paymentIntent.status === "requires_capture" || paymentIntent.status === "succeeded")) {
+              await continueAuthorizedReturn(paymentIntent, continuation);
+              return;
+            }
+            emitPayPalDecline("PayPal payment was not completed. Please try again.", sessionId);
+          } catch (error) {
+            if (!active) return;
+            stripePayPalResumeAttempts.delete(retrievalKey);
+            emitPayPalFailure(
+              error instanceof Error ? error.message : "Failed to complete PayPal payment.",
+              "REDIRECT_RESUME_FAILED"
+            );
+          } finally {
+            if (active) processing.value = false;
+          }
+        };
+        (0, import_vue5.onMounted)(async () => {
+          const wallets = props.methods.filter(
+            (method) => WALLET_METHODS.has(method) && !(method === "paypal" && paypalRedirect())
+          );
+          const apms = props.methods.filter((method) => !WALLET_METHODS.has(method));
+          try {
+            const { loadStripe } = await import("@stripe/stripe-js");
+            stripe = await loadStripe(props.publishableKey);
+            if (!stripe) throw new Error("Stripe.js did not initialize.");
+            if (paypalRedirect()) void resumeStripePayPal(stripe);
+            if (wallets.length > 0 && walletContainer.value) {
+              if ((0, import_shared5.shouldPreferWalletPopup)()) cleanups.push((0, import_shared5.denyPaymentPermissionToNewFrames)(document));
+              const elements = stripe.elements(walletElementsOptions(wallets));
+              const express = elements.create("expressCheckout");
+              express.on("click", (event) => gateWalletClick(event));
+              express.on("confirm", (event) => {
+                const attempt = walletAttempt;
+                walletAttempt = null;
+                endWalletSheetClick();
+                void confirm(elements, event.expressPaymentType, walletIntentKind(), attempt);
+              });
+              express.on("cancel", () => {
+                walletAttempt = null;
+                const click = walletSheetClick;
+                endWalletSheetClick();
+                if (click && (0, import_shared5.isWalletSheetRefusedForWindowSize)({
+                  method: click.method,
+                  elapsedMs: walletClockNow() - click.startedAt,
+                  handoffObserved: click.handoffObserved
+                })) {
+                  reportWalletSheetRefusal(click);
+                }
+              });
+              express.mount(walletContainer.value);
+              cleanups.push(() => express.destroy());
+            }
+            if (apms.length > 0 && apmContainer.value) {
+              apmElements = stripe.elements(elementsOptions(apms, "inline_apm"));
+              const payment = apmElements.create("payment", { layout: "accordion" });
+              payment.mount(apmContainer.value);
+              cleanups.push(() => payment.destroy());
+            }
+          } catch (error) {
+            const failure = new import_shared5.FloPayError(
+              error instanceof Error ? error.message : "Payment methods failed to load.",
+              "api_error",
+              { code: "PROVIDER_LOAD_FAILED" }
+            );
+            (0, import_shared5.invokeMerchantCallback)(() => emit("error", failure));
+          }
+        });
+        (0, import_vue5.onBeforeUnmount)(() => {
+          active = false;
+          for (const cleanup of cleanups.splice(0)) cleanup();
+        });
+        return () => (0, import_vue5.h)("div", { "data-testid": "flopay-stripe-methods" }, [
+          // React renders the Stripe PayPal group above the wallet row.
+          paypalRedirect() ? (0, import_vue5.h)(
+            "div",
+            {
+              role: "group",
+              "aria-label": "PayPal payment method",
+              "data-testid": "flopay-paypal-focus-target",
+              style: { borderRadius: "8px" }
+            },
+            [
+              (0, import_vue5.h)(
+                "button",
+                {
+                  type: "button",
+                  "data-testid": "flopay-stripe-paypal-redirect",
+                  disabled: busy(),
+                  onClick: () => void redirectToPayPal(),
+                  style: {
+                    width: "100%",
+                    minHeight: `${PAYPAL_REDIRECT_TILE_HEIGHT}px`,
+                    border: "1px solid #d1d5db",
+                    borderRadius: "8px",
+                    background: "#ffc439",
+                    color: "#111827",
+                    cursor: busy() ? "not-allowed" : "pointer",
+                    fontSize: "1rem",
+                    fontWeight: 700
+                  }
+                },
+                "Pay with PayPal"
+              )
+            ]
+          ) : null,
+          (0, import_vue5.h)("div", { ref: walletContainer, "data-testid": "flopay-express-checkout" }),
+          (0, import_vue5.h)("div", { ref: apmContainer, "data-testid": "flopay-payment-element" }),
+          props.methods.some((method) => !WALLET_METHODS.has(method)) ? (0, import_vue5.h)(
+            "button",
+            {
+              type: "button",
+              disabled: busy(),
+              onClick: () => {
+                if (props.isProcessing) return;
+                const method = props.methods.find((candidate) => !WALLET_METHODS.has(candidate));
+                if (apmElements && method) void confirm(apmElements, method);
+              }
+            },
+            processing.value ? "Processing\u2026" : "Continue"
+          ) : null
+        ]);
+      }
+    });
+  }
+});
+
+// src/payment-method-setup-paypal.ts
+var payment_method_setup_paypal_exports = {};
+__export(payment_method_setup_paypal_exports, {
+  PayPalSetupMethod: () => PayPalSetupMethod
+});
+var import_card_setup3, import_shared6, import_paypal_js, import_vue6, PayPalSetupMethod;
+var init_payment_method_setup_paypal = __esm({
+  "src/payment-method-setup-paypal.ts"() {
+    "use strict";
+    import_card_setup3 = require("@flopay/js/card-setup");
+    import_shared6 = require("@flopay/shared");
+    import_paypal_js = require("@paypal/paypal-js");
+    import_vue6 = require("vue");
+    PayPalSetupMethod = (0, import_vue6.defineComponent)({
+      name: "FloPayPayPalSetupMethod",
+      props: {
+        clientId: { type: String, required: true },
+        environment: { type: String, default: void 0 },
+        /** The setup session's own currency, when the read carries one. A vault flow needs none. */
+        currency: { type: String, default: void 0 },
+        sessionId: { type: String, required: true },
+        nonce: { type: String, required: true },
+        billingApiUrl: { type: String, required: true },
+        telemetry: { type: Boolean, default: void 0 },
+        customer: { type: Object, required: true }
+      },
+      emits: {
+        /** The buyer started saving PayPal. */
+        submitting: () => true,
+        /** PayPal accepted the account and the billing API took the token. */
+        confirmed: () => true,
+        /** A technical failure; `retryable` says whether trying again can help. */
+        failed: (_error, _options) => true,
+        /** The buyer closed PayPal's window without an outcome (not a cancel). */
+        abandoned: () => true
+      },
+      setup(props, { emit }) {
+        const container = (0, import_vue6.ref)(null);
+        let active = true;
+        let close;
+        let api = null;
+        (0, import_vue6.onMounted)(() => {
+          const { inAppBrowser } = (0, import_shared6.detectPayPalEnvironment)();
+          const client = new import_card_setup3.PaymentAPI(props.billingApiUrl, { telemetry: props.telemetry });
+          api = client;
+          const { sessionId, nonce } = props;
+          const customer = {
+            userId: props.customer.userId,
+            email: props.customer.email
+          };
+          const environment = props.environment;
+          void (async () => {
+            try {
+              const paypal = await (0, import_paypal_js.loadScript)({
+                clientId: props.clientId,
+                ...props.currency ? { currency: props.currency.toUpperCase() } : {},
+                components: "buttons",
+                ...environment === "sandbox" || environment === "production" ? { environment } : {}
+              });
+              const target = container.value;
+              if (!active || !target) return;
+              if (!paypal?.Buttons) {
+                throw new import_shared6.FloPayError("PayPal could not be loaded.", "api_error", {
+                  code: "paypal_unavailable"
+                });
+              }
+              const buttons = paypal.Buttons({
+                createVaultSetupToken: async () => {
+                  emit("submitting");
+                  const intent = await client.createSessionIntent(sessionId, nonce, {
+                    provider: "paypal",
+                    paymentMethodCategory: "wallet",
+                    paymentMethodType: import_shared6.PAYPAL_VAULTED_PAYMENT_METHOD_TYPE,
+                    paymentMethodId: null,
+                    intentKind: "setup"
+                  });
+                  if (intent.provider !== "paypal" || intent.providerObjectType !== "setup_token") {
+                    throw new import_shared6.FloPayError(
+                      "The billing API did not return a PayPal setup token.",
+                      "api_error",
+                      { code: "InvalidSessionIntentResponse" }
+                    );
+                  }
+                  return intent.providerObjectId;
+                },
+                onApprove: async (data) => {
+                  const token = data.vaultSetupToken;
+                  if (!token) {
+                    throw new import_shared6.FloPayError("PayPal approved without a setup token.", "api_error", {
+                      code: "paypal_setup_token_missing"
+                    });
+                  }
+                  const response = await client.processPayment(customer.userId, {
+                    sessionId,
+                    nonce,
+                    paymentMethodCategory: "paypal",
+                    tokenizedData: {
+                      id: token,
+                      type: "paypal_setup_token",
+                      isPaypal: true,
+                      gateway: "paypal",
+                      paymentMethodType: import_shared6.PAYPAL_VAULTED_PAYMENT_METHOD_TYPE
+                    },
+                    accountData: customer
+                  });
+                  if (!response.ok) {
+                    throw new import_shared6.FloPayError("PayPal could not be saved.", "api_error", {
+                      code: "paypal_setup_failed",
+                      statusCode: response.status
+                    });
+                  }
+                  if (active) emit("confirmed");
+                },
+                onCancel: () => {
+                  if (active) emit("abandoned");
+                },
+                onError: (error) => {
+                  if (!active) return;
+                  const { popupBlocked } = (0, import_shared6.classifyExternalMethodFailure)(error, {
+                    inAppBrowser,
+                    handoffObserved: false
+                  });
+                  emit(
+                    "failed",
+                    popupBlocked ? new Error((0, import_shared6.buildExternalMethodRecoveryMessage)("PayPal", true, inAppBrowser)) : error,
+                    { code: popupBlocked ? "popup_blocked" : "paypal_setup_failed", retryable: true }
+                  );
+                }
+              });
+              close = () => buttons.close();
+              await buttons.render(target);
+            } catch (error) {
+              if (!active) return;
+              emit("failed", error, { code: "paypal_unavailable", retryable: true });
+            }
+          })();
+        });
+        (0, import_vue6.onBeforeUnmount)(() => {
+          active = false;
+          void close?.().catch(() => {
+          });
+          api?.destroy();
+          api = null;
+        });
+        return () => (0, import_vue6.h)("div", { ref: container, "data-flopay-paypal-setup": "" });
+      }
+    });
+  }
+});
+
+// src/payment-method-setup-entry.ts
+var payment_method_setup_entry_exports = {};
+__export(payment_method_setup_entry_exports, {
+  FloPayPaymentMethodSetup: () => FloPayPaymentMethodSetup
+});
+module.exports = __toCommonJS(payment_method_setup_entry_exports);
+
+// src/flopay-payment-method-setup-main.ts
+var import_card_setup4 = require("@flopay/js/card-setup");
+var import_shared7 = require("@flopay/shared");
+var import_vue7 = require("vue");
+
+// src/hosted-setup.ts
+var import_card_setup = require("@flopay/js/card-setup");
+var import_shared = require("@flopay/shared");
+var import_vue2 = require("vue");
+
+// src/processing-overlay.ts
+var import_vue = require("vue");
+var PROCESSING_OVERLAY_SUCCESS_DELAY_MS = 600;
+var PROCESSING_OVERLAY_ERROR_DELAY_MS = 400;
+var NEUTRAL_THEME = {
+  panel: { background: "white" },
+  spinnerTrackColor: "#e5e7eb",
+  spinnerAccentColor: "#4A49FF",
+  labelColors: { processing: "#374151", success: "#16a34a", error: "#dc2626" },
+  noteColor: "#6b7280"
+};
+var KEYFRAMES_ID = "flopay-processing-overlay-keyframes";
+var KEYFRAMES = [
+  "@keyframes flopay-spin { to { transform: rotate(360deg); } }",
+  "@keyframes flopay-pop { 0% { transform: scale(0); } 100% { transform: scale(1); } }",
+  "@keyframes flopay-draw { to { stroke-dashoffset: 0; } }",
+  "@keyframes flopay-shake { 0%,100% { transform: translateX(0); } 20%,60% { transform: translateX(-4px); } 40%,80% { transform: translateX(4px); } }"
+].join("\n");
+function ensureKeyframes() {
+  if (typeof document === "undefined" || document.getElementById(KEYFRAMES_ID)) return;
+  const style = document.createElement("style");
+  style.id = KEYFRAMES_ID;
+  style.textContent = KEYFRAMES;
+  document.head.appendChild(style);
+}
+var SVG = {
+  "aria-hidden": "true",
+  width: "48",
+  height: "48",
+  viewBox: "0 0 24 24",
+  fill: "none"
+};
+function statusIcon(status, theme) {
+  if (status === "processing") {
+    return (0, import_vue.h)("svg", { ...SVG, style: { animation: "flopay-spin 0.8s linear infinite" } }, [
+      (0, import_vue.h)("circle", {
+        cx: "12",
+        cy: "12",
+        r: "10",
+        stroke: theme.spinnerTrackColor,
+        "stroke-width": "3"
+      }),
+      (0, import_vue.h)("path", { d: "M4 12a8 8 0 018-8v3a5 5 0 00-5 5H4z", fill: theme.spinnerAccentColor })
+    ]);
+  }
+  if (status === "success") {
+    return (0, import_vue.h)("div", { style: { animation: "flopay-pop 0.4s cubic-bezier(0.34,1.56,0.64,1)" } }, [
+      (0, import_vue.h)("svg", SVG, [
+        (0, import_vue.h)("circle", { cx: "12", cy: "12", r: "11", fill: "#22c55e" }),
+        (0, import_vue.h)("path", {
+          d: "M7 12.5l3 3 7-7",
+          stroke: "white",
+          "stroke-width": "2.5",
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round",
+          style: {
+            strokeDasharray: 20,
+            strokeDashoffset: 20,
+            animation: "flopay-draw 0.4s 0.15s ease forwards"
+          }
+        })
+      ])
+    ]);
+  }
+  return (0, import_vue.h)("div", { style: { animation: "flopay-shake 0.4s ease" } }, [
+    (0, import_vue.h)("svg", SVG, [
+      (0, import_vue.h)("circle", { cx: "12", cy: "12", r: "11", fill: "#ef4444" }),
+      (0, import_vue.h)("path", {
+        d: "M8 8l8 8M16 8l-8 8",
+        stroke: "white",
+        "stroke-width": "2.5",
+        "stroke-linecap": "round",
+        style: {
+          strokeDasharray: 12,
+          strokeDashoffset: 12,
+          animation: "flopay-draw 0.3s 0.1s ease forwards"
+        }
+      })
+    ])
+  ]);
+}
+var ProcessingOverlay = (0, import_vue.defineComponent)({
+  name: "FloPayProcessingOverlay",
+  props: {
+    status: { type: String, required: true },
+    errorMessage: { type: String, default: null },
+    processingLabel: { type: String, default: "PROCESSING..." },
+    successLabel: { type: String, default: "PAYMENT SUCCESSFUL" },
+    errorLabel: { type: String, default: "PAYMENT FAILED" },
+    /** Success sub-note; `null` omits it (surfaces that do not redirect). */
+    successNote: {
+      type: String,
+      default: "You will be automatically redirected, do not close or navigate away from this window."
+    },
+    theme: { type: Object, default: void 0 }
+  },
+  setup(props) {
+    (0, import_vue.onMounted)(ensureKeyframes);
+    return () => {
+      const theme = props.theme ?? NEUTRAL_THEME;
+      const noteStyle = {
+        fontSize: "13px",
+        color: theme.noteColor,
+        fontWeight: 400,
+        maxWidth: "260px",
+        lineHeight: 1.4,
+        margin: 0
+      };
+      const label = {
+        processing: props.processingLabel,
+        success: props.successLabel,
+        error: props.errorLabel
+      }[props.status];
+      const note = { processing: null, success: props.successNote, error: props.errorMessage }[props.status];
+      return (0, import_vue.h)(
+        "div",
+        {
+          "data-testid": "flopay-processing-overlay",
+          "data-status": props.status,
+          // The attribute the Vue setup surfaces' overlay already carried.
+          "data-state": props.status,
+          role: "dialog",
+          "aria-modal": "true",
+          style: {
+            position: "fixed",
+            inset: 0,
+            background: "rgba(0,0,0,0.35)",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            zIndex: 1e3,
+            backdropFilter: "blur(2px)"
+          }
+        },
+        [
+          (0, import_vue.h)(
+            "div",
+            {
+              "data-testid": "flopay-processing-overlay-panel",
+              style: {
+                borderRadius: "12px",
+                boxShadow: "0 8px 32px rgba(0,0,0,0.18)",
+                ...theme.panel,
+                padding: "2rem 2.5rem",
+                textAlign: "center",
+                minWidth: "240px",
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                gap: "16px"
+              }
+            },
+            [
+              (0, import_vue.h)("div", { style: { width: "48px", height: "48px", position: "relative" } }, [
+                statusIcon(props.status, theme)
+              ]),
+              (0, import_vue.h)(
+                "span",
+                {
+                  "data-testid": "flopay-processing-overlay-label",
+                  style: {
+                    fontSize: "14px",
+                    fontWeight: 600,
+                    letterSpacing: "0.05em",
+                    color: theme.labelColors[props.status]
+                  }
+                },
+                label
+              ),
+              note ? (0, import_vue.h)("p", { style: noteStyle }, note) : null
+            ]
+          )
+        ]
+      );
+    };
+  }
+});
+
+// src/hosted-setup.ts
+var FloPayCardSetupError = class extends import_shared.FloPayError {
+  constructor(message, type, options) {
+    super(message, type, options);
+    this.name = "FloPayCardSetupError";
+    this.retryable = options.retryable;
+  }
+};
+function asCardSetupError(error, overrides = {}) {
+  const source = error instanceof import_shared.FloPayError ? error : void 0;
+  const statusCode = source?.statusCode;
+  const retryable = overrides.retryable ?? (source?.type === "network_error" || source?.type === "rate_limit_error" || typeof statusCode === "number" && statusCode >= 500 || source?.code === "vault_capture_timeout" || !source);
+  return new FloPayCardSetupError(
+    source?.message ?? (error instanceof Error ? error.message : "Failed to load the secure card form."),
+    source?.type ?? "api_error",
+    {
+      code: overrides.code ?? source?.code ?? "card_setup_load_failed",
+      retryable,
+      ...source?.param ? { param: source.param } : {},
+      ...statusCode === void 0 ? {} : { statusCode }
+    }
+  );
+}
+function useCardSetupTheme(source) {
+  const resolved = (0, import_vue2.computed)(
+    () => (0, import_shared.resolveCardSetupTheme)({
+      theme: source.theme ?? "modern-light",
+      appearance: source.appearance,
+      buttonsStyles: source.buttonsStyles
+    })
+  );
+  const vaultTheme = (0, import_vue2.computed)(() => resolved.value.vaultTheme);
+  const surfaceStyle = (0, import_vue2.computed)(
+    () => (0, import_shared.mergeCardSetupSurface)(resolved.value.surface, source.containerStyle)
+  );
+  const overlayTheme = (0, import_vue2.computed)(() => resolved.value.overlayTheme);
+  const appearance = (0, import_vue2.computed)(() => resolved.value.appearance);
+  return { vaultTheme, surfaceStyle, overlayTheme, appearance };
+}
+function useHostedSetup(props, emitters, options) {
+  const capture = (0, import_vue2.shallowRef)(null);
+  const vault = (0, import_vue2.shallowRef)(null);
+  const session = (0, import_vue2.shallowRef)(null);
+  const loadError = (0, import_vue2.ref)(null);
+  let active = true;
+  let terminal = false;
+  let completed = false;
+  let submissionInFlight = false;
+  let clearTimer = null;
+  const offs = [];
+  const sessionId = () => props.sessionId ?? "";
+  const showOverlay = (state) => {
+    if (clearTimer) clearTimeout(clearTimer);
+    clearTimer = null;
+    emitters.overlay(state);
+  };
+  const holdFailure = (message) => {
+    showOverlay({ status: "error", message });
+    clearTimer = setTimeout(() => {
+      clearTimer = null;
+      if (active) emitters.overlay(null);
+    }, PROCESSING_OVERLAY_ERROR_DELAY_MS);
+  };
+  const bind = (adapter) => {
+    submissionInFlight = false;
+    offs.push(
+      adapter.on("submitting", () => {
+        submissionInFlight = true;
+        showOverlay({ status: "processing", message: null });
+      }),
+      adapter.on("complete", (event) => {
+        terminal = true;
+        submissionInFlight = false;
+        showOverlay({ status: "success", message: null });
+        setTimeout(() => {
+          if (completed) return;
+          completed = true;
+          (0, import_shared.invokeMerchantCallback)(
+            () => emitters.complete({
+              status: "succeeded",
+              sessionId: sessionId(),
+              ...event.paymentMethod ? { paymentMethod: event.paymentMethod } : {}
+            })
+          );
+          if (active) emitters.overlay(null);
+        }, PROCESSING_OVERLAY_SUCCESS_DELAY_MS);
+      }),
+      adapter.on("decline", (event) => {
+        terminal = true;
+        submissionInFlight = false;
+        holdFailure(event.message ?? null);
+        (0, import_shared.invokeMerchantCallback)(
+          () => emitters.decline({
+            status: "declined",
+            sessionId: sessionId(),
+            ...event.declineReason ? { reason: event.declineReason } : {},
+            ...event.message ? { message: event.message } : {}
+          })
+        );
+      }),
+      // Closing the bank's authentication window is not an outcome: the hosted
+      // form keeps polling and may still report one. Drop the overlay but keep
+      // the submission in flight, so a late failure still shows "CARD NOT SAVED".
+      adapter.on("challenge_dismissed", () => {
+        showOverlay(null);
+      })
+    );
+  };
+  (0, import_vue2.onMounted)(async () => {
+    const billingApiUrl = (0, import_shared.resolveBillingApiUrl)(props.billingApiUrl);
+    const api = new import_card_setup.PaymentAPI(billingApiUrl, { telemetry: props.telemetry });
+    try {
+      if (!sessionId().trim()) {
+        throw new import_shared.FloPayError("A setup surface requires a sessionId.", "validation_error", {
+          code: "MissingCheckoutSessionId",
+          param: "sessionId"
+        });
+      }
+      if (!props.nonce?.trim()) {
+        throw new import_shared.FloPayError("A setup surface requires a session nonce.", "validation_error", {
+          code: "MissingCheckoutSessionToken",
+          param: "nonce"
+        });
+      }
+      const result = await api.getUnifiedCheckoutSession(sessionId(), props.nonce);
+      const read = result.data.session;
+      if (!read || !(0, import_shared.isCardSetupCheckoutSession)(read)) {
+        throw new import_shared.FloPayError(
+          "Only a zero-amount, productless setup session is accepted.",
+          "validation_error",
+          { code: "InvalidCardSetupSession", param: "sessionId" }
+        );
+      }
+      if (!active) return;
+      session.value = result;
+      if (!options.requireVault(result)) return;
+      let block = read.vault;
+      if (!(0, import_shared.isMountableVaultBlock)(block))
+        block = await api.getVaultCapture(sessionId(), props.nonce);
+      const mount = (0, import_shared.resolveVaultMountOptions)(block, {
+        billingApiUrl,
+        sessionId: sessionId(),
+        nonce: props.nonce
+      });
+      if (!mount) {
+        throw new import_shared.FloPayError(
+          "FloPay: this setup session has no vault card capability. Upgrade the billing backend integration.",
+          "api_error",
+          { code: "UnsupportedBackendVaultCapability" }
+        );
+      }
+      if (!active) return;
+      const adapter = new import_card_setup.PciVaultCardCapture({
+        sessionId: sessionId(),
+        operation: "card_setup",
+        telemetry: props.telemetry
+      });
+      bind(adapter);
+      vault.value = mount;
+      capture.value = adapter;
+    } catch (error) {
+      if (!active) return;
+      terminal = true;
+      const failure = asCardSetupError(error);
+      loadError.value = failure;
+      (0, import_shared.invokeMerchantCallback)(() => emitters.error(failure));
+    } finally {
+      api.destroy();
+    }
+  });
+  (0, import_vue2.onBeforeUnmount)(() => {
+    active = false;
+    if (clearTimer) clearTimeout(clearTimer);
+    clearTimer = null;
+    for (const off of offs.splice(0)) off();
+    if (!terminal && sessionId()) {
+      (0, import_shared.invokeMerchantCallback)(
+        () => emitters.cancel({ status: "cancelled", sessionId: sessionId() })
+      );
+    }
+  });
+  return {
+    capture,
+    vault,
+    session,
+    loadError,
+    settle: () => {
+      terminal = true;
+    },
+    widgetFailed: (message) => {
+      if (!submissionInFlight) return;
+      submissionInFlight = false;
+      holdFailure(message);
+    }
+  };
+}
+
+// src/vault-card-fields.ts
+var import_shared2 = require("@flopay/shared");
+var import_vue3 = require("vue");
+var labelledCaptures = /* @__PURE__ */ new WeakSet();
+var VaultCardFields = (0, import_vue3.defineComponent)({
+  name: "VaultCardFields",
+  props: {
+    capture: { type: Object, default: void 0 },
+    html: { type: String, default: void 0 },
+    messageToken: { type: String, default: void 0 },
+    expectedOrigin: { type: String, default: void 0 },
+    verificationRequired: { type: Boolean, default: void 0 },
+    theme: { type: Object, default: void 0 },
+    submitLabel: { type: String, default: void 0 },
+    containerStyle: { type: Object, default: void 0 }
+  },
+  emits: {
+    ready: () => true,
+    error: (_message) => true,
+    validation: (_message) => true
+  },
+  setup(props, { emit }) {
+    const container = (0, import_vue3.ref)(null);
+    let teardown = null;
+    let appliedLabel;
+    let appliedTheme = null;
+    const mountWidget = () => {
+      teardown?.();
+      teardown = null;
+      const el = container.value;
+      const { capture, html } = props;
+      if (!el || !capture || !html) return;
+      let active = true;
+      let readyEmitted = false;
+      const emitReadyOnce = () => {
+        if (!active || readyEmitted) return;
+        readyEmitted = true;
+        (0, import_shared2.invokeMerchantCallback)(() => emit("ready"));
+      };
+      const offReady = capture.on("ready", emitReadyOnce);
+      const offError = capture.on("error", (event) => {
+        const message = event.message ?? "There was a problem loading the secure card form.";
+        (0, import_shared2.invokeMerchantCallback)(() => emit("error", message));
+      });
+      const offValidation = capture.on("validation", (event) => {
+        (0, import_shared2.invokeMerchantCallback)(() => emit("validation", event.message ?? null));
+      });
+      const label = props.submitLabel ?? void 0;
+      const labelDirective = label ?? (labelledCaptures.has(capture) ? null : void 0);
+      appliedLabel = label;
+      appliedTheme = props.theme ?? null;
+      if (label !== void 0) labelledCaptures.add(capture);
+      capture.mount(el, {
+        html,
+        ...props.messageToken ? { messageToken: props.messageToken } : {},
+        ...props.expectedOrigin ? { expectedOrigin: props.expectedOrigin } : {},
+        ...props.verificationRequired ? { verificationRequired: true } : {},
+        ...props.theme ? { theme: props.theme } : {},
+        ...labelDirective === void 0 ? {} : { submitLabel: labelDirective }
+      }).then(emitReadyOnce).catch((error) => {
+        if (!active) return;
+        const message = error instanceof Error ? error.message : "Failed to load the secure card form.";
+        (0, import_shared2.invokeMerchantCallback)(() => emit("error", message));
+      });
+      teardown = () => {
+        active = false;
+        offReady();
+        offError();
+        offValidation();
+        capture.unmount();
+      };
+    };
+    (0, import_vue3.onMounted)(() => {
+      mountWidget();
+      (0, import_vue3.watch)(
+        () => [
+          props.capture,
+          props.html,
+          props.messageToken,
+          props.expectedOrigin,
+          props.verificationRequired
+        ],
+        mountWidget
+      );
+      (0, import_vue3.watch)(
+        () => props.theme,
+        (theme) => {
+          if (theme === void 0) return;
+          if (theme === null && appliedTheme === null) return;
+          appliedTheme = theme;
+          props.capture?.applyTheme?.(theme);
+        }
+      );
+      (0, import_vue3.watch)(
+        () => props.submitLabel ?? void 0,
+        (label) => {
+          if (!props.capture || label === appliedLabel) return;
+          appliedLabel = label;
+          if (label !== void 0) labelledCaptures.add(props.capture);
+          props.capture.setSubmitLabel?.(label ?? null);
+        }
+      );
+    });
+    (0, import_vue3.onBeforeUnmount)(() => {
+      teardown?.();
+      teardown = null;
+    });
+    return () => (0, import_vue3.h)("div", {
+      ref: container,
+      "data-testid": "flopay-vault-card-fields",
+      style: props.containerStyle
+    });
+  }
+});
+
+// src/flopay-payment-method-setup-main.ts
+var VERIFY_ATTEMPTS = 15;
+var VERIFY_INTERVAL_MS = 2e3;
+function delay(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+var StripeSetupMethods = (0, import_vue7.defineAsyncComponent)(
+  () => Promise.resolve().then(() => (init_stripe_elements(), stripe_elements_exports)).then((module2) => module2.StripePaymentMethods)
+);
+var PayPalSetupMethods = (0, import_vue7.defineAsyncComponent)(
+  () => Promise.resolve().then(() => (init_payment_method_setup_paypal(), payment_method_setup_paypal_exports)).then((module2) => module2.PayPalSetupMethod)
+);
+var FloPayPaymentMethodSetup = (0, import_vue7.defineComponent)({
+  name: "FloPayPaymentMethodSetup",
+  props: {
+    sessionId: { type: String, default: void 0 },
+    nonce: { type: String, default: void 0 },
+    billingApiUrl: { type: String, default: void 0 },
+    telemetry: { type: Boolean, default: void 0 },
+    theme: {
+      type: [String, Object],
+      default: "modern-light"
+    },
+    containerStyle: {
+      type: Object,
+      default: void 0
+    },
+    appearance: { type: Object, default: void 0 },
+    buttonsStyles: { type: Object, default: void 0 }
+  },
+  emits: {
+    ready: () => true,
+    complete: (_event) => true,
+    cancel: (_event) => true,
+    decline: (_event) => true,
+    validation: (_message) => true,
+    error: (_error) => true
+  },
+  setup(props, { emit, slots }) {
+    const overlay = (0, import_vue7.shallowRef)(null);
+    const setup = useHostedSetup(
+      props,
+      {
+        complete: (event) => emit("complete", event),
+        decline: (event) => emit("decline", event),
+        cancel: (event) => emit("cancel", event),
+        error: (error) => emit("error", error),
+        // The hosted card's outcome overlay, in card wording (React's `'card'`).
+        overlay: (state) => {
+          showOverlay(state ? { ...state, wording: "card" } : null);
+        }
+      },
+      { requireVault: (session) => (0, import_shared7.readSetupAdvertisement)(session).card }
+    );
+    const theme = useCardSetupTheme(props);
+    const verified = (0, import_vue7.ref)(false);
+    let mounted = false;
+    let submissionInFlight = false;
+    let completionEmitted = false;
+    let verificationGeneration = 0;
+    let overlayTimer = null;
+    const sessionId = () => props.sessionId ?? "";
+    const showOverlay = (next) => {
+      if (overlayTimer) clearTimeout(overlayTimer);
+      overlayTimer = null;
+      overlay.value = next;
+    };
+    const clearOverlayLater = () => {
+      overlayTimer = setTimeout(() => {
+        overlayTimer = null;
+        if (mounted) overlay.value = null;
+      }, PROCESSING_OVERLAY_ERROR_DELAY_MS);
+    };
+    (0, import_vue7.onMounted)(() => {
+      mounted = true;
+    });
+    (0, import_vue7.onBeforeUnmount)(() => {
+      mounted = false;
+      verificationGeneration += 1;
+      if (overlayTimer) clearTimeout(overlayTimer);
+      overlayTimer = null;
+    });
+    const reportVerified = () => {
+      setup.settle();
+      submissionInFlight = false;
+      verified.value = true;
+      showOverlay({ status: "success", wording: "payment_method", message: null });
+      setTimeout(() => {
+        if (completionEmitted) return;
+        completionEmitted = true;
+        (0, import_shared7.invokeMerchantCallback)(
+          () => emit("complete", { status: "succeeded", sessionId: sessionId() })
+        );
+        if (mounted) overlay.value = null;
+      }, PROCESSING_OVERLAY_SUCCESS_DELAY_MS);
+    };
+    const reportDecline = (event) => {
+      setup.settle();
+      submissionInFlight = false;
+      showOverlay({ status: "error", wording: "payment_method", message: event.message ?? null });
+      (0, import_shared7.invokeMerchantCallback)(
+        () => emit("decline", {
+          status: "declined",
+          sessionId: sessionId(),
+          ...event.reason ? { reason: event.reason } : {},
+          ...event.message ? { message: event.message } : {}
+        })
+      );
+      clearOverlayLater();
+    };
+    const reportFailure = (error) => {
+      if (submissionInFlight) {
+        submissionInFlight = false;
+        showOverlay({ status: "error", wording: "payment_method", message: error.message });
+        clearOverlayLater();
+      } else {
+        showOverlay(null);
+      }
+      (0, import_shared7.invokeMerchantCallback)(() => emit("error", error));
+    };
+    const verifySetup = async (options = {}) => {
+      verificationGeneration += 1;
+      const generation = verificationGeneration;
+      const stale = () => !mounted || generation !== verificationGeneration;
+      submissionInFlight = true;
+      showOverlay({ status: "processing", wording: "payment_method", message: null });
+      const api = new import_card_setup4.PaymentAPI((0, import_shared7.resolveBillingApiUrl)(props.billingApiUrl), {
+        telemetry: props.telemetry
+      });
+      try {
+        for (let attempt = 0; attempt < VERIFY_ATTEMPTS; attempt += 1) {
+          if (attempt > 0 || options.waitFirst) await delay(VERIFY_INTERVAL_MS);
+          if (stale()) return;
+          const result = await api.getUnifiedCheckoutSession(sessionId(), props.nonce);
+          if (stale()) return;
+          const status = result.data.session?.status;
+          if (status === "complete") {
+            reportVerified();
+            return;
+          }
+          if (status === "expired") {
+            throw new import_shared7.FloPayError(
+              "This setup session expired before the payment method was saved.",
+              "validation_error",
+              { code: "payment_method_setup_expired" }
+            );
+          }
+        }
+        throw new import_shared7.FloPayError(
+          "The payment method could not be confirmed yet. Please try again.",
+          "api_error",
+          { code: "payment_method_setup_unverified" }
+        );
+      } catch (error) {
+        if (stale()) return;
+        const unverified = error instanceof import_shared7.FloPayError && error.code === "payment_method_setup_unverified";
+        reportFailure(asCardSetupError(error, unverified ? { retryable: true } : {}));
+      } finally {
+        api.destroy();
+      }
+    };
+    const redirectReturn = (0, import_card_setup4.readSetupRedirectReturn)();
+    if (redirectReturn) {
+      const stopRedirectWatch = (0, import_vue7.watch)(
+        () => setup.session.value,
+        (normalized) => {
+          if (!normalized) return;
+          stopRedirectWatch();
+          (0, import_card_setup4.clearSetupRedirectParams)();
+          if (normalized.data.session?.status === "complete") {
+            reportVerified();
+            return;
+          }
+          if (redirectReturn.failed) {
+            reportDecline({ reason: "redirect_failed" });
+            return;
+          }
+          void verifySetup({ waitFirst: true });
+        }
+      );
+    }
+    const overlayNode = () => {
+      const state = overlay.value;
+      if (!state) return null;
+      return (0, import_vue7.h)(ProcessingOverlay, {
+        status: state.status,
+        errorMessage: state.message,
+        ...(0, import_shared7.setupOverlayLabels)(state.wording),
+        successNote: null,
+        ...theme.overlayTheme.value ? { theme: theme.overlayTheme.value } : {}
+      });
+    };
+    return () => {
+      if (setup.loadError.value) {
+        return (0, import_vue7.h)("div", { role: "alert" }, setup.loadError.value.message);
+      }
+      const normalized = setup.session.value;
+      if (!normalized) return slots.loading?.() ?? null;
+      if (verified.value) {
+        return (0, import_vue7.h)("div", { "data-testid": "flopay-payment-method-setup" }, [overlayNode()]);
+      }
+      const advertisement = (0, import_shared7.readSetupAdvertisement)(normalized);
+      const session = normalized.data.session ?? null;
+      const billingApiUrl = (0, import_shared7.resolveBillingApiUrl)(props.billingApiUrl);
+      const stripeBranch = (entry) => (0, import_vue7.h)("div", { key: entry.method, "data-flopay-payment-method": entry.method }, [
+        (0, import_vue7.h)(StripeSetupMethods, {
+          session,
+          sessionId: sessionId(),
+          nonce: props.nonce,
+          billingApiUrl,
+          publishableKey: entry.publishableKey,
+          methods: [entry.method],
+          intentKind: "setup",
+          currency: entry.currency,
+          ...theme.appearance.value ? { appearance: theme.appearance.value } : {},
+          // The provider said yes; wait for the backend to agree.
+          onComplete: () => {
+            void verifySetup();
+          },
+          onDecline: (decline) => reportDecline({
+            ...decline.code ? { reason: decline.code } : {},
+            ...decline.message ? { message: decline.message } : {}
+          }),
+          onError: (error) => reportFailure(asCardSetupError(error))
+        })
+      ]);
+      const paypal = advertisement.paypal;
+      const paypalBranch = paypal ? (0, import_vue7.h)("div", { key: "paypal", "data-flopay-payment-method": "paypal" }, [
+        (0, import_vue7.h)(PayPalSetupMethods, {
+          clientId: paypal.clientId,
+          ...paypal.environment ? { environment: paypal.environment } : {},
+          ...advertisement.currency ? { currency: advertisement.currency } : {},
+          sessionId: sessionId(),
+          nonce: props.nonce ?? "",
+          billingApiUrl,
+          telemetry: props.telemetry,
+          customer: {
+            userId: session?.customer?.id ?? "",
+            email: session?.customer?.email ?? ""
+          },
+          onSubmitting: () => {
+            submissionInFlight = true;
+            showOverlay({ status: "processing", wording: "payment_method", message: null });
+          },
+          onConfirmed: () => {
+            void verifySetup();
+          },
+          onFailed: (error, options) => reportFailure(asCardSetupError(error, options)),
+          // Closing PayPal's window is not an outcome: no cancel, decline or error.
+          onAbandoned: () => {
+            submissionInFlight = false;
+            showOverlay(null);
+          }
+        })
+      ]) : null;
+      const capture = setup.capture.value;
+      const vault = setup.vault.value;
+      const card = advertisement.card && capture && vault?.html ? (0, import_vue7.h)("div", { key: "card", "data-flopay-payment-method": "card" }, [
+        (0, import_vue7.h)(VaultCardFields, {
+          capture,
+          html: vault.html,
+          messageToken: vault.messageToken,
+          expectedOrigin: vault.expectedOrigin,
+          verificationRequired: vault.verificationRequired,
+          theme: theme.vaultTheme.value,
+          containerStyle: theme.surfaceStyle.value,
+          onReady: () => (0, import_shared7.invokeMerchantCallback)(() => emit("ready")),
+          onValidation: (message) => (0, import_shared7.invokeMerchantCallback)(() => emit("validation", message)),
+          onError: (message) => {
+            if (!message) return;
+            setup.widgetFailed(message);
+            const error = asCardSetupError(new Error(message), {
+              code: "card_setup_widget_failed",
+              retryable: true
+            });
+            (0, import_shared7.invokeMerchantCallback)(() => emit("error", error));
+          }
+        })
+      ]) : null;
+      const wallets = advertisement.stripe.filter(
+        ({ method }) => (0, import_shared7.stripeMethodCategory)(method) === "wallet"
+      );
+      const tiles = advertisement.stripe.filter(
+        ({ method }) => (0, import_shared7.stripeMethodCategory)(method) !== "wallet"
+      );
+      return (0, import_vue7.h)("div", { "data-testid": "flopay-payment-method-setup" }, [
+        overlayNode(),
+        ...wallets.map(stripeBranch),
+        paypalBranch,
+        ...tiles.map(stripeBranch),
+        card
+      ]);
+    };
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  FloPayPaymentMethodSetup
+});