@flopay/vue 0.0.0-stage → 1.13.1

package/dist/card-setup-entry.d.cts

@@ -0,0 +1,160 @@
+import * as vue from 'vue';
+import { PropType } from 'vue';
+import { ThemeId, VaultCardThemeColors, FloPayAppearance, ButtonsLayoutStyles } from '@flopay/shared';
+import { a as FloPayCardSetupCompleteEvent, F as FloPayCardSetupCancelEvent, b as FloPayCardSetupDeclineEvent, c as FloPayCardSetupError } from './hosted-setup-jpaaXDFA.cjs';
+
+/** Props for the browser-only secure card-setup surface (callbacks are emits). */
+interface FloPayCardSetupProps {
+    /** Opaque id returned by the merchant-authenticated setup-session endpoint. */
+    sessionId: string;
+    /** Session-bound token returned alongside `sessionId`. */
+    nonce: string;
+    billingApiUrl?: string;
+    /** Flo-owned privacy-safe telemetry is enabled by default; set false to opt out. */
+    telemetry?: boolean;
+    /**
+     * Theme for FloPay's hosted, PCI-compliant card widget. Accepts the same
+     * high-level `ThemeId` as `FloPayCheckout` (resolved through the same
+     * bundle, so one value styles both surfaces identically) or raw
+     * `VaultCardThemeColors` for full manual control. Defaults to
+     * `'modern-light'`, which an unrecognized preset id also falls back to; pass
+     * `'classic'` for the historic FloPay look.
+     */
+    theme?: ThemeId | VaultCardThemeColors;
+    /**
+     * Inline styles for the hosted-widget container. A named preset first gives
+     * that container the checkout credit-card pane's surface, with any stored
+     * `buttonsStyles.cardFormContainer` merged over it; each `containerStyle`
+     * property then wins over that surface, and any `background*` member
+     * replaces the surface background entirely.
+     */
+    containerStyle?: Record<string, string | number>;
+    /**
+     * Appearance override, the same prop and type as `FloPayCheckout`'s (for
+     * example a client's saved embed theme `appearance`). It replaces the
+     * preset's appearance outright, as checkout does: its variables drive the
+     * hosted card fields, the hosted submit button and the outcome overlay.
+     * Ignored with raw `VaultCardThemeColors`; an empty `{}` is the same as
+     * omitting it. Changes restyle in place.
+     */
+    appearance?: FloPayAppearance;
+    /**
+     * Buttons-layout style overrides, the same prop and type as
+     * `FloPayCheckout`'s (for example a client's saved embed theme
+     * `buttonsStyles`), merged over the preset's buttons layout the way checkout
+     * merges them. `submitButton` and the `cardInput*` members style the hosted
+     * card form, and `cardFormContainer` the pane around it and the outcome
+     * overlay's panel. Ignored with raw `VaultCardThemeColors`; an empty `{}` is
+     * the same as omitting it. Changes restyle in place.
+     */
+    buttonsStyles?: ButtonsLayoutStyles;
+}
+/**
+ * Mounts FloPay's hosted card capture (the SDK's `cardCapture` adapter) for a
+ * setup session the merchant's server created. It takes only `sessionId` +
+ * `nonce`, never creates a session, never loads Stripe.js, and leaves the
+ * verification and its 3DS to the hosted widget. Emits `ready`, `complete`,
+ * `decline`, `cancel` (unmounted before an outcome), `validation` and `error`.
+ *
+ * Like React's, it draws the full-page processing / success / failure overlay
+ * over the hosted form ("SAVING CARD...", "CARD SAVED", "CARD NOT SAVED"),
+ * themed with the preset's credit-card pane. A client's stored `appearance`
+ * and `buttonsStyles` resolve over the preset exactly as in React and
+ * `FloPayCheckout`, and restyle the mounted form in place.
+ */
+declare const FloPayCardSetup: vue.DefineComponent<vue.ExtractPropTypes<{
+    sessionId: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    nonce: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    billingApiUrl: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    telemetry: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    theme: {
+        type: PropType<ThemeId | VaultCardThemeColors>;
+        default: string;
+    };
+    containerStyle: {
+        type: PropType<Record<string, string | number>>;
+        default: undefined;
+    };
+    appearance: {
+        type: PropType<FloPayAppearance>;
+        default: undefined;
+    };
+    buttonsStyles: {
+        type: PropType<ButtonsLayoutStyles>;
+        default: undefined;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}> | (vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}> | null)[] | null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+    ready: () => true;
+    complete: (_event: FloPayCardSetupCompleteEvent) => true;
+    cancel: (_event: FloPayCardSetupCancelEvent) => true;
+    decline: (_event: FloPayCardSetupDeclineEvent) => true;
+    validation: (_message: string | null) => true;
+    error: (_error: FloPayCardSetupError) => true;
+}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    sessionId: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    nonce: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    billingApiUrl: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    telemetry: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    theme: {
+        type: PropType<ThemeId | VaultCardThemeColors>;
+        default: string;
+    };
+    containerStyle: {
+        type: PropType<Record<string, string | number>>;
+        default: undefined;
+    };
+    appearance: {
+        type: PropType<FloPayAppearance>;
+        default: undefined;
+    };
+    buttonsStyles: {
+        type: PropType<ButtonsLayoutStyles>;
+        default: undefined;
+    };
+}>> & Readonly<{
+    onError?: ((_error: FloPayCardSetupError) => any) | undefined;
+    onCancel?: ((_event: FloPayCardSetupCancelEvent) => any) | undefined;
+    onReady?: (() => any) | undefined;
+    onComplete?: ((_event: FloPayCardSetupCompleteEvent) => any) | undefined;
+    onDecline?: ((_event: FloPayCardSetupDeclineEvent) => any) | undefined;
+    onValidation?: ((_message: string | null) => any) | undefined;
+}>, {
+    theme: ThemeId | VaultCardThemeColors;
+    telemetry: boolean;
+    sessionId: string;
+    nonce: string;
+    containerStyle: Record<string, string | number>;
+    billingApiUrl: string;
+    appearance: FloPayAppearance;
+    buttonsStyles: ButtonsLayoutStyles;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+export { FloPayCardSetup, FloPayCardSetupCancelEvent, FloPayCardSetupCompleteEvent, FloPayCardSetupDeclineEvent, FloPayCardSetupError, type FloPayCardSetupProps };

package/dist/card-setup-entry.d.ts

@@ -0,0 +1,160 @@
+import * as vue from 'vue';
+import { PropType } from 'vue';
+import { ThemeId, VaultCardThemeColors, FloPayAppearance, ButtonsLayoutStyles } from '@flopay/shared';
+import { a as FloPayCardSetupCompleteEvent, F as FloPayCardSetupCancelEvent, b as FloPayCardSetupDeclineEvent, c as FloPayCardSetupError } from './hosted-setup-jpaaXDFA.js';
+
+/** Props for the browser-only secure card-setup surface (callbacks are emits). */
+interface FloPayCardSetupProps {
+    /** Opaque id returned by the merchant-authenticated setup-session endpoint. */
+    sessionId: string;
+    /** Session-bound token returned alongside `sessionId`. */
+    nonce: string;
+    billingApiUrl?: string;
+    /** Flo-owned privacy-safe telemetry is enabled by default; set false to opt out. */
+    telemetry?: boolean;
+    /**
+     * Theme for FloPay's hosted, PCI-compliant card widget. Accepts the same
+     * high-level `ThemeId` as `FloPayCheckout` (resolved through the same
+     * bundle, so one value styles both surfaces identically) or raw
+     * `VaultCardThemeColors` for full manual control. Defaults to
+     * `'modern-light'`, which an unrecognized preset id also falls back to; pass
+     * `'classic'` for the historic FloPay look.
+     */
+    theme?: ThemeId | VaultCardThemeColors;
+    /**
+     * Inline styles for the hosted-widget container. A named preset first gives
+     * that container the checkout credit-card pane's surface, with any stored
+     * `buttonsStyles.cardFormContainer` merged over it; each `containerStyle`
+     * property then wins over that surface, and any `background*` member
+     * replaces the surface background entirely.
+     */
+    containerStyle?: Record<string, string | number>;
+    /**
+     * Appearance override, the same prop and type as `FloPayCheckout`'s (for
+     * example a client's saved embed theme `appearance`). It replaces the
+     * preset's appearance outright, as checkout does: its variables drive the
+     * hosted card fields, the hosted submit button and the outcome overlay.
+     * Ignored with raw `VaultCardThemeColors`; an empty `{}` is the same as
+     * omitting it. Changes restyle in place.
+     */
+    appearance?: FloPayAppearance;
+    /**
+     * Buttons-layout style overrides, the same prop and type as
+     * `FloPayCheckout`'s (for example a client's saved embed theme
+     * `buttonsStyles`), merged over the preset's buttons layout the way checkout
+     * merges them. `submitButton` and the `cardInput*` members style the hosted
+     * card form, and `cardFormContainer` the pane around it and the outcome
+     * overlay's panel. Ignored with raw `VaultCardThemeColors`; an empty `{}` is
+     * the same as omitting it. Changes restyle in place.
+     */
+    buttonsStyles?: ButtonsLayoutStyles;
+}
+/**
+ * Mounts FloPay's hosted card capture (the SDK's `cardCapture` adapter) for a
+ * setup session the merchant's server created. It takes only `sessionId` +
+ * `nonce`, never creates a session, never loads Stripe.js, and leaves the
+ * verification and its 3DS to the hosted widget. Emits `ready`, `complete`,
+ * `decline`, `cancel` (unmounted before an outcome), `validation` and `error`.
+ *
+ * Like React's, it draws the full-page processing / success / failure overlay
+ * over the hosted form ("SAVING CARD...", "CARD SAVED", "CARD NOT SAVED"),
+ * themed with the preset's credit-card pane. A client's stored `appearance`
+ * and `buttonsStyles` resolve over the preset exactly as in React and
+ * `FloPayCheckout`, and restyle the mounted form in place.
+ */
+declare const FloPayCardSetup: vue.DefineComponent<vue.ExtractPropTypes<{
+    sessionId: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    nonce: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    billingApiUrl: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    telemetry: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    theme: {
+        type: PropType<ThemeId | VaultCardThemeColors>;
+        default: string;
+    };
+    containerStyle: {
+        type: PropType<Record<string, string | number>>;
+        default: undefined;
+    };
+    appearance: {
+        type: PropType<FloPayAppearance>;
+        default: undefined;
+    };
+    buttonsStyles: {
+        type: PropType<ButtonsLayoutStyles>;
+        default: undefined;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}> | (vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}> | null)[] | null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+    ready: () => true;
+    complete: (_event: FloPayCardSetupCompleteEvent) => true;
+    cancel: (_event: FloPayCardSetupCancelEvent) => true;
+    decline: (_event: FloPayCardSetupDeclineEvent) => true;
+    validation: (_message: string | null) => true;
+    error: (_error: FloPayCardSetupError) => true;
+}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    sessionId: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    nonce: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    billingApiUrl: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    telemetry: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    theme: {
+        type: PropType<ThemeId | VaultCardThemeColors>;
+        default: string;
+    };
+    containerStyle: {
+        type: PropType<Record<string, string | number>>;
+        default: undefined;
+    };
+    appearance: {
+        type: PropType<FloPayAppearance>;
+        default: undefined;
+    };
+    buttonsStyles: {
+        type: PropType<ButtonsLayoutStyles>;
+        default: undefined;
+    };
+}>> & Readonly<{
+    onError?: ((_error: FloPayCardSetupError) => any) | undefined;
+    onCancel?: ((_event: FloPayCardSetupCancelEvent) => any) | undefined;
+    onReady?: (() => any) | undefined;
+    onComplete?: ((_event: FloPayCardSetupCompleteEvent) => any) | undefined;
+    onDecline?: ((_event: FloPayCardSetupDeclineEvent) => any) | undefined;
+    onValidation?: ((_message: string | null) => any) | undefined;
+}>, {
+    theme: ThemeId | VaultCardThemeColors;
+    telemetry: boolean;
+    sessionId: string;
+    nonce: string;
+    containerStyle: Record<string, string | number>;
+    billingApiUrl: string;
+    appearance: FloPayAppearance;
+    buttonsStyles: ButtonsLayoutStyles;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+export { FloPayCardSetup, FloPayCardSetupCancelEvent, FloPayCardSetupCompleteEvent, FloPayCardSetupDeclineEvent, FloPayCardSetupError, type FloPayCardSetupProps };

package/dist/card-setup-entry.mjs

@@ -0,0 +1,10 @@
+import {
+  FloPayCardSetup
+} from "./chunk-DUU6SMKP.mjs";
+import {
+  FloPayCardSetupError
+} from "./chunk-W52CQTJI.mjs";
+export {
+  FloPayCardSetup,
+  FloPayCardSetupError
+};

package/dist/chunk-2PLBNCM6.mjs

@@ -0,0 +1,332 @@
+import {
+  PROCESSING_OVERLAY_ERROR_DELAY_MS,
+  PROCESSING_OVERLAY_SUCCESS_DELAY_MS,
+  ProcessingOverlay,
+  VaultCardFields,
+  asCardSetupError,
+  useCardSetupTheme,
+  useHostedSetup
+} from "./chunk-W52CQTJI.mjs";
+
+// src/flopay-payment-method-setup-main.ts
+import {
+  clearSetupRedirectParams,
+  PaymentAPI,
+  readSetupRedirectReturn
+} from "@flopay/js/card-setup";
+import {
+  FloPayError,
+  invokeMerchantCallback,
+  readSetupAdvertisement,
+  resolveBillingApiUrl,
+  setupOverlayLabels,
+  stripeMethodCategory
+} from "@flopay/shared";
+import {
+  defineAsyncComponent,
+  defineComponent,
+  h,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  shallowRef,
+  watch
+} from "vue";
+var VERIFY_ATTEMPTS = 15;
+var VERIFY_INTERVAL_MS = 2e3;
+function delay(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+var StripeSetupMethods = defineAsyncComponent(
+  () => import("./stripe-elements-QGT45VIE.mjs").then((module) => module.StripePaymentMethods)
+);
+var PayPalSetupMethods = defineAsyncComponent(
+  () => import("./payment-method-setup-paypal-XPSU4CHA.mjs").then((module) => module.PayPalSetupMethod)
+);
+var FloPayPaymentMethodSetup = defineComponent({
+  name: "FloPayPaymentMethodSetup",
+  props: {
+    sessionId: { type: String, default: void 0 },
+    nonce: { type: String, default: void 0 },
+    billingApiUrl: { type: String, default: void 0 },
+    telemetry: { type: Boolean, default: void 0 },
+    theme: {
+      type: [String, Object],
+      default: "modern-light"
+    },
+    containerStyle: {
+      type: Object,
+      default: void 0
+    },
+    appearance: { type: Object, default: void 0 },
+    buttonsStyles: { type: Object, default: void 0 }
+  },
+  emits: {
+    ready: () => true,
+    complete: (_event) => true,
+    cancel: (_event) => true,
+    decline: (_event) => true,
+    validation: (_message) => true,
+    error: (_error) => true
+  },
+  setup(props, { emit, slots }) {
+    const overlay = shallowRef(null);
+    const setup = useHostedSetup(
+      props,
+      {
+        complete: (event) => emit("complete", event),
+        decline: (event) => emit("decline", event),
+        cancel: (event) => emit("cancel", event),
+        error: (error) => emit("error", error),
+        // The hosted card's outcome overlay, in card wording (React's `'card'`).
+        overlay: (state) => {
+          showOverlay(state ? { ...state, wording: "card" } : null);
+        }
+      },
+      { requireVault: (session) => readSetupAdvertisement(session).card }
+    );
+    const theme = useCardSetupTheme(props);
+    const verified = ref(false);
+    let mounted = false;
+    let submissionInFlight = false;
+    let completionEmitted = false;
+    let verificationGeneration = 0;
+    let overlayTimer = null;
+    const sessionId = () => props.sessionId ?? "";
+    const showOverlay = (next) => {
+      if (overlayTimer) clearTimeout(overlayTimer);
+      overlayTimer = null;
+      overlay.value = next;
+    };
+    const clearOverlayLater = () => {
+      overlayTimer = setTimeout(() => {
+        overlayTimer = null;
+        if (mounted) overlay.value = null;
+      }, PROCESSING_OVERLAY_ERROR_DELAY_MS);
+    };
+    onMounted(() => {
+      mounted = true;
+    });
+    onBeforeUnmount(() => {
+      mounted = false;
+      verificationGeneration += 1;
+      if (overlayTimer) clearTimeout(overlayTimer);
+      overlayTimer = null;
+    });
+    const reportVerified = () => {
+      setup.settle();
+      submissionInFlight = false;
+      verified.value = true;
+      showOverlay({ status: "success", wording: "payment_method", message: null });
+      setTimeout(() => {
+        if (completionEmitted) return;
+        completionEmitted = true;
+        invokeMerchantCallback(
+          () => emit("complete", { status: "succeeded", sessionId: sessionId() })
+        );
+        if (mounted) overlay.value = null;
+      }, PROCESSING_OVERLAY_SUCCESS_DELAY_MS);
+    };
+    const reportDecline = (event) => {
+      setup.settle();
+      submissionInFlight = false;
+      showOverlay({ status: "error", wording: "payment_method", message: event.message ?? null });
+      invokeMerchantCallback(
+        () => emit("decline", {
+          status: "declined",
+          sessionId: sessionId(),
+          ...event.reason ? { reason: event.reason } : {},
+          ...event.message ? { message: event.message } : {}
+        })
+      );
+      clearOverlayLater();
+    };
+    const reportFailure = (error) => {
+      if (submissionInFlight) {
+        submissionInFlight = false;
+        showOverlay({ status: "error", wording: "payment_method", message: error.message });
+        clearOverlayLater();
+      } else {
+        showOverlay(null);
+      }
+      invokeMerchantCallback(() => emit("error", error));
+    };
+    const verifySetup = async (options = {}) => {
+      verificationGeneration += 1;
+      const generation = verificationGeneration;
+      const stale = () => !mounted || generation !== verificationGeneration;
+      submissionInFlight = true;
+      showOverlay({ status: "processing", wording: "payment_method", message: null });
+      const api = new PaymentAPI(resolveBillingApiUrl(props.billingApiUrl), {
+        telemetry: props.telemetry
+      });
+      try {
+        for (let attempt = 0; attempt < VERIFY_ATTEMPTS; attempt += 1) {
+          if (attempt > 0 || options.waitFirst) await delay(VERIFY_INTERVAL_MS);
+          if (stale()) return;
+          const result = await api.getUnifiedCheckoutSession(sessionId(), props.nonce);
+          if (stale()) return;
+          const status = result.data.session?.status;
+          if (status === "complete") {
+            reportVerified();
+            return;
+          }
+          if (status === "expired") {
+            throw new FloPayError(
+              "This setup session expired before the payment method was saved.",
+              "validation_error",
+              { code: "payment_method_setup_expired" }
+            );
+          }
+        }
+        throw new FloPayError(
+          "The payment method could not be confirmed yet. Please try again.",
+          "api_error",
+          { code: "payment_method_setup_unverified" }
+        );
+      } catch (error) {
+        if (stale()) return;
+        const unverified = error instanceof FloPayError && error.code === "payment_method_setup_unverified";
+        reportFailure(asCardSetupError(error, unverified ? { retryable: true } : {}));
+      } finally {
+        api.destroy();
+      }
+    };
+    const redirectReturn = readSetupRedirectReturn();
+    if (redirectReturn) {
+      const stopRedirectWatch = watch(
+        () => setup.session.value,
+        (normalized) => {
+          if (!normalized) return;
+          stopRedirectWatch();
+          clearSetupRedirectParams();
+          if (normalized.data.session?.status === "complete") {
+            reportVerified();
+            return;
+          }
+          if (redirectReturn.failed) {
+            reportDecline({ reason: "redirect_failed" });
+            return;
+          }
+          void verifySetup({ waitFirst: true });
+        }
+      );
+    }
+    const overlayNode = () => {
+      const state = overlay.value;
+      if (!state) return null;
+      return h(ProcessingOverlay, {
+        status: state.status,
+        errorMessage: state.message,
+        ...setupOverlayLabels(state.wording),
+        successNote: null,
+        ...theme.overlayTheme.value ? { theme: theme.overlayTheme.value } : {}
+      });
+    };
+    return () => {
+      if (setup.loadError.value) {
+        return h("div", { role: "alert" }, setup.loadError.value.message);
+      }
+      const normalized = setup.session.value;
+      if (!normalized) return slots.loading?.() ?? null;
+      if (verified.value) {
+        return h("div", { "data-testid": "flopay-payment-method-setup" }, [overlayNode()]);
+      }
+      const advertisement = readSetupAdvertisement(normalized);
+      const session = normalized.data.session ?? null;
+      const billingApiUrl = resolveBillingApiUrl(props.billingApiUrl);
+      const stripeBranch = (entry) => h("div", { key: entry.method, "data-flopay-payment-method": entry.method }, [
+        h(StripeSetupMethods, {
+          session,
+          sessionId: sessionId(),
+          nonce: props.nonce,
+          billingApiUrl,
+          publishableKey: entry.publishableKey,
+          methods: [entry.method],
+          intentKind: "setup",
+          currency: entry.currency,
+          ...theme.appearance.value ? { appearance: theme.appearance.value } : {},
+          // The provider said yes; wait for the backend to agree.
+          onComplete: () => {
+            void verifySetup();
+          },
+          onDecline: (decline) => reportDecline({
+            ...decline.code ? { reason: decline.code } : {},
+            ...decline.message ? { message: decline.message } : {}
+          }),
+          onError: (error) => reportFailure(asCardSetupError(error))
+        })
+      ]);
+      const paypal = advertisement.paypal;
+      const paypalBranch = paypal ? h("div", { key: "paypal", "data-flopay-payment-method": "paypal" }, [
+        h(PayPalSetupMethods, {
+          clientId: paypal.clientId,
+          ...paypal.environment ? { environment: paypal.environment } : {},
+          ...advertisement.currency ? { currency: advertisement.currency } : {},
+          sessionId: sessionId(),
+          nonce: props.nonce ?? "",
+          billingApiUrl,
+          telemetry: props.telemetry,
+          customer: {
+            userId: session?.customer?.id ?? "",
+            email: session?.customer?.email ?? ""
+          },
+          onSubmitting: () => {
+            submissionInFlight = true;
+            showOverlay({ status: "processing", wording: "payment_method", message: null });
+          },
+          onConfirmed: () => {
+            void verifySetup();
+          },
+          onFailed: (error, options) => reportFailure(asCardSetupError(error, options)),
+          // Closing PayPal's window is not an outcome: no cancel, decline or error.
+          onAbandoned: () => {
+            submissionInFlight = false;
+            showOverlay(null);
+          }
+        })
+      ]) : null;
+      const capture = setup.capture.value;
+      const vault = setup.vault.value;
+      const card = advertisement.card && capture && vault?.html ? h("div", { key: "card", "data-flopay-payment-method": "card" }, [
+        h(VaultCardFields, {
+          capture,
+          html: vault.html,
+          messageToken: vault.messageToken,
+          expectedOrigin: vault.expectedOrigin,
+          verificationRequired: vault.verificationRequired,
+          theme: theme.vaultTheme.value,
+          containerStyle: theme.surfaceStyle.value,
+          onReady: () => invokeMerchantCallback(() => emit("ready")),
+          onValidation: (message) => invokeMerchantCallback(() => emit("validation", message)),
+          onError: (message) => {
+            if (!message) return;
+            setup.widgetFailed(message);
+            const error = asCardSetupError(new Error(message), {
+              code: "card_setup_widget_failed",
+              retryable: true
+            });
+            invokeMerchantCallback(() => emit("error", error));
+          }
+        })
+      ]) : null;
+      const wallets = advertisement.stripe.filter(
+        ({ method }) => stripeMethodCategory(method) === "wallet"
+      );
+      const tiles = advertisement.stripe.filter(
+        ({ method }) => stripeMethodCategory(method) !== "wallet"
+      );
+      return h("div", { "data-testid": "flopay-payment-method-setup" }, [
+        overlayNode(),
+        ...wallets.map(stripeBranch),
+        paypalBranch,
+        ...tiles.map(stripeBranch),
+        card
+      ]);
+    };
+  }
+});
+
+export {
+  FloPayPaymentMethodSetup
+};