@flopay/vue 0.0.0-stage → 1.13.1

package/dist/chunk-W52CQTJI.mjs

@@ -0,0 +1,527 @@
+// src/hosted-setup.ts
+import { PaymentAPI, PciVaultCardCapture } from "@flopay/js/card-setup";
+import {
+  FloPayError,
+  invokeMerchantCallback,
+  isCardSetupCheckoutSession,
+  isMountableVaultBlock,
+  mergeCardSetupSurface,
+  resolveBillingApiUrl,
+  resolveCardSetupTheme,
+  resolveVaultMountOptions
+} from "@flopay/shared";
+import {
+  computed,
+  onBeforeUnmount,
+  onMounted as onMounted2,
+  ref,
+  shallowRef
+} from "vue";
+
+// src/processing-overlay.ts
+import { defineComponent, h, onMounted } from "vue";
+var PROCESSING_OVERLAY_SUCCESS_DELAY_MS = 600;
+var PROCESSING_OVERLAY_ERROR_DELAY_MS = 400;
+var NEUTRAL_THEME = {
+  panel: { background: "white" },
+  spinnerTrackColor: "#e5e7eb",
+  spinnerAccentColor: "#4A49FF",
+  labelColors: { processing: "#374151", success: "#16a34a", error: "#dc2626" },
+  noteColor: "#6b7280"
+};
+var KEYFRAMES_ID = "flopay-processing-overlay-keyframes";
+var KEYFRAMES = [
+  "@keyframes flopay-spin { to { transform: rotate(360deg); } }",
+  "@keyframes flopay-pop { 0% { transform: scale(0); } 100% { transform: scale(1); } }",
+  "@keyframes flopay-draw { to { stroke-dashoffset: 0; } }",
+  "@keyframes flopay-shake { 0%,100% { transform: translateX(0); } 20%,60% { transform: translateX(-4px); } 40%,80% { transform: translateX(4px); } }"
+].join("\n");
+function ensureKeyframes() {
+  if (typeof document === "undefined" || document.getElementById(KEYFRAMES_ID)) return;
+  const style = document.createElement("style");
+  style.id = KEYFRAMES_ID;
+  style.textContent = KEYFRAMES;
+  document.head.appendChild(style);
+}
+var SVG = {
+  "aria-hidden": "true",
+  width: "48",
+  height: "48",
+  viewBox: "0 0 24 24",
+  fill: "none"
+};
+function statusIcon(status, theme) {
+  if (status === "processing") {
+    return h("svg", { ...SVG, style: { animation: "flopay-spin 0.8s linear infinite" } }, [
+      h("circle", {
+        cx: "12",
+        cy: "12",
+        r: "10",
+        stroke: theme.spinnerTrackColor,
+        "stroke-width": "3"
+      }),
+      h("path", { d: "M4 12a8 8 0 018-8v3a5 5 0 00-5 5H4z", fill: theme.spinnerAccentColor })
+    ]);
+  }
+  if (status === "success") {
+    return h("div", { style: { animation: "flopay-pop 0.4s cubic-bezier(0.34,1.56,0.64,1)" } }, [
+      h("svg", SVG, [
+        h("circle", { cx: "12", cy: "12", r: "11", fill: "#22c55e" }),
+        h("path", {
+          d: "M7 12.5l3 3 7-7",
+          stroke: "white",
+          "stroke-width": "2.5",
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round",
+          style: {
+            strokeDasharray: 20,
+            strokeDashoffset: 20,
+            animation: "flopay-draw 0.4s 0.15s ease forwards"
+          }
+        })
+      ])
+    ]);
+  }
+  return h("div", { style: { animation: "flopay-shake 0.4s ease" } }, [
+    h("svg", SVG, [
+      h("circle", { cx: "12", cy: "12", r: "11", fill: "#ef4444" }),
+      h("path", {
+        d: "M8 8l8 8M16 8l-8 8",
+        stroke: "white",
+        "stroke-width": "2.5",
+        "stroke-linecap": "round",
+        style: {
+          strokeDasharray: 12,
+          strokeDashoffset: 12,
+          animation: "flopay-draw 0.3s 0.1s ease forwards"
+        }
+      })
+    ])
+  ]);
+}
+var ProcessingOverlay = defineComponent({
+  name: "FloPayProcessingOverlay",
+  props: {
+    status: { type: String, required: true },
+    errorMessage: { type: String, default: null },
+    processingLabel: { type: String, default: "PROCESSING..." },
+    successLabel: { type: String, default: "PAYMENT SUCCESSFUL" },
+    errorLabel: { type: String, default: "PAYMENT FAILED" },
+    /** Success sub-note; `null` omits it (surfaces that do not redirect). */
+    successNote: {
+      type: String,
+      default: "You will be automatically redirected, do not close or navigate away from this window."
+    },
+    theme: { type: Object, default: void 0 }
+  },
+  setup(props) {
+    onMounted(ensureKeyframes);
+    return () => {
+      const theme = props.theme ?? NEUTRAL_THEME;
+      const noteStyle = {
+        fontSize: "13px",
+        color: theme.noteColor,
+        fontWeight: 400,
+        maxWidth: "260px",
+        lineHeight: 1.4,
+        margin: 0
+      };
+      const label = {
+        processing: props.processingLabel,
+        success: props.successLabel,
+        error: props.errorLabel
+      }[props.status];
+      const note = { processing: null, success: props.successNote, error: props.errorMessage }[props.status];
+      return h(
+        "div",
+        {
+          "data-testid": "flopay-processing-overlay",
+          "data-status": props.status,
+          // The attribute the Vue setup surfaces' overlay already carried.
+          "data-state": props.status,
+          role: "dialog",
+          "aria-modal": "true",
+          style: {
+            position: "fixed",
+            inset: 0,
+            background: "rgba(0,0,0,0.35)",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            zIndex: 1e3,
+            backdropFilter: "blur(2px)"
+          }
+        },
+        [
+          h(
+            "div",
+            {
+              "data-testid": "flopay-processing-overlay-panel",
+              style: {
+                borderRadius: "12px",
+                boxShadow: "0 8px 32px rgba(0,0,0,0.18)",
+                ...theme.panel,
+                padding: "2rem 2.5rem",
+                textAlign: "center",
+                minWidth: "240px",
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                gap: "16px"
+              }
+            },
+            [
+              h("div", { style: { width: "48px", height: "48px", position: "relative" } }, [
+                statusIcon(props.status, theme)
+              ]),
+              h(
+                "span",
+                {
+                  "data-testid": "flopay-processing-overlay-label",
+                  style: {
+                    fontSize: "14px",
+                    fontWeight: 600,
+                    letterSpacing: "0.05em",
+                    color: theme.labelColors[props.status]
+                  }
+                },
+                label
+              ),
+              note ? h("p", { style: noteStyle }, note) : null
+            ]
+          )
+        ]
+      );
+    };
+  }
+});
+
+// src/hosted-setup.ts
+var FloPayCardSetupError = class extends FloPayError {
+  constructor(message, type, options) {
+    super(message, type, options);
+    this.name = "FloPayCardSetupError";
+    this.retryable = options.retryable;
+  }
+};
+function asCardSetupError(error, overrides = {}) {
+  const source = error instanceof FloPayError ? error : void 0;
+  const statusCode = source?.statusCode;
+  const retryable = overrides.retryable ?? (source?.type === "network_error" || source?.type === "rate_limit_error" || typeof statusCode === "number" && statusCode >= 500 || source?.code === "vault_capture_timeout" || !source);
+  return new FloPayCardSetupError(
+    source?.message ?? (error instanceof Error ? error.message : "Failed to load the secure card form."),
+    source?.type ?? "api_error",
+    {
+      code: overrides.code ?? source?.code ?? "card_setup_load_failed",
+      retryable,
+      ...source?.param ? { param: source.param } : {},
+      ...statusCode === void 0 ? {} : { statusCode }
+    }
+  );
+}
+function useCardSetupTheme(source) {
+  const resolved = computed(
+    () => resolveCardSetupTheme({
+      theme: source.theme ?? "modern-light",
+      appearance: source.appearance,
+      buttonsStyles: source.buttonsStyles
+    })
+  );
+  const vaultTheme = computed(() => resolved.value.vaultTheme);
+  const surfaceStyle = computed(
+    () => mergeCardSetupSurface(resolved.value.surface, source.containerStyle)
+  );
+  const overlayTheme = computed(() => resolved.value.overlayTheme);
+  const appearance = computed(() => resolved.value.appearance);
+  return { vaultTheme, surfaceStyle, overlayTheme, appearance };
+}
+function useHostedSetup(props, emitters, options) {
+  const capture = shallowRef(null);
+  const vault = shallowRef(null);
+  const session = shallowRef(null);
+  const loadError = ref(null);
+  let active = true;
+  let terminal = false;
+  let completed = false;
+  let submissionInFlight = false;
+  let clearTimer = null;
+  const offs = [];
+  const sessionId = () => props.sessionId ?? "";
+  const showOverlay = (state) => {
+    if (clearTimer) clearTimeout(clearTimer);
+    clearTimer = null;
+    emitters.overlay(state);
+  };
+  const holdFailure = (message) => {
+    showOverlay({ status: "error", message });
+    clearTimer = setTimeout(() => {
+      clearTimer = null;
+      if (active) emitters.overlay(null);
+    }, PROCESSING_OVERLAY_ERROR_DELAY_MS);
+  };
+  const bind = (adapter) => {
+    submissionInFlight = false;
+    offs.push(
+      adapter.on("submitting", () => {
+        submissionInFlight = true;
+        showOverlay({ status: "processing", message: null });
+      }),
+      adapter.on("complete", (event) => {
+        terminal = true;
+        submissionInFlight = false;
+        showOverlay({ status: "success", message: null });
+        setTimeout(() => {
+          if (completed) return;
+          completed = true;
+          invokeMerchantCallback(
+            () => emitters.complete({
+              status: "succeeded",
+              sessionId: sessionId(),
+              ...event.paymentMethod ? { paymentMethod: event.paymentMethod } : {}
+            })
+          );
+          if (active) emitters.overlay(null);
+        }, PROCESSING_OVERLAY_SUCCESS_DELAY_MS);
+      }),
+      adapter.on("decline", (event) => {
+        terminal = true;
+        submissionInFlight = false;
+        holdFailure(event.message ?? null);
+        invokeMerchantCallback(
+          () => emitters.decline({
+            status: "declined",
+            sessionId: sessionId(),
+            ...event.declineReason ? { reason: event.declineReason } : {},
+            ...event.message ? { message: event.message } : {}
+          })
+        );
+      }),
+      // Closing the bank's authentication window is not an outcome: the hosted
+      // form keeps polling and may still report one. Drop the overlay but keep
+      // the submission in flight, so a late failure still shows "CARD NOT SAVED".
+      adapter.on("challenge_dismissed", () => {
+        showOverlay(null);
+      })
+    );
+  };
+  onMounted2(async () => {
+    const billingApiUrl = resolveBillingApiUrl(props.billingApiUrl);
+    const api = new PaymentAPI(billingApiUrl, { telemetry: props.telemetry });
+    try {
+      if (!sessionId().trim()) {
+        throw new FloPayError("A setup surface requires a sessionId.", "validation_error", {
+          code: "MissingCheckoutSessionId",
+          param: "sessionId"
+        });
+      }
+      if (!props.nonce?.trim()) {
+        throw new FloPayError("A setup surface requires a session nonce.", "validation_error", {
+          code: "MissingCheckoutSessionToken",
+          param: "nonce"
+        });
+      }
+      const result = await api.getUnifiedCheckoutSession(sessionId(), props.nonce);
+      const read = result.data.session;
+      if (!read || !isCardSetupCheckoutSession(read)) {
+        throw new FloPayError(
+          "Only a zero-amount, productless setup session is accepted.",
+          "validation_error",
+          { code: "InvalidCardSetupSession", param: "sessionId" }
+        );
+      }
+      if (!active) return;
+      session.value = result;
+      if (!options.requireVault(result)) return;
+      let block = read.vault;
+      if (!isMountableVaultBlock(block))
+        block = await api.getVaultCapture(sessionId(), props.nonce);
+      const mount = resolveVaultMountOptions(block, {
+        billingApiUrl,
+        sessionId: sessionId(),
+        nonce: props.nonce
+      });
+      if (!mount) {
+        throw new FloPayError(
+          "FloPay: this setup session has no vault card capability. Upgrade the billing backend integration.",
+          "api_error",
+          { code: "UnsupportedBackendVaultCapability" }
+        );
+      }
+      if (!active) return;
+      const adapter = new PciVaultCardCapture({
+        sessionId: sessionId(),
+        operation: "card_setup",
+        telemetry: props.telemetry
+      });
+      bind(adapter);
+      vault.value = mount;
+      capture.value = adapter;
+    } catch (error) {
+      if (!active) return;
+      terminal = true;
+      const failure = asCardSetupError(error);
+      loadError.value = failure;
+      invokeMerchantCallback(() => emitters.error(failure));
+    } finally {
+      api.destroy();
+    }
+  });
+  onBeforeUnmount(() => {
+    active = false;
+    if (clearTimer) clearTimeout(clearTimer);
+    clearTimer = null;
+    for (const off of offs.splice(0)) off();
+    if (!terminal && sessionId()) {
+      invokeMerchantCallback(
+        () => emitters.cancel({ status: "cancelled", sessionId: sessionId() })
+      );
+    }
+  });
+  return {
+    capture,
+    vault,
+    session,
+    loadError,
+    settle: () => {
+      terminal = true;
+    },
+    widgetFailed: (message) => {
+      if (!submissionInFlight) return;
+      submissionInFlight = false;
+      holdFailure(message);
+    }
+  };
+}
+
+// src/vault-card-fields.ts
+import { invokeMerchantCallback as invokeMerchantCallback2 } from "@flopay/shared";
+import {
+  defineComponent as defineComponent2,
+  h as h2,
+  onBeforeUnmount as onBeforeUnmount2,
+  onMounted as onMounted3,
+  ref as ref2,
+  watch
+} from "vue";
+var labelledCaptures = /* @__PURE__ */ new WeakSet();
+var VaultCardFields = defineComponent2({
+  name: "VaultCardFields",
+  props: {
+    capture: { type: Object, default: void 0 },
+    html: { type: String, default: void 0 },
+    messageToken: { type: String, default: void 0 },
+    expectedOrigin: { type: String, default: void 0 },
+    verificationRequired: { type: Boolean, default: void 0 },
+    theme: { type: Object, default: void 0 },
+    submitLabel: { type: String, default: void 0 },
+    containerStyle: { type: Object, default: void 0 }
+  },
+  emits: {
+    ready: () => true,
+    error: (_message) => true,
+    validation: (_message) => true
+  },
+  setup(props, { emit }) {
+    const container = ref2(null);
+    let teardown = null;
+    let appliedLabel;
+    let appliedTheme = null;
+    const mountWidget = () => {
+      teardown?.();
+      teardown = null;
+      const el = container.value;
+      const { capture, html } = props;
+      if (!el || !capture || !html) return;
+      let active = true;
+      let readyEmitted = false;
+      const emitReadyOnce = () => {
+        if (!active || readyEmitted) return;
+        readyEmitted = true;
+        invokeMerchantCallback2(() => emit("ready"));
+      };
+      const offReady = capture.on("ready", emitReadyOnce);
+      const offError = capture.on("error", (event) => {
+        const message = event.message ?? "There was a problem loading the secure card form.";
+        invokeMerchantCallback2(() => emit("error", message));
+      });
+      const offValidation = capture.on("validation", (event) => {
+        invokeMerchantCallback2(() => emit("validation", event.message ?? null));
+      });
+      const label = props.submitLabel ?? void 0;
+      const labelDirective = label ?? (labelledCaptures.has(capture) ? null : void 0);
+      appliedLabel = label;
+      appliedTheme = props.theme ?? null;
+      if (label !== void 0) labelledCaptures.add(capture);
+      capture.mount(el, {
+        html,
+        ...props.messageToken ? { messageToken: props.messageToken } : {},
+        ...props.expectedOrigin ? { expectedOrigin: props.expectedOrigin } : {},
+        ...props.verificationRequired ? { verificationRequired: true } : {},
+        ...props.theme ? { theme: props.theme } : {},
+        ...labelDirective === void 0 ? {} : { submitLabel: labelDirective }
+      }).then(emitReadyOnce).catch((error) => {
+        if (!active) return;
+        const message = error instanceof Error ? error.message : "Failed to load the secure card form.";
+        invokeMerchantCallback2(() => emit("error", message));
+      });
+      teardown = () => {
+        active = false;
+        offReady();
+        offError();
+        offValidation();
+        capture.unmount();
+      };
+    };
+    onMounted3(() => {
+      mountWidget();
+      watch(
+        () => [
+          props.capture,
+          props.html,
+          props.messageToken,
+          props.expectedOrigin,
+          props.verificationRequired
+        ],
+        mountWidget
+      );
+      watch(
+        () => props.theme,
+        (theme) => {
+          if (theme === void 0) return;
+          if (theme === null && appliedTheme === null) return;
+          appliedTheme = theme;
+          props.capture?.applyTheme?.(theme);
+        }
+      );
+      watch(
+        () => props.submitLabel ?? void 0,
+        (label) => {
+          if (!props.capture || label === appliedLabel) return;
+          appliedLabel = label;
+          if (label !== void 0) labelledCaptures.add(props.capture);
+          props.capture.setSubmitLabel?.(label ?? null);
+        }
+      );
+    });
+    onBeforeUnmount2(() => {
+      teardown?.();
+      teardown = null;
+    });
+    return () => h2("div", {
+      ref: container,
+      "data-testid": "flopay-vault-card-fields",
+      style: props.containerStyle
+    });
+  }
+});
+
+export {
+  PROCESSING_OVERLAY_SUCCESS_DELAY_MS,
+  PROCESSING_OVERLAY_ERROR_DELAY_MS,
+  ProcessingOverlay,
+  FloPayCardSetupError,
+  asCardSetupError,
+  useCardSetupTheme,
+  useHostedSetup,
+  VaultCardFields
+};

