@flopay/vue 0.0.0-stage → 1.13.1

package/dist/index.mjs

@@ -0,0 +1,3196 @@
+import {
+  FloPayCardSetup
+} from "./chunk-DUU6SMKP.mjs";
+import {
+  FloPayPaymentMethodSetup
+} from "./chunk-2PLBNCM6.mjs";
+import {
+  FloPayCardSetupError,
+  VaultCardFields
+} from "./chunk-W52CQTJI.mjs";
+import {
+  CHECKOUT_FORM_DEFAULTS,
+  CHECKOUT_STATE,
+  FLOPAY_CONTEXT,
+  FloPayProvider,
+  StripePaymentMethods,
+  hasStripePayPalReturn
+} from "./chunk-VXYNYMHI.mjs";
+
+// src/index.ts
+import { dropThirdPartyOnlyError } from "@flopay/shared";
+
+// src/automatic-payment-button.ts
+import { PaymentAPI as PaymentAPI4 } from "@flopay/js";
+import {
+  darkenHex,
+  derivePrimaryTileStyle as derivePrimaryTileStyle2,
+  FloPayError as FloPayError5,
+  invokeMerchantCallback as invokeMerchantCallback4,
+  resolveBillingApiUrl as resolveBillingApiUrl4,
+  resolveButtonsLayoutTheme as resolveButtonsLayoutTheme2,
+  resolveTheme as resolveTheme3
+} from "@flopay/shared";
+import { computed as computed3, defineComponent as defineComponent5, h as h5, onBeforeUnmount as onBeforeUnmount5, ref as ref5 } from "vue";
+
+// src/flopay-checkout.ts
+import { loadFloPay, PaymentAPI as PaymentAPI3 } from "@flopay/js";
+import {
+  buildCheckoutDisplayData,
+  clearCachedInlineCheckout,
+  clearCachedInlineSession,
+  FloPayError as FloPayError4,
+  hashCreateParams,
+  invokeMerchantCallback as invokeMerchantCallback3,
+  isDetachedSessionEligible,
+  legacyCachedSessionMatchesDraft,
+  markSessionRecentlyCompleted as markSessionRecentlyCompleted2,
+  persistCachedInlineIdempotencyKey,
+  persistCachedInlineSession,
+  readCachedInlineIdempotencyKey,
+  readCachedInlineSession,
+  resolveBillingApiUrl as resolveBillingApiUrl3,
+  resolveCheckoutLogLayout,
+  resolveDirectPaypalConfig,
+  resolveIdempotencyKey,
+  resolveTheme as resolveTheme2,
+  serializeCreateParams,
+  wasSessionRecentlyCompleted
+} from "@flopay/shared";
+import {
+  defineComponent as defineComponent4,
+  h as h4,
+  onBeforeUnmount as onBeforeUnmount4,
+  onMounted as onMounted3,
+  provide,
+  reactive,
+  ref as ref4,
+  shallowRef as shallowRef3,
+  watch as watch3
+} from "vue";
+
+// src/saved-payment.ts
+import { completeSavedCardNextAction } from "@flopay/js";
+import { FloPayError, normalizeCheckoutFailureOutcome } from "@flopay/shared";
+var SAVED_PAYMENT_SUCCESS_DELAY_MS = 600;
+function isTerminalSuccess(session) {
+  return session?.status === "authorized" || session?.status === "complete";
+}
+function terminalResult(session, sessionId) {
+  if (session.status !== "authorized") return { status: "succeeded" };
+  return {
+    status: "authorized",
+    paymentId: session.paymentId,
+    sessionId: session.id || sessionId || void 0,
+    authorizationExpiresAt: session.authorizationExpiresAt
+  };
+}
+function completionSession(completion, prior) {
+  if (completion.data.session) return completion.data.session;
+  const raw = completion.raw;
+  const attempt = raw?.latestTransactionAttempt?.result;
+  if (raw?.status === "authorized" || attempt === "AUTHORIZED") {
+    return { ...prior, status: "authorized" };
+  }
+  if (raw?.status === "completed" || attempt === "SUCCESS") {
+    return { ...prior, status: "complete" };
+  }
+  return null;
+}
+function processErrorToFloPayError(error, fallback) {
+  return new FloPayError(error.message ?? fallback, "api_error", {
+    code: error.code ?? normalizeCheckoutFailureOutcome(error.outcome) ?? normalizeCheckoutFailureOutcome(error.type) ?? error.gatewayErrorCode
+  });
+}
+function readErrorCode(error) {
+  const code = error?.code;
+  return typeof code === "string" ? code : void 0;
+}
+function coerceError(error, fallback) {
+  if (error instanceof FloPayError) return error;
+  return new FloPayError(error instanceof Error ? error.message : fallback, "api_error", {
+    ...readErrorCode(error) ? { code: readErrorCode(error) } : {}
+  });
+}
+async function chargeSavedPayment(options) {
+  const { api, session, unified, signal } = options;
+  const nonce = options.nonce || session.clientSecret || void 0;
+  const completeAction = async (nextActionRedirectUrl, actionNonce) => {
+    const completed = await completeSavedCardNextAction(
+      {
+        billingApiUrl: options.billingApiUrl,
+        sessionId: session.id,
+        nonce: actionNonce,
+        nextActionRedirectUrl,
+        ...signal ? { signal } : {}
+      },
+      api
+    );
+    if (completed.autoProcessingError) {
+      throw processErrorToFloPayError(
+        completed.autoProcessingError,
+        "Card authentication was not completed."
+      );
+    }
+    const settled = completionSession(completed, session);
+    if (!isTerminalSuccess(settled)) {
+      throw new FloPayError("Card authentication was not completed.", "api_error");
+    }
+    return { ...terminalResult(settled, session.id), checkoutMethod: "card" };
+  };
+  const settleCompletion = async (completed) => {
+    const failure = completed.autoProcessingError;
+    if (failure?.type === "3ds_required" && failure.nextActionRedirectUrl && nonce) {
+      return completeAction(failure.nextActionRedirectUrl, nonce);
+    }
+    if (failure) {
+      throw processErrorToFloPayError(failure, "Automatic payment failed. Please try again.");
+    }
+    const settled = completionSession(completed, session);
+    if (!isTerminalSuccess(settled)) {
+      throw new FloPayError("Automatic payment failed. Please try again.", "api_error", {
+        ...settled?.status === "expired" ? { code: "session_expired" } : {}
+      });
+    }
+    return terminalResult(settled, session.id);
+  };
+  if (unified?.autoProcessingPending || unified?.autoProcessingError) {
+    const pending = unified.autoProcessingPending;
+    const completed = pending ? await api.waitForCheckoutSessionCompletion(pending.sessionId || session.id, {
+      initialDelayMs: pending.retryAfterMs,
+      nonce,
+      statusUrl: pending.statusUrl,
+      ...signal ? { signal } : {}
+    }) : unified;
+    return settleCompletion(completed);
+  }
+  const customer = session.customer;
+  const response = await api.processPayment(customer?.id ?? "", {
+    sessionId: session.id,
+    nonce,
+    paymentMethodCategory: "saved",
+    accountData: {
+      userId: customer?.id ?? "",
+      email: customer?.email ?? "",
+      firstName: customer?.firstName ?? "",
+      lastName: customer?.lastName ?? "",
+      country: customer?.country ?? void 0,
+      zip: customer?.zip ?? void 0
+    },
+    returnUrl: typeof window === "undefined" ? void 0 : window.location.href
+  });
+  const body = await response.json().catch(() => null);
+  if (response.status === 202) {
+    const completed = await api.waitForCheckoutSessionCompletion(session.id, {
+      ...typeof body?.retryAfterMs === "number" ? { initialDelayMs: body.retryAfterMs } : {},
+      ...typeof body?.statusUrl === "string" ? { statusUrl: body.statusUrl } : {},
+      nonce,
+      ...signal ? { signal } : {}
+    });
+    return settleCompletion(completed);
+  }
+  if (response.ok) {
+    const authorized = body?.status === "authorized" || session.captureMethod === "manual";
+    return authorized ? { status: "authorized", paymentId: body?.paymentId ?? session.paymentId } : { status: "succeeded" };
+  }
+  if (body?.type === "3ds_required" && typeof body.nextActionRedirectUrl === "string" && nonce) {
+    return completeAction(body.nextActionRedirectUrl, nonce);
+  }
+  throw new FloPayError(
+    body?.message ?? "Payment failed. Please try again.",
+    "api_error",
+    {
+      code: body?.code ?? body?.gatewayErrorCode,
+      declineCode: body?.declineCode ?? body?.gatewayDeclineReason,
+      statusCode: response.status
+    }
+  );
+}
+
+// src/split-card-form.ts
+import { PaymentAPI as PaymentAPI2, PciVaultCardCapture } from "@flopay/js/card-setup";
+import {
+  buildCheckoutProcessMetadata,
+  buildProcessPaymentAvsAccount,
+  COUNTRY_OPTIONS,
+  canRecoverHostedCardForm,
+  computeVaultCardThemeColors,
+  derivePrimaryTileStyle,
+  detectPayPalEnvironment as detectPayPalEnvironment2,
+  FloPayError as FloPayError3,
+  filterStripeMethodsByCountryGate,
+  getStateFromPostalCode,
+  invokeMerchantCallback as invokeMerchantCallback2,
+  isAVSFieldVisible,
+  isMountableVaultBlock,
+  isValidEmail as isValidEmail3,
+  isValidPostalCode,
+  markSessionRecentlyCompleted,
+  normalizeBeforeButtonClickError,
+  resolveAVSConfig,
+  resolveBillingApiUrl as resolveBillingApiUrl2,
+  resolveButtonsLayoutTheme,
+  resolveStripePayPalPresentation,
+  resolveTheme,
+  resolveVaultMountOptions,
+  STRIPE_EXPRESS_METHODS,
+  WALLET_SHEET_WINDOW_TOO_SMALL_CODE
+} from "@flopay/shared";
+import {
+  Comment,
+  computed as computed2,
+  defineComponent as defineComponent3,
+  Fragment,
+  h as h3,
+  inject as inject2,
+  onBeforeUnmount as onBeforeUnmount3,
+  onMounted as onMounted2,
+  ref as ref3,
+  shallowRef as shallowRef2,
+  Text,
+  watch as watch2
+} from "vue";
+
+// src/direct-paypal-button.ts
+import { PaymentAPI } from "@flopay/js/card-setup";
+import {
+  applyFriendlyMessageOverride,
+  buildExternalMethodRecoveryMessage,
+  buildPayPalProcessPaymentRequest,
+  buildPayPalSessionIntentRequest,
+  buildPayPalTokenizedBody,
+  classifyExternalMethodFailure,
+  compactBuyerIdentity as compactBuyerIdentity2,
+  describePayPalProcessFailure,
+  detectPayPalEnvironment,
+  FloPayError as FloPayError2,
+  friendlyPayPalFailureMessage,
+  generateIdempotencyKey,
+  invokeMerchantCallback,
+  isPayPalAcknowledgementDeadWindow,
+  isPayPalTeardownMessage,
+  isValidEmail as isValidEmail2,
+  mergePayPalPayerIdentity,
+  needsPayPalPayerDetails,
+  normalizeGatewayEnvironment,
+  paypalProviderIdentityRequired,
+  resolveBillingApiUrl,
+  resolvePayPalApprovalIdentity,
+  resolvePayPalDeclineReason,
+  resolvePayPalPresentationMode
+} from "@flopay/shared";
+import { loadScript } from "@paypal/paypal-js";
+import {
+  computed,
+  defineComponent as defineComponent2,
+  h as h2,
+  inject,
+  onBeforeUnmount as onBeforeUnmount2,
+  onMounted,
+  ref as ref2,
+  watch
+} from "vue";
+
+// src/buyer-identity-fallback.ts
+import { compactBuyerIdentity, isValidEmail } from "@flopay/shared";
+import { defineComponent, h, onBeforeUnmount, ref, shallowRef } from "vue";
+function createBuyerIdentityFallback() {
+  const request = shallowRef(null);
+  let resolver = null;
+  let requestId = 0;
+  const collect = (methodLabel, identity) => {
+    resolver?.(null);
+    requestId += 1;
+    request.value = { id: requestId, methodLabel, identity };
+    return new Promise((resolve) => {
+      resolver = resolve;
+    });
+  };
+  const finish = (identity) => {
+    const resolve = resolver;
+    resolver = null;
+    request.value = null;
+    resolve?.(identity);
+  };
+  onBeforeUnmount(() => {
+    resolver?.(null);
+    resolver = null;
+  });
+  return { request, collect, finish };
+}
+var inputStyle = {
+  minHeight: "42px",
+  padding: "0 0.75rem",
+  border: "1px solid #d1d5db",
+  borderRadius: "6px"
+};
+var BuyerIdentityFallbackPanel = defineComponent({
+  name: "BuyerIdentityFallbackPanel",
+  props: {
+    identity: { type: Object, required: true },
+    methodLabel: { type: String, required: true },
+    /** Renders a Cancel button (React renders it when `onCancel` is passed). */
+    cancellable: { type: Boolean, default: false },
+    submitting: { type: Boolean, default: false },
+    testId: { type: String, default: "flopay-buyer-identity-pane" }
+  },
+  emits: {
+    complete: (_identity) => true,
+    cancel: () => true
+  },
+  setup(props, { emit }) {
+    const email = ref(props.identity.email?.trim() ?? "");
+    return () => {
+      const valid = isValidEmail(email.value.trim());
+      return h(
+        "div",
+        {
+          "data-testid": props.testId,
+          style: {
+            display: "flex",
+            flexDirection: "column",
+            gap: "0.75rem",
+            padding: "0.875rem",
+            border: "1px solid #d1d5db",
+            borderRadius: "8px",
+            background: "#fff",
+            color: "#262833"
+          }
+        },
+        [
+          h("div", { style: { fontWeight: 700 } }, `Continue with ${props.methodLabel}`),
+          h("label", { style: { display: "flex", flexDirection: "column", gap: "0.375rem" } }, [
+            "Email address",
+            h("input", {
+              type: "email",
+              autocomplete: "email",
+              "data-testid": "flopay-email",
+              required: true,
+              value: email.value,
+              onInput: (event) => {
+                email.value = event.target.value;
+              },
+              style: inputStyle
+            })
+          ]),
+          h("div", { style: { display: "flex", gap: "0.5rem" } }, [
+            props.cancellable ? h(
+              "button",
+              {
+                type: "button",
+                onClick: () => emit("cancel"),
+                style: { flex: 1, minHeight: "42px" }
+              },
+              "Cancel"
+            ) : null,
+            h(
+              "button",
+              {
+                type: "button",
+                disabled: !valid || props.submitting,
+                onClick: () => emit(
+                  "complete",
+                  compactBuyerIdentity({ ...props.identity, email: email.value.trim() })
+                ),
+                style: { flex: 2, minHeight: "42px" }
+              },
+              `Continue with ${props.methodLabel}`
+            )
+          ])
+        ]
+      );
+    };
+  }
+});
+
+// src/direct-paypal-button.ts
+var PAYPAL_INIT_RETRY_DELAY_MS = 1e3;
+var PayPalStartupFailure = class extends Error {
+  constructor(message, options = {}) {
+    super(message);
+    this.ineligible = options.ineligible ?? false;
+    if (options.cause !== void 0) this.cause = options.cause;
+  }
+};
+var errorMessage = (error, fallback) => error instanceof Error ? error.message : fallback;
+var debugPanelStyle = (failed) => ({
+  margin: "0 0 8px 0",
+  padding: "6px 8px",
+  background: failed ? "#fef2f2" : "#f3f4f6",
+  border: `1px solid ${failed ? "#fca5a5" : "#d1d5db"}`,
+  borderRadius: "6px",
+  color: "#111827",
+  font: "11px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace",
+  whiteSpace: "pre-wrap",
+  wordBreak: "break-word",
+  maxHeight: "220px",
+  overflowY: "auto"
+});
+var DirectPayPalButton = defineComponent2({
+  name: "DirectPayPalButton",
+  props: {
+    sessionId: { type: String, default: void 0 },
+    nonce: { type: String, default: void 0 },
+    billingApiUrl: { type: String, default: void 0 },
+    email: { type: String, default: void 0 },
+    billingName: { type: String, default: void 0 },
+    onBuyerIdentityReady: {
+      type: Function,
+      default: void 0
+    },
+    clientId: { type: String, default: void 0 },
+    environment: {
+      type: String,
+      default: void 0
+    },
+    currency: { type: String, default: void 0 },
+    isSubscription: { type: Boolean, default: void 0 },
+    providerObjectType: {
+      type: String,
+      default: void 0
+    },
+    approvalPresentation: {
+      type: String,
+      default: void 0
+    },
+    session: { type: Object, default: null },
+    existingOrderId: { type: String, default: void 0 },
+    isProcessing: { type: Boolean, default: false },
+    allowAutomaticRetry: { type: Boolean, default: true },
+    runBeforeButtonClick: {
+      type: Function,
+      default: void 0
+    },
+    onTokenizedBody: {
+      type: Function,
+      default: void 0
+    },
+    onTechnicalFailure: {
+      type: Function,
+      default: void 0
+    },
+    telemetry: { type: Boolean, default: void 0 },
+    debug: { type: Boolean, default: false }
+  },
+  emits: {
+    complete: (_result) => true,
+    decline: (_decline) => true,
+    error: (_error) => true,
+    errorChange: (_message) => true,
+    buttonClick: (_method) => true,
+    loadStateChange: (_ready) => true,
+    initializationStateChange: (_state) => true
+  },
+  setup(props, { emit }) {
+    const provider = inject(FLOPAY_CONTEXT, null);
+    const container = ref2(null);
+    const state = ref2("loading");
+    const submitting = ref2(false);
+    const debugLines = ref2([]);
+    let buttons = null;
+    let mounted = false;
+    let unmounted = false;
+    let generation = 0;
+    let retryTimer = null;
+    let prepared = null;
+    let intentIdempotencyKey;
+    let intentAttemptActive = false;
+    const beginIntentAttempt = () => {
+      intentIdempotencyKey = generateIdempotencyKey();
+      if (!intentIdempotencyKey) {
+        console.warn(
+          "[FloPay] DirectPayPal: secure idempotency key unavailable; retries may not be deduplicated."
+        );
+      }
+      intentAttemptActive = true;
+    };
+    const {
+      request: identityRequest,
+      collect: collectBuyerIdentity,
+      finish: finishBuyerIdentity
+    } = createBuyerIdentityFallback();
+    let identityRequirement = {
+      sessionId: props.sessionId,
+      required: paypalProviderIdentityRequired(props.email, props.session)
+    };
+    const providerIdentityRequired = () => {
+      if (identityRequirement.sessionId !== props.sessionId) {
+        identityRequirement = {
+          sessionId: props.sessionId,
+          required: paypalProviderIdentityRequired(props.email, props.session)
+        };
+      }
+      return identityRequirement.required;
+    };
+    watch(
+      () => props.sessionId,
+      () => {
+        providerIdentityRequired();
+      }
+    );
+    const isCurrent = (gen) => !unmounted && gen === generation;
+    const trace = (line) => {
+      if (!props.debug) return;
+      debugLines.value = [...debugLines.value, `${(/* @__PURE__ */ new Date()).toISOString().slice(11, 23)} ${line}`];
+    };
+    watch(
+      () => props.debug,
+      (on) => {
+        if (on) trace("debug:enabled");
+      },
+      { immediate: true }
+    );
+    const setState = (next) => {
+      state.value = next;
+      invokeMerchantCallback(() => emit("initializationStateChange", next));
+    };
+    const ready = computed(() => state.value === "ready");
+    const failed = computed(() => state.value === "exhausted");
+    watch(
+      [ready, failed],
+      ([isReady, isFailed]) => {
+        if (!mounted) return;
+        invokeMerchantCallback(() => emit("loadStateChange", isReady && !isFailed));
+      },
+      { flush: "sync" }
+    );
+    const baseUrl = () => resolveBillingApiUrl(props.billingApiUrl ?? provider?.billingApiUrl() ?? void 0);
+    const configuredObjectType = () => props.session?.gateways?.paypal?.providerObjectType ?? props.providerObjectType;
+    const objectType = () => configuredObjectType() ?? (props.isSubscription ? "subscription" : "order");
+    const advertisedPresentation = () => props.session?.gateways?.paypal?.approvalPresentation ?? props.approvalPresentation;
+    const api = () => new PaymentAPI(baseUrl(), { telemetry: false });
+    const inAppBrowser = () => detectPayPalEnvironment().inAppBrowser;
+    const effectiveSessionId = () => prepared?.sessionId ?? props.sessionId ?? "";
+    const effectiveNonce = () => prepared?.nonce ?? props.nonce;
+    const createIntent = async () => {
+      if (!intentAttemptActive) beginIntentAttempt();
+      const intent = await api().createSessionIntent(
+        effectiveSessionId(),
+        effectiveNonce() ?? "",
+        buildPayPalSessionIntentRequest(configuredObjectType()),
+        { idempotencyKey: intentIdempotencyKey }
+      );
+      if (intent.provider !== "paypal" || intent.providerObjectType !== objectType()) {
+        throw new FloPayError2("PayPal could not start this payment.", "api_error", {
+          code: "paypal_intent_mismatch"
+        });
+      }
+      return intent.providerObjectId;
+    };
+    const emitDecline = (message, sessionId, codes = {}) => {
+      const event = {
+        method: "paypal",
+        message,
+        ...codes.code ? { code: codes.code } : {},
+        ...codes.declineCode ? { declineCode: codes.declineCode } : {},
+        ...sessionId ? { sessionId } : {}
+      };
+      invokeMerchantCallback(() => emit("decline", event));
+    };
+    const decline = (error) => {
+      const message = errorMessage(error, "PayPal payment failed.");
+      const nonce = effectiveNonce();
+      const sessionId = effectiveSessionId();
+      if (nonce) {
+        void api().reportSessionIntentDecline(sessionId, nonce, {
+          provider: "paypal",
+          paymentMethodCategory: "wallet",
+          paymentMethodType: "paypal",
+          providerDeclineReason: resolvePayPalDeclineReason(error)
+        }).catch(() => {
+        });
+      }
+      emitDecline(message, sessionId);
+    };
+    const forwardError = (message) => {
+      if (isPayPalTeardownMessage(message)) return;
+      const friendly = applyFriendlyMessageOverride(message) ?? message;
+      invokeMerchantCallback(() => emit("errorChange", friendly));
+    };
+    const notifyTechnicalFailure = (error, recoveryMessage, options) => {
+      const handler = props.onTechnicalFailure;
+      if (handler) {
+        const callbackError = options.popupBlocked && inAppBrowser() ? new FloPayError2(recoveryMessage, "api_error", {
+          code: options.code ?? "paypal_popup_blocked"
+        }) : error;
+        invokeMerchantCallback(() => handler("paypal", callbackError, options));
+        return;
+      }
+      invokeMerchantCallback(() => emit("errorChange", recoveryMessage));
+    };
+    const runtimeFailure = (error) => {
+      const message = errorMessage(error, "PayPal failed to render.");
+      if (isPayPalTeardownMessage(message)) {
+        prepared = null;
+        return;
+      }
+      const classification = classifyExternalMethodFailure(error, {
+        inAppBrowser: inAppBrowser(),
+        handoffObserved: false
+      });
+      if (classification.providerDeclined) {
+        decline(error);
+        prepared = null;
+        return;
+      }
+      prepared = null;
+      const recoveryMessage = buildExternalMethodRecoveryMessage(
+        "PayPal",
+        classification.popupBlocked,
+        inAppBrowser()
+      );
+      const failure = new FloPayError2(recoveryMessage, "api_error", {
+        code: classification.popupBlocked ? "paypal_popup_blocked" : "paypal_runtime_failed"
+      });
+      invokeMerchantCallback(() => emit("error", failure));
+      notifyTechnicalFailure(error, recoveryMessage, {
+        code: "paypal_runtime_failed",
+        popupBlocked: classification.popupBlocked,
+        provider: "paypal",
+        paymentMethodCategory: "paypal",
+        terminalReason: classification.terminalReason
+      });
+    };
+    const tokenizedBody = (token) => buildPayPalTokenizedBody(token, configuredObjectType());
+    const processApproval = async (gen, body, attempt) => {
+      const sessionId = attempt?.sessionId ?? props.sessionId ?? "";
+      const request = buildPayPalProcessPaymentRequest({
+        body,
+        sessionId,
+        nonce: attempt?.nonce ?? props.nonce,
+        accountPatch: attempt?.accountPatch,
+        session: props.session,
+        email: props.email
+      });
+      let response;
+      try {
+        response = await api().processPayment(request.userId, request.params);
+      } catch (error) {
+        if (!isCurrent(gen)) return;
+        const message = friendlyPayPalFailureMessage(
+          error instanceof Error ? error.message : void 0
+        );
+        forwardError(message);
+        emitDecline(message, sessionId);
+        return;
+      }
+      if (response.ok) {
+        if (gen !== generation) return;
+        trace("process:ok");
+        const result = { status: "succeeded", checkoutMethod: "paypal" };
+        invokeMerchantCallback(() => emit("complete", result));
+        return;
+      }
+      if (!isCurrent(gen)) return;
+      const json = await response.json().catch(() => null);
+      const failure = describePayPalProcessFailure(json);
+      trace(`process:rejected status=${response.status}`);
+      forwardError(failure.message);
+      emitDecline(failure.message, sessionId, {
+        code: failure.code,
+        declineCode: failure.declineCode
+      });
+    };
+    const resolveApprovalIdentity = async (attempt, actions) => {
+      let identity = resolvePayPalApprovalIdentity({
+        accountPatch: attempt?.accountPatch,
+        email: props.email,
+        billingName: props.billingName,
+        session: props.session
+      });
+      if (needsPayPalPayerDetails(identity)) {
+        try {
+          identity = mergePayPalPayerIdentity(identity, await actions?.order?.get?.());
+        } catch {
+        }
+      }
+      if ((props.onBuyerIdentityReady || providerIdentityRequired()) && !isValidEmail2(identity.email)) {
+        trace("identity:collect");
+        const collected = await collectBuyerIdentity("PayPal", identity);
+        if (!collected) return null;
+        identity = collected;
+      }
+      return identity;
+    };
+    const approve = async (gen, data, actions) => {
+      if (!isCurrent(gen)) return;
+      const attempt = { ...prepared ?? {} };
+      submitting.value = true;
+      trace("onApprove");
+      invokeMerchantCallback(() => emit("errorChange", null));
+      try {
+        const token = data.vaultSetupToken ?? data.subscriptionID ?? data.orderID ?? "";
+        if (!token) {
+          throw new FloPayError2("PayPal did not return an approval token.", "api_error", {
+            code: "paypal_missing_token"
+          });
+        }
+        const identity = await resolveApprovalIdentity(attempt, actions);
+        if (!identity) {
+          trace("identity:cancelled");
+          return;
+        }
+        if (isValidEmail2(identity.email)) {
+          attempt.accountPatch = compactBuyerIdentity2({ ...attempt.accountPatch, ...identity });
+          await props.onBuyerIdentityReady?.(identity);
+        }
+        if (!isCurrent(gen)) return;
+        const body = tokenizedBody(token);
+        const handler = props.onTokenizedBody;
+        if (handler) {
+          await handler(body, {
+            sessionId: attempt.sessionId ?? props.sessionId,
+            accountPatch: attempt.accountPatch,
+            nonce: attempt.nonce
+          });
+          return;
+        }
+        await processApproval(gen, body, attempt);
+      } catch (error) {
+        if (!isCurrent(gen)) return;
+        forwardError(errorMessage(error, "PayPal capture failed."));
+      } finally {
+        if (!unmounted) submitting.value = false;
+      }
+    };
+    const click = async (gen, actions) => {
+      if (!isCurrent(gen)) {
+        await actions.reject();
+        return;
+      }
+      beginIntentAttempt();
+      prepared = null;
+      let next = {};
+      const runner = props.runBeforeButtonClick;
+      if (runner) {
+        try {
+          const beforeClick = await runner("paypal");
+          if (!isCurrent(gen)) {
+            await actions.reject();
+            return;
+          }
+          if (!beforeClick.proceed) {
+            trace("onClick:runBeforeButtonClick proceed=false");
+            await actions.reject();
+            return;
+          }
+          next = {
+            sessionId: beforeClick.sessionId,
+            accountPatch: beforeClick.accountPatch,
+            nonce: beforeClick.nonce
+          };
+        } catch (error) {
+          trace(
+            `onClick:runBeforeButtonClick rejected msg=${errorMessage(error, String(error)).slice(0, 120)}`
+          );
+          await actions.reject();
+          return;
+        }
+      }
+      invokeMerchantCallback(() => emit("buttonClick", "paypal"));
+      prepared = next;
+      trace("onClick:resolve");
+      await actions.resolve();
+    };
+    const renderButtons = async (gen) => {
+      const normalized = normalizeGatewayEnvironment(props.environment);
+      const environment = normalized === "live" ? "production" : normalized;
+      const type = objectType();
+      const existingOrderId = props.existingOrderId;
+      trace(`loadScript:start env=${environment ?? "default"} type=${type}`);
+      let paypal;
+      try {
+        paypal = await loadScript({
+          clientId: props.clientId ?? "",
+          ...props.currency ? { currency: props.currency } : {},
+          ...type === "subscription" ? { intent: "subscription", vault: true } : {},
+          ...type === "order" ? { intent: "capture" } : {},
+          ...environment ? { environment } : {},
+          ...environment === "sandbox" ? { dataNamespace: "paypal_sandbox" } : {}
+        });
+      } catch (error) {
+        trace(`loadScript:fail msg=${errorMessage(error, String(error)).slice(0, 120)}`);
+        throw new PayPalStartupFailure(errorMessage(error, "PayPal failed to load."), {
+          cause: error
+        });
+      }
+      if (!isCurrent(gen)) return;
+      trace("loadScript:ok");
+      if (!paypal?.Buttons) throw new PayPalStartupFailure("PayPal did not initialize.");
+      const start2 = () => {
+        if (!existingOrderId) return createIntent();
+        if (isCurrent(gen)) return Promise.resolve(existingOrderId);
+        return Promise.reject(
+          new FloPayError2("PayPal render was superseded.", "api_error", {
+            code: "paypal_render_superseded"
+          })
+        );
+      };
+      let handlers;
+      if (type === "subscription") handlers = { createSubscription: start2 };
+      else if (type === "setup_token") handlers = { createVaultSetupToken: () => createIntent() };
+      else handlers = { createOrder: start2 };
+      const presentation = resolvePayPalPresentationMode(
+        detectPayPalEnvironment(),
+        advertisedPresentation() === "app_switch" ? "app_switch" : void 0,
+        type
+      );
+      trace(`presentation=${presentation}`);
+      let rendered = false;
+      const instance = paypal.Buttons({
+        style: { layout: "horizontal", tagline: false, height: 44 },
+        ...presentation === "app_switch" ? { appSwitchWhenAvailable: true } : {},
+        ...handlers,
+        onClick: (_data, actions) => click(gen, actions),
+        onApprove: (data, actions) => approve(gen, data, actions),
+        onError: (error) => {
+          if (!isCurrent(gen)) return;
+          trace(
+            `onError rendered=${rendered} msg=${errorMessage(error, "PayPal failed to render.").slice(0, 120)}`
+          );
+          if (rendered) runtimeFailure(error);
+        }
+      });
+      buttons = instance;
+      const eligible = instance.isEligible();
+      trace(`isEligible=${eligible}`);
+      if (!eligible) {
+        throw new PayPalStartupFailure("PayPal is not available for this buyer.", {
+          ineligible: true
+        });
+      }
+      try {
+        if (container.value) await instance.render(container.value);
+      } catch (error) {
+        trace(`render:fail msg=${errorMessage(error, String(error)).slice(0, 120)}`);
+        throw new PayPalStartupFailure(errorMessage(error, "PayPal failed to render."), {
+          cause: error
+        });
+      }
+      if (!isCurrent(gen)) return;
+      rendered = true;
+      trace("render:ok");
+    };
+    const exhaust = (failure) => {
+      setState("exhausted");
+      trace(`exhausted msg=${failure.message.slice(0, 120)}`);
+      if (failure.ineligible) {
+        console.error("[FloPay] DirectPayPal load/render failure:", failure.message);
+        return;
+      }
+      const classification = classifyExternalMethodFailure(
+        {
+          code: isPayPalAcknowledgementDeadWindow(failure.message) ? "paypal_init_timeout" : "paypal_init_failure",
+          message: failure.message
+        },
+        { inAppBrowser: inAppBrowser(), handoffObserved: false }
+      );
+      provider?.emitInstrument({
+        class: "technical_error",
+        errorCode: "PROVIDER_LOAD_FAILED",
+        provider: "paypal"
+      });
+      const error = classification.popupBlocked ? new FloPayError2(
+        buildExternalMethodRecoveryMessage("PayPal", true, inAppBrowser()),
+        "api_error",
+        { code: "paypal_popup_blocked" }
+      ) : new FloPayError2(failure.message, "api_error", { code: "PROVIDER_LOAD_FAILED" });
+      invokeMerchantCallback(() => emit("error", error));
+    };
+    const closeButtons = () => {
+      void buttons?.close().catch(() => {
+      });
+      buttons = null;
+    };
+    const start = async (gen, retryUsed) => {
+      try {
+        await renderButtons(gen);
+        if (isCurrent(gen)) setState("ready");
+      } catch (error) {
+        if (!isCurrent(gen)) return;
+        const failure = error instanceof PayPalStartupFailure ? error : new PayPalStartupFailure(errorMessage(error, String(error)), { cause: error });
+        closeButtons();
+        if (!failure.ineligible && !retryUsed && props.allowAutomaticRetry) {
+          setState("retrying");
+          trace("retry:scheduled");
+          retryTimer = setTimeout(() => {
+            retryTimer = null;
+            if (isCurrent(gen)) void start(gen, true);
+          }, PAYPAL_INIT_RETRY_DELAY_MS);
+          return;
+        }
+        exhaust(failure);
+      }
+    };
+    const restart = () => {
+      generation += 1;
+      if (retryTimer) clearTimeout(retryTimer);
+      retryTimer = null;
+      prepared = null;
+      intentIdempotencyKey = void 0;
+      intentAttemptActive = false;
+      closeButtons();
+      if (!props.clientId) {
+        setState("exhausted");
+        return;
+      }
+      setState("loading");
+      trace("mount");
+      void start(generation, false);
+    };
+    const configKey = computed(
+      () => JSON.stringify([
+        baseUrl(),
+        props.clientId ?? "",
+        props.currency ?? "",
+        props.environment ?? "",
+        objectType(),
+        props.sessionId ?? "",
+        props.existingOrderId ?? "",
+        advertisedPresentation() === "app_switch" ? "app_switch" : ""
+      ])
+    );
+    watch(configKey, () => {
+      if (mounted && !unmounted) restart();
+    });
+    onMounted(() => {
+      mounted = true;
+      invokeMerchantCallback(() => emit("loadStateChange", false));
+      restart();
+    });
+    onBeforeUnmount2(() => {
+      unmounted = true;
+      if (retryTimer) clearTimeout(retryTimer);
+      retryTimer = null;
+      prepared = null;
+      closeButtons();
+    });
+    return () => {
+      const debugPanel = props.debug ? h2(
+        "pre",
+        {
+          "data-testid": "flopay-direct-paypal-debug",
+          style: debugPanelStyle(failed.value)
+        },
+        `FloPay/DirectPayPal-debug (ready=${ready.value} failed=${failed.value})${debugLines.value.length === 0 ? "\n(waiting for first lifecycle event\u2026)" : `
+${debugLines.value.join("\n")}`}`
+      ) : null;
+      if (failed.value) return debugPanel ? h2("div", [debugPanel]) : null;
+      const request = identityRequest.value;
+      return h2("div", [
+        debugPanel,
+        request ? h2(BuyerIdentityFallbackPanel, {
+          key: request.id,
+          identity: request.identity,
+          methodLabel: request.methodLabel,
+          cancellable: true,
+          testId: "flopay-direct-paypal-identity-pane",
+          onComplete: (identity) => finishBuyerIdentity(identity),
+          onCancel: () => finishBuyerIdentity(null)
+        }) : null,
+        // While the panel is open React keeps PayPal mounted but out of the
+        // way (zoid needs a measurable container, so no `display: none`).
+        h2("div", {
+          ref: container,
+          "data-testid": "flopay-direct-paypal",
+          "data-state": state.value,
+          "aria-busy": submitting.value || props.isProcessing,
+          ...request ? {
+            "aria-hidden": "true",
+            style: { position: "relative", height: "0", opacity: "0", pointerEvents: "none" }
+          } : {}
+        })
+      ]);
+    };
+  }
+});
+
+// src/split-card-form.ts
+var SUCCESS_DELAY_MS = 600;
+var isStripeExpressMethod = (method) => STRIPE_EXPRESS_METHODS.includes(method);
+var GATE_DEBUG_STYLE = {
+  margin: 0,
+  padding: "6px 8px",
+  background: "#eef2ff",
+  border: "1px solid #c7d2fe",
+  borderRadius: "6px",
+  color: "#111827",
+  font: "11px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace",
+  whiteSpace: "pre-wrap",
+  wordBreak: "break-word"
+};
+var PAYPAL_DIRECT_RETRY_LIMIT = 2;
+function isEmptySlotOutput(nodes) {
+  return nodes.every((node) => {
+    if (node.type === Comment) return true;
+    if (node.type === Text) return !String(node.children ?? "").trim();
+    if (node.type === Fragment) {
+      return Array.isArray(node.children) && isEmptySlotOutput(node.children);
+    }
+    return false;
+  });
+}
+function defaultCardButtonContent() {
+  const svg = { fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" };
+  return [
+    h3(
+      "svg",
+      {
+        ...svg,
+        width: "20",
+        height: "20",
+        viewBox: "0 0 24 24",
+        stroke: "currentColor",
+        "stroke-width": "1.5",
+        "aria-hidden": "true"
+      },
+      [
+        h3("rect", { width: "20", height: "14", x: "2", y: "5", rx: "2" }),
+        h3("line", { x1: "2", x2: "22", y1: "10", y2: "10" })
+      ]
+    ),
+    "Credit / Debit Card",
+    h3(
+      "svg",
+      {
+        ...svg,
+        width: "16",
+        height: "16",
+        viewBox: "0 0 24 24",
+        stroke: "#9ca3af",
+        "stroke-width": "2",
+        style: { position: "absolute", right: "1rem" },
+        "aria-hidden": "true"
+      },
+      [h3("path", { d: "M9 18l6-6-6-6" })]
+    )
+  ];
+}
+var DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT = 44;
+function resolveFormButtonsStyles(bundleStyles, buttonsTheme, override) {
+  const base = bundleStyles ?? resolveButtonsLayoutTheme(buttonsTheme);
+  if (!override) return base;
+  return {
+    ...base,
+    ...override,
+    cardButton: { ...base.cardButton, ...override.cardButton },
+    cardFormContainer: { ...base.cardFormContainer, ...override.cardFormContainer },
+    backButton: { ...base.backButton, ...override.backButton },
+    backButtonIcon: { ...base.backButtonIcon, ...override.backButtonIcon },
+    submitButton: { ...base.submitButton, ...override.submitButton },
+    title: { ...base.title, ...override.title }
+  };
+}
+var ERROR_DELAY_MS = 1200;
+function isAccountValidationError(error) {
+  return error instanceof FloPayError3 && typeof error.statusCode === "number" && error.statusCode >= 400 && error.statusCode < 500;
+}
+function noVaultCapabilityError() {
+  return new FloPayError3(
+    "FloPay: this checkout session has no vault card capability and no usable supported non-card payment methods. Upgrade the billing backend integration.",
+    "api_error",
+    { code: "UnsupportedBackendVaultCapability" }
+  );
+}
+var SplitCardForm = defineComponent3({
+  name: "SplitCardForm",
+  props: {
+    session: { type: Object, default: void 0 },
+    sessionId: { type: String, default: void 0 },
+    nonce: { type: String, default: void 0 },
+    billingApiUrl: { type: String, default: void 0 },
+    telemetry: { type: Boolean, default: void 0 },
+    email: { type: String, default: void 0 },
+    firstName: { type: String, default: void 0 },
+    lastName: { type: String, default: void 0 },
+    layout: { type: String, default: "default" },
+    initialCardOpen: { type: Boolean, default: false },
+    showPayPal: { type: Boolean, default: true },
+    // No default here: an unset prop takes the checkout's value, then `'auto'`.
+    walletPresentation: { type: String, default: void 0 },
+    showStripe: { type: Boolean, default: true },
+    showApplePay: { type: Boolean, default: true },
+    showGooglePay: { type: Boolean, default: true },
+    enabledPaymentMethods: { type: Array, default: void 0 },
+    dataAttachmentPending: { type: Boolean, default: void 0 },
+    dataAttachmentRequiresIdentity: { type: Boolean, default: void 0 },
+    submitLabel: { type: String, default: void 0 },
+    enableAVS: {
+      type: [Boolean, Object],
+      default: void 0
+    },
+    avsLayout: { type: String, default: "row" },
+    country: { type: String, default: void 0 },
+    zip: { type: String, default: void 0 },
+    addressLine1: { type: String, default: void 0 },
+    addressLine2: { type: String, default: void 0 },
+    city: { type: String, default: void 0 },
+    state: { type: String, default: void 0 },
+    isProcessing: { type: Boolean, default: void 0 },
+    error: { type: String, default: void 0 },
+    theme: { type: String, default: void 0 },
+    buttonsTheme: { type: String, default: void 0 },
+    buttonsStyles: { type: Object, default: void 0 },
+    appearance: { type: Object, default: void 0 },
+    className: { type: String, default: void 0 },
+    cardFieldOrder: { type: Array, default: void 0 },
+    onBeforeButtonClick: {
+      type: Function,
+      default: void 0
+    },
+    onBuyerIdentityReady: {
+      type: Function,
+      default: void 0
+    },
+    userId: { type: String, default: void 0 },
+    avsCheck: { type: Boolean, default: void 0 },
+    /** @deprecated Not rendered (React's deprecated `showSecurityFooter`). */
+    showSecurityFooter: { type: Boolean, default: void 0 },
+    directPaypal: { type: Object, default: void 0 },
+    currency: { type: String, default: void 0 },
+    isSubscription: { type: Boolean, default: void 0 },
+    /**
+     * React's `totalAmount`: the cart total due today, in minor units
+     * (`FloPayCheckout` passes it). Payment-mode Stripe Elements use
+     * `totalAmount || 100` (React's `amountInCents` placeholder for a $0 cart),
+     * and the wallet row runs in setup mode for $0. Default `0`, as React's.
+     */
+    totalAmount: { type: Number, default: 0 },
+    onTokenizedBody: {
+      type: Function,
+      default: void 0
+    },
+    chv: { type: String, default: void 0 },
+    checkoutType: { type: String, default: void 0 },
+    checkoutLayout: { type: String, default: void 0 },
+    enabledPaymentMethodCountries: {
+      type: Object,
+      default: void 0
+    },
+    debug: { type: Boolean, default: false }
+  },
+  emits: {
+    complete: (_result) => true,
+    error: (_error) => true,
+    decline: (_decline) => true,
+    buttonClick: (_method) => true,
+    countryChange: (_country) => true,
+    // React's `onZipChange`.
+    zipChange: (_zip) => true,
+    // React's `onErrorChange`: the form's own error message changed (`null` when cleared).
+    errorChange: (_error) => true
+  },
+  /**
+   * Slots (React's content props):
+   * - `cardButtonContent`: the buttons-layout card tile's content.
+   * - `cardBackButtonContent`: the label of the card view's back button.
+   * - `cardTitleContent`: the card-form title (default `Secure card checkout`).
+   * - `cardPreFormSlot`: content directly above the hosted card widget.
+   *
+   * An empty `cardBackButtonContent` or `cardTitleContent` slot hides that
+   * label, as React does for `''`, `null` or `false`.
+   */
+  setup(props, { emit, slots }) {
+    const provider = inject2(FLOPAY_CONTEXT, null);
+    const checkout = inject2(CHECKOUT_STATE, null);
+    const defaults = inject2(CHECKOUT_FORM_DEFAULTS, () => ({}));
+    const session = computed2(
+      () => props.session ?? defaults().session ?? checkout?.session ?? null
+    );
+    const sessionId = computed2(() => props.sessionId ?? defaults().sessionId ?? session.value?.id);
+    const nonce = computed2(
+      () => props.nonce ?? defaults().nonce ?? (session.value?.clientSecret || void 0)
+    );
+    const billingApiUrl = computed2(
+      () => resolveBillingApiUrl2(
+        props.billingApiUrl ?? defaults().billingApiUrl ?? provider?.billingApiUrl()
+      )
+    );
+    const submitLabel = computed2(
+      () => props.submitLabel === void 0 ? defaults().submitLabel : props.submitLabel
+    );
+    const pending = computed2(
+      () => props.dataAttachmentPending === true || defaults().dataAttachmentPending === true || checkout?.claimPending === true
+    );
+    const requiresIdentity = computed2(
+      () => props.dataAttachmentRequiresIdentity === true || checkout?.claimRequiresIdentity === true
+    );
+    const nonCardAttachmentBlocked = computed2(() => pending.value && !requiresIdentity.value);
+    const vaultMountContext = computed2(() => ({
+      billingApiUrl: billingApiUrl.value,
+      sessionId: sessionId.value,
+      nonce: nonce.value
+    }));
+    const embeddedVault = computed2(
+      () => resolveVaultMountOptions(session.value?.vault, vaultMountContext.value)
+    );
+    const deferredVaultAdvertised = computed2(() => {
+      const current = session.value;
+      if (!current || !props.showStripe || !sessionId.value) return false;
+      if (isMountableVaultBlock(current.vault)) return false;
+      const advertised = current.gateways?.stripe?.enabledPaymentMethods ?? props.enabledPaymentMethods;
+      return Boolean(advertised?.includes("card")) || canRecoverHostedCardForm(current) || Boolean(current.gateways?.pcivault);
+    });
+    const lazyVault = shallowRef2(null);
+    const vault = computed2(
+      () => embeddedVault.value ?? lazyVault.value
+    );
+    const vaultCapable = computed2(
+      () => Boolean(embeddedVault.value) || deferredVaultAdvertised.value
+    );
+    const themeBundle = computed2(() => resolveTheme(props.theme));
+    const bStyles = computed2(
+      () => resolveFormButtonsStyles(
+        themeBundle.value?.buttonsLayout,
+        props.buttonsTheme,
+        props.buttonsStyles
+      )
+    );
+    const appearance = computed2(() => props.appearance ?? themeBundle.value?.appearance);
+    const vaultTheme = computed2(
+      () => computeVaultCardThemeColors({
+        appearance: appearance.value,
+        buttonsStyles: bStyles.value,
+        layout: props.layout
+      })
+    );
+    const cardTileStyle = computed2(() => {
+      const vars = appearance.value?.variables;
+      const explicitPrimary = typeof vars?.colorPrimary === "string" ? vars.colorPrimary : void 0;
+      const radius = bStyles.value.cardButton?.borderRadius ?? vars?.borderRadius ?? "8px";
+      return {
+        width: "100%",
+        ...bStyles.value.cardButton,
+        ...derivePrimaryTileStyle({
+          themeBundle: themeBundle.value,
+          resolvedPrimaryColor: explicitPrimary ?? "#4A49FF",
+          resolvedBorderRadius: String(radius),
+          submitButtonStyle: bStyles.value.submitButton,
+          explicitPrimaryColor: explicitPrimary
+        }),
+        fontSize: bStyles.value.cardButtonFontSize ?? "0.95rem"
+      };
+    });
+    const directPaypalConfigured = computed2(() => Boolean(props.directPaypal?.clientId));
+    const directPaypal = computed2(
+      () => props.showPayPal && props.directPaypal?.clientId ? props.directPaypal : null
+    );
+    const directPayPalCanWaitForAttachment = computed2(
+      () => !nonCardAttachmentBlocked.value || checkout !== null
+    );
+    const stripePayPalReturnOwner = hasStripePayPalReturn();
+    const resolvedWalletPresentation = computed2(
+      () => props.walletPresentation ?? defaults().walletPresentation ?? "auto"
+    );
+    const stripePayPalPresentation = computed2(
+      () => stripePayPalReturnOwner ? "redirect" : resolveStripePayPalPresentation(
+        detectPayPalEnvironment2(typeof navigator === "undefined" ? "" : void 0),
+        resolvedWalletPresentation.value
+      )
+    );
+    const paypalRetry = shallowRef2(
+      props.directPaypal?.existingOrderId ? { orderId: props.directPaypal.existingOrderId, attempts: 0 } : null
+    );
+    const resolvedCurrency = computed2(() => props.currency ?? "usd");
+    const resolvedIsSubscription = computed2(() => props.isSubscription ?? false);
+    const directPaypalInitializationState = ref3("loading");
+    const directPaypalUnavailable = computed2(
+      () => directPaypalInitializationState.value === "retrying" || directPaypalInitializationState.value === "exhausted"
+    );
+    const stripeKey = computed2(
+      () => session.value?.gateways?.stripe?.publishableKey
+    );
+    const stripeMethods = computed2(() => {
+      if (!props.showStripe || !stripeKey.value) return [];
+      const listed = props.enabledPaymentMethods ?? session.value?.gateways?.stripe?.enabledPaymentMethods ?? [];
+      return listed.filter((method) => {
+        if (method === "card") return false;
+        if (method === "apple_pay") return props.showApplePay;
+        if (method === "google_pay") return props.showGooglePay;
+        if (method === "paypal") {
+          return props.showPayPal && (!directPaypal.value || directPaypalUnavailable.value);
+        }
+        return true;
+      });
+    });
+    const unsupported = computed2(
+      () => Boolean(session.value) && !vaultCapable.value && stripeMethods.value.length === 0 && !directPaypal.value
+    );
+    const apmCountry = computed2(() => avsConfig.value ? country.value : props.country);
+    const renderedStripeMethods = computed2(() => {
+      const others = stripeMethods.value.filter((method) => !isStripeExpressMethod(method));
+      const allowed = filterStripeMethodsByCountryGate(
+        others,
+        apmCountry.value,
+        props.enabledPaymentMethodCountries
+      );
+      return stripeMethods.value.filter(
+        (method) => isStripeExpressMethod(method) || allowed.includes(method)
+      );
+    });
+    const inAppBrowserDetected = () => typeof navigator === "undefined" ? void 0 : detectPayPalEnvironment2().inAppBrowser;
+    const cardOpen = ref3(props.layout !== "buttons" || props.initialCardOpen);
+    const capture = shallowRef2(null);
+    const failure = ref3(null);
+    const overlay = ref3(null);
+    watch2(overlay, (state) => {
+      if (state === "success") markSessionRecentlyCompleted(sessionId.value);
+    });
+    let overlayTimer = null;
+    const methodOverlay = ref3(null);
+    let methodOverlayTimer = null;
+    let methodCompleted = false;
+    let completed = false;
+    let detachOutcomes = null;
+    const avsConfig = computed2(() => resolveAVSConfig(props.enableAVS));
+    const country = ref3((props.country ?? session.value?.customer?.country ?? "").toUpperCase());
+    const zipCode = ref3(props.zip ?? session.value?.customer?.zip ?? "");
+    const addressLine1 = ref3(props.addressLine1 ?? "");
+    const addressLine2 = ref3(props.addressLine2 ?? "");
+    const city = ref3(props.city ?? "");
+    const region = ref3(props.state ?? "");
+    const editedAvs = /* @__PURE__ */ new Set();
+    const adoptAvs = (field, next, model, notify) => {
+      if (editedAvs.has(field)) return;
+      const value = next?.trim();
+      if (!value || value === model.value) return;
+      model.value = value;
+      if (notify) invokeMerchantCallback2(() => notify(value));
+    };
+    watch2(
+      () => props.country,
+      (next) => adoptAvs("country", next?.toUpperCase(), country, (value) => emit("countryChange", value))
+    );
+    watch2(
+      () => props.zip,
+      (next) => adoptAvs("postal_code", next, zipCode, (value) => emit("zipChange", value))
+    );
+    watch2(
+      () => props.addressLine1,
+      (next) => adoptAvs("address_line_1", next, addressLine1)
+    );
+    watch2(
+      () => props.addressLine2,
+      (next) => adoptAvs("address_line_2", next, addressLine2)
+    );
+    watch2(
+      () => props.city,
+      (next) => adoptAvs("city", next, city)
+    );
+    watch2(
+      () => props.state,
+      (next) => adoptAvs("state", next, region)
+    );
+    const externallyProcessing = computed2(() => props.isProcessing === true);
+    const displayError = computed2(() => props.error ?? failure.value);
+    watch2(failure, (message) => invokeMerchantCallback2(() => emit("errorChange", message)));
+    const avsVisible = (field) => {
+      const config = avsConfig.value;
+      return config ? isAVSFieldVisible(config[field], country.value.trim()) : false;
+    };
+    const avsInvalid = computed2(() => {
+      if (!avsConfig.value) return false;
+      const cc = country.value.trim();
+      if (avsVisible("country") && !cc) return true;
+      if (avsVisible("postal_code") && !isValidPostalCode(cc, zipCode.value.trim())) return true;
+      if (avsVisible("address_line_1") && !addressLine1.value.trim()) return true;
+      if (avsVisible("city") && !city.value.trim()) return true;
+      return avsVisible("state") && !region.value.trim();
+    });
+    const gateClosed = computed2(() => pending.value || avsInvalid.value);
+    const emitError = (error) => invokeMerchantCallback2(() => emit("error", error));
+    const emitDecline = (decline) => invokeMerchantCallback2(() => emit("decline", decline));
+    const accountPatch = shallowRef2(void 0);
+    const identityField = (key) => (accountPatch.value?.[key] ?? props[key] ?? session.value?.customer?.[key] ?? "").trim();
+    const billingName = computed2(
+      () => [identityField("firstName"), identityField("lastName")].filter(Boolean).join(" ")
+    );
+    const untilAttached = () => {
+      if (!pending.value) return Promise.resolve();
+      return new Promise((resolve) => {
+        const stop = watch2(pending, (isPending) => {
+          if (isPending) return;
+          stop();
+          resolve();
+        });
+      });
+    };
+    const runBeforeButtonClick = async (method) => {
+      if (method !== "card" && nonCardAttachmentBlocked.value) await untilAttached();
+      const hook = props.onBeforeButtonClick;
+      if (!hook) return { proceed: true };
+      try {
+        const result = await hook({
+          method,
+          sessionId: sessionId.value || void 0,
+          createSession: checkout?.inlineSessionDraft
+        });
+        if (result === false) return { proceed: false };
+        if (result && typeof result === "object") {
+          if (result.account) {
+            accountPatch.value = { ...accountPatch.value ?? {}, ...result.account };
+          }
+          return {
+            proceed: true,
+            accountPatch: result.account,
+            sessionId: sessionId.value,
+            nonce: nonce.value
+          };
+        }
+        return { proceed: true };
+      } catch (error) {
+        const failureError = normalizeBeforeButtonClickError(method, error);
+        failure.value = failureError.message;
+        emitError(failureError);
+        return { proceed: false };
+      }
+    };
+    const recoverStripePayPalAccount = async (returnSessionId) => {
+      const hook = props.onBeforeButtonClick;
+      if (!hook) return void 0;
+      try {
+        const result = await hook({
+          method: "paypal",
+          sessionId: returnSessionId || void 0,
+          createSession: checkout?.inlineSessionDraft
+        });
+        return result && typeof result === "object" ? result.account : void 0;
+      } catch {
+        return void 0;
+      }
+    };
+    const holdFailureOverlay = () => {
+      if (overlayTimer) clearTimeout(overlayTimer);
+      overlay.value = "failed";
+      overlayTimer = setTimeout(() => {
+        overlayTimer = null;
+        overlay.value = null;
+      }, ERROR_DELAY_MS);
+    };
+    const accountSnapshot = () => {
+      const email = identityField("email");
+      if (!isValidEmail3(email)) return null;
+      const cc = country.value.trim();
+      const config = avsConfig.value;
+      const visible = {
+        country: avsVisible("country"),
+        postal_code: avsVisible("postal_code"),
+        address_line_1: avsVisible("address_line_1"),
+        address_line_2: avsVisible("address_line_2"),
+        city: avsVisible("city"),
+        state: avsVisible("state")
+      };
+      const zip = zipCode.value.trim();
+      const derivedState = visible.address_line_1 && !visible.state && visible.postal_code ? getStateFromPostalCode(cc, zip) : null;
+      const state = visible.state ? region.value.trim() : derivedState;
+      const firstName = identityField("firstName");
+      const lastName = identityField("lastName");
+      const userId = accountPatch.value?.userId ?? (props.userId || defaults().userId) ?? "";
+      return {
+        accountData: {
+          userId,
+          email,
+          ...firstName ? { firstName } : {},
+          ...lastName ? { lastName } : {},
+          ...visible.postal_code && zip ? { zip } : {},
+          ...visible.city && city.value.trim() ? { city: city.value.trim() } : {},
+          ...state ? { state } : {},
+          ...visible.address_line_1 && addressLine1.value.trim() ? { addressLine1: addressLine1.value.trim() } : {},
+          ...visible.address_line_2 && addressLine2.value.trim() ? { addressLine2: addressLine2.value.trim() } : {},
+          ...cc ? { country: cc } : {}
+        },
+        // React sends `avsCheck` only when the prop is set (FloPayCheckout passes `!!enableAVS`).
+        ...props.avsCheck === void 0 ? {} : { avsCheck: props.avsCheck },
+        ...config ? { avsConfig: visible } : {}
+      };
+    };
+    const paypalOverlay = ref3(null);
+    let paypalOverlayTimer = null;
+    const stripeMethodsProcessing = computed2(
+      () => props.isProcessing ?? paypalOverlay.value === "processing"
+    );
+    let tokenizedProcessing = false;
+    const setPaypalOverlay = (state) => {
+      if (paypalOverlayTimer) clearTimeout(paypalOverlayTimer);
+      paypalOverlayTimer = null;
+      paypalOverlay.value = state;
+    };
+    const holdPaypalFailure = (message) => {
+      failure.value = message;
+      setPaypalOverlay("failed");
+      paypalOverlayTimer = setTimeout(() => {
+        paypalOverlayTimer = null;
+        paypalOverlay.value = null;
+      }, ERROR_DELAY_MS);
+    };
+    const processAvsInput = () => ({
+      avsConfig: avsConfig.value,
+      country: country.value,
+      zip: zipCode.value,
+      city: city.value,
+      state: region.value,
+      addressLine1: addressLine1.value,
+      addressLine2: addressLine2.value
+    });
+    const buildTokenizedProcessRequest = (body, overrides, effectiveSessionId) => {
+      const attemptPatch = overrides?.accountPatch;
+      const identity = (key) => attemptPatch?.[key] ?? identityField(key);
+      const userId = attemptPatch?.userId ?? accountPatch.value?.userId ?? (props.userId || defaults().userId) ?? "";
+      return {
+        userId,
+        params: {
+          sessionId: effectiveSessionId,
+          // The nonce stays paired with the (possibly overridden) session.
+          nonce: overrides?.nonce ?? nonce.value,
+          paymentMethodCategory: "paypal",
+          tokenizedData: body,
+          accountData: {
+            ...attemptPatch,
+            userId,
+            email: identity("email"),
+            firstName: identity("firstName") || void 0,
+            lastName: identity("lastName") || void 0,
+            ...buildProcessPaymentAvsAccount(processAvsInput())
+          },
+          ...buildCheckoutProcessMetadata({
+            ...processAvsInput(),
+            chv: props.chv,
+            avsCheck: props.avsCheck,
+            checkoutType: props.checkoutType,
+            checkoutLayout: props.checkoutLayout
+          })
+        }
+      };
+    };
+    const completeTokenizedProcess = (result, effectiveSessionId) => {
+      markSessionRecentlyCompleted(effectiveSessionId);
+      setPaypalOverlay("success");
+      const authorized = session.value?.captureMethod === "manual" || result?.status === "authorized";
+      const paymentId = typeof result?.paymentId === "string" ? result.paymentId : session.value?.paymentId;
+      const authorizationExpiresAt = typeof result?.authorizationExpiresAt === "string" ? result.authorizationExpiresAt : session.value?.authorizationExpiresAt;
+      const completion = authorized ? {
+        status: "authorized",
+        ...paymentId === void 0 ? {} : { paymentId },
+        sessionId: typeof result?.sessionId === "string" ? result.sessionId : effectiveSessionId,
+        ...authorizationExpiresAt === void 0 ? {} : { authorizationExpiresAt },
+        checkoutMethod: "paypal"
+      } : { status: "succeeded", checkoutMethod: "paypal" };
+      setTimeout(() => {
+        setPaypalOverlay(null);
+        invokeMerchantCallback2(() => emit("complete", completion));
+      }, SUCCESS_DELAY_MS);
+    };
+    const rebindDirectPayPal = (json, effectiveSessionId) => {
+      const orderId = typeof json.orderId === "string" ? json.orderId : "";
+      if (!orderId) {
+        holdPaypalFailure("PayPal retry required but no order id provided.");
+        return;
+      }
+      const attempts = paypalRetry.value?.attempts ?? 0;
+      if (attempts >= PAYPAL_DIRECT_RETRY_LIMIT) {
+        holdPaypalFailure("PayPal payment could not be completed after multiple attempts.");
+        emitDecline({
+          method: "paypal",
+          message: "paypal_direct_required retry limit exceeded",
+          ...effectiveSessionId ? { sessionId: effectiveSessionId } : {}
+        });
+        return;
+      }
+      paypalRetry.value = { orderId, attempts: attempts + 1 };
+      setPaypalOverlay(null);
+    };
+    const rejectTokenizedProcess = (json, effectiveSessionId) => {
+      if (json?.type === "paypal_direct_required") {
+        rebindDirectPayPal(json, effectiveSessionId);
+        return;
+      }
+      if (json?.type === "paypal_redirect_required") {
+        if (!json.threeDSecureToken) {
+          holdPaypalFailure("PayPal authorization required but no token provided.");
+          return;
+        }
+        failure.value = "PayPal is not available.";
+        setPaypalOverlay(null);
+        return;
+      }
+      const message = typeof json?.message === "string" ? json.message : "Payment failed. Please try again.";
+      const code = json?.code ?? json?.gatewayErrorCode;
+      const declineCode = json?.declineCode ?? json?.gatewayDeclineReason;
+      holdPaypalFailure(message);
+      emitDecline({
+        method: "paypal",
+        message,
+        ...code ? { code } : {},
+        ...declineCode ? { declineCode } : {},
+        ...effectiveSessionId ? { sessionId: effectiveSessionId } : {}
+      });
+    };
+    const processTokenizedBody = async (body, overrides) => {
+      if (tokenizedProcessing) return;
+      tokenizedProcessing = true;
+      setPaypalOverlay("processing");
+      failure.value = null;
+      const effectiveSessionId = overrides?.sessionId ?? sessionId.value ?? "";
+      const request = buildTokenizedProcessRequest(body, overrides, effectiveSessionId);
+      try {
+        const response = await new PaymentAPI2(billingApiUrl.value).processPayment(
+          request.userId,
+          request.params
+        );
+        if (response.ok) {
+          const result = response.status === 204 ? null : await response.json().catch(() => null);
+          completeTokenizedProcess(result, effectiveSessionId);
+          return;
+        }
+        const json = await response.json().catch(() => null);
+        rejectTokenizedProcess(json, effectiveSessionId);
+      } catch (error) {
+        holdPaypalFailure(error instanceof Error ? error.message : "An unexpected error occurred");
+      } finally {
+        tokenizedProcessing = false;
+      }
+    };
+    const dispatchTokenizedBody = (body, overrides) => {
+      if (props.onTokenizedBody) {
+        props.onTokenizedBody(body);
+        return;
+      }
+      void processTokenizedBody(body, overrides);
+    };
+    const onSubmitting = () => {
+      if (overlayTimer) clearTimeout(overlayTimer);
+      overlay.value = "processing";
+      failure.value = null;
+      const id = sessionId.value;
+      const token = nonce.value;
+      if (!id || !token) return;
+      const snapshot = accountSnapshot();
+      if (!snapshot) {
+        failure.value = "Enter a valid email address.";
+        overlay.value = null;
+        return;
+      }
+      void new PaymentAPI2(billingApiUrl.value).patchAccountSnapshot(id, token, snapshot, { telemetryMode: "best_effort" }).catch((error) => {
+        if (!isAccountValidationError(error)) return;
+        const message = error instanceof Error ? error.message : "Please check your billing address and try again.";
+        failure.value = message;
+        overlay.value = null;
+        emitError(error instanceof FloPayError3 ? error : new FloPayError3(message, "api_error"));
+      });
+    };
+    const bindOutcomes = (adapter) => {
+      const offSubmitting = adapter.on("submitting", onSubmitting);
+      const offComplete = adapter.on("complete", (event) => {
+        if (overlayTimer) clearTimeout(overlayTimer);
+        overlay.value = "success";
+        setTimeout(() => {
+          if (completed) return;
+          completed = true;
+          const authorized = event.outcome === "authorized" || session.value?.captureMethod === "manual";
+          const result = authorized ? {
+            status: "authorized",
+            paymentIntentId: event.intentId,
+            paymentId: event.paymentId ?? session.value?.paymentId,
+            sessionId: event.sessionId ?? sessionId.value,
+            authorizationExpiresAt: event.authorizationExpiresAt ?? session.value?.authorizationExpiresAt,
+            checkoutMethod: "card"
+          } : { status: "succeeded", paymentIntentId: event.intentId, checkoutMethod: "card" };
+          invokeMerchantCallback2(() => emit("complete", result));
+        }, SUCCESS_DELAY_MS);
+      });
+      const offDecline = adapter.on("decline", (event) => {
+        const message = event.message ?? "Your payment was declined. Please try another card or contact your bank.";
+        failure.value = message;
+        holdFailureOverlay();
+        const code = event.failureOutcome ?? event.declineReason ?? "authorization_declined";
+        emitDecline({
+          method: "card",
+          message,
+          code,
+          declineCode: code,
+          ...sessionId.value ? { sessionId: sessionId.value } : {}
+        });
+      });
+      const offError = adapter.on("error", (event) => {
+        const message = event.message ?? "There was a problem processing your card.";
+        failure.value = message;
+        holdFailureOverlay();
+        emitError(new FloPayError3(message, "api_error"));
+      });
+      return () => {
+        offSubmitting();
+        offComplete();
+        offDecline();
+        offError();
+      };
+    };
+    const cardRequested = ref3(cardOpen.value);
+    const vaultRecoveryAttempt = ref3(0);
+    let lazyVerificationShell = null;
+    let lazyVaultRequest = 0;
+    const recoverVault = () => {
+      const request = ++lazyVaultRequest;
+      const id = sessionId.value;
+      if (embeddedVault.value || !deferredVaultAdvertised.value || !id || !cardRequested.value) {
+        lazyVault.value = null;
+        return;
+      }
+      const context = { ...vaultMountContext.value, sessionId: id };
+      const shellKey = `${context.billingApiUrl}\0${id}\0${context.nonce ?? ""}`;
+      if (lazyVerificationShell?.key === shellKey) {
+        lazyVault.value = lazyVerificationShell.mount;
+        return;
+      }
+      lazyVault.value = null;
+      new PaymentAPI2(context.billingApiUrl).getVaultCapture(id, context.nonce).then((block) => {
+        if (request !== lazyVaultRequest) return;
+        const mount = resolveVaultMountOptions(block, context);
+        if (mount?.verificationRequired && !block.html) {
+          lazyVerificationShell = { key: shellKey, mount };
+        }
+        if (mount) lazyVault.value = mount;
+        else failure.value = "Failed to load the secure card form.";
+      }).catch((error) => {
+        if (request !== lazyVaultRequest) return;
+        failure.value = error instanceof Error ? error.message : "Failed to load the secure card form.";
+      });
+    };
+    const ensureCapture = () => {
+      detachOutcomes?.();
+      detachOutcomes = null;
+      capture.value = null;
+      const id = sessionId.value;
+      if (!vault.value || !id) return;
+      const captureMethod = session.value?.captureMethod;
+      const flopay = provider?.flopay.value;
+      const adapter = flopay ? flopay.cardCapture({ sessionId: id, ...captureMethod ? { captureMethod } : {} }) : new PciVaultCardCapture({
+        sessionId: id,
+        ...captureMethod ? { captureMethod } : {},
+        billingApiUrl: billingApiUrl.value,
+        telemetry: props.telemetry
+      });
+      detachOutcomes = bindOutcomes(adapter);
+      adapter.setSubmitGate?.(gateClosed.value);
+      capture.value = adapter;
+    };
+    onMounted2(() => {
+      watch2(
+        unsupported,
+        (isUnsupported) => {
+          if (isUnsupported) emitError(noVaultCapabilityError());
+        },
+        { immediate: true }
+      );
+      watch2(
+        () => [
+          embeddedVault.value,
+          deferredVaultAdvertised.value,
+          vaultMountContext.value.billingApiUrl,
+          sessionId.value,
+          nonce.value,
+          cardRequested.value,
+          vaultRecoveryAttempt.value
+        ],
+        recoverVault,
+        { immediate: true }
+      );
+      watch2(() => [sessionId.value, vault.value?.html], ensureCapture, { immediate: true });
+      watch2(
+        () => [capture.value, props.cardFieldOrder, avsConfig.value],
+        ([adapter, order, avs]) => adapter?.setCardFieldOrder?.(order ?? null, avs == null),
+        { immediate: true }
+      );
+      watch2(gateClosed, (closed) => capture.value?.setSubmitGate?.(closed));
+    });
+    onBeforeUnmount3(() => {
+      lazyVaultRequest += 1;
+      detachOutcomes?.();
+      detachOutcomes = null;
+      if (overlayTimer) clearTimeout(overlayTimer);
+      if (methodOverlayTimer) clearTimeout(methodOverlayTimer);
+      if (paypalOverlayTimer) clearTimeout(paypalOverlayTimer);
+    });
+    const avsInput = (field, label, model, autocomplete, onChange) => h3("label", { "data-testid": `flopay-avs-${field}` }, [
+      h3("span", label),
+      h3("input", {
+        name: field,
+        autocomplete,
+        value: model.value,
+        disabled: externallyProcessing.value,
+        "aria-invalid": field === "postal_code" && avsInvalid.value ? "true" : void 0,
+        onInput: (event) => {
+          const value = event.target.value;
+          editedAvs.add(field);
+          model.value = value;
+          onChange?.(model.value);
+        }
+      })
+    ]);
+    const countrySelect = () => h3("label", { "data-testid": "flopay-avs-country" }, [
+      h3("span", "Country"),
+      h3(
+        "select",
+        {
+          id: "flopay-billing-country",
+          name: "billing-country",
+          autocomplete: "billing country",
+          "data-testid": "flopay-country",
+          value: country.value,
+          disabled: externallyProcessing.value,
+          onChange: (event) => {
+            const value = event.target.value;
+            editedAvs.add("country");
+            country.value = value;
+            region.value = "";
+            invokeMerchantCallback2(() => emit("countryChange", value));
+          }
+        },
+        [
+          country.value === "" ? h3("option", { value: "" }, "Select country") : null,
+          ...COUNTRY_OPTIONS.map(
+            (option) => h3(
+              "option",
+              { key: option.code, value: option.code },
+              `${option.flag} ${option.name}`
+            )
+          )
+        ]
+      )
+    ]);
+    const avsFields = () => {
+      if (!avsConfig.value) return null;
+      return h3(
+        "div",
+        {
+          "data-testid": "flopay-avs-fields",
+          style: `display:flex;flex-wrap:wrap;gap:8px;flex-direction:${props.avsLayout === "column" ? "column" : "row"}`
+        },
+        [
+          avsVisible("country") ? countrySelect() : null,
+          avsVisible("address_line_1") ? avsInput("address_line_1", "Address", addressLine1, "address-line1") : null,
+          avsVisible("address_line_2") ? avsInput("address_line_2", "Apt, suite, etc.", addressLine2, "address-line2") : null,
+          avsVisible("city") ? avsInput("city", "City", city, "address-level2") : null,
+          avsVisible("state") ? avsInput("state", "State / Province", region, "address-level1") : null,
+          avsVisible("postal_code") ? avsInput(
+            "postal_code",
+            "ZIP / Postal code",
+            zipCode,
+            "postal-code",
+            (value) => invokeMerchantCallback2(() => emit("zipChange", value))
+          ) : null
+        ]
+      );
+    };
+    const OVERLAY_TEXT = {
+      processing: "Processing payment\u2026",
+      success: "Payment successful",
+      failed: "Payment failed"
+    };
+    const overlayNode = (state) => state ? h3(
+      "div",
+      {
+        role: "status",
+        "aria-live": "polite",
+        "data-testid": "flopay-processing-overlay",
+        "data-state": state
+      },
+      OVERLAY_TEXT[state]
+    ) : null;
+    const processingOverlay = () => overlayNode(overlay.value);
+    const setMethodOverlay = (state) => {
+      if (methodOverlayTimer) clearTimeout(methodOverlayTimer);
+      methodOverlayTimer = null;
+      methodOverlay.value = state;
+    };
+    const holdMethodFailure = () => {
+      setMethodOverlay("failed");
+      methodOverlayTimer = setTimeout(() => {
+        methodOverlayTimer = null;
+        methodOverlay.value = null;
+      }, ERROR_DELAY_MS);
+    };
+    let walletSheetRefusal = null;
+    const methodRelay = {
+      onSubmitting: () => setMethodOverlay("processing"),
+      onComplete: (result) => {
+        setMethodOverlay("success");
+        setTimeout(() => {
+          if (methodCompleted) return;
+          methodCompleted = true;
+          invokeMerchantCallback2(() => emit("complete", result));
+        }, SUCCESS_DELAY_MS);
+      },
+      onDecline: (decline) => {
+        holdMethodFailure();
+        emitDecline(decline);
+      },
+      onError: (error) => {
+        if (methodOverlay.value === "processing") holdMethodFailure();
+        if (error.details?.providerCode === WALLET_SHEET_WINDOW_TOO_SMALL_CODE) {
+          walletSheetRefusal = error.message;
+          failure.value = error.message;
+        }
+        emitError(error);
+      }
+    };
+    const runStripeBeforeButtonClick = (method) => {
+      if (walletSheetRefusal !== null && failure.value === walletSheetRefusal) {
+        failure.value = null;
+      }
+      walletSheetRefusal = null;
+      return runBeforeButtonClick(method);
+    };
+    const cardSection = () => {
+      if (!vaultCapable.value) return null;
+      const mount = vault.value;
+      const fields = cardOpen.value && capture.value && mount ? h3(VaultCardFields, {
+        capture: capture.value,
+        html: mount.html,
+        messageToken: mount.messageToken,
+        expectedOrigin: mount.expectedOrigin,
+        verificationRequired: mount.verificationRequired,
+        theme: vaultTheme.value,
+        submitLabel: submitLabel.value,
+        onError: (message) => {
+          failure.value = message;
+        },
+        onValidation: (message) => {
+          failure.value = message;
+        }
+      }) : null;
+      const isButtons = props.layout === "buttons";
+      const card = fields ? h3(
+        "div",
+        {
+          "data-testid": "flopay-card-container",
+          style: { ...bStyles.value.cardFormContainer, position: "relative" }
+        },
+        [
+          isButtons ? null : defaultLayoutTitle(),
+          slots.cardPreFormSlot ? h3(
+            "div",
+            { "data-testid": "flopay-card-pre-form", style: { width: "100%" } },
+            slots.cardPreFormSlot()
+          ) : null,
+          avsFields(),
+          fields,
+          processingOverlay()
+        ]
+      ) : null;
+      if (!isButtons) return card;
+      return h3("div", { "data-testid": "flopay-card-section" }, [cardHeader(), card]);
+    };
+    const slotContent = (slot, fallback) => {
+      if (!slot) return { content: fallback, empty: false };
+      const nodes = slot();
+      return { content: nodes, empty: isEmptySlotOutput(nodes) };
+    };
+    const defaultLayoutTitle = () => {
+      const title = slotContent(slots.cardTitleContent, "Secure card checkout");
+      if (title.empty) return null;
+      return h3(
+        "div",
+        {
+          "data-testid": "flopay-card-title",
+          style: {
+            textAlign: "center",
+            fontWeight: 600,
+            fontSize: "1.1rem",
+            padding: "0.5rem 0",
+            color: "#262833",
+            ...bStyles.value.title
+          }
+        },
+        title.content
+      );
+    };
+    const expandCard = () => {
+      if (cardOpen.value) return;
+      cardOpen.value = true;
+      cardRequested.value = true;
+      vaultRecoveryAttempt.value += 1;
+      failure.value = null;
+      provider?.emitInstrument({ class: "card_surface" });
+      invokeMerchantCallback2(() => emit("buttonClick", "card"));
+    };
+    const collapseToButtons = () => {
+      cardOpen.value = false;
+      failure.value = null;
+    };
+    const cardHeader = () => {
+      const back = slotContent(slots.cardBackButtonContent, "Go back");
+      const title = slotContent(slots.cardTitleContent, "Secure card checkout");
+      return h3(
+        "div",
+        {
+          "data-testid": "flopay-card-header",
+          style: { display: "flex", alignItems: "center", padding: "0.75rem 0 0.625rem" }
+        },
+        [
+          h3(
+            "button",
+            {
+              type: "button",
+              "aria-label": "Back to payment methods",
+              "data-testid": "flopay-card-back-button",
+              onClick: collapseToButtons,
+              style: {
+                display: "inline-flex",
+                alignItems: "center",
+                gap: back.empty ? 0 : "0.5rem",
+                background: "none",
+                border: "none",
+                cursor: "pointer",
+                color: "#4b5563",
+                fontSize: bStyles.value.backButtonFontSize ?? "0.85rem",
+                fontWeight: 500,
+                padding: 0,
+                flexShrink: 0,
+                ...bStyles.value.backButton
+              }
+            },
+            [
+              h3(
+                "span",
+                {
+                  style: {
+                    display: "inline-flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    width: "28px",
+                    height: "28px",
+                    borderRadius: "50%",
+                    backgroundColor: "#f3f4f6",
+                    ...bStyles.value.backButtonIcon
+                  }
+                },
+                [
+                  h3(
+                    "svg",
+                    {
+                      "aria-hidden": "true",
+                      width: "14",
+                      height: "14",
+                      viewBox: "0 0 24 24",
+                      fill: "none",
+                      stroke: "currentColor",
+                      "stroke-width": "2.5",
+                      "stroke-linecap": "round",
+                      "stroke-linejoin": "round"
+                    },
+                    [h3("path", { d: "M15 18l-6-6 6-6" })]
+                  )
+                ]
+              ),
+              back.empty ? null : back.content
+            ]
+          ),
+          title.empty ? h3("div", { style: { flex: 1 } }) : h3(
+            "div",
+            {
+              "data-testid": "flopay-card-title",
+              style: {
+                flex: 1,
+                textAlign: "center",
+                fontWeight: 600,
+                fontSize: bStyles.value.titleFontSize ?? "1.05rem",
+                color: "#262833",
+                paddingRight: "80px",
+                ...bStyles.value.title
+              }
+            },
+            title.content
+          )
+        ]
+      );
+    };
+    const cardTile = () => h3(
+      "button",
+      {
+        type: "button",
+        "aria-expanded": false,
+        "data-testid": "flopay-card-button",
+        disabled: externallyProcessing.value,
+        style: {
+          // React sizes the default tile to the other buttons; custom content pads instead.
+          ...slots.cardButtonContent ? { padding: "0.9rem 1rem" } : {
+            boxSizing: "border-box",
+            height: `${DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT}px`,
+            padding: "0 1rem"
+          },
+          ...cardTileStyle.value,
+          fontWeight: 600,
+          // React dims the tile and shows a not-allowed cursor while processing.
+          cursor: externallyProcessing.value ? "not-allowed" : "pointer",
+          ...externallyProcessing.value ? { opacity: 0.6 } : {},
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: "0.625rem",
+          position: "relative"
+        },
+        onClick: () => {
+          if (externallyProcessing.value) return;
+          if (!props.onBeforeButtonClick) {
+            expandCard();
+            return;
+          }
+          void runBeforeButtonClick("card").then((beforeClick) => {
+            if (beforeClick.proceed) expandCard();
+          });
+        }
+      },
+      slots.cardButtonContent ? slots.cardButtonContent() : defaultCardButtonContent()
+    );
+    return () => {
+      if (!session.value && !sessionId.value) return h3("div", { "data-testid": "flopay-form" });
+      if (unsupported.value) {
+        return h3("div", { role: "alert", "data-testid": "flopay-form-error" }, [
+          noVaultCapabilityError().message
+        ]);
+      }
+      const relay = {
+        onComplete: (result) => invokeMerchantCallback2(() => emit("complete", result)),
+        onDecline: emitDecline,
+        onError: emitError
+      };
+      const paypalButton = directPaypal.value && sessionId.value && directPayPalCanWaitForAttachment.value ? h3(DirectPayPalButton, {
+        sessionId: sessionId.value,
+        nonce: nonce.value,
+        billingApiUrl: billingApiUrl.value,
+        email: accountPatch.value?.email ?? props.email,
+        // React's pass-through: identity, the click gate, the processing
+        // state, the click notice and the error channel.
+        billingName: billingName.value || void 0,
+        onBuyerIdentityReady: props.onBuyerIdentityReady,
+        runBeforeButtonClick,
+        isProcessing: externallyProcessing.value,
+        clientId: directPaypal.value.clientId,
+        environment: directPaypal.value.environment,
+        // React's `directPaypal` pass-through. The session's object type
+        // and presentation still win inside the button.
+        providerObjectType: directPaypal.value.providerObjectType,
+        approvalPresentation: directPaypal.value.approvalPresentation,
+        existingOrderId: paypalRetry.value?.orderId,
+        currency: resolvedCurrency.value.toUpperCase(),
+        isSubscription: resolvedIsSubscription.value,
+        session: session.value,
+        // React's `debug={debug}`: the button's lifecycle tracer.
+        debug: props.debug,
+        ...relay,
+        // React's `onTokenizedBody={dispatchTokenizedBody}`: the form
+        // continues the approval (or hands it to the host's handler).
+        onTokenizedBody: dispatchTokenizedBody,
+        onButtonClick: (method) => invokeMerchantCallback2(() => emit("buttonClick", method)),
+        onErrorChange: (message) => {
+          failure.value = message;
+        },
+        // React's `onInitializationStateChange={setDirectPaypalInitializationState}`.
+        onInitializationStateChange: (state) => {
+          directPaypalInitializationState.value = state;
+        }
+      }) : null;
+      const paypalNode = paypalButton ? h3(Fragment, null, [
+        paypalRetry.value?.orderId ? h3(
+          "div",
+          {
+            "data-testid": "flopay-paypal-direct-retry-notice",
+            style: {
+              padding: "8px 10px",
+              background: "#fef3c7",
+              border: "1px solid #fcd34d",
+              borderRadius: "6px",
+              color: "#78350f",
+              fontSize: "13px",
+              lineHeight: 1.4
+            }
+          },
+          "Please confirm your PayPal payment to complete checkout."
+        ) : null,
+        paypalButton,
+        overlayNode(paypalOverlay.value)
+      ]) : null;
+      const amountInCents = props.totalAmount || 100;
+      const renderStripe = renderedStripeMethods.value.length > 0 && Boolean(stripeKey.value) && Boolean(sessionId.value) && !nonCardAttachmentBlocked.value;
+      const stripeNode = renderStripe && stripeKey.value && sessionId.value ? h3("div", { style: "position:relative", "data-testid": "flopay-stripe-section" }, [
+        h3(StripePaymentMethods, {
+          // Stripe's Elements are created once per mount, so the row
+          // remounts when the direct PayPal fallback adds or removes
+          // Stripe PayPal.
+          key: renderedStripeMethods.value.includes("paypal") ? "stripe-with-paypal" : "stripe-without-paypal",
+          session: session.value,
+          sessionId: sessionId.value,
+          nonce: nonce.value,
+          billingApiUrl: billingApiUrl.value,
+          publishableKey: stripeKey.value,
+          methods: renderedStripeMethods.value,
+          currency: resolvedCurrency.value,
+          amount: amountInCents,
+          // The wallet row's mode follows the real total (React's
+          // `resolveWalletElementsMode(totalAmount, …)`).
+          totalAmount: props.totalAmount,
+          appearance: appearance.value,
+          // React's Stripe PayPal group: with a redirect presentation,
+          // PayPal leaves the wallet row for the redirect tile, which
+          // runs the click gate and continues on the form's `/process`.
+          paypalPresentation: stripePayPalPresentation.value,
+          runBeforeButtonClick: runStripeBeforeButtonClick,
+          onTokenizedBody: dispatchTokenizedBody,
+          // React's `isProcessing={isSubmitting}`.
+          isProcessing: stripeMethodsProcessing.value,
+          // React restores the click-time patch from storage; Vue asks
+          // the merchant's gate again on an authorized redirect return.
+          recoverAccountPatch: recoverStripePayPalAccount,
+          ...methodRelay
+        }),
+        overlayNode(methodOverlay.value)
+      ]) : null;
+      const failureNode = displayError.value ? h3("div", { role: "alert" }, displayError.value) : null;
+      const gateDebug = (suffix) => {
+        if (!props.debug) return [];
+        const listed = props.enabledPaymentMethods ?? session.value?.gateways?.stripe?.enabledPaymentMethods;
+        const express = renderedStripeMethods.value.filter(isStripeExpressMethod);
+        const listedOthers = stripeMethods.value.filter((m) => !isStripeExpressMethod(m));
+        const renderedOthers = renderedStripeMethods.value.filter((m) => !isStripeExpressMethod(m));
+        const panel = (testId, lines) => h3(
+          "pre",
+          { "data-testid": `${testId}${suffix}`, style: GATE_DEBUG_STYLE },
+          lines.join("\n")
+        );
+        return [
+          !props.showPayPal || !directPaypalConfigured.value ? panel("flopay-direct-paypal-gate-debug", ["FloPay/DirectPayPal-debug - not enabled"]) : panel("flopay-direct-paypal-gate-debug", [
+            "FloPay/DirectPayPal-debug (parent gate)",
+            `  showPayPal=${props.showPayPal}`,
+            `  directPaypalConfigured=${directPaypalConfigured.value}`,
+            `  inAppBrowserDetected=${String(inAppBrowserDetected())}`,
+            `  shouldRenderDirectPayPal=${Boolean(paypalButton)}`,
+            `  shouldRenderStripePayPal=${renderStripe && renderedStripeMethods.value.includes("paypal")}`
+          ]),
+          !props.showStripe || !stripeKey.value ? panel("flopay-stripe-gate-debug", ["FloPay/Stripe-debug - not enabled"]) : panel("flopay-stripe-gate-debug", [
+            "FloPay/Stripe-debug (parent gate)",
+            `  showStripe=${props.showStripe}`,
+            `  currency=${resolvedCurrency.value}`,
+            `  amountInCents=${amountInCents}`,
+            `  enabledPaymentMethods: ${JSON.stringify(listed ?? [])}`,
+            `  enabledPaymentMethodsProvided=${Array.isArray(listed)}`,
+            `  hasEnabledMethods=${Array.isArray(listed) && listed.length > 0}`,
+            `  expressMethods: ${JSON.stringify(express)}`,
+            `  paymentElementMethods: ${JSON.stringify(listedOthers)}`,
+            `  paymentElementMethodsForCurrency: ${JSON.stringify(renderedOthers)}`,
+            `  shouldRenderWallets=${renderStripe && express.length > 0}`,
+            `  shouldRenderPaymentElement=${renderStripe && renderedOthers.length > 0}`
+          ])
+        ];
+      };
+      if (props.layout !== "buttons") {
+        return h3("div", { "data-testid": "flopay-form", class: props.className }, [
+          failureNode,
+          ...gateDebug("-default"),
+          paypalNode,
+          stripeNode,
+          cardSection()
+        ]);
+      }
+      const cardView = cardOpen.value && vaultCapable.value;
+      return h3("div", { "data-testid": "flopay-form", class: props.className }, [
+        failureNode,
+        h3(
+          "div",
+          {
+            "data-testid": "flopay-buttons-panel",
+            "aria-hidden": cardView ? "true" : void 0,
+            style: cardView ? { display: "none" } : { display: "flex", flexDirection: "column", gap: "0.5rem" }
+          },
+          [...gateDebug(""), paypalNode, stripeNode, vaultCapable.value ? cardTile() : null]
+        ),
+        cardView ? cardSection() : null
+      ]);
+    };
+  }
+});
+
+// src/flopay-checkout.ts
+function toFloPayError(error, fallback) {
+  if (error instanceof FloPayError4) return error;
+  return new FloPayError4(error instanceof Error ? error.message : fallback, "api_error");
+}
+async function resolveInlineSession(api, params) {
+  const canonicalIdentity = serializeCreateParams(params);
+  const cacheKey = hashCreateParams(params);
+  const suppliedIdempotencyKey = params.idempotencyKey === void 0 ? void 0 : resolveIdempotencyKey(params.idempotencyKey);
+  const cached = readCachedInlineSession(cacheKey, canonicalIdentity);
+  let cachedIdempotency = readCachedInlineIdempotencyKey(cacheKey, canonicalIdentity);
+  if (cached?.canonicalIdentity === canonicalIdentity && cachedIdempotency && cachedIdempotency.canonicalIdentity === void 0) {
+    persistCachedInlineIdempotencyKey(
+      cacheKey,
+      canonicalIdentity,
+      cachedIdempotency.idempotencyKey
+    );
+    cachedIdempotency = { ...cachedIdempotency, canonicalIdentity };
+  }
+  let idempotencyKey = suppliedIdempotencyKey ?? (cachedIdempotency?.canonicalIdentity === canonicalIdentity ? cachedIdempotency.idempotencyKey : void 0);
+  let rotateIdempotencyKey = false;
+  if (cached) {
+    try {
+      const reused = await api.getUnifiedCheckoutSession(
+        cached.sid,
+        cached.nonce
+      );
+      let reusable = true;
+      if (cached.canonicalIdentity === void 0) {
+        if (legacyCachedSessionMatchesDraft(reused.data.session ?? void 0, params)) {
+          persistCachedInlineSession(
+            cacheKey,
+            canonicalIdentity,
+            cached.sid,
+            cached.nonce ?? reused.data.session?.clientSecret
+          );
+          if (cachedIdempotency && cachedIdempotency.canonicalIdentity === void 0) {
+            persistCachedInlineIdempotencyKey(
+              cacheKey,
+              canonicalIdentity,
+              cachedIdempotency.idempotencyKey
+            );
+            idempotencyKey ?? (idempotencyKey = cachedIdempotency.idempotencyKey);
+          }
+        } else {
+          clearCachedInlineCheckout(cacheKey, canonicalIdentity);
+          idempotencyKey = suppliedIdempotencyKey;
+          reusable = false;
+        }
+      }
+      if (reusable && reused.data.session?.status === "complete") {
+        if (wasSessionRecentlyCompleted(cached.sid)) return { result: reused };
+        clearCachedInlineCheckout(cacheKey, canonicalIdentity);
+        reusable = false;
+        rotateIdempotencyKey = true;
+      }
+      if (reusable) return { result: reused };
+    } catch {
+      if (cached.canonicalIdentity === void 0) {
+        clearCachedInlineCheckout(cacheKey, canonicalIdentity);
+        idempotencyKey = suppliedIdempotencyKey;
+      } else {
+        clearCachedInlineSession(cacheKey, canonicalIdentity);
+      }
+    }
+  }
+  if (!suppliedIdempotencyKey && (rotateIdempotencyKey || !idempotencyKey)) {
+    idempotencyKey = resolveIdempotencyKey();
+  }
+  if (idempotencyKey) {
+    persistCachedInlineIdempotencyKey(cacheKey, canonicalIdentity, idempotencyKey);
+  }
+  const createParams = { ...params, idempotencyKey };
+  if (!isDetachedSessionEligible(createParams)) {
+    const created = await api.createAndFetchSession(createParams);
+    const sid = created.data.session?.id;
+    if (sid) {
+      persistCachedInlineSession(
+        cacheKey,
+        canonicalIdentity,
+        sid,
+        created.data.session?.clientSecret
+      );
+    }
+    return { result: created };
+  }
+  const detached = await api.createDetachedSession({ ...createParams, deferDataAttachment: true });
+  const claimed = detached.claimed.then(
+    (claimedResult) => {
+      const claimedSid = claimedResult.data.session?.id ?? detached.sessionId;
+      if (claimedSid) {
+        persistCachedInlineSession(
+          cacheKey,
+          canonicalIdentity,
+          claimedSid,
+          claimedResult.data.session?.clientSecret ?? detached.nonce
+        );
+      }
+      return claimedResult;
+    },
+    (error) => {
+      clearCachedInlineSession(cacheKey, canonicalIdentity);
+      throw error;
+    }
+  );
+  return { result: detached.shell, claimed };
+}
+var FloPayCheckout = defineComponent4({
+  name: "FloPayCheckout",
+  props: {
+    sessionId: { type: String, default: void 0 },
+    nonce: { type: String, default: void 0 },
+    createSession: { type: Object, default: void 0 },
+    checkoutMode: { type: String, default: void 0 },
+    billingApiUrl: { type: String, default: void 0 },
+    telemetry: { type: Boolean, default: void 0 },
+    locale: { type: String, default: void 0 },
+    layout: { type: String, default: "default" },
+    /**
+     * React's `walletPresentation` (default `'auto'`): the preferred approval
+     * presentation for Stripe-routed PayPal, passed to the built-in form and
+     * to a custom-layout form that leaves its own unset.
+     */
+    walletPresentation: { type: String, default: "auto" },
+    showPayPal: { type: Boolean, default: true },
+    showStripe: { type: Boolean, default: true },
+    enabledPaymentMethods: { type: Array, default: void 0 },
+    /** @deprecated Session-driven visibility decides (React parity). */
+    showApplePay: { type: Boolean, default: true },
+    /** @deprecated Session-driven visibility decides (React parity). */
+    showGooglePay: { type: Boolean, default: true },
+    theme: { type: String, default: void 0 },
+    appearance: { type: Object, default: void 0 },
+    buttonsTheme: { type: String, default: void 0 },
+    buttonsStyles: { type: Object, default: void 0 },
+    className: { type: String, default: void 0 },
+    submitLabel: { type: String, default: void 0 },
+    enableAVS: {
+      type: [Boolean, Object],
+      default: void 0
+    },
+    avsLayout: { type: String, default: void 0 },
+    cardFieldOrder: { type: Array, default: void 0 },
+    /** @deprecated Not rendered (React parity); see {@link FloPayCheckoutProps.showSecurityFooter}. */
+    showSecurityFooter: { type: Boolean, default: void 0 },
+    /** @deprecated Ignored (React parity); see {@link FloPayCheckoutProps.fallbackPublishableKey}. */
+    fallbackPublishableKey: { type: String, default: void 0 },
+    confirmLabel: { type: String, default: void 0 },
+    initialErrorMessage: { type: String, default: null },
+    /**
+     * React's `onBeforeButtonClick` (a function prop: its result is read),
+     * passed to the built-in `SplitCardForm`. It runs before the buttons-layout
+     * card tile opens and before PayPal creates its order.
+     */
+    onBeforeButtonClick: {
+      type: Function,
+      default: void 0
+    },
+    initialPayPalOrderId: { type: String, default: void 0 },
+    debug: { type: Boolean, default: false }
+  },
+  emits: {
+    complete: (_result) => true,
+    error: (_error) => true,
+    instrument: (_event) => true,
+    decline: (_decline) => true,
+    buttonClick: (_method) => true,
+    countryChange: (_country) => true,
+    // React's `onZipChange`.
+    zipChange: (_zip) => true,
+    // React's `onSessionCompleted`: the session was already paid when it loaded.
+    sessionCompleted: (_successUrl) => true
+  },
+  setup(props, { emit, slots }) {
+    const state = reactive({
+      session: null,
+      loading: true,
+      error: null,
+      claimPending: false,
+      // React's `claimRequiresIdentity`. React's checkout sets it from its
+      // session bootstrap, where the value is currently always `false`
+      // (`bootstrapClaimRequiresIdentity`), so it stays `false` here too.
+      claimRequiresIdentity: false,
+      inlineSessionDraft: props.createSession
+    });
+    watch3(
+      () => props.createSession,
+      (draft) => {
+        state.inlineSessionDraft = draft;
+      }
+    );
+    const flopay = shallowRef3(null);
+    const stripeKey = shallowRef3(void 0);
+    const stripeCountryGate = shallowRef3(void 0);
+    let active = true;
+    const billingApiUrl = () => resolveBillingApiUrl3(props.billingApiUrl);
+    const mode = ref4("full");
+    const modeError = ref4(props.initialErrorMessage ?? null);
+    const savedPaymentRunning = ref4(false);
+    const settled = ref4(false);
+    const lifecycle = new AbortController();
+    watch3(
+      () => props.initialErrorMessage,
+      (message) => {
+        modeError.value = message ?? null;
+      }
+    );
+    provide(CHECKOUT_STATE, state);
+    provide(CHECKOUT_FORM_DEFAULTS, () => ({
+      sessionId: state.session?.id ?? props.sessionId,
+      nonce: state.session?.clientSecret || props.nonce,
+      billingApiUrl: billingApiUrl(),
+      session: state.session,
+      submitLabel: props.submitLabel,
+      dataAttachmentPending: Boolean(state.claimPending),
+      // React's `SessionInjector`: `if (session?.customer) … injected.userId =
+      // session.customer.id` for a child whose own `userId` is empty.
+      userId: state.session?.customer?.id || void 0,
+      // React's `SessionInjector`: `if (existing.walletPresentation === undefined)
+      // injected.walletPresentation = walletPresentation`.
+      walletPresentation: props.walletPresentation
+    }));
+    const fail = (error) => {
+      if (!active) return;
+      const failure = toFloPayError(error, "Checkout failed to load.");
+      state.error = failure;
+      state.loading = false;
+      state.claimPending = false;
+      invokeMerchantCallback3(() => emit("error", failure));
+    };
+    const adopt = (result) => {
+      if (!active) return;
+      state.session = result.data.session ?? state.session;
+      stripeCountryGate.value = result.data.stripe?.enabledPaymentMethodCountries;
+      const publishableKey = result.data.stripe?.publishableKey ?? state.session?.gateways?.stripe?.publishableKey;
+      if (publishableKey && publishableKey !== stripeKey.value) {
+        stripeKey.value = publishableKey;
+        const loading = loadFloPay(publishableKey, {
+          billingApiUrl: billingApiUrl(),
+          ...props.locale ? { locale: props.locale } : {},
+          ...props.telemetry === void 0 ? {} : { telemetry: props.telemetry }
+        });
+        void loading.catch(() => {
+        });
+        flopay.value = loading;
+      }
+    };
+    const createApi = () => new PaymentAPI3(billingApiUrl(), props.telemetry === false ? { telemetry: false } : void 0);
+    const confirmReady = () => Boolean(
+      (state.session?.id || props.sessionId) && (state.session?.clientSecret || props.nonce)
+    );
+    const runSavedPayment = async (unified) => {
+      const session = state.session;
+      if (!session || savedPaymentRunning.value) return;
+      modeError.value = null;
+      savedPaymentRunning.value = true;
+      const sessionId = session.id || props.sessionId || null;
+      try {
+        const result = await chargeSavedPayment({
+          api: createApi(),
+          billingApiUrl: billingApiUrl(),
+          session,
+          nonce: session.clientSecret || props.nonce,
+          unified,
+          signal: lifecycle.signal
+        });
+        if (sessionId) markSessionRecentlyCompleted2(sessionId);
+        settled.value = true;
+        await new Promise((resolve) => setTimeout(resolve, SAVED_PAYMENT_SUCCESS_DELAY_MS));
+        invokeMerchantCallback3(() => emit("complete", result));
+      } catch (error) {
+        const failure = coerceError(error, "Payment failed. Please try again.");
+        if (failure.code === "three_ds_aborted") return;
+        modeError.value = failure.message;
+        mode.value = "full";
+        invokeMerchantCallback3(() => emit("error", failure));
+        if (sessionId) {
+          const decline = {
+            method: "card",
+            message: failure.message,
+            ...failure.code ? { code: failure.code } : {},
+            ...failure.declineCode ? { declineCode: failure.declineCode } : {},
+            sessionId
+          };
+          invokeMerchantCallback3(() => emit("decline", decline));
+        }
+      } finally {
+        savedPaymentRunning.value = false;
+      }
+    };
+    const confirmPurchase = () => {
+      if (savedPaymentRunning.value || !confirmReady()) return;
+      void runSavedPayment();
+    };
+    const settleMode = async (result) => {
+      const session = state.session;
+      if (!active || !session) return;
+      const sessionMode = session.checkoutMode;
+      if (sessionMode === "setup") {
+        state.session = null;
+        throw new FloPayError4(
+          "This is a card setup session. Use FloPayCardSetup instead of FloPayCheckout.",
+          "validation_error",
+          { code: "InvalidCardSetupSurface", param: "sessionId" }
+        );
+      }
+      if (session.status === "authorized" || session.status === "complete") {
+        settled.value = true;
+        const successUrl = session.successUrl ?? "";
+        if (session.status === "authorized") {
+          const completed = terminalResult(session, session.id || props.sessionId || null);
+          invokeMerchantCallback3(() => emit("complete", completed));
+        }
+        invokeMerchantCallback3(() => emit("sessionCompleted", successUrl));
+        return;
+      }
+      mode.value = props.checkoutMode ?? sessionMode ?? "full";
+      const paypalReturn = typeof window !== "undefined" && new URLSearchParams(window.location.search).has("payment_intent");
+      if (mode.value === "auto" && !paypalReturn) {
+        await runSavedPayment(result);
+      }
+    };
+    const start = async () => {
+      const api = createApi();
+      if (props.sessionId) {
+        const result = await api.getUnifiedCheckoutSession(props.sessionId, props.nonce);
+        adopt(result);
+        await settleMode(result);
+        return;
+      }
+      if (!props.createSession) {
+        throw new FloPayError4(
+          "FloPayCheckout requires a sessionId or createSession.",
+          "validation_error"
+        );
+      }
+      const params = {
+        ...props.createSession,
+        ...props.checkoutMode ? { checkoutMode: props.checkoutMode } : {}
+      };
+      Object.assign(params, {
+        checkoutType: "embedded_checkout",
+        checkoutLayout: props.layout,
+        // AVS analytics metadata, as React sends it.
+        ...props.enableAVS ? {
+          avsCheck: true,
+          avsConfig: typeof props.enableAVS === "object" ? props.enableAVS : void 0
+        } : {}
+      });
+      const resolved = await resolveInlineSession(api, params);
+      if (!resolved.claimed) {
+        adopt(resolved.result);
+        await settleMode(resolved.result);
+        return;
+      }
+      state.claimPending = true;
+      adopt(resolved.result);
+      resolved.claimed.then(
+        (claimed) => {
+          if (!active) return;
+          adopt(claimed);
+          state.claimPending = false;
+        },
+        (error) => fail(error)
+      );
+    };
+    onMounted3(() => {
+      start().then(
+        () => {
+          if (active) state.loading = false;
+        },
+        (error) => fail(error)
+      );
+    });
+    onBeforeUnmount4(() => {
+      active = false;
+      lifecycle.abort();
+    });
+    const clearModeError = () => {
+      modeError.value = null;
+    };
+    const relay = {
+      onComplete: (result) => {
+        clearModeError();
+        invokeMerchantCallback3(() => emit("complete", result));
+      },
+      onError: (error) => {
+        clearModeError();
+        invokeMerchantCallback3(() => emit("error", error));
+      },
+      onDecline: (decline) => {
+        clearModeError();
+        invokeMerchantCallback3(() => emit("decline", decline));
+      },
+      onButtonClick: (method) => {
+        clearModeError();
+        invokeMerchantCallback3(() => emit("buttonClick", method));
+      }
+    };
+    const withProvider = (content) => h4(
+      FloPayProvider,
+      {
+        flopay: flopay.value,
+        options: { billingApiUrl: billingApiUrl() },
+        // React's `onInstrument`: the provider's privacy-safe instrument feed.
+        onInstrument: (event) => invokeMerchantCallback3(() => emit("instrument", event))
+      },
+      { default: content }
+    );
+    const confirmView = () => {
+      const unavailable = savedPaymentRunning.value || !confirmReady();
+      const button = slots.renderConfirmButton ? slots.renderConfirmButton({ onConfirm: confirmPurchase, isProcessing: unavailable }) : h4(
+        "button",
+        {
+          type: "button",
+          "data-testid": "flopay-confirm-button",
+          onClick: confirmPurchase,
+          disabled: unavailable,
+          style: {
+            width: "100%",
+            padding: "0.875rem",
+            backgroundColor: "#4A49FF",
+            color: "white",
+            border: "none",
+            borderRadius: "8px",
+            fontSize: "1rem",
+            fontWeight: 600,
+            cursor: unavailable ? "not-allowed" : "pointer",
+            opacity: unavailable ? 0.6 : 1
+          }
+        },
+        savedPaymentRunning.value ? "Processing..." : props.confirmLabel ?? "Confirm Purchase"
+      );
+      return h4("div", { class: props.className, "data-testid": "flopay-confirm" }, [
+        modeError.value ? h4(
+          "div",
+          {
+            role: "alert",
+            "data-testid": "flopay-mode-error",
+            style: {
+              color: "#dc2626",
+              fontSize: "0.875rem",
+              marginBottom: "0.75rem",
+              textAlign: "center"
+            }
+          },
+          modeError.value
+        ) : null,
+        button
+      ]);
+    };
+    return () => {
+      if (state.error && !state.session) {
+        if (slots.error) return slots.error({ error: state.error });
+        return h4("div", { role: "alert", "data-testid": "flopay-load-error" }, state.error.message);
+      }
+      if (!state.session || mode.value === "auto" && savedPaymentRunning.value) {
+        return h4(
+          "div",
+          { role: "status", "aria-busy": "true", "data-testid": "flopay-checkout-loading" },
+          slots.loading?.() ?? "Loading checkout\u2026"
+        );
+      }
+      if (settled.value) return null;
+      if (mode.value === "confirm") {
+        return withProvider(() => [slots.default?.(), confirmView()]);
+      }
+      const session = state.session;
+      const modeNotice = modeError.value ? h4(
+        "div",
+        {
+          role: "alert",
+          "data-testid": "flopay-mode-error",
+          style: {
+            padding: "0.75rem 1rem",
+            marginBottom: "0.75rem",
+            backgroundColor: "#FEF3C7",
+            border: "1px solid #F59E0B",
+            borderRadius: "8px",
+            color: "#92400E",
+            fontSize: "0.875rem"
+          }
+        },
+        modeError.value
+      ) : null;
+      const account = props.createSession?.account;
+      const layoutSlot = slots.layout?.();
+      const customLayout = layoutSlot && props.className ? h4("div", { class: props.className }, layoutSlot) : layoutSlot;
+      const cardSlots = Object.fromEntries(
+        Object.entries({
+          cardButtonContent: slots.cardButtonContent,
+          cardBackButtonContent: slots.cardBackButtonContent,
+          cardTitleContent: slots.cardTitleContent,
+          cardPreFormSlot: slots.cardPreFormSlot
+        }).filter(([, slot]) => slot !== void 0)
+      );
+      const form = customLayout ?? h4(
+        SplitCardForm,
+        {
+          sessionId: session.id || props.sessionId,
+          nonce: session.clientSecret || props.nonce,
+          billingApiUrl: billingApiUrl(),
+          telemetry: props.telemetry,
+          email: session.customer?.email || account?.email,
+          firstName: session.customer?.firstName || account?.firstName,
+          lastName: session.customer?.lastName || account?.lastName,
+          // React: `userId={session?.customer?.id || effectiveCreateSession?.account?.userId}`.
+          userId: session.customer?.id || account?.userId,
+          layout: props.layout,
+          showPayPal: props.showPayPal,
+          showStripe: props.showStripe,
+          enabledPaymentMethods: props.enabledPaymentMethods,
+          showApplePay: props.showApplePay,
+          showGooglePay: props.showGooglePay,
+          // React: the bundle comes through `theme`; an explicit `appearance`
+          // wins over the bundle's for the Stripe-side half.
+          theme: props.theme,
+          buttonsTheme: props.buttonsTheme,
+          buttonsStyles: props.buttonsStyles,
+          appearance: props.appearance ?? resolveTheme2(props.theme)?.appearance,
+          className: props.className,
+          submitLabel: props.submitLabel,
+          enableAVS: props.enableAVS,
+          // React: `avsCheck={!!enableAVS}`, reported in the `/account` snapshot.
+          avsCheck: !!props.enableAVS,
+          // React: `checkoutType={createSessionParams ? 'embedded_checkout' : 'standard_checkout'}`
+          // and `checkoutLayout={resolveCheckoutLogLayout(children, layout)}`, the
+          // analytics metadata on the form's own `/process`. The built-in form
+          // renders only without a custom layout, as in React.
+          checkoutType: props.createSession ? "embedded_checkout" : "standard_checkout",
+          checkoutLayout: resolveCheckoutLogLayout(false, props.layout),
+          avsLayout: props.avsLayout,
+          cardFieldOrder: props.cardFieldOrder,
+          session,
+          dataAttachmentPending: Boolean(state.claimPending),
+          dataAttachmentRequiresIdentity: Boolean(state.claimRequiresIdentity),
+          // React: `walletPresentation={walletPresentation}` on its built-in form.
+          walletPresentation: props.walletPresentation,
+          onBeforeButtonClick: props.onBeforeButtonClick,
+          // React fills these from the session for its built-in form only:
+          // `directPaypal={directPaypalConfig}`,
+          // `currency={session?.currency?.toLowerCase() ?? 'usd'}`,
+          // `isSubscription={session?.mode === 'subscription'}`, the Stripe
+          // country gate, and `debug={debug}`.
+          // The shared resolver React uses. React passes the normalized
+          // `data.paypal`, which `@flopay/js` copies field for field from
+          // this `gateways.paypal` when it has a client id.
+          directPaypal: resolveDirectPaypalConfig(
+            session.gateways?.paypal,
+            props.initialPayPalOrderId
+          ),
+          currency: session.currency?.toLowerCase() ?? "usd",
+          isSubscription: session.mode === "subscription",
+          // React: `totalAmount={session ? Math.round(buildCheckoutDisplayData(session).total * 100) : 0}`.
+          totalAmount: Math.round(buildCheckoutDisplayData(session).total * 100),
+          enabledPaymentMethodCountries: stripeCountryGate.value,
+          debug: props.debug,
+          ...relay,
+          onCountryChange: (country) => invokeMerchantCallback3(() => emit("countryChange", country)),
+          onZipChange: (zip) => invokeMerchantCallback3(() => emit("zipChange", zip))
+        },
+        cardSlots
+      );
+      return withProvider(() => [slots.default?.(), modeNotice, form]);
+    };
+  }
+});
+
+// src/automatic-payment-button.ts
+var SUCCESS_DELAY_MS2 = SAVED_PAYMENT_SUCCESS_DELAY_MS;
+function resolveDraft(props) {
+  if (props.createSession) return { ...props.createSession, checkoutMode: "auto" };
+  if (!props.clientId || !props.account || !props.successUrl || !props.cancelUrl) return null;
+  const hasProducts = props.products != null;
+  return {
+    clientId: props.clientId,
+    products: props.products,
+    items: hasProducts ? void 0 : props.items,
+    subscriptions: hasProducts ? void 0 : props.subscriptions,
+    account: props.account,
+    successUrl: props.successUrl,
+    cancelUrl: props.cancelUrl,
+    couponCodes: props.couponCodes,
+    tagsData: props.tagsData,
+    utmMetadata: props.utmMetadata,
+    checkoutMode: "auto"
+  };
+}
+function canFallBack(error, sessionId) {
+  if (!sessionId || error.type === "validation_error") return false;
+  return error.code !== "stored_payment_method_unsupported";
+}
+var FloPayAutomaticPaymentButton = defineComponent5({
+  name: "FloPayAutomaticPaymentButton",
+  // The root is a fragment (button, notice, fallback checkout): native button
+  // attributes are bound to the `<button>` explicitly, as React spreads them.
+  inheritAttrs: false,
+  props: {
+    sessionId: { type: String, default: void 0 },
+    nonce: { type: String, default: void 0 },
+    createSession: { type: Object, default: void 0 },
+    // Deprecated and ignored, as in React (see the props interface).
+    paymentMethodId: { type: String, default: void 0 },
+    checkoutMethod: { type: String, default: void 0 },
+    clientId: { type: String, default: void 0 },
+    products: { type: Array, default: void 0 },
+    items: { type: Array, default: void 0 },
+    subscriptions: { type: Array, default: void 0 },
+    account: { type: Object, default: void 0 },
+    successUrl: { type: String, default: void 0 },
+    cancelUrl: { type: String, default: void 0 },
+    couponCodes: { type: Array, default: void 0 },
+    tagsData: { type: Object, default: void 0 },
+    utmMetadata: {
+      type: Object,
+      default: void 0
+    },
+    billingApiUrl: { type: String, default: void 0 },
+    locale: { type: String, default: void 0 },
+    disabled: { type: Boolean, default: false },
+    theme: { type: String, default: void 0 },
+    appearance: { type: Object, default: void 0 },
+    buttonsTheme: { type: String, default: void 0 },
+    buttonsStyles: { type: Object, default: void 0 }
+  },
+  emits: {
+    success: (_event) => true,
+    error: (_error) => true,
+    decline: (_decline) => true
+  },
+  setup(props, { attrs, emit, slots }) {
+    const processing = ref5(false);
+    const notice = ref5(null);
+    const fallback = ref5(null);
+    let mounted = true;
+    const lifecycle = new AbortController();
+    onBeforeUnmount5(() => {
+      mounted = false;
+      lifecycle.abort();
+    });
+    const billingApiUrl = () => resolveBillingApiUrl4(props.billingApiUrl);
+    const themeBundle = computed3(() => resolveTheme3(props.theme));
+    const bStyles = computed3(() => {
+      const base = themeBundle.value?.buttonsLayout ?? resolveButtonsLayoutTheme2(props.buttonsTheme);
+      const override = props.buttonsStyles;
+      if (!override) return base;
+      return { ...base, ...override, cardButton: { ...base.cardButton, ...override.cardButton } };
+    });
+    const resolvedAppearance = computed3(() => {
+      const bundleAppearance = themeBundle.value?.appearance;
+      if (!props.appearance) return bundleAppearance;
+      if (!bundleAppearance) return props.appearance;
+      return {
+        ...bundleAppearance,
+        ...props.appearance,
+        variables: { ...bundleAppearance.variables, ...props.appearance.variables }
+      };
+    });
+    const tile = computed3(() => {
+      const vars = resolvedAppearance.value?.variables;
+      const explicitPrimary = typeof vars?.colorPrimary === "string" ? vars.colorPrimary : void 0;
+      const primary = explicitPrimary ?? "#4A49FF";
+      const hover = typeof vars?.colorPrimaryHover === "string" ? vars.colorPrimaryHover : darkenHex(primary, 0.12);
+      const radius = typeof vars?.borderRadius === "string" ? vars.borderRadius : "8px";
+      return {
+        primary,
+        hover,
+        // Only a primary-filled button (a bundle or an explicit colorPrimary) hovers.
+        hovers: Boolean(themeBundle.value || explicitPrimary),
+        style: {
+          width: "100%",
+          ...bStyles.value.cardButton,
+          ...derivePrimaryTileStyle2({
+            themeBundle: themeBundle.value,
+            resolvedPrimaryColor: primary,
+            resolvedBorderRadius: radius,
+            submitButtonStyle: bStyles.value.submitButton,
+            explicitPrimaryColor: explicitPrimary
+          }),
+          fontSize: bStyles.value.cardButtonFontSize ?? "0.95rem",
+          fontWeight: 600
+        }
+      };
+    });
+    const succeed = async (event) => {
+      await new Promise((resolve) => setTimeout(resolve, SUCCESS_DELAY_MS2));
+      invokeMerchantCallback4(() => emit("success", event));
+    };
+    const fail = (error, sessionId, nonce) => {
+      if (!mounted && error.code === "three_ds_aborted") return;
+      if (mounted) notice.value = error.message;
+      invokeMerchantCallback4(() => emit("error", error));
+      if (sessionId) {
+        const decline = {
+          method: "card",
+          message: error.message,
+          ...error.code ? { code: error.code } : {},
+          ...error.declineCode ? { declineCode: error.declineCode } : {},
+          sessionId
+        };
+        invokeMerchantCallback4(() => emit("decline", decline));
+      }
+      if (mounted && canFallBack(error, sessionId) && sessionId) {
+        fallback.value = { sessionId, ...nonce ? { nonce } : {} };
+      }
+    };
+    const run = async () => {
+      if (processing.value || props.disabled) return;
+      fallback.value = null;
+      notice.value = null;
+      const draft = resolveDraft(props);
+      if (Boolean(props.sessionId) === Boolean(draft)) {
+        fail(
+          new FloPayError5(
+            props.sessionId ? "Provide either sessionId or create-session props, not both." : "Provide a sessionId or the props required to create an automatic payment session.",
+            "validation_error"
+          ),
+          null
+        );
+        return;
+      }
+      processing.value = true;
+      let sessionId = props.sessionId ?? null;
+      let nonce = props.nonce;
+      try {
+        const api = new PaymentAPI4(billingApiUrl());
+        let result;
+        if (props.sessionId) {
+          result = await api.getUnifiedCheckoutSession(props.sessionId, props.nonce);
+        } else {
+          try {
+            result = await api.createAndFetchSession(draft);
+          } catch (error) {
+            if (readErrorCode(error) === "session_auto_completed") {
+              await succeed({
+                result: { status: "succeeded" },
+                session: null,
+                sessionId: null,
+                autoCompleted: true
+              });
+              return;
+            }
+            throw error;
+          }
+        }
+        const session = result.data.session;
+        if (!session) throw new FloPayError5("The checkout session could not be read.", "api_error");
+        sessionId = session.id || sessionId;
+        nonce = nonce ?? (session.clientSecret || void 0);
+        if (isTerminalSuccess(session)) {
+          await succeed({
+            result: terminalResult(session, sessionId),
+            session,
+            sessionId,
+            autoCompleted: false
+          });
+          return;
+        }
+        if (session.status === "expired") {
+          throw new FloPayError5("This checkout session has expired.", "api_error", {
+            code: "session_expired"
+          });
+        }
+        const settled = await chargeSavedPayment({
+          api,
+          billingApiUrl: billingApiUrl(),
+          session,
+          nonce,
+          unified: result,
+          signal: lifecycle.signal
+        });
+        await succeed({ result: settled, session, sessionId, autoCompleted: false });
+      } catch (error) {
+        fail(coerceError(error, "Automatic payment failed. Please try again."), sessionId, nonce);
+      } finally {
+        if (mounted) processing.value = false;
+      }
+    };
+    const handleClick = (event) => {
+      const consumer = attrs.onClick;
+      for (const listener of [consumer].flat()) {
+        if (typeof listener === "function") listener(event);
+      }
+      if (event.defaultPrevented) return;
+      void run();
+    };
+    const runConsumer = (name, event) => {
+      const consumer = attrs[name];
+      for (const listener of [consumer].flat()) {
+        if (typeof listener === "function") listener(event);
+      }
+    };
+    const handleMouseEnter = (event) => {
+      runConsumer("onMouseenter", event);
+      if (event.defaultPrevented || props.disabled || processing.value || !tile.value.hovers)
+        return;
+      event.currentTarget.style.backgroundColor = tile.value.hover;
+    };
+    const handleMouseLeave = (event) => {
+      runConsumer("onMouseleave", event);
+      if (event.defaultPrevented || !tile.value.hovers) return;
+      event.currentTarget.style.backgroundColor = tile.value.primary;
+    };
+    return () => {
+      const {
+        onClick: _consumerClick,
+        onMouseenter: _consumerEnter,
+        onMouseleave: _consumerLeave,
+        style: consumerStyle,
+        ...buttonAttrs
+      } = attrs;
+      const busy = props.disabled || processing.value;
+      return [
+        h5(
+          "button",
+          {
+            // React's `type = 'button'` default, overridable like any attribute.
+            type: "button",
+            ...buttonAttrs,
+            // The theme first; the consumer's inline `style` still wins.
+            style: [
+              tile.value.style,
+              { cursor: busy ? "not-allowed" : "pointer", opacity: busy ? 0.6 : 1 },
+              consumerStyle
+            ],
+            disabled: busy,
+            "aria-busy": processing.value ? "true" : void 0,
+            onClick: handleClick,
+            onMouseenter: handleMouseEnter,
+            onMouseleave: handleMouseLeave
+          },
+          slots.default?.() ?? (processing.value ? "Processing\u2026" : "Pay now")
+        ),
+        notice.value ? h5("div", { role: "alert" }, notice.value) : null,
+        fallback.value ? h5(FloPayCheckout, {
+          sessionId: fallback.value.sessionId,
+          nonce: fallback.value.nonce,
+          billingApiUrl: billingApiUrl(),
+          // React: the modal inherits the button's look.
+          theme: props.theme,
+          ...resolvedAppearance.value ? { appearance: resolvedAppearance.value } : {},
+          buttonsTheme: props.buttonsTheme,
+          buttonsStyles: props.buttonsStyles,
+          onComplete: (result) => invokeMerchantCallback4(
+            () => emit("success", {
+              result,
+              session: null,
+              sessionId: fallback.value?.sessionId ?? null,
+              autoCompleted: false
+            })
+          ),
+          onError: (error) => invokeMerchantCallback4(() => emit("error", error)),
+          onDecline: (decline) => invokeMerchantCallback4(() => emit("decline", decline))
+        }) : null
+      ];
+    };
+  }
+});
+
+// src/hooks.ts
+import { inject as inject3, reactive as reactive2, shallowRef as shallowRef4 } from "vue";
+function useFloPay() {
+  return inject3(FLOPAY_CONTEXT, null)?.flopay ?? shallowRef4(null);
+}
+function usePayPalFloPay() {
+  return inject3(FLOPAY_CONTEXT, null)?.paypalFlopay ?? shallowRef4(null);
+}
+function useCheckout() {
+  return inject3(CHECKOUT_STATE, null) ?? reactive2({ session: null, loading: false, error: null });
+}
+export {
+  DirectPayPalButton,
+  FloPayAutomaticPaymentButton,
+  FloPayCardSetup,
+  FloPayCardSetupError,
+  FloPayCheckout,
+  FloPayPaymentMethodSetup,
+  FloPayProvider,
+  SplitCardForm,
+  VaultCardFields,
+  dropThirdPartyOnlyError,
+  useCheckout,
+  useFloPay,
+  usePayPalFloPay
+};