@flopay/vue 0.0.0-stage → 1.13.1

package/dist/chunk-DUU6SMKP.mjs

@@ -0,0 +1,97 @@
+import {
+  ProcessingOverlay,
+  VaultCardFields,
+  asCardSetupError,
+  useCardSetupTheme,
+  useHostedSetup
+} from "./chunk-W52CQTJI.mjs";
+
+// src/flopay-card-setup.ts
+import { invokeMerchantCallback, setupOverlayLabels } from "@flopay/shared";
+import { defineComponent, h, shallowRef } from "vue";
+var FloPayCardSetup = 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 = 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 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 ? h(ProcessingOverlay, {
+          status: state.status,
+          errorMessage: state.message,
+          ...setupOverlayLabels("card"),
+          successNote: null,
+          ...theme.overlayTheme.value ? { theme: theme.overlayTheme.value } : {}
+        }) : null,
+        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));
+          }
+        })
+      ];
+    };
+  }
+});
+
+export {
+  FloPayCardSetup
+};