package/dist/hosted-setup-jpaaXDFA.d.cts

@@ -0,0 +1,33 @@
+import { SavedCardDisplay, FloPayError, FloPayErrorType } from '@flopay/shared';
+
+/** Verified terminal result from a no-charge setup. */
+interface FloPayCardSetupCompleteEvent {
+    status: 'succeeded';
+    sessionId: string;
+    /** Present when the backend terminal message includes the saved-card display DTO. */
+    paymentMethod?: SavedCardDisplay;
+}
+/** Provider-neutral terminal decline from verification. */
+interface FloPayCardSetupDeclineEvent {
+    status: 'declined';
+    sessionId: string;
+    reason?: string;
+    message?: string;
+}
+/** Abandoned setup result emitted when the component unmounts pre-terminally. */
+interface FloPayCardSetupCancelEvent {
+    status: 'cancelled';
+    sessionId: string;
+}
+/** Structured technical/validation failure from a setup surface. */
+declare class FloPayCardSetupError extends FloPayError {
+    readonly retryable: boolean;
+    constructor(message: string, type: FloPayErrorType, options: {
+        code: string;
+        retryable: boolean;
+        param?: string;
+        statusCode?: number;
+    });
+}
+
+export { type FloPayCardSetupCancelEvent as F, type FloPayCardSetupCompleteEvent as a, type FloPayCardSetupDeclineEvent as b, FloPayCardSetupError as c };

