@flopay/vue 0.0.0-stage → 1.13.2

package/dist/chunk-VXYNYMHI.mjs

@@ -0,0 +1,833 @@
+// src/stripe-elements.ts
+import { PaymentAPI } from "@flopay/js/card-setup";
+import {
+  buildWalletSheetWindowMessage,
+  denyPaymentPermissionToNewFrames,
+  detectPayPalEnvironment,
+  FloPayError,
+  invokeMerchantCallback as invokeMerchantCallback2,
+  isProviderDecline,
+  isWalletSheetRefusedForWindowSize,
+  readStripeRedirectParams as readStripeRedirectParams2,
+  resolveSetupFutureUsage,
+  resolveWalletModeOptions,
+  shouldPreferWalletPopup,
+  toStripeAppearance,
+  WALLET_SHEET_WINDOW_TOO_SMALL_CODE
+} from "@flopay/shared";
+import { defineComponent as defineComponent2, h, inject, onBeforeUnmount, onMounted as onMounted2, ref } from "vue";
+
+// src/context.ts
+var FLOPAY_CONTEXT = /* @__PURE__ */ Symbol("flopay.vue.provider");
+var CHECKOUT_STATE = /* @__PURE__ */ Symbol("flopay.vue.checkout");
+var CHECKOUT_FORM_DEFAULTS = /* @__PURE__ */ Symbol(
+  "flopay.vue.checkout-form-defaults"
+);
+
+// src/provider.ts
+import {
+  FLO_INSTRUMENT_ONCE_NAMES,
+  invokeMerchantCallback,
+  projectFloInstrument,
+  resolveBillingApiUrl
+} from "@flopay/shared";
+import {
+  defineComponent,
+  getCurrentInstance,
+  nextTick,
+  onMounted,
+  provide,
+  shallowRef,
+  watch
+} from "vue";
+var FLOPAY_TELEMETRY_BRIDGE = /* @__PURE__ */ Symbol.for("@flopay/js.telemetry.bridge.v1");
+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 = projectFloInstrument(source);
+    if (!event) return;
+    if (FLO_INSTRUMENT_ONCE_NAMES.has(event.name)) {
+      if (emittedOnce.has(event.name)) return;
+      emittedOnce.add(event.name);
+    }
+    invokeMerchantCallback(() => notify(event));
+  };
+}
+var FloPayProvider = 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 = shallowRef(initial(props.flopay));
+    const paypalFlopay = shallowRef(initial(props.paypalFlopay));
+    const component = 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);
+    });
+    provide(FLOPAY_CONTEXT, {
+      flopay,
+      paypalFlopay,
+      billingApiUrl: () => resolveBillingApiUrl(props.options?.billingApiUrl),
+      emitInstrument
+    });
+    const follow = (read, target, provider) => 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 }
+    );
+    onMounted(() => {
+      emitInstrument({ class: "lifecycle", name: "checkout.mount" });
+      follow(() => props.flopay, flopay);
+      follow(() => props.paypalFlopay, paypalFlopay, "paypal");
+      watch(
+        flopay,
+        (instance, _previous, onCleanup) => {
+          if (!instance) return;
+          emitInstrument({ class: "lifecycle", name: "sdk.initialize.ready" });
+          const unsubscribe = telemetryBridge(instance)?.subscribe?.(emitInstrument);
+          onCleanup(() => unsubscribe?.());
+          void nextTick(() => emitInstrument({ class: "lifecycle", name: "checkout.rendered" }));
+        },
+        { immediate: true }
+      );
+      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
+import { readStripeRedirectParams, stripeRedirectReturnUrl } from "@flopay/shared";
+var STRIPE_PAYPAL_CONTINUATION_KEY = "flopay_vue_paypal_resume";
+var STRIPE_PAYPAL_ATTEMPT_PARAM = "flopay_paypal_attempt";
+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(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] = 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 hasStripePayPalReturn() {
+  return readStripePayPalReturnContinuation() !== null;
+}
+function consumeStripePayPalReturn() {
+  clearStripePayPalContinuation();
+  window.history.replaceState({}, "", stripePayPalReturnUrl());
+}
+
+// src/stripe-elements.ts
+var WALLET_METHODS = /* @__PURE__ */ new Set(["apple_pay", "google_pay", "link", "paypal", "amazon_pay"]);
+var EXPRESS_CHECKOUT_CLICK_BUDGET_MS = 900;
+function checkoutButtonMethodFromProviderMethod(method) {
+  if (method === "paypal") return "paypal";
+  if (method === "apple_pay") return "apple_pay";
+  return "google_pay";
+}
+var PAYPAL_REDIRECT_TILE_HEIGHT = 44;
+var stripePayPalResumeAttempts = /* @__PURE__ */ new Map();
+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 StripePaymentMethods = defineComponent2({
+  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 = ref(null);
+    const apmContainer = ref(null);
+    const processing = ref(false);
+    const busy = () => processing.value || props.isProcessing;
+    const cleanups = [];
+    let apmElements = null;
+    let stripe = null;
+    const elementsOptions = (methods, surface) => {
+      const setupFutureUsage = resolveSetupFutureUsage(props.session, methods, surface);
+      const currency = (props.currency ?? props.session?.currency ?? "usd").toLowerCase();
+      const appearance = props.appearance ? { appearance: 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 = resolveSetupFutureUsage(props.session, methods, "wallet");
+      const currency = (props.currency ?? props.session?.currency ?? "usd").toLowerCase();
+      return {
+        ...resolveWalletModeOptions(props.totalAmount, props.session?.captureMethod),
+        currency,
+        paymentMethodTypes: methods,
+        ...setupFutureUsage ? { setupFutureUsage } : {},
+        ...props.appearance ? { appearance: toStripeAppearance(props.appearance) } : {}
+      };
+    };
+    let walletAttempt = null;
+    const floPayContext = 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 = 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 FloPayError(buildWalletSheetWindowMessage("Google Pay"), "api_error", {
+        code: "external_payment_method_failed",
+        param: click.method,
+        details: {
+          providerCode: WALLET_SHEET_WINDOW_TOO_SMALL_CODE,
+          popupBlocked: false,
+          ...environment,
+          presentationMode: "popup"
+        }
+      });
+      invokeMerchantCallback2(() => 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 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;
+        invokeMerchantCallback2(() => 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
+          };
+          invokeMerchantCallback2(() => emit("decline", decline));
+          return;
+        }
+        const result = {
+          status: "succeeded",
+          paymentIntentId: intent.providerObjectId,
+          checkoutMethod: method
+        };
+        invokeMerchantCallback2(() => emit("complete", result));
+      } catch (error) {
+        const failure = error instanceof FloPayError ? error : new FloPayError(
+          error instanceof Error ? error.message : "Payment failed.",
+          "api_error"
+        );
+        invokeMerchantCallback2(() => 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
+      };
+      invokeMerchantCallback2(() => emit("decline", decline));
+    };
+    const emitPayPalFailure = (message, code) => {
+      const failure = new FloPayError(message, "api_error", code ? { code } : void 0);
+      invokeMerchantCallback2(() => emit("error", failure));
+    };
+    const handOffPayPal = (body, overrides) => {
+      if (props.onTokenizedBody) {
+        props.onTokenizedBody(body, overrides);
+        return;
+      }
+      const result = {
+        status: "succeeded",
+        paymentIntentId: body.threeDSecureActionResultTokenId,
+        checkoutMethod: "paypal"
+      };
+      invokeMerchantCallback2(() => emit("complete", result));
+    };
+    const redirectToPayPal = async () => {
+      if (!stripe || busy()) return;
+      processing.value = true;
+      const api = new 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 (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] = readStripeRedirectParams2();
+      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;
+      }
+    };
+    onMounted2(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 (shouldPreferWalletPopup()) cleanups.push(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 && 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 FloPayError(
+          error instanceof Error ? error.message : "Payment methods failed to load.",
+          "api_error",
+          { code: "PROVIDER_LOAD_FAILED" }
+        );
+        invokeMerchantCallback2(() => emit("error", failure));
+      }
+    });
+    onBeforeUnmount(() => {
+      active = false;
+      for (const cleanup of cleanups.splice(0)) cleanup();
+    });
+    return () => h("div", { "data-testid": "flopay-stripe-methods" }, [
+      // React renders the Stripe PayPal group above the wallet row.
+      paypalRedirect() ? h(
+        "div",
+        {
+          role: "group",
+          "aria-label": "PayPal payment method",
+          "data-testid": "flopay-paypal-focus-target",
+          style: { borderRadius: "8px" }
+        },
+        [
+          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,
+      h("div", { ref: walletContainer, "data-testid": "flopay-express-checkout" }),
+      h("div", { ref: apmContainer, "data-testid": "flopay-payment-element" }),
+      props.methods.some((method) => !WALLET_METHODS.has(method)) ? 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
+    ]);
+  }
+});
+
+export {
+  FLOPAY_CONTEXT,
+  CHECKOUT_STATE,
+  CHECKOUT_FORM_DEFAULTS,
+  FloPayProvider,
+  hasStripePayPalReturn,
+  StripePaymentMethods
+};