@flopay/vue 0.0.0-stage → 1.13.1

package/dist/card-setup-entry.cjs

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