@doujins/payments-ui 0.0.0

package/dist/index.cjs

@@ -0,0 +1,2861 @@
+'use strict';
+
+var react = require('react');
+var vanilla = require('zustand/vanilla');
+var jsxRuntime = require('react/jsx-runtime');
+var lucideReact = require('lucide-react');
+var countryList = require('country-list');
+var clsx = require('clsx');
+var Dialog2 = require('@radix-ui/react-dialog');
+var reactQuery = require('@tanstack/react-query');
+var walletAdapterReact = require('@solana/wallet-adapter-react');
+var buffer = require('buffer');
+var web3_js = require('@solana/web3.js');
+var splToken = require('@solana/spl-token');
+var QRCode = require('qrcode');
+var zustand = require('zustand');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var countryList__default = /*#__PURE__*/_interopDefault(countryList);
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+var Dialog2__namespace = /*#__PURE__*/_interopNamespace(Dialog2);
+var QRCode__default = /*#__PURE__*/_interopDefault(QRCode);
+
+// src/context/PaymentContext.tsx
+
+// src/utils/collect.ts
+var SCRIPT_SRC = "https://secure.networkmerchants.com/token/Collect.js";
+var loadCollectJs = (tokenizationKey) => {
+  if (typeof document === "undefined") return;
+  const trimmed = tokenizationKey?.trim();
+  if (!trimmed || trimmed.length < 10) {
+    console.warn("payments-ui: invalid Collect.js key, skipping load");
+    return;
+  }
+  const existing = document.querySelector(`script[src="${SCRIPT_SRC}"]`);
+  if (existing) return;
+  const script = document.createElement("script");
+  script.src = SCRIPT_SRC;
+  script.setAttribute("data-tokenization-key", trimmed);
+  script.setAttribute("data-field-ccnumber-placeholder", "0000 0000 0000 0000");
+  script.setAttribute("data-field-ccexp-placeholder", "10 / 25");
+  script.setAttribute("data-field-cvv-placeholder", "123");
+  script.setAttribute("data-variant", "inline");
+  script.async = true;
+  document.head.appendChild(script);
+};
+
+// src/services/apiClient.ts
+var buildUrl = (baseUrl, path, { params, query }) => {
+  let resolved = `${baseUrl}${path}`;
+  if (params) {
+    Object.entries(params).forEach(([key, value]) => {
+      resolved = resolved.replace(`:${key}`, encodeURIComponent(String(value)));
+    });
+  }
+  if (query) {
+    const queryString = new URLSearchParams();
+    Object.entries(query).forEach(([key, value]) => {
+      if (value === void 0 || value === null) return;
+      queryString.append(key, String(value));
+    });
+    if ([...queryString.keys()].length > 0) {
+      resolved = `${resolved}?${queryString.toString()}`;
+    }
+  }
+  return resolved;
+};
+var createApiClient = (paymentConfig, baseUrl, fetcher, resolveAuthToken) => {
+  const request = async (method, path, options) => {
+    const url = buildUrl(baseUrl, path, options ?? {});
+    const headers = {
+      "Content-Type": "application/json",
+      ...paymentConfig.defaultHeaders ?? {},
+      ...options?.headers ?? {}
+    };
+    const token = await resolveAuthToken();
+    if (token) {
+      headers.Authorization = `Bearer ${token}`;
+    }
+    const response = await fetcher(url, {
+      method,
+      headers,
+      body: options?.body ? JSON.stringify(options.body) : void 0
+    });
+    if (!response.ok) {
+      const message = await response.text();
+      throw new Error(message || `Request failed with status ${response.status}`);
+    }
+    if (response.status === 204) {
+      return void 0;
+    }
+    const data = await response.json();
+    return data;
+  };
+  return {
+    request,
+    get: (path, options) => request("GET", path, options),
+    post: (path, options) => request("POST", path, options),
+    put: (path, options) => request("PUT", path, options),
+    patch: (path, options) => request("PATCH", path, options),
+    delete: (path, options) => request("DELETE", path, options)
+  };
+};
+
+// src/services/CardPaymentService.ts
+var CardPaymentService = class {
+  constructor(config) {
+    this.config = config;
+    this.collectLoaded = false;
+  }
+  async ensureCollectLoaded() {
+    if (this.collectLoaded) return;
+    if (!this.config.collectJsKey) {
+      throw new Error("payments-ui: collect.js key missing");
+    }
+    loadCollectJs(this.config.collectJsKey);
+    this.collectLoaded = true;
+  }
+  buildCreatePayload(result) {
+    return {
+      payment_token: result.token,
+      first_name: result.billing.firstName,
+      last_name: result.billing.lastName,
+      address1: result.billing.address1,
+      address2: result.billing.address2,
+      city: result.billing.city,
+      state: result.billing.stateRegion,
+      zip: result.billing.postalCode,
+      country: result.billing.country,
+      email: result.billing.email,
+      provider: result.billing.provider
+    };
+  }
+};
+
+// src/services/PaymentMethodService.ts
+var PaymentMethodService = class {
+  constructor(api) {
+    this.api = api;
+  }
+  async list(params) {
+    return this.api.get("/payment-methods", {
+      query: {
+        page: params?.page ?? 1,
+        page_size: params?.pageSize ?? 50
+      }
+    });
+  }
+  async create(payload) {
+    return this.api.post("/payment-methods", {
+      body: { ...payload }
+    });
+  }
+  async remove(id) {
+    await this.api.delete(`/payment-methods/${id}`);
+  }
+  async activate(id) {
+    await this.api.put(`/payment-methods/${id}/activate`);
+  }
+};
+
+// src/services/SolanaPaymentService.ts
+var SolanaPaymentService = class {
+  constructor(api) {
+    this.api = api;
+  }
+  async generatePayment(priceId, token, userWallet) {
+    return this.api.post("/solana/generate", {
+      body: { price_id: priceId, token, user_wallet: userWallet }
+    });
+  }
+  async submitPayment(signedTransaction, priceId, intentId, memo) {
+    return this.api.post("/solana/submit", {
+      body: {
+        signed_transaction: signedTransaction,
+        price_id: priceId,
+        intent_id: intentId,
+        ...memo ? { memo } : {}
+      }
+    });
+  }
+  async fetchSupportedTokens() {
+    const response = await this.api.get(
+      "/solana/tokens"
+    );
+    return response.tokens;
+  }
+  async getSupportedTokens() {
+    return this.fetchSupportedTokens();
+  }
+  async generateQrCode(priceId, token, userWallet) {
+    return this.api.post("/solana/qr", {
+      body: {
+        price_id: priceId,
+        token,
+        ...userWallet ? { user_wallet: userWallet } : {}
+      }
+    });
+  }
+  async generateQRCode(priceId, token, userWallet) {
+    return this.generateQrCode(priceId, token, userWallet);
+  }
+  async checkPaymentStatus(reference, memo) {
+    return this.api.get("/solana/check", {
+      query: {
+        reference,
+        ...memo ? { memo } : {}
+      }
+    });
+  }
+};
+
+// src/services/TokenCatalog.ts
+var TokenCatalog = class {
+  constructor(solanaService, options = {}) {
+    this.solanaService = solanaService;
+    this.options = options;
+    this.cache = [];
+    this.lastFetched = 0;
+  }
+  get ttl() {
+    return this.options.ttlMs ?? 5 * 60 * 1e3;
+  }
+  async getTokens(force = false) {
+    const isStale = Date.now() - this.lastFetched > this.ttl;
+    if (!force && this.cache.length > 0 && !isStale) {
+      return this.cache;
+    }
+    const tokens = await this.solanaService.fetchSupportedTokens();
+    this.cache = tokens;
+    this.lastFetched = Date.now();
+    return tokens;
+  }
+  getCached() {
+    return this.cache;
+  }
+};
+
+// src/services/WalletGateway.ts
+var WalletGateway = class {
+  constructor() {
+    this.adapter = null;
+  }
+  setAdapter(adapter) {
+    this.adapter = adapter;
+  }
+  getPublicKey() {
+    if (!this.adapter?.publicKey) return null;
+    try {
+      return this.adapter.publicKey.toBase58();
+    } catch {
+      return null;
+    }
+  }
+  async sign(transaction) {
+    if (!this.adapter) {
+      throw new Error("payments-ui: wallet adapter not set");
+    }
+    if (typeof this.adapter.signVersionedTransaction === "function") {
+      return this.adapter.signVersionedTransaction(transaction);
+    }
+    if (typeof this.adapter.signTransaction === "function") {
+      return this.adapter.signTransaction(transaction);
+    }
+    throw new Error("payments-ui: wallet adapter cannot sign transactions");
+  }
+};
+
+// src/services/SubscriptionService.ts
+var SubscriptionService = class {
+  constructor(api) {
+    this.api = api;
+  }
+  async subscribe(platform, payload) {
+    const body = this.serializePayload(platform, payload);
+    return this.api.post(
+      `/subscriptions/process/${platform}`,
+      {
+        body
+      }
+    );
+  }
+  async generateFlexFormUrl(payload) {
+    return this.api.post("/subscriptions/flexform", {
+      body: { ...payload }
+    });
+  }
+  serializePayload(platform, payload) {
+    if (platform === "nmi") {
+      const data2 = payload;
+      if (!data2.priceId) {
+        throw new Error("payments-ui: priceId is required for NMI subscriptions");
+      }
+      if (!data2.paymentToken && !data2.paymentMethodId) {
+        throw new Error(
+          "payments-ui: paymentToken or paymentMethodId is required for NMI subscriptions"
+        );
+      }
+      const body = {
+        price_id: data2.priceId,
+        processor: data2.processor ?? "nmi",
+        provider: data2.provider
+      };
+      if (data2.email) body.email = data2.email;
+      if (data2.firstName) body.first_name = data2.firstName;
+      if (data2.lastName) body.last_name = data2.lastName;
+      if (data2.address1) body.address1 = data2.address1;
+      if (data2.city) body.city = data2.city;
+      if (data2.state) body.state = data2.state;
+      if (data2.zipCode) body.zip = data2.zipCode;
+      if (data2.country) body.country = data2.country;
+      if (data2.paymentToken) body.payment_token = data2.paymentToken;
+      if (data2.paymentMethodId) body.payment_method_id = data2.paymentMethodId;
+      return body;
+    }
+    const data = payload;
+    if (!data.priceId) {
+      throw new Error("payments-ui: priceId is required for CCBill subscriptions");
+    }
+    return {
+      price_id: data.priceId,
+      processor: data.processor ?? "ccbill",
+      email: data.email,
+      first_name: data.firstName,
+      last_name: data.lastName,
+      zip: data.zipCode,
+      country: data.country
+    };
+  }
+};
+
+// src/core/PaymentApp.ts
+var PaymentApp = class {
+  constructor(options) {
+    this.resolveAuthToken = async () => {
+      if (!this.config.getAuthToken) {
+        return null;
+      }
+      try {
+        const result = this.config.getAuthToken();
+        if (result instanceof Promise) {
+          return await result ?? null;
+        }
+        return result ?? null;
+      } catch (error) {
+        console.warn("payments-ui: failed to resolve auth token", error);
+        return null;
+      }
+    };
+    this.config = options.config;
+    this.fetcher = options.fetcher ?? options.config.fetcher ?? globalThis.fetch?.bind(globalThis);
+    if (!this.fetcher) {
+      throw new Error("payments-ui: fetch implementation is required");
+    }
+    this.services = this.createServices();
+  }
+  getConfig() {
+    return this.config;
+  }
+  getFetcher() {
+    return this.fetcher;
+  }
+  getServices() {
+    return this.services;
+  }
+  createServices() {
+    const billingApi = createApiClient(
+      this.config,
+      this.config.endpoints.billingBaseUrl,
+      this.fetcher,
+      this.resolveAuthToken
+    );
+    const accountBaseUrl = this.config.endpoints.accountBaseUrl ?? this.config.endpoints.billingBaseUrl;
+    const accountApi = createApiClient(
+      this.config,
+      accountBaseUrl,
+      this.fetcher,
+      this.resolveAuthToken
+    );
+    const solanaPayments = new SolanaPaymentService(billingApi);
+    const paymentMethods = new PaymentMethodService(accountApi);
+    const cardPayments = new CardPaymentService(this.config);
+    const walletGateway = new WalletGateway();
+    const tokenCatalog = new TokenCatalog(solanaPayments);
+    const subscriptions = new SubscriptionService(billingApi);
+    return {
+      cardPayments,
+      paymentMethods,
+      solanaPayments,
+      tokenCatalog,
+      walletGateway,
+      subscriptions,
+      billingApi,
+      accountApi
+    };
+  }
+};
+var initialState = {
+  selectedMethodId: null,
+  solanaModalOpen: false,
+  savedPaymentStatus: "idle",
+  savedPaymentError: null,
+  newCardStatus: "idle",
+  newCardError: null,
+  solanaTab: "wallet",
+  solanaStatus: "selecting",
+  solanaError: null,
+  solanaTransactionId: null,
+  solanaSelectedToken: null,
+  solanaTokenAmount: 0
+};
+var createPaymentStore = (options) => vanilla.createStore((set, get) => {
+  const notifyStatus = (status, context) => {
+    options?.callbacks?.onStatusChange?.({ status, context });
+  };
+  const notifySuccess = (payload) => {
+    if (!options?.callbacks?.onSuccess) return;
+    options.callbacks.onSuccess(payload ?? {});
+  };
+  const notifyError = (error) => {
+    options?.callbacks?.onError?.(new Error(error));
+  };
+  return {
+    ...initialState,
+    setSelectedMethod: (methodId) => set({ selectedMethodId: methodId }),
+    setSolanaModalOpen: (open) => set({ solanaModalOpen: open }),
+    setSolanaTab: (tab) => set({ solanaTab: tab }),
+    setSolanaSelectedToken: (symbol) => set({ solanaSelectedToken: symbol }),
+    setSolanaTokenAmount: (amount) => set({ solanaTokenAmount: amount }),
+    setSolanaTransactionId: (txId) => set({ solanaTransactionId: txId }),
+    startSavedPayment: () => {
+      notifyStatus("processing", { source: "saved-payment" });
+      set({ savedPaymentStatus: "processing", savedPaymentError: null });
+    },
+    completeSavedPayment: () => {
+      notifyStatus("success", { source: "saved-payment" });
+      set({ savedPaymentStatus: "success", savedPaymentError: null });
+    },
+    failSavedPayment: (error) => {
+      notifyStatus("error", { source: "saved-payment" });
+      notifyError(error);
+      set({ savedPaymentStatus: "error", savedPaymentError: error });
+    },
+    resetSavedPayment: () => set({ savedPaymentStatus: "idle", savedPaymentError: null }),
+    startNewCardPayment: () => {
+      notifyStatus("processing", { source: "new-card" });
+      set({ newCardStatus: "processing", newCardError: null });
+    },
+    completeNewCardPayment: () => {
+      notifyStatus("success", { source: "new-card" });
+      set({ newCardStatus: "success", newCardError: null });
+    },
+    failNewCardPayment: (error) => {
+      notifyStatus("error", { source: "new-card" });
+      notifyError(error);
+      set({ newCardStatus: "error", newCardError: error });
+    },
+    resetNewCardPayment: () => set({ newCardStatus: "idle", newCardError: null }),
+    startSolanaPayment: () => {
+      notifyStatus("processing", { source: "solana" });
+      set({ solanaStatus: "processing", solanaError: null });
+    },
+    confirmSolanaPayment: () => set({ solanaStatus: "confirming" }),
+    completeSolanaPayment: (payload) => {
+      notifyStatus("success", { source: "solana" });
+      notifySuccess(payload);
+      set({ solanaStatus: "success", solanaError: null });
+    },
+    failSolanaPayment: (error) => {
+      notifyStatus("error", { source: "solana" });
+      notifyError(error);
+      set({ solanaStatus: "error", solanaError: error });
+    },
+    resetSolanaPayment: () => set({
+      solanaStatus: "selecting",
+      solanaError: null,
+      solanaTransactionId: null
+    }),
+    resetAll: () => set(initialState)
+  };
+});
+var PaymentContext = react.createContext(void 0);
+var PaymentProvider = ({
+  config,
+  children
+}) => {
+  const app = react.useMemo(() => new PaymentApp({ config }), [config]);
+  const store = react.useMemo(
+    () => createPaymentStore({ callbacks: config.callbacks }),
+    [config.callbacks]
+  );
+  const value = react.useMemo(() => {
+    return {
+      config: app.getConfig(),
+      fetcher: app.getFetcher(),
+      resolveAuthToken: app.resolveAuthToken,
+      app,
+      services: app.getServices(),
+      store
+    };
+  }, [app, store]);
+  react.useEffect(() => {
+    if (!value.config.collectJsKey) return;
+    loadCollectJs(value.config.collectJsKey);
+  }, [value.config.collectJsKey]);
+  return /* @__PURE__ */ jsxRuntime.jsx(PaymentContext.Provider, { value, children });
+};
+var usePaymentContext = () => {
+  const context = react.useContext(PaymentContext);
+  if (!context) {
+    throw new Error("usePaymentContext must be used within a PaymentProvider");
+  }
+  return context;
+};
+var customCountries = [
+  { code: "TW", name: "Taiwan, Province of China" },
+  { code: "KR", name: "Korea" },
+  { code: "KP", name: "North Korea" },
+  { code: "PS", name: "Palestine, State of" },
+  { code: "VA", name: "Holy See (Vatican City State)" },
+  { code: "BQ", name: "Bonaire, Sint Eustatius and Saba" },
+  { code: "SX", name: "Sint Maarten (Dutch part)" },
+  { code: "MK", name: "North Macedonia" },
+  { code: "SZ", name: "Eswatini" },
+  { code: "FM", name: "Micronesia, Federated States Of" },
+  { code: "TR", name: "T\xFCrkiye" }
+];
+countryList__default.default.overwrite(customCountries);
+var countries = countryList__default.default.getData().sort((a, b) => a.name.localeCompare(b.name));
+
+// src/hooks/useCountryDropdown.ts
+function useCountryDropdown() {
+  const [country, setCountry] = react.useState("");
+  const [countryOpen, setCountryOpen] = react.useState(false);
+  const [countrySearch, setCountrySearch] = react.useState("");
+  const countryDropdownRef = react.useRef(null);
+  const filteredCountries = countries.filter(
+    (country2) => country2.name.toLowerCase().includes(countrySearch.toLowerCase())
+  );
+  react.useEffect(() => {
+    function handleClickOutside(event) {
+      if (countryDropdownRef.current && !countryDropdownRef.current.contains(event.target)) {
+        setCountryOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+  return {
+    country,
+    setCountry,
+    countryOpen,
+    setCountryOpen,
+    countrySearch,
+    setCountrySearch,
+    countryDropdownRef,
+    filteredCountries
+  };
+}
+var defaultBilling = {
+  firstName: "",
+  lastName: "",
+  address1: "",
+  address2: "",
+  city: "",
+  stateRegion: "",
+  postalCode: "",
+  country: "US",
+  email: "",
+  provider: "mobius"
+};
+var buildSelector = (prefix, field) => `#${prefix}-${field}`;
+var CardDetailsForm = ({
+  visible,
+  onTokenize,
+  submitLabel,
+  submitting = false,
+  defaultValues,
+  externalError,
+  collectPrefix = "card-form",
+  className,
+  onBillingChange,
+  submitDisabled = false
+}) => {
+  const { config } = usePaymentContext();
+  const defaultValuesKey = react.useMemo(() => JSON.stringify(defaultValues ?? {}), [defaultValues]);
+  const mergedDefaults = react.useMemo(
+    () => ({
+      ...defaultBilling,
+      ...defaultValues,
+      email: defaultValues?.email ?? config.defaultUser?.email ?? defaultBilling.email
+    }),
+    [defaultValuesKey, config.defaultUser?.email]
+  );
+  const [firstName, setFirstName] = react.useState(mergedDefaults.firstName);
+  const [lastName, setLastName] = react.useState(mergedDefaults.lastName);
+  const [address1, setAddress1] = react.useState(mergedDefaults.address1);
+  const [address2, setAddress2] = react.useState(mergedDefaults.address2 ?? "");
+  const [city, setCity] = react.useState(mergedDefaults.city);
+  const [stateRegion, setStateRegion] = react.useState(mergedDefaults.stateRegion ?? "");
+  const [postalCode, setPostalCode] = react.useState(mergedDefaults.postalCode);
+  const [country, setCountry] = react.useState(mergedDefaults.country);
+  const [email, setEmail] = react.useState(mergedDefaults.email ?? "");
+  const [localError, setLocalError] = react.useState(null);
+  const [isTokenizing, setIsTokenizing] = react.useState(false);
+  const {
+    countryDropdownRef,
+    countryOpen,
+    setCountryOpen,
+    countrySearch,
+    setCountrySearch,
+    filteredCountries
+  } = useCountryDropdown();
+  react.useEffect(() => {
+    if (!visible) {
+      setLocalError(null);
+      setIsTokenizing(false);
+    }
+  }, [visible]);
+  react.useEffect(() => {
+    if (!visible) return;
+    setFirstName(mergedDefaults.firstName);
+    setLastName(mergedDefaults.lastName);
+    setAddress1(mergedDefaults.address1);
+    setAddress2(mergedDefaults.address2 ?? "");
+    setCity(mergedDefaults.city);
+    setStateRegion(mergedDefaults.stateRegion ?? "");
+    setPostalCode(mergedDefaults.postalCode);
+    setCountry(mergedDefaults.country);
+    setEmail(mergedDefaults.email ?? "");
+  }, [defaultValuesKey, mergedDefaults, visible]);
+  react.useEffect(() => {
+    if (!onBillingChange) return;
+    onBillingChange({
+      firstName,
+      lastName,
+      address1,
+      address2,
+      city,
+      stateRegion,
+      postalCode,
+      country,
+      email,
+      provider: mergedDefaults.provider ?? "mobius"
+    });
+  }, [
+    firstName,
+    lastName,
+    address1,
+    address2,
+    city,
+    stateRegion,
+    postalCode,
+    country,
+    email,
+    mergedDefaults.provider,
+    onBillingChange
+  ]);
+  react.useEffect(() => {
+    if (typeof window === "undefined" || !window.CollectJS || !visible) {
+      return;
+    }
+    const handlers = window.__doujinsCollectHandlers || (window.__doujinsCollectHandlers = {});
+    handlers[collectPrefix] = (response) => {
+      setIsTokenizing(false);
+      if (!response.token) {
+        setLocalError("Payment tokenization failed. Please try again.");
+        return;
+      }
+      const billing = {
+        firstName,
+        lastName,
+        address1,
+        address2,
+        city,
+        stateRegion,
+        postalCode,
+        country,
+        email,
+        provider: mergedDefaults.provider ?? "mobius"
+      };
+      onTokenize(response.token, billing);
+    };
+    const configured = window.__doujinsCollectConfigured || (window.__doujinsCollectConfigured = {});
+    if (!configured[collectPrefix]) {
+      window.CollectJS.configure({
+        variant: "inline",
+        fields: {
+          ccnumber: { selector: buildSelector(collectPrefix, "ccnumber") },
+          ccexp: { selector: buildSelector(collectPrefix, "ccexp") },
+          cvv: { selector: buildSelector(collectPrefix, "cvv") }
+        },
+        callback: (response) => {
+          const fn = window.__doujinsCollectHandlers?.[collectPrefix];
+          fn?.(response);
+        }
+      });
+      configured[collectPrefix] = true;
+    }
+  }, [
+    collectPrefix,
+    firstName,
+    lastName,
+    address1,
+    address2,
+    city,
+    stateRegion,
+    postalCode,
+    country,
+    email,
+    mergedDefaults.provider,
+    onTokenize,
+    visible
+  ]);
+  const validate = () => {
+    if (!firstName.trim() || !lastName.trim() || !address1.trim() || !city.trim() || !postalCode.trim() || !country.trim() || !email.trim()) {
+      setLocalError("Please complete all required billing fields.");
+      return false;
+    }
+    setLocalError(null);
+    return true;
+  };
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    if (!validate()) return;
+    if (!window.CollectJS) {
+      setLocalError("Payment form is not ready. Please try again later.");
+      return;
+    }
+    setIsTokenizing(true);
+    window.CollectJS.startPaymentRequest();
+  };
+  const errorMessage = localError ?? externalError;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "form",
+    {
+      className: clsx__default.default("payments-ui-card-form", className),
+      onSubmit: handleSubmit,
+      noValidate: true,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "payments-ui-grid", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "payments-ui-label", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.User, { className: "payments-ui-icon" }),
+              " First name"
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                className: "payments-ui-input",
+                value: firstName,
+                onChange: (e) => setFirstName(e.target.value),
+                required: true
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "payments-ui-label", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.User, { className: "payments-ui-icon" }),
+              " Last name"
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                className: "payments-ui-input",
+                value: lastName,
+                onChange: (e) => setLastName(e.target.value),
+                required: true
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "payments-ui-label", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Email" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "email",
+              className: "payments-ui-input",
+              value: email,
+              onChange: (e) => setEmail(e.target.value),
+              required: true
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "payments-ui-label", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Address line 1" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              className: "payments-ui-input",
+              value: address1,
+              onChange: (e) => setAddress1(e.target.value),
+              required: true
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "payments-ui-label", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Address line 2 (optional)" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              className: "payments-ui-input",
+              value: address2,
+              onChange: (e) => setAddress2(e.target.value)
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "payments-ui-grid", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "payments-ui-label", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: "City" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                className: "payments-ui-input",
+                value: city,
+                onChange: (e) => setCity(e.target.value),
+                required: true
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "payments-ui-label", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: "State / Region" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                className: "payments-ui-input",
+                value: stateRegion,
+                onChange: (e) => setStateRegion(e.target.value)
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "payments-ui-grid", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "payments-ui-label", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MapPin, { className: "payments-ui-icon" }),
+              " Postal code"
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                className: "payments-ui-input",
+                value: postalCode,
+                onChange: (e) => setPostalCode(e.target.value),
+                required: true
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "payments-ui-label", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Country" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "payments-ui-country", ref: countryDropdownRef, children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  type: "button",
+                  className: "payments-ui-country-toggle",
+                  onClick: () => setCountryOpen((prev) => !prev),
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { children: country }),
+                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "payments-ui-icon" })
+                  ]
+                }
+              ),
+              countryOpen && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "payments-ui-country-menu", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "payments-ui-country-search", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "payments-ui-icon" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "input",
+                    {
+                      placeholder: "Search country",
+                      value: countrySearch,
+                      onChange: (e) => setCountrySearch(e.target.value)
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("ul", { children: filteredCountries.map((option) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => {
+                      setCountry(option.code);
+                      setCountryOpen(false);
+                    },
+                    children: option.name
+                  }
+                ) }, option.code)) })
+              ] })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "payments-ui-label", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Card number" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              id: buildSelector(collectPrefix, "ccnumber").slice(1),
+              className: "payments-ui-collect-field"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "payments-ui-grid", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "payments-ui-label", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Expiry" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                id: buildSelector(collectPrefix, "ccexp").slice(1),
+                className: "payments-ui-collect-field"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "payments-ui-label", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: "CVV" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                id: buildSelector(collectPrefix, "cvv").slice(1),
+                className: "payments-ui-collect-field"
+              }
+            )
+          ] })
+        ] }),
+        errorMessage && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "payments-ui-error", children: errorMessage }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "submit",
+            className: "payments-ui-button",
+            disabled: submitting || isTokenizing || submitDisabled,
+            children: [
+              (submitting || isTokenizing) && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "payments-ui-spinner" }),
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CreditCard, { className: "payments-ui-icon" }),
+              submitting || isTokenizing ? "Processing..." : submitLabel
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+var usePaymentMethodService = () => {
+  const { services } = usePaymentContext();
+  return react.useMemo(() => services.paymentMethods, [services]);
+};
+
+// src/hooks/usePaymentMethods.ts
+var PAYMENT_METHODS_KEY = ["payments-ui", "payment-methods"];
+var usePaymentMethods = () => {
+  const service = usePaymentMethodService();
+  const queryClient = reactQuery.useQueryClient();
+  const listQuery = reactQuery.useQuery({
+    queryKey: PAYMENT_METHODS_KEY,
+    queryFn: () => service.list({ pageSize: 50 })
+  });
+  const createMutation = reactQuery.useMutation({
+    mutationFn: ({ token, billing }) => {
+      const payload = {
+        payment_token: token,
+        first_name: billing.firstName,
+        last_name: billing.lastName,
+        address1: billing.address1,
+        address2: billing.address2,
+        city: billing.city,
+        state: billing.stateRegion,
+        zip: billing.postalCode,
+        country: billing.country,
+        email: billing.email,
+        provider: billing.provider
+      };
+      return service.create(payload);
+    },
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: PAYMENT_METHODS_KEY });
+    }
+  });
+  const deleteMutation = reactQuery.useMutation({
+    mutationFn: ({ id }) => service.remove(id),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: PAYMENT_METHODS_KEY });
+    }
+  });
+  return {
+    listQuery,
+    createMutation,
+    deleteMutation
+  };
+};
+var formatCardLabel = (method) => {
+  const brand = method.card_type ? method.card_type.toUpperCase() : "CARD";
+  const lastFour = method.last_four ? `\u2022\u2022\u2022\u2022 ${method.last_four}` : "";
+  return `${brand} ${lastFour}`.trim();
+};
+var StoredPaymentMethods = ({
+  selectedMethodId,
+  onMethodSelect,
+  showAddButton = true,
+  heading = "Payment Methods",
+  description = "Manage your saved cards"
+}) => {
+  const { listQuery, createMutation, deleteMutation } = usePaymentMethods();
+  const [isModalOpen, setIsModalOpen] = react.useState(false);
+  const [deletingId, setDeletingId] = react.useState(null);
+  const payments = react.useMemo(() => listQuery.data?.data ?? [], [listQuery.data]);
+  const handleCardTokenize = (token, billing) => {
+    createMutation.mutate({ token, billing });
+  };
+  const handleDelete = (method) => {
+    setDeletingId(method.id);
+    deleteMutation.mutate(
+      { id: method.id },
+      {
+        onSettled: () => setDeletingId(null)
+      }
+    );
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "payments-ui-panel", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "payments-ui-panel-header", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "payments-ui-panel-title", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.WalletCards, { className: "payments-ui-icon" }),
+          " ",
+          heading
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "payments-ui-panel-description", children: description })
+      ] }),
+      showAddButton && /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          className: "payments-ui-button",
+          type: "button",
+          onClick: () => setIsModalOpen(true),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CreditCard, { className: "payments-ui-icon" }),
+            " Add card"
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "payments-ui-panel-body", children: listQuery.isLoading ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "payments-ui-empty", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "payments-ui-spinner" }),
+      " Loading cards..."
+    ] }) : payments.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "payments-ui-empty", children: "No saved payment methods yet." }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "payments-ui-method-list", children: payments.map((method) => {
+      const isSelected = selectedMethodId === method.id;
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: clsx__default.default("payments-ui-method-item", {
+            "is-selected": isSelected
+          }),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "payments-ui-method-label", children: formatCardLabel(method) }),
+              /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "payments-ui-method-meta", children: [
+                "Added on",
+                " ",
+                method.created_at ? new Date(method.created_at).toLocaleDateString() : "unknown"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "payments-ui-method-actions", children: [
+              onMethodSelect && /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "payments-ui-text-button",
+                  onClick: () => onMethodSelect(method),
+                  children: isSelected ? "Selected" : "Use card"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "payments-ui-icon-button payments-ui-danger",
+                  onClick: () => handleDelete(method),
+                  disabled: deletingId === method.id && deleteMutation.isPending,
+                  children: deletingId === method.id && deleteMutation.isPending ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "payments-ui-spinner" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "payments-ui-icon" })
+                }
+              )
+            ] })
+          ]
+        },
+        method.id
+      );
+    }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(Dialog2__namespace.Root, { open: isModalOpen, onOpenChange: setIsModalOpen, children: /* @__PURE__ */ jsxRuntime.jsxs(Dialog2__namespace.Portal, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Dialog2__namespace.Overlay, { className: "payments-ui-modal-overlay" }),
+      /* @__PURE__ */ jsxRuntime.jsxs(Dialog2__namespace.Content, { className: "payments-ui-modal", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "payments-ui-modal-header", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("h3", { children: "Add a new card" }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Your card details are tokenized securely via our payment provider." })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(Dialog2__namespace.Close, { className: "payments-ui-icon-button", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "payments-ui-icon" }) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          CardDetailsForm,
+          {
+            visible: isModalOpen,
+            collectPrefix: "payments-ui-card",
+            submitting: createMutation.isPending,
+            submitLabel: "Save card",
+            externalError: createMutation.error?.message ?? null,
+            onTokenize: handleCardTokenize
+          }
+        )
+      ] })
+    ] }) })
+  ] });
+};
+var useSolanaService = () => {
+  const { services } = usePaymentContext();
+  return react.useMemo(() => services.solanaPayments, [services]);
+};
+var getSolBalance = async (connection, publicKey) => {
+  try {
+    const lamports = await connection.getBalance(publicKey);
+    return lamports / web3_js.LAMPORTS_PER_SOL;
+  } catch (error) {
+    console.error("Failed to fetch SOL balance:", error);
+    return 0;
+  }
+};
+var fetchAllTokenBalances = async (connection, publicKey) => {
+  const balances = /* @__PURE__ */ new Map();
+  try {
+    const tokenAccounts = await connection.getParsedProgramAccounts(
+      splToken.TOKEN_PROGRAM_ID,
+      {
+        filters: [
+          {
+            dataSize: 165
+            // Size of token account
+          },
+          {
+            memcmp: {
+              offset: 32,
+              // Owner field offset
+              bytes: publicKey.toString()
+            }
+          }
+        ]
+      }
+    );
+    for (const account of tokenAccounts) {
+      const data = account.account.data;
+      const parsed = data.parsed;
+      const info = parsed?.info;
+      if (info && info.tokenAmount) {
+        const mintAddress = info.mint;
+        const uiAmount = info.tokenAmount.uiAmount || 0;
+        if (uiAmount > 0) {
+          balances.set(mintAddress, uiAmount);
+        }
+      }
+    }
+  } catch (error) {
+    console.error("Failed to fetch token balances:", error);
+  }
+  return balances;
+};
+var fetchSupportedTokenBalances = async (connection, publicKey, supportedTokens) => {
+  const results = [];
+  const solBalance = await getSolBalance(connection, publicKey);
+  const solTokenMeta = supportedTokens.find((token) => token.is_native || token.symbol === "SOL") || {
+    symbol: "SOL",
+    name: "Solana",
+    mint: "So11111111111111111111111111111111111111112",
+    decimals: 9};
+  results.push({
+    mint: solTokenMeta.mint,
+    symbol: solTokenMeta.symbol,
+    name: solTokenMeta.name,
+    balance: solBalance,
+    uiBalance: solBalance.toFixed(solTokenMeta.decimals <= 4 ? solTokenMeta.decimals : 4),
+    decimals: solTokenMeta.decimals,
+    isNative: true
+  });
+  const tokenBalances = await fetchAllTokenBalances(connection, publicKey);
+  const tokenMetaByMint = new Map(
+    supportedTokens.filter((token) => !(token.is_native || token.symbol === "SOL")).map((token) => [token.mint, token])
+  );
+  for (const [mint, tokenMeta] of tokenMetaByMint.entries()) {
+    const balance = tokenBalances.get(mint) || 0;
+    results.push({
+      mint,
+      symbol: tokenMeta.symbol,
+      name: tokenMeta.name,
+      balance,
+      uiBalance: balance.toFixed(tokenMeta.decimals <= 6 ? tokenMeta.decimals : 6),
+      decimals: tokenMeta.decimals,
+      isNative: false
+    });
+  }
+  return results;
+};
+var hasSufficientBalance = (balance, requiredAmount, buffer = 0.05) => {
+  const requiredWithBuffer = requiredAmount * (1 + buffer);
+  return balance >= requiredWithBuffer;
+};
+
+// src/hooks/useSolanaDirectPayment.ts
+var useSolanaDirectPayment = (options) => {
+  const { priceId, tokenAmount, selectedToken, supportedTokens, onStart, onConfirming, onSuccess, onError } = options;
+  const { connected, publicKey, wallet, signTransaction } = walletAdapterReact.useWallet();
+  const { config } = usePaymentContext();
+  const solanaService = useSolanaService();
+  const [tokenBalance, setTokenBalance] = react.useState(null);
+  const [isBalanceLoading, setIsBalanceLoading] = react.useState(false);
+  const [isProcessing, setIsProcessing] = react.useState(false);
+  const connection = react.useMemo(() => {
+    const rpc = config.solanaRpcUrl ?? "https://api.mainnet-beta.solana.com";
+    return new web3_js.Connection(rpc);
+  }, [config.solanaRpcUrl]);
+  const fetchTokenBalance = react.useCallback(async () => {
+    if (!connected || !publicKey || !selectedToken) {
+      setTokenBalance({ balance: 0, hasBalance: false });
+      return;
+    }
+    try {
+      setIsBalanceLoading(true);
+      const balances = await fetchSupportedTokenBalances(
+        connection,
+        publicKey,
+        supportedTokens
+      );
+      const balanceInfo = balances.find(
+        (tb) => tb.symbol === selectedToken.symbol || tb.mint === selectedToken.mint
+      );
+      const balance = balanceInfo?.balance || 0;
+      const hasBalanceFlag = hasSufficientBalance(balance, tokenAmount);
+      setTokenBalance({ balance, hasBalance: hasBalanceFlag });
+    } catch (error) {
+      console.error("Failed to fetch token balance:", error);
+      setTokenBalance({ balance: 0, hasBalance: false });
+    } finally {
+      setIsBalanceLoading(false);
+    }
+  }, [connected, publicKey, connection, selectedToken, tokenAmount, supportedTokens]);
+  react.useEffect(() => {
+    if (connected && publicKey && selectedToken) {
+      void fetchTokenBalance();
+    }
+  }, [connected, publicKey, selectedToken, tokenAmount, fetchTokenBalance]);
+  const decodeTransaction = react.useCallback((serialized) => {
+    const buffer$1 = buffer.Buffer.from(serialized, "base64");
+    try {
+      return web3_js.VersionedTransaction.deserialize(buffer$1);
+    } catch (err) {
+      try {
+        return web3_js.Transaction.from(buffer$1);
+      } catch (legacyErr) {
+        console.error("Failed to deserialize transaction", legacyErr);
+        throw new Error("Invalid transaction payload received from server");
+      }
+    }
+  }, []);
+  const isVersionedTransaction = (tx) => {
+    return !!tx && typeof tx === "object" && "version" in tx;
+  };
+  const signWithWallet = react.useCallback(
+    async (tx) => {
+      if (!wallet) {
+        throw new Error("Wallet adapter is not available");
+      }
+      const adapter = wallet.adapter;
+      if (isVersionedTransaction(tx)) {
+        if (adapter.supportedTransactionVersions) {
+          const supported = adapter.supportedTransactionVersions;
+          if (!supported.has(tx.version)) {
+            throw new Error("Connected wallet does not support this transaction version");
+          }
+        }
+        if (adapter.signVersionedTransaction) {
+          return adapter.signVersionedTransaction(tx);
+        }
+      }
+      if (adapter.signTransaction) {
+        return adapter.signTransaction(tx);
+      }
+      if (signTransaction) {
+        return signTransaction(tx);
+      }
+      throw new Error("Connected wallet cannot sign transactions");
+    },
+    [wallet, signTransaction]
+  );
+  const pay = react.useCallback(async () => {
+    if (!connected || !publicKey) {
+      onError("Wallet not connected");
+      return;
+    }
+    if (!selectedToken) {
+      onError("No payment token selected");
+      return;
+    }
+    if (!tokenBalance?.hasBalance) {
+      onError("Insufficient balance for this token");
+      return;
+    }
+    try {
+      setIsProcessing(true);
+      onStart();
+      const paymentData = await solanaService.generatePayment(
+        priceId,
+        selectedToken.symbol,
+        publicKey.toBase58()
+      );
+      const transactionToSign = decodeTransaction(paymentData.transaction);
+      const signedTx = await signWithWallet(transactionToSign);
+      const signedSerialized = buffer.Buffer.from(signedTx.serialize()).toString("base64");
+      onConfirming();
+      const result = await solanaService.submitPayment(
+        signedSerialized,
+        priceId,
+        paymentData.intent_id,
+        `Payment for subscription - ${selectedToken.symbol}`
+      );
+      onSuccess(result, result.transaction_id);
+    } catch (err) {
+      console.error("Payment failed:", err);
+      let errorMessage = "Payment failed. Please try again.";
+      const message = err instanceof Error ? err.message : typeof err === "string" ? err : "";
+      if (message.includes("User rejected")) {
+        errorMessage = "Payment cancelled by user";
+      } else if (/insufficient\s+funds/i.test(message)) {
+        errorMessage = "Insufficient balance for this token";
+      } else if (message) {
+        errorMessage = message;
+      }
+      onError(errorMessage);
+    } finally {
+      setIsProcessing(false);
+    }
+  }, [
+    connected,
+    publicKey,
+    selectedToken,
+    tokenBalance?.hasBalance,
+    onError,
+    onStart,
+    solanaService,
+    priceId,
+    decodeTransaction,
+    signWithWallet,
+    onConfirming,
+    onSuccess
+  ]);
+  const balanceLabel = tokenBalance ? `${tokenBalance.balance.toFixed(4)} ${selectedToken?.symbol ?? ""}` : "--";
+  return {
+    isBalanceLoading,
+    isProcessing,
+    balanceLabel,
+    canPay: Boolean(
+      connected && tokenBalance?.hasBalance && !isProcessing
+    ),
+    pay
+  };
+};
+var DirectPayment = ({
+  priceId,
+  tokenAmount,
+  selectedToken,
+  supportedTokens,
+  onPaymentStart,
+  onPaymentConfirming,
+  onPaymentSuccess,
+  onPaymentError
+}) => {
+  const { isBalanceLoading, balanceLabel, canPay, isProcessing, pay } = useSolanaDirectPayment({
+    priceId,
+    tokenAmount,
+    selectedToken,
+    supportedTokens,
+    onStart: onPaymentStart,
+    onConfirming: onPaymentConfirming,
+    onSuccess: onPaymentSuccess,
+    onError: onPaymentError
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "payments-ui-panel", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "payments-ui-panel-header", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "payments-ui-panel-title", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Wallet, { className: "payments-ui-icon" }),
+        " Pay with connected wallet"
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "payments-ui-panel-description", children: "Sign the transaction directly in your Solana wallet." })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "payments-ui-panel-body", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "payments-ui-balance-row", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Available balance" }),
+        isBalanceLoading ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "payments-ui-spinner" }) : /* @__PURE__ */ jsxRuntime.jsx("strong", { children: balanceLabel })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          className: "payments-ui-button",
+          disabled: !canPay,
+          onClick: pay,
+          children: [
+            isProcessing ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "payments-ui-spinner" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Wallet, { className: "payments-ui-icon" }),
+            isProcessing ? "Processing..." : "Pay with wallet"
+          ]
+        }
+      )
+    ] })
+  ] });
+};
+var useSolanaQrPayment = (options) => {
+  const { priceId, selectedToken, onSuccess, onError } = options;
+  const solanaService = useSolanaService();
+  const [intent, setIntent] = react.useState(null);
+  const [qrDataUri, setQrDataUri] = react.useState(null);
+  const [isLoading, setIsLoading] = react.useState(false);
+  const [error, setError] = react.useState(null);
+  const [timeRemaining, setTimeRemaining] = react.useState(0);
+  const pollRef = react.useRef(null);
+  const countdownRef = react.useRef(null);
+  const clearTimers = react.useCallback(() => {
+    if (pollRef.current) {
+      clearInterval(pollRef.current);
+      pollRef.current = null;
+    }
+    if (countdownRef.current) {
+      clearInterval(countdownRef.current);
+      countdownRef.current = null;
+    }
+  }, []);
+  react.useEffect(() => {
+    return () => {
+      clearTimers();
+    };
+  }, [clearTimers]);
+  const handleError = react.useCallback(
+    (message, notifyParent = false) => {
+      clearTimers();
+      setError(message);
+      setIntent(null);
+      setQrDataUri(null);
+      setTimeRemaining(0);
+      if (notifyParent) {
+        onError(message);
+      }
+    },
+    [clearTimers, onError]
+  );
+  const handleSuccess = react.useCallback(
+    (status) => {
+      clearTimers();
+      setTimeRemaining(0);
+      setIntent(null);
+      onSuccess(status.payment_id, status.transaction || "");
+    },
+    [clearTimers, onSuccess]
+  );
+  const pollStatus = react.useCallback(
+    async (reference) => {
+      try {
+        const status = await solanaService.checkPaymentStatus(reference);
+        if (status.status === "confirmed") {
+          handleSuccess(status);
+        }
+        if (status.status === "failed") {
+          handleError(
+            status.error_message || "Payment failed. Please try again.",
+            true
+          );
+        }
+      } catch (err) {
+        console.error("Failed to poll Solana Pay status:", err);
+      }
+    },
+    [handleError, handleSuccess, solanaService]
+  );
+  const startCountdown = react.useCallback(
+    (expiresAt, reference) => {
+      const updateTime = () => {
+        const remaining = Math.max(0, Math.floor(expiresAt - Date.now() / 1e3));
+        setTimeRemaining(remaining);
+        if (remaining === 0) {
+          handleError("Payment intent expired. Please generate a new QR code.");
+        }
+      };
+      updateTime();
+      countdownRef.current = setInterval(updateTime, 1e3);
+      pollRef.current = setInterval(() => void pollStatus(reference), 4e3);
+    },
+    [handleError, pollStatus]
+  );
+  const renderQr = react.useCallback(async (qrIntent) => {
+    try {
+      const dataUri = await QRCode__default.default.toDataURL(qrIntent.url, {
+        width: 320,
+        margin: 1,
+        color: {
+          dark: "#0f1116",
+          light: "#ffffff"
+        }
+      });
+      setQrDataUri(dataUri);
+    } catch (err) {
+      console.error("Failed to render QR code:", err);
+      handleError("Unable to render QR code");
+    }
+  }, [handleError]);
+  const fetchIntent = react.useCallback(async () => {
+    if (!selectedToken) {
+      setIntent(null);
+      setQrDataUri(null);
+      setError(null);
+      clearTimers();
+      setTimeRemaining(0);
+      return;
+    }
+    try {
+      setIsLoading(true);
+      setError(null);
+      clearTimers();
+      const nextIntent = await solanaService.generateQRCode(
+        priceId,
+        selectedToken.symbol
+      );
+      setIntent(nextIntent);
+      setTimeRemaining(
+        Math.max(0, Math.floor(nextIntent.expires_at - Date.now() / 1e3))
+      );
+      await renderQr(nextIntent);
+      startCountdown(nextIntent.expires_at, nextIntent.reference);
+      pollStatus(nextIntent.reference);
+    } catch (err) {
+      console.error("Failed to generate Solana Pay QR intent:", err);
+      const message = err instanceof Error ? err.message : "Unable to create Solana Pay QR code";
+      handleError(message);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [
+    clearTimers,
+    handleError,
+    pollStatus,
+    priceId,
+    selectedToken,
+    solanaService,
+    startCountdown,
+    renderQr
+  ]);
+  react.useEffect(() => {
+    void fetchIntent();
+  }, [fetchIntent]);
+  return {
+    intent,
+    qrDataUri,
+    isLoading,
+    error,
+    timeRemaining,
+    refresh: fetchIntent
+  };
+};
+var QRCodePayment = ({
+  priceId,
+  selectedToken,
+  onPaymentError,
+  onPaymentSuccess
+}) => {
+  const { intent, qrDataUri, isLoading, error, timeRemaining, refresh } = useSolanaQrPayment({
+    priceId,
+    selectedToken,
+    onError: onPaymentError,
+    onSuccess: onPaymentSuccess
+  });
+  if (!selectedToken) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "payments-ui-empty", children: "Select a token to continue." });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "payments-ui-panel", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "payments-ui-panel-header", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "payments-ui-panel-title", children: "Scan with Solana Pay" }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "payments-ui-panel-description", children: "Use any Solana Pay compatible wallet to scan and confirm." })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          className: "payments-ui-icon-button",
+          onClick: () => refresh(),
+          disabled: isLoading,
+          children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "payments-ui-spinner" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCw, { className: "payments-ui-icon" })
+        }
+      )
+    ] }),
+    error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "payments-ui-error", children: error }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "payments-ui-qr-wrapper", children: qrDataUri ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: qrDataUri, alt: "Solana Pay QR" }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "payments-ui-empty", children: isLoading ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "payments-ui-spinner" }),
+      "Generating QR code..."
+    ] }) : "QR code unavailable" }) }),
+    intent && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "payments-ui-countdown", children: [
+      "Expires in ",
+      timeRemaining,
+      "s \xB7 ",
+      intent.token_amount,
+      " ",
+      intent.token_symbol
+    ] })
+  ] });
+};
+var PaymentStatus = ({
+  state,
+  usdAmount,
+  solAmount,
+  errorMessage,
+  transactionId,
+  onRetry,
+  onClose
+}) => {
+  if (state === "success") {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "payments-ui-status success", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCircle, { className: "payments-ui-status-icon" }),
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { children: "Payment confirmed" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
+        usdAmount.toFixed(2),
+        " USD (~",
+        solAmount.toFixed(4),
+        " SOL)."
+      ] }),
+      transactionId && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "payments-ui-status-meta", children: [
+        "Txn: ",
+        transactionId
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("button", { className: "payments-ui-button", type: "button", onClick: onClose, children: "Close" })
+    ] });
+  }
+  if (state === "error") {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "payments-ui-status error", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XCircle, { className: "payments-ui-status-icon" }),
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { children: "Payment failed" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { children: errorMessage ?? "Please try again." }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "payments-ui-status-actions", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("button", { className: "payments-ui-button", type: "button", onClick: onRetry, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RotateCcw, { className: "payments-ui-icon" }),
+          " Retry"
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("button", { className: "payments-ui-text-button", type: "button", onClick: onClose, children: "Cancel" })
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "payments-ui-status pending", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "payments-ui-spinner" }),
+    /* @__PURE__ */ jsxRuntime.jsx("h3", { children: state === "confirming" ? "Waiting for confirmations" : "Processing payment" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
+      "Paying ",
+      usdAmount.toFixed(2),
+      " USD (~",
+      solAmount.toFixed(4),
+      " SOL)."
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "payments-ui-status-meta", children: "This can take up to 60 seconds on Solana mainnet." })
+  ] });
+};
+var useSupportedTokens = () => {
+  const solanaService = useSolanaService();
+  const [tokens, setTokens] = react.useState([]);
+  const [isLoading, setIsLoading] = react.useState(false);
+  const [error, setError] = react.useState(null);
+  const [lastFetched, setLastFetched] = react.useState(null);
+  const CACHE_DURATION = 5 * 60 * 1e3;
+  const tokensRef = react.useRef(tokens);
+  const lastFetchedRef = react.useRef(lastFetched);
+  tokensRef.current = tokens;
+  lastFetchedRef.current = lastFetched;
+  const fetchSupportedTokens = react.useCallback(async () => {
+    if (tokensRef.current.length > 0 && lastFetchedRef.current && Date.now() - lastFetchedRef.current < CACHE_DURATION) {
+      return tokensRef.current;
+    }
+    setIsLoading(true);
+    setError(null);
+    try {
+      const tokens2 = await solanaService.getSupportedTokens();
+      const sortedTokens = [...tokens2].sort(
+        (a, b) => a.symbol.localeCompare(b.symbol)
+      );
+      setTokens(sortedTokens);
+      setLastFetched(Date.now());
+      return sortedTokens;
+    } catch (error2) {
+      const errorMessage = error2 instanceof Error ? error2.message : "Failed to fetch supported tokens";
+      setError(errorMessage);
+      console.error("Failed to fetch supported tokens:", error2);
+      return [];
+    } finally {
+      setIsLoading(false);
+    }
+  }, [solanaService]);
+  react.useEffect(() => {
+    if (tokens.length === 0) {
+      fetchSupportedTokens();
+    }
+  }, [tokens.length, fetchSupportedTokens]);
+  const getTokenBySymbol = react.useCallback(
+    (symbol) => {
+      return tokens.find((token) => token.symbol === symbol);
+    },
+    [tokens]
+  );
+  const getTokenByMint = react.useCallback(
+    (mintAddress) => {
+      return tokens.find((token) => token.mint === mintAddress);
+    },
+    [tokens]
+  );
+  const isTokenSupported = react.useCallback(
+    (symbol) => {
+      return tokens.some((token) => token.symbol === symbol);
+    },
+    [tokens]
+  );
+  const getUSDCToken = react.useCallback(() => {
+    return getTokenBySymbol("USDC");
+  }, [getTokenBySymbol]);
+  const getPYUSDToken = react.useCallback(() => {
+    return getTokenBySymbol("PYUSD");
+  }, [getTokenBySymbol]);
+  const getSOLToken = react.useCallback(() => {
+    return getTokenBySymbol("SOL");
+  }, [getTokenBySymbol]);
+  const getStablecoins = react.useCallback(() => {
+    return tokens.filter((token) => ["USDC", "PYUSD"].includes(token.symbol));
+  }, [tokens]);
+  const refreshTokens = react.useCallback(async () => {
+    setLastFetched(null);
+    return await fetchSupportedTokens();
+  }, [fetchSupportedTokens]);
+  const isCacheStale = react.useCallback(() => {
+    if (!lastFetched) return true;
+    return Date.now() - lastFetched > CACHE_DURATION;
+  }, [lastFetched]);
+  const getTokenDisplayInfo = react.useCallback((token) => {
+    return {
+      ...token,
+      displayName: `${token.name} (${token.symbol})`,
+      shortAddress: `${token.mint.slice(0, 4)}...${token.mint.slice(-4)}`,
+      decimalPlaces: token.decimals
+    };
+  }, []);
+  const getTokenPrice = react.useCallback(
+    (symbol) => {
+      const token = getTokenBySymbol(symbol);
+      if (!token) return 0;
+      const price = token.price ?? 0;
+      return typeof price === "number" ? price : Number(price);
+    },
+    [getTokenBySymbol]
+  );
+  const calculateTokenAmount = react.useCallback(
+    (usdAmount, tokenSymbol) => {
+      const token = getTokenBySymbol(tokenSymbol);
+      const price = getTokenPrice(tokenSymbol);
+      if (!token || price === 0) return "0";
+      const tokenAmount = usdAmount / price;
+      const tokenAmountInSmallestUnit = tokenAmount * Math.pow(10, token.decimals);
+      return Math.floor(tokenAmountInSmallestUnit).toString();
+    },
+    [getTokenBySymbol, getTokenPrice]
+  );
+  const formatTokenAmount = react.useCallback(
+    (amount, tokenSymbol) => {
+      const token = getTokenBySymbol(tokenSymbol);
+      if (!token) return "0";
+      const numericAmount = parseFloat(amount);
+      const displayAmount = numericAmount / Math.pow(10, token.decimals);
+      return displayAmount.toFixed(token.decimals <= 6 ? token.decimals : 6);
+    },
+    [getTokenBySymbol]
+  );
+  return {
+    tokens,
+    isLoading,
+    error,
+    lastFetched,
+    fetchSupportedTokens,
+    refreshTokens,
+    getTokenBySymbol,
+    getTokenByMint,
+    isTokenSupported,
+    getUSDCToken,
+    getPYUSDToken,
+    getSOLToken,
+    getStablecoins,
+    getTokenDisplayInfo,
+    getTokenPrice,
+    calculateTokenAmount,
+    formatTokenAmount,
+    isCacheStale,
+    hasTokens: tokens.length > 0,
+    tokenCount: tokens.length
+  };
+};
+var usePaymentStore = (selector) => {
+  const { store } = usePaymentContext();
+  return zustand.useStore(store, selector);
+};
+
+// src/state/selectors.ts
+var selectCheckoutFlow = (state) => ({
+  selectedMethodId: state.selectedMethodId,
+  savedStatus: state.savedPaymentStatus,
+  savedError: state.savedPaymentError,
+  newCardStatus: state.newCardStatus,
+  newCardError: state.newCardError,
+  solanaModalOpen: state.solanaModalOpen,
+  setSelectedMethod: state.setSelectedMethod,
+  setSolanaModalOpen: state.setSolanaModalOpen,
+  startSavedPayment: state.startSavedPayment,
+  completeSavedPayment: state.completeSavedPayment,
+  failSavedPayment: state.failSavedPayment,
+  startNewCardPayment: state.startNewCardPayment,
+  completeNewCardPayment: state.completeNewCardPayment,
+  failNewCardPayment: state.failNewCardPayment,
+  resetSavedPayment: state.resetSavedPayment
+});
+var selectSolanaFlow = (state) => ({
+  tab: state.solanaTab,
+  status: state.solanaStatus,
+  error: state.solanaError,
+  transactionId: state.solanaTransactionId,
+  tokenAmount: state.solanaTokenAmount,
+  selectedTokenSymbol: state.solanaSelectedToken,
+  setTab: state.setSolanaTab,
+  setTokenAmount: state.setSolanaTokenAmount,
+  setTransactionId: state.setSolanaTransactionId,
+  setSelectedTokenSymbol: state.setSolanaSelectedToken,
+  startSolanaPayment: state.startSolanaPayment,
+  confirmSolanaPayment: state.confirmSolanaPayment,
+  completeSolanaPayment: state.completeSolanaPayment,
+  failSolanaPayment: state.failSolanaPayment,
+  resetSolanaPayment: state.resetSolanaPayment
+});
+var SolanaPaymentSelector = ({
+  isOpen,
+  onClose,
+  priceId,
+  usdAmount,
+  onSuccess,
+  onError
+}) => {
+  const { connected } = walletAdapterReact.useWallet();
+  const {
+    tab: activeTab,
+    status: paymentState,
+    error: errorMessage,
+    transactionId,
+    tokenAmount,
+    selectedTokenSymbol,
+    setTab,
+    setTokenAmount,
+    setTransactionId,
+    setSelectedTokenSymbol,
+    startSolanaPayment,
+    confirmSolanaPayment,
+    completeSolanaPayment,
+    failSolanaPayment,
+    resetSolanaPayment
+  } = usePaymentStore(selectSolanaFlow);
+  const {
+    tokens,
+    isLoading: tokensLoading,
+    error: tokensError
+  } = useSupportedTokens();
+  const selectedToken = react.useMemo(() => {
+    if (!tokens.length) return null;
+    const explicit = tokens.find((token) => token.symbol === selectedTokenSymbol);
+    return explicit || tokens[0];
+  }, [tokens, selectedTokenSymbol]);
+  react.useEffect(() => {
+    if (!selectedTokenSymbol && tokens.length) {
+      const defaultToken = tokens.find((token) => token.symbol === "SOL") || tokens[0];
+      setSelectedTokenSymbol(defaultToken.symbol);
+    }
+  }, [tokens, selectedTokenSymbol, setSelectedTokenSymbol]);
+  const handlePaymentStart = react.useCallback(() => {
+    startSolanaPayment();
+  }, [startSolanaPayment]);
+  const handlePaymentConfirming = react.useCallback(() => {
+    confirmSolanaPayment();
+  }, [confirmSolanaPayment]);
+  const handlePaymentSuccess = react.useCallback(
+    (result, txId) => {
+      const resolvedTx = txId || (typeof result === "string" ? result : result.transaction_id);
+      setTransactionId(resolvedTx);
+      completeSolanaPayment(
+        typeof result === "string" ? {
+          transactionId: resolvedTx,
+          processor: "solana",
+          metadata: { source: "solana-pay" }
+        } : {
+          transactionId: result.transaction_id,
+          intentId: result.intent_id,
+          processor: "solana",
+          metadata: {
+            purchaseId: result.purchase_id,
+            amount: result.amount,
+            currency: result.currency
+          }
+        }
+      );
+      setTimeout(() => {
+        onSuccess(result);
+      }, 1500);
+    },
+    [completeSolanaPayment, onSuccess, setTransactionId]
+  );
+  const handlePaymentError = react.useCallback(
+    (error) => {
+      failSolanaPayment(error);
+      onError?.(error);
+    },
+    [failSolanaPayment, onError]
+  );
+  const handleRetry = react.useCallback(() => {
+    resetSolanaPayment();
+    setTransactionId(null);
+  }, [resetSolanaPayment, setTransactionId]);
+  const handleClose = react.useCallback(() => {
+    if (paymentState === "processing" || paymentState === "confirming") {
+      return;
+    }
+    resetSolanaPayment();
+    setTransactionId(null);
+    onClose();
+  }, [paymentState, resetSolanaPayment, setTransactionId, onClose]);
+  react.useEffect(() => {
+    if (!isOpen || !selectedToken || usdAmount === 0) {
+      setTokenAmount(0);
+      return;
+    }
+    const price = selectedToken.price ?? 0;
+    if (!price || price <= 0) {
+      setTokenAmount(0);
+      return;
+    }
+    setTokenAmount(usdAmount / price);
+  }, [isOpen, usdAmount, selectedToken, setTokenAmount]);
+  const handleTokenChange = react.useCallback(
+    (event) => {
+      setSelectedTokenSymbol(event.target.value);
+    },
+    [setSelectedTokenSymbol]
+  );
+  const wasConnectedRef = react.useRef(connected);
+  react.useEffect(() => {
+    if (connected && !wasConnectedRef.current) {
+      setTab("wallet");
+    }
+    if (!connected && wasConnectedRef.current) {
+      setTab("qr");
+    }
+    wasConnectedRef.current = connected;
+  }, [connected, setTab]);
+  const renderSelector = () => {
+    if (tokensLoading) {
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "payments-ui-empty", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "payments-ui-spinner" }),
+        " Loading tokens\u2026"
+      ] });
+    }
+    if (tokensError) {
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "payments-ui-error", children: tokensError });
+    }
+    if (!tokens.length) {
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "payments-ui-empty", children: "No payment tokens available." });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "payments-ui-token-select", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
+        "Payment token",
+        /* @__PURE__ */ jsxRuntime.jsx("select", { value: selectedTokenSymbol ?? "", onChange: handleTokenChange, children: tokens.map((token) => /* @__PURE__ */ jsxRuntime.jsxs("option", { value: token.symbol, children: [
+          token.name,
+          " (",
+          token.symbol,
+          ")"
+        ] }, token.symbol)) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "payments-ui-token-meta", children: [
+        "\u2248 ",
+        tokenAmount.toFixed(4),
+        " ",
+        selectedToken?.symbol
+      ] })
+    ] });
+  };
+  if (paymentState !== "selecting") {
+    return /* @__PURE__ */ jsxRuntime.jsx(Dialog2__namespace.Root, { open: isOpen, onOpenChange: handleClose, children: /* @__PURE__ */ jsxRuntime.jsxs(Dialog2__namespace.Portal, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Dialog2__namespace.Overlay, { className: "payments-ui-modal-overlay" }),
+      /* @__PURE__ */ jsxRuntime.jsxs(Dialog2__namespace.Content, { className: "payments-ui-modal", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "payments-ui-modal-header", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("h3", { children: "Complete your payment" }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Follow the prompts below to finish." })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Dialog2__namespace.Close,
+            {
+              className: "payments-ui-icon-button",
+              disabled: paymentState === "processing" || paymentState === "confirming",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "payments-ui-icon" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          PaymentStatus,
+          {
+            state: paymentState,
+            usdAmount,
+            solAmount: tokenAmount,
+            onRetry: handleRetry,
+            onClose: handleClose,
+            errorMessage,
+            transactionId
+          }
+        )
+      ] })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(Dialog2__namespace.Root, { open: isOpen, onOpenChange: handleClose, children: /* @__PURE__ */ jsxRuntime.jsxs(Dialog2__namespace.Portal, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Dialog2__namespace.Overlay, { className: "payments-ui-modal-overlay" }),
+    /* @__PURE__ */ jsxRuntime.jsxs(Dialog2__namespace.Content, { className: "payments-ui-modal", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "payments-ui-modal-header", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h3", { children: "Complete your payment" }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Select a token and preferred method." })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(Dialog2__namespace.Close, { className: "payments-ui-icon-button", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "payments-ui-icon" }) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "payments-ui-tab-header", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            className: activeTab === "wallet" ? "active" : "",
+            onClick: () => setTab("wallet"),
+            disabled: !connected,
+            children: "Pay with wallet"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            className: activeTab === "qr" ? "active" : "",
+            onClick: () => setTab("qr"),
+            children: "Scan QR"
+          }
+        )
+      ] }),
+      renderSelector(),
+      activeTab === "wallet" ? /* @__PURE__ */ jsxRuntime.jsx(
+        DirectPayment,
+        {
+          priceId,
+          tokenAmount,
+          selectedToken,
+          supportedTokens: tokens,
+          onPaymentStart: handlePaymentStart,
+          onPaymentConfirming: handlePaymentConfirming,
+          onPaymentSuccess: handlePaymentSuccess,
+          onPaymentError: handlePaymentError
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsx(
+        QRCodePayment,
+        {
+          priceId,
+          selectedToken,
+          onPaymentError: handlePaymentError,
+          onPaymentSuccess: handlePaymentSuccess
+        }
+      )
+    ] })
+  ] }) });
+};
+var PaymentExperience = ({
+  priceId,
+  usdAmount,
+  onNewCardPayment,
+  onSavedMethodPayment,
+  enableNewCard = true,
+  enableStoredMethods = true,
+  enableSolanaPay = true,
+  checkoutSummary,
+  onSolanaSuccess,
+  onSolanaError
+}) => {
+  const showNewCard = enableNewCard && Boolean(onNewCardPayment);
+  const showStored = enableStoredMethods;
+  const {
+    selectedMethodId,
+    savedStatus,
+    savedError,
+    newCardStatus,
+    newCardError,
+    solanaModalOpen,
+    setSelectedMethod,
+    setSolanaModalOpen,
+    startSavedPayment,
+    completeSavedPayment,
+    failSavedPayment,
+    startNewCardPayment,
+    completeNewCardPayment,
+    failNewCardPayment,
+    resetSavedPayment
+  } = usePaymentStore(selectCheckoutFlow);
+  const handleMethodSelect = (method) => {
+    setSelectedMethod(method.id);
+    resetSavedPayment();
+  };
+  const handleNewCardTokenize = async (token, billing) => {
+    if (!onNewCardPayment) return;
+    try {
+      startNewCardPayment();
+      await onNewCardPayment({ token, billing });
+      completeNewCardPayment();
+    } catch (error) {
+      const message = error instanceof Error ? error.message : "Unable to complete payment";
+      failNewCardPayment(message);
+    }
+  };
+  const handleSavedPayment = async () => {
+    if (!onSavedMethodPayment || !selectedMethodId) return;
+    try {
+      startSavedPayment();
+      await onSavedMethodPayment({
+        paymentMethodId: selectedMethodId,
+        amount: usdAmount
+      });
+      completeSavedPayment();
+    } catch (error) {
+      const message = error instanceof Error ? error.message : "Unable to complete payment with saved card";
+      failSavedPayment(message);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "payments-ui-experience", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "payments-ui-experience-header", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("h2", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CreditCard, { className: "payments-ui-icon" }),
+          " Secure checkout"
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
+          "Amount due: $",
+          usdAmount.toFixed(2)
+        ] })
+      ] }),
+      checkoutSummary && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "payments-ui-summary", children: checkoutSummary })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "payments-ui-experience-grid", children: [
+      showStored && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "payments-ui-column", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          StoredPaymentMethods,
+          {
+            selectedMethodId,
+            onMethodSelect: handleMethodSelect,
+            heading: "Saved cards",
+            description: "Use or manage your saved payment methods."
+          }
+        ),
+        onSavedMethodPayment && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            className: "payments-ui-button",
+            disabled: !selectedMethodId || savedStatus === "processing",
+            onClick: handleSavedPayment,
+            children: savedStatus === "processing" ? "Processing\u2026" : "Pay with selected card"
+          }
+        ),
+        savedError && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "payments-ui-error", children: savedError })
+      ] }),
+      showNewCard && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "payments-ui-column", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "payments-ui-panel", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "payments-ui-panel-header", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "payments-ui-panel-title", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CreditCard, { className: "payments-ui-icon" }),
+            " Pay with a new card"
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "payments-ui-panel-description", children: "Card details are tokenized via Collect.js and never hit your server." })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          CardDetailsForm,
+          {
+            visible: true,
+            submitLabel: "Pay now",
+            submitting: newCardStatus === "processing",
+            externalError: newCardError,
+            onTokenize: handleNewCardTokenize
+          }
+        )
+      ] }) })
+    ] }),
+    enableSolanaPay && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "payments-ui-solana-banner", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("h3", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sparkles, { className: "payments-ui-icon" }),
+          " Prefer Solana Pay?"
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Use a Solana wallet or QR code for instant settlement." })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          className: "payments-ui-button",
+          onClick: () => setSolanaModalOpen(true),
+          children: "Open Solana Pay"
+        }
+      )
+    ] }),
+    enableSolanaPay && /* @__PURE__ */ jsxRuntime.jsx(
+      SolanaPaymentSelector,
+      {
+        isOpen: solanaModalOpen,
+        onClose: () => setSolanaModalOpen(false),
+        priceId,
+        usdAmount,
+        onSuccess: (result) => {
+          setSolanaModalOpen(false);
+          onSolanaSuccess?.(result);
+        },
+        onError: onSolanaError
+      }
+    )
+  ] });
+};
+var useTokenBalance = (tokens) => {
+  const { publicKey } = walletAdapterReact.useWallet();
+  const { connection } = walletAdapterReact.useConnection();
+  const [balances, setBalances] = react.useState([]);
+  const [isLoading, setIsLoading] = react.useState(false);
+  const [error, setError] = react.useState(null);
+  const fetchTokenBalance = react.useCallback(
+    async (token, walletAddress) => {
+      try {
+        const mintPublicKey = new web3_js.PublicKey(token.mint);
+        const associatedTokenAddress = await splToken.getAssociatedTokenAddress(
+          mintPublicKey,
+          walletAddress
+        );
+        try {
+          const tokenAccount = await splToken.getAccount(
+            connection,
+            associatedTokenAddress
+          );
+          const balance = Number(tokenAccount.amount);
+          const uiAmount = balance / Math.pow(10, token.decimals);
+          return {
+            token,
+            balance,
+            uiAmount,
+            hasBalance: balance > 0
+          };
+        } catch (accountError) {
+          return {
+            token,
+            balance: 0,
+            uiAmount: 0,
+            hasBalance: false
+          };
+        }
+      } catch (error2) {
+        console.error(`Failed to fetch balance for ${token.symbol}:`, error2);
+        return {
+          token,
+          balance: 0,
+          uiAmount: 0,
+          hasBalance: false
+        };
+      }
+    },
+    [connection]
+  );
+  const tokensKey = react.useMemo(() => tokens.map((t) => t.mint).join(","), [tokens]);
+  react.useEffect(() => {
+    if (!publicKey || tokens.length === 0) {
+      setBalances([]);
+      return;
+    }
+    setIsLoading(true);
+    setError(null);
+    const fetchAllBalances = async () => {
+      try {
+        const balancePromises = tokens.map(
+          (token) => fetchTokenBalance(token, publicKey)
+        );
+        const tokenBalances = await Promise.all(balancePromises);
+        setBalances(tokenBalances);
+      } catch (error2) {
+        const errorMessage = error2 instanceof Error ? error2.message : "Failed to fetch token balances";
+        setError(errorMessage);
+        console.error("Failed to fetch token balances:", error2);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    fetchAllBalances();
+  }, [publicKey, tokensKey, fetchTokenBalance]);
+  const getTokenBalance = react.useCallback(
+    (tokenSymbol) => {
+      return balances.find((balance) => balance.token.symbol === tokenSymbol);
+    },
+    [balances]
+  );
+  const hasSufficientBalance2 = react.useCallback(
+    (tokenSymbol, requiredAmount) => {
+      const balance = getTokenBalance(tokenSymbol);
+      return balance ? balance.uiAmount >= requiredAmount : false;
+    },
+    [getTokenBalance]
+  );
+  const getFormattedBalance = react.useCallback(
+    (tokenSymbol) => {
+      const balance = getTokenBalance(tokenSymbol);
+      if (!balance) return "0.00";
+      if (balance.uiAmount < 0.01) {
+        return balance.uiAmount.toFixed(6);
+      } else if (balance.uiAmount < 1) {
+        return balance.uiAmount.toFixed(4);
+      } else {
+        return balance.uiAmount.toFixed(2);
+      }
+    },
+    [getTokenBalance]
+  );
+  const refreshBalances = react.useCallback(async () => {
+    if (!publicKey || tokens.length === 0) {
+      setBalances([]);
+      return;
+    }
+    setIsLoading(true);
+    setError(null);
+    try {
+      const balancePromises = tokens.map(
+        (token) => fetchTokenBalance(token, publicKey)
+      );
+      const tokenBalances = await Promise.all(balancePromises);
+      setBalances(tokenBalances);
+    } catch (error2) {
+      const errorMessage = error2 instanceof Error ? error2.message : "Failed to fetch token balances";
+      setError(errorMessage);
+      console.error("Failed to fetch token balances:", error2);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [publicKey, tokens, fetchTokenBalance]);
+  const getTotalValue = react.useCallback(
+    (priceData) => {
+      if (!priceData) return 0;
+      return balances.reduce((total, balance) => {
+        const price = priceData[balance.token.symbol] || 0;
+        return total + balance.uiAmount * price;
+      }, 0);
+    },
+    [balances]
+  );
+  const sortedBalances = [...balances].sort((a, b) => b.uiAmount - a.uiAmount);
+  const positiveBalances = balances.filter((balance) => balance.hasBalance);
+  return {
+    balances: sortedBalances,
+    positiveBalances,
+    isLoading,
+    error,
+    refreshBalances,
+    getTokenBalance,
+    hasSufficientBalance: hasSufficientBalance2,
+    getFormattedBalance,
+    getTotalValue,
+    hasAnyBalance: positiveBalances.length > 0,
+    isConnected: !!publicKey
+  };
+};
+var useDirectWalletPayment = () => {
+  const { publicKey, signTransaction, connected } = walletAdapterReact.useWallet();
+  const solanaService = useSolanaService();
+  const [paymentState, setPaymentState] = react.useState({
+    loading: false,
+    error: null,
+    success: false,
+    transactionId: null
+  });
+  const resetPayment = react.useCallback(() => {
+    setPaymentState({
+      loading: false,
+      error: null,
+      success: false,
+      transactionId: null
+    });
+  }, []);
+  const payWithWallet = react.useCallback(
+    async (token, priceId) => {
+      if (!connected || !publicKey || !signTransaction) {
+        setPaymentState((prev) => ({
+          ...prev,
+          error: "Wallet not connected. Please connect your wallet first."
+        }));
+        return;
+      }
+      setPaymentState({
+        loading: true,
+        error: null,
+        success: false,
+        transactionId: null
+      });
+      try {
+        console.log("Generating payment transaction...", {
+          token: token.symbol,
+          priceId
+        });
+        const paymentData = await solanaService.generatePayment(
+          priceId,
+          token.symbol,
+          publicKey.toBase58()
+        );
+        const transactionBuffer = buffer.Buffer.from(paymentData.transaction, "base64");
+        const transaction = web3_js.Transaction.from(transactionBuffer);
+        console.log("Requesting wallet signature...");
+        const signedTransaction = await signTransaction(transaction);
+        const signedTransactionBase64 = signedTransaction.serialize().toString("base64");
+        console.log("Submitting signed transaction...");
+        const submitResult = await solanaService.submitPayment(
+          signedTransactionBase64,
+          priceId,
+          paymentData.intent_id
+        );
+        setPaymentState({
+          loading: false,
+          error: null,
+          success: true,
+          transactionId: submitResult.transaction_id
+        });
+        console.log("Payment successful!", submitResult);
+      } catch (err) {
+        console.error("Payment failed:", err);
+        let errorMessage = "Payment failed. Please try again.";
+        const message = err instanceof Error ? err.message : typeof err === "string" ? err : "";
+        if (message.includes("User rejected")) {
+          errorMessage = "Payment cancelled by user.";
+        } else if (/insufficient\s+funds/i.test(message)) {
+          errorMessage = `Insufficient ${token.symbol} balance.`;
+        } else if (/network/i.test(message)) {
+          errorMessage = "Network error. Please check your connection.";
+        } else if (message) {
+          errorMessage = message;
+        }
+        setPaymentState({
+          loading: false,
+          error: errorMessage,
+          success: false,
+          transactionId: null
+        });
+      }
+    },
+    [connected, publicKey, signTransaction, solanaService]
+  );
+  return {
+    paymentState,
+    payWithWallet,
+    resetPayment
+  };
+};
+var usePaymentStatus = (options = {}) => {
+  const { connection } = walletAdapterReact.useConnection();
+  const { services } = usePaymentContext();
+  const billingApi = services.billingApi;
+  const {
+    transactionId,
+    purchaseId,
+    onConfirmed,
+    onFailed,
+    maxRetries = 30,
+    // 5 minutes with 10s intervals
+    retryInterval = 1e4
+    // 10 seconds
+  } = options;
+  const [status, setStatus] = react.useState(null);
+  const [paymentStatus, setPaymentStatus] = react.useState(null);
+  const [isLoading, setIsLoading] = react.useState(false);
+  const [error, setError] = react.useState(null);
+  const [retryCount, setRetryCount] = react.useState(0);
+  const intervalRef = react.useRef(null);
+  const isMonitoringRef = react.useRef(false);
+  react.useEffect(() => {
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+      }
+    };
+  }, []);
+  const checkTransactionStatus = react.useCallback(
+    async (signature) => {
+      try {
+        const statusResponse = await connection.getSignatureStatus(signature, {
+          searchTransactionHistory: true
+        });
+        if (statusResponse.value === null) {
+          return {
+            signature,
+            confirmationStatus: "processed",
+            confirmations: 0,
+            error: "Transaction not found"
+          };
+        }
+        const { confirmationStatus, confirmations, slot, err } = statusResponse.value;
+        let blockTime;
+        if (slot) {
+          try {
+            blockTime = await connection.getBlockTime(slot) || void 0;
+          } catch (error2) {
+          }
+        }
+        return {
+          signature,
+          confirmationStatus: err ? "failed" : confirmationStatus || "processed",
+          confirmations: confirmations || 0,
+          slot,
+          blockTime,
+          error: err ? `Transaction failed: ${err}` : void 0
+        };
+      } catch (error2) {
+        console.error("Failed to check transaction status:", error2);
+        return {
+          signature,
+          confirmationStatus: "failed",
+          confirmations: 0,
+          error: error2 instanceof Error ? error2.message : "Failed to check transaction status"
+        };
+      }
+    },
+    [connection]
+  );
+  const checkPaymentStatus = react.useCallback(
+    async (id) => {
+      try {
+        const data = await billingApi.get(
+          `/payment/status/${id}`
+        );
+        return data;
+      } catch (error2) {
+        if (error2?.status === 404) {
+          return null;
+        }
+        console.error("Failed to check payment status:", error2);
+        return null;
+      }
+    },
+    [billingApi]
+  );
+  const startMonitoring = react.useCallback(async () => {
+    if (isMonitoringRef.current || !transactionId && !purchaseId) {
+      return;
+    }
+    isMonitoringRef.current = true;
+    setIsLoading(true);
+    setError(null);
+    setRetryCount(0);
+    const monitor = async () => {
+      try {
+        let currentStatus = null;
+        let currentPaymentStatus = null;
+        if (transactionId) {
+          currentStatus = await checkTransactionStatus(transactionId);
+          setStatus(currentStatus);
+        }
+        if (purchaseId) {
+          currentPaymentStatus = await checkPaymentStatus(purchaseId);
+          setPaymentStatus(currentPaymentStatus);
+        }
+        const isBlockchainConfirmed = currentStatus?.confirmationStatus === "finalized" || currentStatus?.confirmationStatus === "confirmed";
+        const isBackendConfirmed = currentPaymentStatus?.status === "confirmed";
+        const isBlockchainFailed = currentStatus?.confirmationStatus === "failed" || currentStatus?.error;
+        const isBackendFailed = currentPaymentStatus?.status === "failed";
+        if (isBlockchainConfirmed || isBackendConfirmed) {
+          if (intervalRef.current) {
+            clearInterval(intervalRef.current);
+          }
+          isMonitoringRef.current = false;
+          setIsLoading(false);
+          onConfirmed?.();
+          return;
+        }
+        if (isBlockchainFailed || isBackendFailed) {
+          if (intervalRef.current) {
+            clearInterval(intervalRef.current);
+          }
+          isMonitoringRef.current = false;
+          setIsLoading(false);
+          const errorMessage = currentStatus?.error || "Payment failed";
+          setError(errorMessage);
+          onFailed?.(errorMessage);
+          return;
+        }
+        setRetryCount((prev) => prev + 1);
+        if (retryCount >= maxRetries) {
+          if (intervalRef.current) {
+            clearInterval(intervalRef.current);
+          }
+          isMonitoringRef.current = false;
+          setIsLoading(false);
+          const timeoutError = "Payment confirmation timeout - please check your transaction manually";
+          setError(timeoutError);
+          onFailed?.(timeoutError);
+          return;
+        }
+      } catch (error2) {
+        console.error("Error monitoring payment:", error2);
+        setRetryCount((prev) => prev + 1);
+        if (retryCount >= maxRetries) {
+          if (intervalRef.current) {
+            clearInterval(intervalRef.current);
+          }
+          isMonitoringRef.current = false;
+          setIsLoading(false);
+          const monitorError = "Failed to monitor payment status";
+          setError(monitorError);
+          onFailed?.(monitorError);
+        }
+      }
+    };
+    await monitor();
+    intervalRef.current = setInterval(monitor, retryInterval);
+  }, [
+    transactionId,
+    purchaseId,
+    checkTransactionStatus,
+    checkPaymentStatus,
+    onConfirmed,
+    onFailed,
+    maxRetries,
+    retryInterval,
+    retryCount
+  ]);
+  const stopMonitoring = react.useCallback(() => {
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+    }
+    isMonitoringRef.current = false;
+    setIsLoading(false);
+  }, []);
+  const checkStatus = react.useCallback(async () => {
+    if (!transactionId && !purchaseId) return;
+    setIsLoading(true);
+    setError(null);
+    try {
+      if (transactionId) {
+        const txStatus = await checkTransactionStatus(transactionId);
+        setStatus(txStatus);
+      }
+      if (purchaseId) {
+        const payStatus = await checkPaymentStatus(purchaseId);
+        setPaymentStatus(payStatus);
+      }
+    } catch (error2) {
+      const errorMessage = error2 instanceof Error ? error2.message : "Failed to check status";
+      setError(errorMessage);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [transactionId, purchaseId, checkTransactionStatus, checkPaymentStatus]);
+  react.useEffect(() => {
+    if ((transactionId || purchaseId) && !isMonitoringRef.current) {
+      startMonitoring();
+    }
+    return () => {
+      stopMonitoring();
+    };
+  }, [transactionId, purchaseId, startMonitoring, stopMonitoring]);
+  const getConfirmationStatus = react.useCallback(() => {
+    if (paymentStatus?.status === "confirmed") return "confirmed";
+    if (paymentStatus?.status === "failed") return "failed";
+    if (status?.confirmationStatus === "finalized") return "confirmed";
+    if (status?.confirmationStatus === "confirmed") return "confirmed";
+    if (status?.confirmationStatus === "failed" || status?.error)
+      return "failed";
+    return "pending";
+  }, [status, paymentStatus]);
+  const getSolscanUrl = react.useCallback(
+    (signature) => {
+      const txId = signature || transactionId;
+      if (!txId) return null;
+      return `https://solscan.io/tx/${txId}`;
+    },
+    [transactionId]
+  );
+  return {
+    status,
+    paymentStatus,
+    isLoading,
+    error,
+    retryCount,
+    maxRetries,
+    isMonitoring: isMonitoringRef.current,
+    confirmationStatus: getConfirmationStatus(),
+    startMonitoring,
+    stopMonitoring,
+    checkStatus,
+    getSolscanUrl,
+    isConfirmed: getConfirmationStatus() === "confirmed",
+    isFailed: getConfirmationStatus() === "failed",
+    isPending: getConfirmationStatus() === "pending"
+  };
+};
+var useSubscriptionActions = () => {
+  const { services } = usePaymentContext();
+  const ensurePrice = (priceId) => {
+    if (!priceId) {
+      throw new Error("payments-ui: priceId is required for subscription actions");
+    }
+    return priceId;
+  };
+  const subscribeWithCard = react.useCallback(
+    async ({
+      priceId,
+      processor = "nmi",
+      provider,
+      paymentToken,
+      billing
+    }) => {
+      const payload = {
+        priceId: ensurePrice(priceId),
+        paymentToken,
+        processor,
+        provider,
+        email: billing.email,
+        firstName: billing.firstName,
+        lastName: billing.lastName,
+        address1: billing.address1,
+        city: billing.city,
+        state: billing.stateRegion,
+        zipCode: billing.postalCode,
+        country: billing.country
+      };
+      return services.subscriptions.subscribe("nmi", payload);
+    },
+    [services]
+  );
+  const subscribeWithSavedMethod = react.useCallback(
+    async ({
+      priceId,
+      processor = "nmi",
+      provider,
+      paymentMethodId,
+      email
+    }) => {
+      const payload = {
+        priceId: ensurePrice(priceId),
+        paymentMethodId,
+        processor,
+        provider,
+        email
+      };
+      return services.subscriptions.subscribe("nmi", payload);
+    },
+    [services]
+  );
+  const subscribeWithCCBill = react.useCallback(
+    async ({
+      priceId,
+      email,
+      firstName,
+      lastName,
+      zipCode,
+      country,
+      processor = "ccbill"
+    }) => {
+      const payload = {
+        priceId: ensurePrice(priceId),
+        email,
+        firstName,
+        lastName,
+        zipCode,
+        country,
+        processor
+      };
+      return services.subscriptions.subscribe("ccbill", payload);
+    },
+    [services]
+  );
+  const generateFlexFormUrl = react.useCallback(
+    async ({
+      priceId,
+      firstName,
+      lastName,
+      address1,
+      city,
+      state,
+      zipCode,
+      country
+    }) => {
+      const payload = {
+        price_id: ensurePrice(priceId),
+        first_name: firstName,
+        last_name: lastName,
+        address1,
+        city,
+        state,
+        zip_code: zipCode,
+        country
+      };
+      return services.subscriptions.generateFlexFormUrl(payload);
+    },
+    [services]
+  );
+  return {
+    subscribeWithCard,
+    subscribeWithSavedMethod,
+    subscribeWithCCBill,
+    generateFlexFormUrl
+  };
+};
+
+exports.CardDetailsForm = CardDetailsForm;
+exports.CardPaymentService = CardPaymentService;
+exports.PaymentApp = PaymentApp;
+exports.PaymentExperience = PaymentExperience;
+exports.PaymentMethodService = PaymentMethodService;
+exports.PaymentProvider = PaymentProvider;
+exports.SolanaPaymentSelector = SolanaPaymentSelector;
+exports.SolanaPaymentService = SolanaPaymentService;
+exports.StoredPaymentMethods = StoredPaymentMethods;
+exports.SubscriptionService = SubscriptionService;
+exports.TokenCatalog = TokenCatalog;
+exports.WalletGateway = WalletGateway;
+exports.createPaymentStore = createPaymentStore;
+exports.useDirectWalletPayment = useDirectWalletPayment;
+exports.usePaymentContext = usePaymentContext;
+exports.usePaymentMethodService = usePaymentMethodService;
+exports.usePaymentMethods = usePaymentMethods;
+exports.usePaymentStatus = usePaymentStatus;
+exports.usePaymentStore = usePaymentStore;
+exports.useSolanaDirectPayment = useSolanaDirectPayment;
+exports.useSolanaQrPayment = useSolanaQrPayment;
+exports.useSolanaService = useSolanaService;
+exports.useSubscriptionActions = useSubscriptionActions;
+exports.useSupportedTokens = useSupportedTokens;
+exports.useTokenBalance = useTokenBalance;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map