@flopay/vue 0.0.0-stage → 1.13.2

package/dist/payment-method-setup-entry.d.cts

@@ -0,0 +1,156 @@
+import * as vue from 'vue';
+import { PropType, VNode } 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';
+
+/** Verified terminal result from saving any advertised payment method. */
+type FloPayPaymentMethodSetupCompleteEvent = FloPayCardSetupCompleteEvent;
+/** Provider-neutral terminal decline from saving a payment method. */
+type FloPayPaymentMethodSetupDeclineEvent = FloPayCardSetupDeclineEvent;
+/** Abandoned setup emitted when the surface unmounts before an outcome. */
+type FloPayPaymentMethodSetupCancelEvent = FloPayCardSetupCancelEvent;
+/** Props for {@link FloPayPaymentMethodSetup} (callbacks are emits). */
+interface FloPayPaymentMethodSetupProps {
+    sessionId: string;
+    nonce: string;
+    billingApiUrl?: string;
+    telemetry?: boolean;
+    /**
+     * The same `ThemeId` bundle `FloPayCheckout` and `FloPayCardSetup` resolve,
+     * or raw `VaultCardThemeColors` for the hosted card widget. A preset also
+     * themes the Stripe wallets and APMs and the outcome overlay. 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 card-widget container, with the same
+     * precedence over the preset's pane surface (and a stored
+     * `buttonsStyles.cardFormContainer`) as `FloPayCardSetup`.
+     */
+    containerStyle?: Record<string, string | number>;
+    /**
+     * Appearance override, the same prop and type as `FloPayCheckout`'s and
+     * `FloPayCardSetup`'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 and submit button, the
+     * Stripe Elements of every wallet and APM, and the outcome overlay. Ignored
+     * with raw `VaultCardThemeColors`; an empty `{}` is the same as omitting it.
+     */
+    appearance?: FloPayAppearance;
+    /**
+     * Buttons-layout style overrides, the same prop and type as
+     * `FloPayCheckout`'s and `FloPayCardSetup`'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.
+     */
+    buttonsStyles?: ButtonsLayoutStyles;
+}
+/**
+ * Saves any payment method the setup session advertises: the hosted vault
+ * card, advertised Stripe wallets/APMs (each on the account the backend chose
+ * for it) and the PayPal vault flow. Takes only `sessionId` + `nonce`, never
+ * creates a session. Success is the backend's call, never the provider's: once
+ * a wallet, APM or PayPal is accepted, the session is re-read until the
+ * backend reports the method saved, and only then is `complete` emitted, once.
+ * A `decline` is never paired with a `complete`.
+ */
+declare const FloPayPaymentMethodSetup: 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;
+    };
+}>, () => VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}> | VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>[] | null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+    ready: () => true;
+    complete: (_event: FloPayPaymentMethodSetupCompleteEvent) => true;
+    cancel: (_event: FloPayPaymentMethodSetupCancelEvent) => true;
+    decline: (_event: FloPayPaymentMethodSetupDeclineEvent) => 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<{
+    onComplete?: ((_event: FloPayCardSetupCompleteEvent) => any) | undefined;
+    onCancel?: ((_event: FloPayCardSetupCancelEvent) => any) | undefined;
+    onError?: ((_error: FloPayCardSetupError) => any) | undefined;
+    onReady?: (() => any) | undefined;
+    onDecline?: ((_event: FloPayCardSetupDeclineEvent) => any) | undefined;
+    onValidation?: ((_message: string | null) => any) | undefined;
+}>, {
+    nonce: string;
+    sessionId: string;
+    billingApiUrl: string;
+    telemetry: boolean;
+    appearance: FloPayAppearance;
+    theme: VaultCardThemeColors | ThemeId;
+    containerStyle: Record<string, string | number>;
+    buttonsStyles: ButtonsLayoutStyles;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+export { FloPayPaymentMethodSetup, type FloPayPaymentMethodSetupCancelEvent, type FloPayPaymentMethodSetupCompleteEvent, type FloPayPaymentMethodSetupDeclineEvent, type FloPayPaymentMethodSetupProps };

package/dist/payment-method-setup-entry.d.ts

@@ -0,0 +1,156 @@
+import * as vue from 'vue';
+import { PropType, VNode } 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';
+
+/** Verified terminal result from saving any advertised payment method. */
+type FloPayPaymentMethodSetupCompleteEvent = FloPayCardSetupCompleteEvent;
+/** Provider-neutral terminal decline from saving a payment method. */
+type FloPayPaymentMethodSetupDeclineEvent = FloPayCardSetupDeclineEvent;
+/** Abandoned setup emitted when the surface unmounts before an outcome. */
+type FloPayPaymentMethodSetupCancelEvent = FloPayCardSetupCancelEvent;
+/** Props for {@link FloPayPaymentMethodSetup} (callbacks are emits). */
+interface FloPayPaymentMethodSetupProps {
+    sessionId: string;
+    nonce: string;
+    billingApiUrl?: string;
+    telemetry?: boolean;
+    /**
+     * The same `ThemeId` bundle `FloPayCheckout` and `FloPayCardSetup` resolve,
+     * or raw `VaultCardThemeColors` for the hosted card widget. A preset also
+     * themes the Stripe wallets and APMs and the outcome overlay. 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 card-widget container, with the same
+     * precedence over the preset's pane surface (and a stored
+     * `buttonsStyles.cardFormContainer`) as `FloPayCardSetup`.
+     */
+    containerStyle?: Record<string, string | number>;
+    /**
+     * Appearance override, the same prop and type as `FloPayCheckout`'s and
+     * `FloPayCardSetup`'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 and submit button, the
+     * Stripe Elements of every wallet and APM, and the outcome overlay. Ignored
+     * with raw `VaultCardThemeColors`; an empty `{}` is the same as omitting it.
+     */
+    appearance?: FloPayAppearance;
+    /**
+     * Buttons-layout style overrides, the same prop and type as
+     * `FloPayCheckout`'s and `FloPayCardSetup`'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.
+     */
+    buttonsStyles?: ButtonsLayoutStyles;
+}
+/**
+ * Saves any payment method the setup session advertises: the hosted vault
+ * card, advertised Stripe wallets/APMs (each on the account the backend chose
+ * for it) and the PayPal vault flow. Takes only `sessionId` + `nonce`, never
+ * creates a session. Success is the backend's call, never the provider's: once
+ * a wallet, APM or PayPal is accepted, the session is re-read until the
+ * backend reports the method saved, and only then is `complete` emitted, once.
+ * A `decline` is never paired with a `complete`.
+ */
+declare const FloPayPaymentMethodSetup: 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;
+    };
+}>, () => VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}> | VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>[] | null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+    ready: () => true;
+    complete: (_event: FloPayPaymentMethodSetupCompleteEvent) => true;
+    cancel: (_event: FloPayPaymentMethodSetupCancelEvent) => true;
+    decline: (_event: FloPayPaymentMethodSetupDeclineEvent) => 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<{
+    onComplete?: ((_event: FloPayCardSetupCompleteEvent) => any) | undefined;
+    onCancel?: ((_event: FloPayCardSetupCancelEvent) => any) | undefined;
+    onError?: ((_error: FloPayCardSetupError) => any) | undefined;
+    onReady?: (() => any) | undefined;
+    onDecline?: ((_event: FloPayCardSetupDeclineEvent) => any) | undefined;
+    onValidation?: ((_message: string | null) => any) | undefined;
+}>, {
+    nonce: string;
+    sessionId: string;
+    billingApiUrl: string;
+    telemetry: boolean;
+    appearance: FloPayAppearance;
+    theme: VaultCardThemeColors | ThemeId;
+    containerStyle: Record<string, string | number>;
+    buttonsStyles: ButtonsLayoutStyles;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+export { FloPayPaymentMethodSetup, type FloPayPaymentMethodSetupCancelEvent, type FloPayPaymentMethodSetupCompleteEvent, type FloPayPaymentMethodSetupDeclineEvent, type FloPayPaymentMethodSetupProps };

package/dist/payment-method-setup-entry.mjs

@@ -0,0 +1,7 @@
+import {
+  FloPayPaymentMethodSetup
+} from "./chunk-2PLBNCM6.mjs";
+import "./chunk-W52CQTJI.mjs";
+export {
+  FloPayPaymentMethodSetup
+};

package/dist/payment-method-setup-paypal-XPSU4CHA.mjs

@@ -0,0 +1,148 @@
+// src/payment-method-setup-paypal.ts
+import { PaymentAPI } from "@flopay/js/card-setup";
+import {
+  buildExternalMethodRecoveryMessage,
+  classifyExternalMethodFailure,
+  detectPayPalEnvironment,
+  FloPayError,
+  PAYPAL_VAULTED_PAYMENT_METHOD_TYPE
+} from "@flopay/shared";
+import { loadScript } from "@paypal/paypal-js";
+import { defineComponent, h, onBeforeUnmount, onMounted, ref } from "vue";
+var PayPalSetupMethod = defineComponent({
+  name: "FloPayPayPalSetupMethod",
+  props: {
+    clientId: { type: String, required: true },
+    environment: { type: String, default: void 0 },
+    /** The setup session's own currency, when the read carries one. A vault flow needs none. */
+    currency: { type: String, default: void 0 },
+    sessionId: { type: String, required: true },
+    nonce: { type: String, required: true },
+    billingApiUrl: { type: String, required: true },
+    telemetry: { type: Boolean, default: void 0 },
+    customer: { type: Object, required: true }
+  },
+  emits: {
+    /** The buyer started saving PayPal. */
+    submitting: () => true,
+    /** PayPal accepted the account and the billing API took the token. */
+    confirmed: () => true,
+    /** A technical failure; `retryable` says whether trying again can help. */
+    failed: (_error, _options) => true,
+    /** The buyer closed PayPal's window without an outcome (not a cancel). */
+    abandoned: () => true
+  },
+  setup(props, { emit }) {
+    const container = ref(null);
+    let active = true;
+    let close;
+    let api = null;
+    onMounted(() => {
+      const { inAppBrowser } = detectPayPalEnvironment();
+      const client = new PaymentAPI(props.billingApiUrl, { telemetry: props.telemetry });
+      api = client;
+      const { sessionId, nonce } = props;
+      const customer = {
+        userId: props.customer.userId,
+        email: props.customer.email
+      };
+      const environment = props.environment;
+      void (async () => {
+        try {
+          const paypal = await loadScript({
+            clientId: props.clientId,
+            ...props.currency ? { currency: props.currency.toUpperCase() } : {},
+            components: "buttons",
+            ...environment === "sandbox" || environment === "production" ? { environment } : {}
+          });
+          const target = container.value;
+          if (!active || !target) return;
+          if (!paypal?.Buttons) {
+            throw new FloPayError("PayPal could not be loaded.", "api_error", {
+              code: "paypal_unavailable"
+            });
+          }
+          const buttons = paypal.Buttons({
+            createVaultSetupToken: async () => {
+              emit("submitting");
+              const intent = await client.createSessionIntent(sessionId, nonce, {
+                provider: "paypal",
+                paymentMethodCategory: "wallet",
+                paymentMethodType: PAYPAL_VAULTED_PAYMENT_METHOD_TYPE,
+                paymentMethodId: null,
+                intentKind: "setup"
+              });
+              if (intent.provider !== "paypal" || intent.providerObjectType !== "setup_token") {
+                throw new FloPayError(
+                  "The billing API did not return a PayPal setup token.",
+                  "api_error",
+                  { code: "InvalidSessionIntentResponse" }
+                );
+              }
+              return intent.providerObjectId;
+            },
+            onApprove: async (data) => {
+              const token = data.vaultSetupToken;
+              if (!token) {
+                throw new FloPayError("PayPal approved without a setup token.", "api_error", {
+                  code: "paypal_setup_token_missing"
+                });
+              }
+              const response = await client.processPayment(customer.userId, {
+                sessionId,
+                nonce,
+                paymentMethodCategory: "paypal",
+                tokenizedData: {
+                  id: token,
+                  type: "paypal_setup_token",
+                  isPaypal: true,
+                  gateway: "paypal",
+                  paymentMethodType: PAYPAL_VAULTED_PAYMENT_METHOD_TYPE
+                },
+                accountData: customer
+              });
+              if (!response.ok) {
+                throw new FloPayError("PayPal could not be saved.", "api_error", {
+                  code: "paypal_setup_failed",
+                  statusCode: response.status
+                });
+              }
+              if (active) emit("confirmed");
+            },
+            onCancel: () => {
+              if (active) emit("abandoned");
+            },
+            onError: (error) => {
+              if (!active) return;
+              const { popupBlocked } = classifyExternalMethodFailure(error, {
+                inAppBrowser,
+                handoffObserved: false
+              });
+              emit(
+                "failed",
+                popupBlocked ? new Error(buildExternalMethodRecoveryMessage("PayPal", true, inAppBrowser)) : error,
+                { code: popupBlocked ? "popup_blocked" : "paypal_setup_failed", retryable: true }
+              );
+            }
+          });
+          close = () => buttons.close();
+          await buttons.render(target);
+        } catch (error) {
+          if (!active) return;
+          emit("failed", error, { code: "paypal_unavailable", retryable: true });
+        }
+      })();
+    });
+    onBeforeUnmount(() => {
+      active = false;
+      void close?.().catch(() => {
+      });
+      api?.destroy();
+      api = null;
+    });
+    return () => h("div", { ref: container, "data-flopay-paypal-setup": "" });
+  }
+});
+export {
+  PayPalSetupMethod
+};

package/dist/stripe-elements-QGT45VIE.mjs

@@ -0,0 +1,6 @@
+import {
+  StripePaymentMethods
+} from "./chunk-VXYNYMHI.mjs";
+export {
+  StripePaymentMethods
+};

package/package.json

@@ -1,6 +1,63 @@
 {
   "name": "@flopay/vue",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "1.13.2",
+  "type": "module",
+  "sideEffects": false,
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/TeamFloPay/sdk.git",
+    "directory": "packages/vue"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    },
+    "./card-setup": {
+      "types": "./dist/card-setup-entry.d.ts",
+      "import": "./dist/card-setup-entry.mjs",
+      "require": "./dist/card-setup-entry.cjs"
+    },
+    "./payment-method-setup": {
+      "types": "./dist/payment-method-setup-entry.d.ts",
+      "import": "./dist/payment-method-setup-entry.mjs",
+      "require": "./dist/payment-method-setup-entry.cjs"
+    }
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@paypal/paypal-js": "^10.1.0",
+    "@stripe/stripe-js": "^9.17.0",
+    "@flopay/js": "1.13.2",
+    "@flopay/shared": "1.13.2"
+  },
+  "peerDependencies": {
+    "vue": ">=3.3.0"
+  },
+  "devDependencies": {
+    "@vue/server-renderer": "3.5.44",
+    "@vue/test-utils": "^2.4.6",
+    "jsdom": "^29.1.1",
+    "tsup": "^8.3.0",
+    "typescript": "^6.0.3",
+    "vitest": "4.1.12",
+    "vue": "3.5.44"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "clean": "rm -rf dist"
+  }
 }