package/dist/hosted-setup-jpaaXDFA.d.ts

@@ -0,0 +1,33 @@
+import { SavedCardDisplay, FloPayError, FloPayErrorType } from '@flopay/shared';
+
+/** Verified terminal result from a no-charge setup. */
+interface FloPayCardSetupCompleteEvent {
+    status: 'succeeded';
+    sessionId: string;
+    /** Present when the backend terminal message includes the saved-card display DTO. */
+    paymentMethod?: SavedCardDisplay;
+}
+/** Provider-neutral terminal decline from verification. */
+interface FloPayCardSetupDeclineEvent {
+    status: 'declined';
+    sessionId: string;
+    reason?: string;
+    message?: string;
+}
+/** Abandoned setup result emitted when the component unmounts pre-terminally. */
+interface FloPayCardSetupCancelEvent {
+    status: 'cancelled';
+    sessionId: string;
+}
+/** Structured technical/validation failure from a setup surface. */
+declare class FloPayCardSetupError extends FloPayError {
+    readonly retryable: boolean;
+    constructor(message: string, type: FloPayErrorType, options: {
+        code: string;
+        retryable: boolean;
+        param?: string;
+        statusCode?: number;
+    });
+}
+
+export { type FloPayCardSetupCancelEvent as F, type FloPayCardSetupCompleteEvent as a, type FloPayCardSetupDeclineEvent as b, FloPayCardSetupError as c };