@doujins/payments-ui 0.0.15 → 0.1.0

package/dist/index.js

@@ -1,31 +1,31 @@
-import * as React3 from 'react';
-import { createContext, useMemo, useState, useEffect, useCallback, useRef, useContext } from 'react';
-import { QueryClient, useQueryClient, useQuery, useMutation, QueryClientProvider, useInfiniteQuery } from '@tanstack/react-query';
-import { useWallet, ConnectionProvider, WalletProvider, useConnection } from '@solana/wallet-adapter-react';
-import { WalletModalProvider, WalletMultiButton } from '@solana/wallet-adapter-react-ui';
+import * as React17 from 'react';
+import React17__default, { createContext, useMemo, useState, useEffect, useCallback, useRef, useContext } from 'react';
+import { useQueryClient, useQuery, useMutation, QueryClient, QueryClientProvider, useInfiniteQuery } from '@tanstack/react-query';
+import { ConnectionProvider, WalletProvider, useWallet, useConnection } from '@solana/wallet-adapter-react';
+import { WalletModalProvider } from '@solana/wallet-adapter-react-ui';
 import '@solana/wallet-adapter-react-ui/styles.css';
-import { Connection, VersionedTransaction, Transaction, clusterApiUrl, PublicKey, LAMPORTS_PER_SOL } from '@solana/web3.js';
+import { WalletAdapterNetwork } from '@solana/wallet-adapter-base';
+import { clusterApiUrl, PublicKey } from '@solana/web3.js';
 import { PhantomWalletAdapter } from '@solana/wallet-adapter-phantom';
 import { SolflareWalletAdapter } from '@solana/wallet-adapter-solflare';
 import { TrustWalletAdapter } from '@solana/wallet-adapter-trust';
 import { CoinbaseWalletAdapter } from '@solana/wallet-adapter-coinbase';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
-import { X, ChevronDown, ChevronUp, Check, User, MapPin, Loader2, CreditCard, WalletCards, Trash2, ArrowLeft, CheckCircle, AlertCircle, Wallet, Ban, TriangleAlert, Star, Copy, ExternalLink, Shield, UserRound, Calendar, KeyRound, Sparkles, XCircle, RotateCcw, RefreshCw } from 'lucide-react';
+import { X, ChevronDown, ChevronUp, Check, User, MapPin, Loader2, CreditCard, WalletCards, Trash2, ArrowLeft, CheckCircle, AlertCircle, Wallet, Ban, TriangleAlert, Shield, UserRound, Calendar, KeyRound, Sparkles, XCircle, RotateCcw, RefreshCw } from 'lucide-react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import countryList from 'country-list';
+import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
 import * as LabelPrimitive from '@radix-ui/react-label';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
-import { Buffer } from 'buffer';
-import { getAssociatedTokenAddress, getAccount, TOKEN_PROGRAM_ID } from '@solana/spl-token';
 import QRCode from 'qrcode';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
-import bs58 from 'bs58';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { getAssociatedTokenAddress, getAccount } from '@solana/spl-token';
 
 // src/context/PaymentContext.tsx
 
@@ -57,531 +57,297 @@ var loadCollectJs = (tokenizationKey) => {
   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)));
-    });
+// src/lib/client.ts
+var ClientApiError = class extends Error {
+  constructor(message, status, body, request) {
+    super(message);
+    this.name = "ClientApiError";
+    this.status = status;
+    this.body = body;
+    this.request = request;
   }
-  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()}`;
-    }
+};
+var ensureFetch = (fetchImpl) => {
+  if (fetchImpl) return fetchImpl;
+  if (typeof globalThis.fetch === "function") {
+    return globalThis.fetch.bind(globalThis);
   }
-  return resolved;
+  throw new Error("payments-ui: global fetch is not available");
 };
-var createApiClient = (paymentConfig, baseUrl, fetcher, resolveAuthToken) => {
+var createClient = (config) => {
+  const fetchImpl = ensureFetch(config.fetch);
+  const normalizeBase = (value) => value.replace(/\/$/, "");
+  const normalizePath = (value, fallback = "/v1") => {
+    if (!value) return fallback;
+    return value.startsWith("/") ? value : `/${value}`;
+  };
+  const billingBaseUrl = normalizeBase(config.billingBaseUrl);
+  const accountBaseUrl = normalizeBase(
+    config.accountBaseUrl ?? config.billingBaseUrl
+  );
+  const billingBasePath = normalizePath(config.billingBasePath ?? "/v1");
+  const accountBasePath = normalizePath(
+    config.accountBasePath ?? config.billingBasePath ?? "/v1"
+  );
+  const defaultHeaders = config.defaultHeaders ?? {};
+  const resolveAuthToken = async () => {
+    if (!config.getAuthToken) return null;
+    try {
+      const result = config.getAuthToken();
+      return result instanceof Promise ? await result : result;
+    } catch (error) {
+      console.warn("payments-ui: failed to resolve auth token", error);
+      return null;
+    }
+  };
+  const buildUrl = (path, query, target) => {
+    const normalizedPath = path.startsWith("/") ? path : `/${path}`;
+    const basePath = target === "account" ? accountBasePath : billingBasePath;
+    const baseUrl = target === "account" ? accountBaseUrl : billingBaseUrl;
+    const needsBasePrefix = !normalizedPath.startsWith(basePath);
+    const finalPath = needsBasePrefix ? `${basePath}${normalizedPath}` : normalizedPath;
+    const url = new URL(`${baseUrl}${finalPath}`);
+    if (query) {
+      Object.entries(query).forEach(([key, value]) => {
+        if (value === void 0 || value === null) return;
+        url.searchParams.append(key, String(value));
+      });
+    }
+    return url.toString();
+  };
   const request = async (method, path, options) => {
-    const url = buildUrl(baseUrl, path, options ?? {});
+    const target = options?.target ?? "billing";
+    const url = buildUrl(path, options?.query, target);
     const headers = {
       "Content-Type": "application/json",
-      ...paymentConfig.defaultHeaders ?? {},
+      ...defaultHeaders,
       ...options?.headers ?? {}
     };
     const token = await resolveAuthToken();
     if (token) {
       headers.Authorization = `Bearer ${token}`;
     }
-    try {
-      const response = await fetcher(url, {
-        method,
-        headers,
-        body: options?.body ? JSON.stringify(options.body) : void 0
-      });
-      if (!response.ok) {
-        const message = await response.text();
-        console.error("payments-ui: API request failed", {
-          url,
-          method,
-          status: response.status,
-          message
-        });
-        throw new Error(message || `Request failed with status ${response.status}`);
-      }
-      if (response.status === 204) {
-        return void 0;
-      }
-      const data = await response.json();
-      return data;
-    } catch (error) {
-      console.error("payments-ui: API request error", { url, method, error });
-      throw error;
-    }
-  };
-  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 } : {}
-      }
+    const response = await fetchImpl(url, {
+      method,
+      headers,
+      body: options?.body ? JSON.stringify(options.body) : void 0
     });
-  }
-  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 (!response.ok) {
+      let payload = null;
+      try {
+        payload = await response.json();
+      } catch {
+        payload = await response.text();
+      }
+      throw new ClientApiError(
+        payload && typeof payload === "object" && "message" in payload ? String(payload.message) : response.statusText || "Request failed",
+        response.status,
+        payload,
+        { method, url }
+      );
     }
-    if (typeof this.adapter.signTransaction === "function") {
-      return this.adapter.signTransaction(transaction);
+    if (response.status === 204) {
+      return void 0;
     }
-    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
+    return await response.json();
+  };
+  const normalizeList = (payload) => {
+    const data = payload.data ?? [];
+    const total = payload.total ?? payload.total_items ?? data.length;
+    const limit = payload.limit ?? data.length;
+    const offset = payload.offset ?? 0;
+    const hasMore = typeof payload.has_more === "boolean" ? payload.has_more : offset + data.length < total;
+    return { data, total, limit, offset, hasMore };
+  };
+  return {
+    async listPaymentMethods(params) {
+      const result = await request(
+        "GET",
+        "/me/payment-methods",
+        {
+          query: {
+            limit: params?.limit,
+            offset: params?.offset,
+            include_inactive: params?.includeInactive
+          },
+          target: "account"
+        }
+      );
+      return normalizeList(result);
+    },
+    createPaymentMethod(payload) {
+      return request("POST", "/me/payment-methods", {
+        body: payload,
+        target: "account"
+      });
+    },
+    updatePaymentMethod(id, payload) {
+      return request("PUT", `/me/payment-methods/${id}`, {
+        body: payload,
+        target: "account"
+      });
+    },
+    deletePaymentMethod(id) {
+      return request("DELETE", `/me/payment-methods/${id}`, {
+        target: "account"
+      });
+    },
+    activatePaymentMethod(id) {
+      return request("PUT", `/me/payment-methods/${id}/activate`, {
+        target: "account"
+      });
+    },
+    checkout(payload) {
+      return request("POST", "/me/checkout", {
+        body: payload
+      });
+    },
+    cancelSubscription(feedback) {
+      return request("POST", "/me/subscriptions/cancel", {
+        body: feedback ? { feedback } : void 0
+      });
+    },
+    async getPaymentHistory(params) {
+      const result = await request("GET", "/me/payments", {
+        query: {
+          limit: params?.limit,
+          offset: params?.offset,
+          type: params?.type
+        }
+      });
+      return normalizeList(result);
+    },
+    async getSolanaTokens() {
+      const response = await request(
+        "GET",
+        "/solana/tokens"
+      );
+      if (Array.isArray(response)) {
+        return response;
       }
-    );
-  }
-  async generateFlexFormUrl(payload) {
-    return this.api.post(`/subscriptions/ccbill/flexform-url`, {
-      body: { ...payload }
-    });
-  }
-  async getPaymentHistory(params) {
-    const limit = params?.limit ?? 10;
-    const offset = params?.offset ?? 0;
-    const query = {
-      limit: String(limit),
-      offset: String(offset)
-    };
-    if (params?.type) {
-      query.type = params.type;
-    }
-    const response = await this.api.get("/subscriptions/purchases", {
-      query
-    });
-    const totalItems = response?.total_items ?? 0;
-    const pageSize = limit;
-    const pageNumber = response?.page ?? (pageSize > 0 ? Math.floor(offset / pageSize) + 1 : 1);
-    const totalPages = response?.total_pages ?? (pageSize > 0 ? Math.ceil(totalItems / pageSize) : void 0);
-    return {
-      data: response?.data ?? [],
-      total_items: totalItems,
-      limit,
-      offset,
-      page: pageNumber,
-      page_size: pageSize,
-      total_pages: totalPages
-    };
-  }
-  async cancelSubscription(feedback) {
-    return this.api.post("/subscriptions/cancel", {
-      body: feedback ? { feedback } : void 0
-    });
-  }
-  serializePayload(platform, payload) {
-    if (platform === "nmi") {
-      const data2 = payload;
-      if (!data2.priceId) {
-        throw new Error("payments-ui: priceId is required for NMI subscriptions");
+      return response.tokens ?? [];
+    },
+    async createSolanaPayIntent(payload) {
+      const response = await request("POST", "/solana/pay", {
+        body: {
+          price_id: payload.priceId,
+          token: payload.token,
+          ...payload.userWallet ? { user_wallet: payload.userWallet } : {}
+        }
+      });
+      return response;
+    },
+    async getSolanaPayStatus(reference) {
+      const response = await request(
+        "GET",
+        `/solana/pay/${reference}`
+      );
+      if (response.status === "confirmed") {
+        return {
+          status: "confirmed",
+          payment_id: response.payment_id ?? "",
+          transaction: response.signature ?? null,
+          intent_id: response.intent_id
+        };
       }
-      if (!data2.paymentToken && !data2.paymentMethodId) {
-        throw new Error(
-          "payments-ui: paymentToken or paymentMethodId is required for NMI subscriptions"
-        );
+      if (response.status === "expired") {
+        return {
+          status: "failed",
+          payment_id: response.payment_id ?? "",
+          transaction: response.signature ?? null,
+          intent_id: response.intent_id,
+          error_message: "Payment intent expired"
+        };
       }
-      const body = {
-        price_id: data2.priceId,
-        processor: data2.processor ?? "nmi",
-        provider: data2.provider
+      return {
+        status: "pending",
+        payment_id: response.payment_id ?? "",
+        transaction: response.signature ?? null,
+        intent_id: response.intent_id
       };
-      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/services/SolanaWalletService.ts
-var SolanaWalletService = class {
-  constructor(api) {
-    this.api = api;
-  }
-  async list() {
-    const response = await this.api.get(
-      "/wallet/solana"
-    );
-    if (Array.isArray(response)) {
-      return response;
-    }
-    if ("wallets" in response && Array.isArray(response.wallets)) {
-      return response.wallets;
-    }
-    if ("wallet" in response) {
-      return response.wallet ? [response.wallet] : [];
-    }
-    if ("address" in response) {
-      return [response];
-    }
-    return [];
-  }
-  async requestChallenge(wallet) {
-    return this.api.post("/wallet/solana/challenge", {
-      body: { wallet }
-    });
-  }
-  async verify(wallet, signature, nonce) {
-    const body = { wallet, signature };
-    if (nonce) {
-      body.nonce = nonce;
-    }
-    return this.api.post("/wallet/solana/verify", { body });
-  }
-  async remove(wallet) {
-    await this.api.delete("/wallet/solana", {
-      query: { wallet }
-    });
-  }
-};
-
-// src/core/PaymentApp.ts
-var PaymentApp = class {
-  constructor(options) {
-    this.resolveAuthToken = async () => {
-      if (!this.config.getAuthToken) {
-        return null;
-      }
+    },
+    async getPaymentStatus(id) {
       try {
-        const result = this.config.getAuthToken();
-        if (result instanceof Promise) {
-          return await result ?? null;
-        }
-        return result ?? null;
+        return await request("GET", `/payment/status/${id}`);
       } catch (error) {
-        console.warn("payments-ui: failed to resolve auth token", error);
-        return null;
+        if (error instanceof ClientApiError && error.status === 404) {
+          return null;
+        }
+        throw error;
       }
-    };
-    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 solanaWallets = new SolanaWalletService(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,
-      solanaWallets,
-      tokenCatalog,
-      walletGateway,
-      subscriptions,
-      billingApi,
-      accountApi
-    };
-  }
-};
-
-// src/runtime/PaymentsRuntime.ts
-var createQueryClient = () => new QueryClient({
-  defaultOptions: {
-    queries: {
-      staleTime: 3e4,
-      gcTime: 5 * 6e4,
-      refetchOnWindowFocus: false,
-      retry: 1
-    },
-    mutations: {
-      retry: 1
     }
-  }
-});
-var PaymentsRuntime = class {
-  constructor(config) {
-    this.config = config;
-    this.app = new PaymentApp({ config });
-    this.services = this.app.getServices();
-    this.queryClient = createQueryClient();
-  }
+  };
 };
-var createPaymentsRuntime = (config) => new PaymentsRuntime(config);
-
-// node_modules/@solana/wallet-adapter-base/lib/esm/types.js
-var WalletAdapterNetwork;
-(function(WalletAdapterNetwork2) {
-  WalletAdapterNetwork2["Mainnet"] = "mainnet-beta";
-  WalletAdapterNetwork2["Testnet"] = "testnet";
-  WalletAdapterNetwork2["Devnet"] = "devnet";
-})(WalletAdapterNetwork || (WalletAdapterNetwork = {}));
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
 var Dialog = DialogPrimitive.Root;
-var DialogPortal = ({ className, ...props }) => /* @__PURE__ */ jsx(DialogPrimitive.Portal, { className: cn(className), ...props });
-DialogPortal.displayName = DialogPrimitive.Portal.displayName;
-var DialogOverlay = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var DialogPortal = DialogPrimitive.Portal;
+var DialogOverlay = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DialogPrimitive.Overlay,
   {
     ref,
     className: cn(
-      "fixed inset-0 z-50 bg-black/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in",
+      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
     ),
     ...props
   }
 ));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-var DialogContent = React3.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(DialogPortal, { children: [
+var DialogContent = React17.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(DialogPortal, { children: /* @__PURE__ */ jsxs("div", { className: "payments-ui-portal", children: [
   /* @__PURE__ */ jsx(DialogOverlay, {}),
   /* @__PURE__ */ jsxs(
     DialogPrimitive.Content,
     {
       ref,
       className: cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
+        "fixed left-[50%] top-[50%] z-50 grid w-[calc(100vw-40px)] sm:w-[calc(100vw-60px)] max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-white/10 bg-[#161b22] text-white p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-lg",
         className
       ),
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsxs(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none", children: [
-          /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }),
+        /* @__PURE__ */ jsxs(DialogPrimitive.Close, { className: "absolute right-4 top-5 rounded-full bg-white/10 p-1 opacity-70 transition-opacity hover:opacity-100 hover:bg-white/20 focus:outline-none disabled:pointer-events-none", children: [
+          /* @__PURE__ */ jsx(X, { className: "h-3 w-3 text-white" }),
           /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
         ] })
       ]
     }
   )
-] }));
+] }) }));
 DialogContent.displayName = DialogPrimitive.Content.displayName;
-var DialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { className: cn("flex flex-col space-y-1.5 text-center sm:text-left", className), ...props });
+var DialogHeader = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "flex flex-col space-y-1.5 text-center sm:text-left",
+      className
+    ),
+    ...props
+  }
+);
 DialogHeader.displayName = "DialogHeader";
-var DialogTitle = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var DialogTitle = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DialogPrimitive.Title,
   {
     ref,
-    className: cn("text-lg font-semibold leading-none tracking-tight", className),
+    className: cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    ),
     ...props
   }
 ));
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
-var DialogDescription = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var DialogDescription = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DialogPrimitive.Description,
   {
     ref,
-    className: cn("text-sm text-muted-foreground", className),
+    className: cn("text-white/60 text-sm", className),
     ...props
   }
 ));
@@ -601,131 +367,17 @@ var customCountries = [
 ];
 countryList.overwrite(customCountries);
 var countries = countryList.getData().sort((a, b) => a.name.localeCompare(b.name));
-function setRef(ref, value) {
-  if (typeof ref === "function") {
-    return ref(value);
-  } else if (ref !== null && ref !== void 0) {
-    ref.current = value;
-  }
-}
-function composeRefs(...refs) {
-  return (node) => {
-    let hasCleanup = false;
-    const cleanups = refs.map((ref) => {
-      const cleanup = setRef(ref, node);
-      if (!hasCleanup && typeof cleanup == "function") {
-        hasCleanup = true;
-      }
-      return cleanup;
-    });
-    if (hasCleanup) {
-      return () => {
-        for (let i = 0; i < cleanups.length; i++) {
-          const cleanup = cleanups[i];
-          if (typeof cleanup == "function") {
-            cleanup();
-          } else {
-            setRef(refs[i], null);
-          }
-        }
-      };
-    }
-  };
-}
-// @__NO_SIDE_EFFECTS__
-function createSlot(ownerName) {
-  const SlotClone = /* @__PURE__ */ createSlotClone(ownerName);
-  const Slot2 = React3.forwardRef((props, forwardedRef) => {
-    const { children, ...slotProps } = props;
-    const childrenArray = React3.Children.toArray(children);
-    const slottable = childrenArray.find(isSlottable);
-    if (slottable) {
-      const newElement = slottable.props.children;
-      const newChildren = childrenArray.map((child) => {
-        if (child === slottable) {
-          if (React3.Children.count(newElement) > 1) return React3.Children.only(null);
-          return React3.isValidElement(newElement) ? newElement.props.children : null;
-        } else {
-          return child;
-        }
-      });
-      return /* @__PURE__ */ jsx(SlotClone, { ...slotProps, ref: forwardedRef, children: React3.isValidElement(newElement) ? React3.cloneElement(newElement, void 0, newChildren) : null });
-    }
-    return /* @__PURE__ */ jsx(SlotClone, { ...slotProps, ref: forwardedRef, children });
-  });
-  Slot2.displayName = `${ownerName}.Slot`;
-  return Slot2;
-}
-var Slot = /* @__PURE__ */ createSlot("Slot");
-// @__NO_SIDE_EFFECTS__
-function createSlotClone(ownerName) {
-  const SlotClone = React3.forwardRef((props, forwardedRef) => {
-    const { children, ...slotProps } = props;
-    if (React3.isValidElement(children)) {
-      const childrenRef = getElementRef(children);
-      const props2 = mergeProps(slotProps, children.props);
-      if (children.type !== React3.Fragment) {
-        props2.ref = forwardedRef ? composeRefs(forwardedRef, childrenRef) : childrenRef;
-      }
-      return React3.cloneElement(children, props2);
-    }
-    return React3.Children.count(children) > 1 ? React3.Children.only(null) : null;
-  });
-  SlotClone.displayName = `${ownerName}.SlotClone`;
-  return SlotClone;
-}
-var SLOTTABLE_IDENTIFIER = Symbol("radix.slottable");
-function isSlottable(child) {
-  return React3.isValidElement(child) && typeof child.type === "function" && "__radixId" in child.type && child.type.__radixId === SLOTTABLE_IDENTIFIER;
-}
-function mergeProps(slotProps, childProps) {
-  const overrideProps = { ...childProps };
-  for (const propName in childProps) {
-    const slotPropValue = slotProps[propName];
-    const childPropValue = childProps[propName];
-    const isHandler = /^on[A-Z]/.test(propName);
-    if (isHandler) {
-      if (slotPropValue && childPropValue) {
-        overrideProps[propName] = (...args) => {
-          const result = childPropValue(...args);
-          slotPropValue(...args);
-          return result;
-        };
-      } else if (slotPropValue) {
-        overrideProps[propName] = slotPropValue;
-      }
-    } else if (propName === "style") {
-      overrideProps[propName] = { ...slotPropValue, ...childPropValue };
-    } else if (propName === "className") {
-      overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(" ");
-    }
-  }
-  return { ...slotProps, ...overrideProps };
-}
-function getElementRef(element) {
-  let getter = Object.getOwnPropertyDescriptor(element.props, "ref")?.get;
-  let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
-  if (mayWarn) {
-    return element.ref;
-  }
-  getter = Object.getOwnPropertyDescriptor(element, "ref")?.get;
-  mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
-  if (mayWarn) {
-    return element.props.ref;
-  }
-  return element.props.ref || element.ref;
-}
 var buttonVariants = cva(
-  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/20 disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-        link: "text-primary underline-offset-4 hover:underline"
+        default: "bg-[#28a745] text-white shadow hover:bg-[#16a34a]",
+        secondary: "bg-white/10 text-white hover:bg-white/20",
+        outline: "border border-white/10 bg-transparent text-white hover:bg-white/10",
+        ghost: "text-white/80 hover:bg-white/10 hover:text-white",
+        destructive: "bg-red-600 text-white hover:bg-red-700",
+        link: "text-blue-400 underline-offset-4 hover:underline"
       },
       size: {
         default: "h-10 px-4 py-2",
@@ -740,7 +392,7 @@ var buttonVariants = cva(
     }
   }
 );
-var Button = React3.forwardRef(
+var Button = React17.forwardRef(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
     const Comp = asChild ? Slot : "button";
     return /* @__PURE__ */ jsx(
@@ -754,14 +406,14 @@ var Button = React3.forwardRef(
   }
 );
 Button.displayName = "Button";
-var Input = React3.forwardRef(
+var Input = React17.forwardRef(
   ({ className, type, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "input",
       {
         type,
         className: cn(
-          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          "flex h-10 w-full rounded-md border border-white/10 bg-white/5 px-3 py-2 text-sm text-white placeholder:text-white/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/20 focus-visible:border-white/20 disabled:cursor-not-allowed disabled:opacity-50",
           className
         ),
         ref,
@@ -771,12 +423,12 @@ var Input = React3.forwardRef(
   }
 );
 Input.displayName = "Input";
-var Label = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var Label = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   LabelPrimitive.Root,
   {
     ref,
     className: cn(
-      "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+      "text-sm font-medium leading-none text-white peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
       className
     ),
     ...props
@@ -785,12 +437,12 @@ var Label = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
 Label.displayName = LabelPrimitive.Root.displayName;
 var Select = SelectPrimitive.Root;
 var SelectValue = SelectPrimitive.Value;
-var SelectTrigger = React3.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var SelectTrigger = React17.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   SelectPrimitive.Trigger,
   {
     ref,
     className: cn(
-      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+      "flex h-10 w-full items-center justify-between rounded-md border border-white/10 bg-white/5 px-3 py-2 text-sm text-white placeholder:text-white/40 focus:outline-none focus:ring-2 focus:ring-white/20 disabled:cursor-not-allowed disabled:opacity-50",
       className
     ),
     ...props,
@@ -801,39 +453,39 @@ var SelectTrigger = React3.forwardRef(({ className, children, ...props }, ref) =
   }
 ));
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-var SelectContent = React3.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+var SelectContent = React17.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsx("div", { className: "payments-ui-portal", children: /* @__PURE__ */ jsxs(
   SelectPrimitive.Content,
   {
     ref,
     className: cn(
-      "relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "relative z-50 min-w-[8rem] overflow-hidden rounded-md border border-white/10 bg-[#1a1f26] text-white shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className
     ),
     position,
     ...props,
     children: [
-      /* @__PURE__ */ jsx(SelectPrimitive.ScrollUpButton, { className: "flex cursor-default items-center justify-center py-1", children: /* @__PURE__ */ jsx(ChevronUp, { className: "h-4 w-4" }) }),
+      /* @__PURE__ */ jsx(SelectPrimitive.ScrollUpButton, { className: "flex cursor-default items-center justify-center py-1 text-white/60", children: /* @__PURE__ */ jsx(ChevronUp, { className: "h-4 w-4" }) }),
       /* @__PURE__ */ jsx(SelectPrimitive.Viewport, { className: "p-1", children }),
-      /* @__PURE__ */ jsx(SelectPrimitive.ScrollDownButton, { className: "flex cursor-default items-center justify-center py-1", children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4" }) })
+      /* @__PURE__ */ jsx(SelectPrimitive.ScrollDownButton, { className: "flex cursor-default items-center justify-center py-1 text-white/60", children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4" }) })
     ]
   }
-) }));
+) }) }));
 SelectContent.displayName = SelectPrimitive.Content.displayName;
-var SelectLabel = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectLabel = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.Label,
   {
     ref,
-    className: cn("px-2 py-1.5 text-sm font-semibold text-muted-foreground", className),
+    className: cn("px-2 py-1.5 text-sm font-semibold text-white/60", className),
     ...props
   }
 ));
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
-var SelectItem = React3.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var SelectItem = React17.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   SelectPrimitive.Item,
   {
     ref,
     className: cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm text-white outline-none focus:bg-white/10 focus:text-white data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     ),
     ...props,
@@ -844,16 +496,18 @@ var SelectItem = React3.forwardRef(({ className, children, ...props }, ref) => /
   }
 ));
 SelectItem.displayName = SelectPrimitive.Item.displayName;
-var SelectSeparator = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectSeparator = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.Separator,
   {
     ref,
-    className: cn("mx-1 my-1 h-px bg-muted", className),
+    className: cn("mx-1 my-1 h-px bg-white/10", className),
     ...props
   }
 ));
 SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
-var defaultBilling = {
+
+// src/constants/billing.ts
+var defaultBillingDetails = {
   firstName: "",
   lastName: "",
   address1: "",
@@ -881,9 +535,9 @@ var CardDetailsForm = ({
   const defaultValuesKey = useMemo(() => JSON.stringify(defaultValues ?? {}), [defaultValues]);
   const mergedDefaults = useMemo(
     () => ({
-      ...defaultBilling,
+      ...defaultBillingDetails,
       ...defaultValues,
-      email: defaultValues?.email ?? config.defaultUser?.email ?? defaultBilling.email
+      email: defaultValues?.email ?? config.defaultUser?.email ?? defaultBillingDetails.email
     }),
     [defaultValuesKey, config.defaultUser?.email]
   );
@@ -1012,7 +666,7 @@ var CardDetailsForm = ({
     window.CollectJS.startPaymentRequest();
   };
   const errorMessage = localError ?? externalError;
-  const collectFieldClass = "flex h-11 w-full items-center rounded-md border border-border/60 bg-background px-3 text-sm text-muted-foreground";
+  const collectFieldClass = "flex h-11 w-full items-center rounded-md border border-white/10 bg-white/5 px-3 text-sm text-white";
   return /* @__PURE__ */ jsxs(
     "form",
     {
@@ -1020,10 +674,10 @@ var CardDetailsForm = ({
       onSubmit: handleSubmit,
       noValidate: true,
       children: [
-        errorMessage && /* @__PURE__ */ jsx("div", { className: "rounded-md border border-destructive/40 bg-destructive/10 px-4 py-2 text-sm text-destructive", children: errorMessage }),
+        errorMessage && /* @__PURE__ */ jsx("div", { className: "rounded-md border border-red-500/40 bg-red-500/10 px-4 py-2 text-sm text-red-400", children: errorMessage }),
         /* @__PURE__ */ jsxs("div", { className: "grid gap-5 md:grid-cols-2", children: [
           /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-            /* @__PURE__ */ jsxs(Label, { htmlFor: "payments-first", className: "flex items-center gap-2 text-muted-foreground", children: [
+            /* @__PURE__ */ jsxs(Label, { htmlFor: "payments-first", className: "flex items-center gap-2 text-white/70", children: [
               /* @__PURE__ */ jsx(User, { className: "h-4 w-4" }),
               " First name"
             ] }),
@@ -1038,7 +692,7 @@ var CardDetailsForm = ({
             )
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-            /* @__PURE__ */ jsxs(Label, { htmlFor: "payments-last", className: "flex items-center gap-2 text-muted-foreground", children: [
+            /* @__PURE__ */ jsxs(Label, { htmlFor: "payments-last", className: "flex items-center gap-2 text-white/70", children: [
               /* @__PURE__ */ jsx(User, { className: "h-4 w-4" }),
               " Last name"
             ] }),
@@ -1105,7 +759,7 @@ var CardDetailsForm = ({
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "grid gap-5 md:grid-cols-2", children: [
           /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-            /* @__PURE__ */ jsxs(Label, { htmlFor: "payments-postal", className: "flex items-center gap-2 text-muted-foreground", children: [
+            /* @__PURE__ */ jsxs(Label, { htmlFor: "payments-postal", className: "flex items-center gap-2 text-white/70", children: [
               /* @__PURE__ */ jsx(MapPin, { className: "h-4 w-4" }),
               " Postal code"
             ] }),
@@ -1157,7 +811,7 @@ var CardDetailsForm = ({
             ] })
           }
         ),
-        /* @__PURE__ */ jsxs("p", { className: "flex items-center gap-2 text-xs text-muted-foreground", children: [
+        /* @__PURE__ */ jsxs("p", { className: "flex items-center gap-2 text-xs text-white/50", children: [
           /* @__PURE__ */ jsx(CreditCard, { className: "h-4 w-4" }),
           " Your payment information is encrypted and processed securely."
         ] })
@@ -1165,19 +819,24 @@ var CardDetailsForm = ({
     }
   );
 };
-var usePaymentMethodService = () => {
-  const { services } = usePaymentContext();
-  return useMemo(() => services.paymentMethods, [services]);
-};
-
-// src/hooks/usePaymentMethods.ts
 var PAYMENT_METHODS_KEY = ["payments-ui", "payment-methods"];
 var usePaymentMethods = () => {
-  const service = usePaymentMethodService();
+  const { client } = usePaymentContext();
   const queryClient = useQueryClient();
   const listQuery = useQuery({
     queryKey: PAYMENT_METHODS_KEY,
-    queryFn: () => service.list({ pageSize: 50 })
+    queryFn: async () => {
+      const response = await client.listPaymentMethods({ limit: 50 });
+      return {
+        data: response.data,
+        total_items: response.total,
+        limit: response.limit,
+        offset: response.offset,
+        page: response.limit > 0 ? Math.floor(response.offset / response.limit) + 1 : 1,
+        page_size: response.limit,
+        total_pages: response.limit > 0 ? Math.ceil(response.total / response.limit) : void 0
+      };
+    }
   });
   const createMutation = useMutation({
     mutationFn: ({ token, billing }) => {
@@ -1194,14 +853,14 @@ var usePaymentMethods = () => {
         email: billing.email,
         provider: billing.provider
       };
-      return service.create(payload);
+      return client.createPaymentMethod(payload);
     },
     onSuccess: () => {
       void queryClient.invalidateQueries({ queryKey: PAYMENT_METHODS_KEY });
     }
   });
   const deleteMutation = useMutation({
-    mutationFn: ({ id }) => service.remove(id),
+    mutationFn: ({ id }) => client.deletePaymentMethod(id),
     onSuccess: () => {
       void queryClient.invalidateQueries({ queryKey: PAYMENT_METHODS_KEY });
     }
@@ -1217,10 +876,10 @@ var badgeVariants = cva(
   {
     variants: {
       variant: {
-        default: "border-transparent bg-primary text-primary-foreground",
-        secondary: "border-transparent bg-secondary text-secondary-foreground",
-        outline: "text-foreground",
-        destructive: "border-transparent bg-destructive text-destructive-foreground"
+        default: "border-transparent bg-emerald-500/20 text-emerald-400",
+        secondary: "border-transparent bg-white/10 text-white/70",
+        outline: "border-white/20 text-white/80",
+        destructive: "border-transparent bg-red-500/20 text-red-400"
       }
     },
     defaultVariants: {
@@ -1231,7 +890,7 @@ var badgeVariants = cva(
 function Badge({ className, variant, ...props }) {
   return /* @__PURE__ */ jsx("div", { className: cn(badgeVariants({ variant }), className), ...props });
 }
-var ScrollArea = React3.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var ScrollArea = React17.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   ScrollAreaPrimitive.Root,
   {
     ref,
@@ -1245,7 +904,7 @@ var ScrollArea = React3.forwardRef(({ className, children, ...props }, ref) => /
   }
 ));
 ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
-var ScrollBar = React3.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsx(
+var ScrollBar = React17.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsx(
   ScrollAreaPrimitive.ScrollAreaScrollbar,
   {
     ref,
@@ -1383,36 +1042,36 @@ var StoredPaymentMethods = ({
   ] });
 };
 var Tabs = TabsPrimitive.Root;
-var TabsList = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TabsList = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   TabsPrimitive.List,
   {
     ref,
     className: cn(
-      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+      "inline-flex h-10 items-center justify-center rounded-md bg-white/5 border border-white/10 p-1 text-white/60",
       className
     ),
     ...props
   }
 ));
 TabsList.displayName = TabsPrimitive.List.displayName;
-var TabsTrigger = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TabsTrigger = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   TabsPrimitive.Trigger,
   {
     ref,
     className: cn(
-      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
+      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/20 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-white/10 data-[state=active]:text-white data-[state=active]:shadow",
       className
     ),
     ...props
   }
 ));
 TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
-var TabsContent = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TabsContent = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   TabsPrimitive.Content,
   {
     ref,
     className: cn(
-      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      "mt-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/20",
       className
     ),
     ...props
@@ -1447,372 +1106,9 @@ var usePaymentNotifications = () => {
     notifyError
   };
 };
-var useSolanaService = () => {
-  const { services } = usePaymentContext();
-  return useMemo(() => services.solanaPayments, [services]);
-};
-var getSolBalance = async (connection, publicKey) => {
-  try {
-    const lamports = await connection.getBalance(publicKey);
-    return lamports / 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(
-      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 } = useWallet();
-  const { config } = usePaymentContext();
-  const solanaService = useSolanaService();
-  const [tokenBalance, setTokenBalance] = useState(null);
-  const [isBalanceLoading, setIsBalanceLoading] = useState(false);
-  const [isProcessing, setIsProcessing] = useState(false);
-  const connection = useMemo(() => {
-    const rpc = config.solanaRpcUrl ?? "https://api.mainnet-beta.solana.com";
-    return new Connection(rpc);
-  }, [config.solanaRpcUrl]);
-  const fetchTokenBalance = 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 });
-      console.log("payments-ui: Solana wallet balance", {
-        token: selectedToken.symbol,
-        balance,
-        required: tokenAmount
-      });
-    } catch (error) {
-      console.error("Failed to fetch token balance:", {
-        token: selectedToken?.symbol,
-        error
-      });
-      setTokenBalance({ balance: 0, hasBalance: false });
-    } finally {
-      setIsBalanceLoading(false);
-    }
-  }, [connected, publicKey, connection, selectedToken, tokenAmount, supportedTokens]);
-  useEffect(() => {
-    if (connected && publicKey && selectedToken) {
-      void fetchTokenBalance();
-    }
-  }, [connected, publicKey, selectedToken, tokenAmount, fetchTokenBalance]);
-  const decodeTransaction = useCallback((serialized) => {
-    const buffer = Buffer.from(serialized, "base64");
-    try {
-      return VersionedTransaction.deserialize(buffer);
-    } catch (err) {
-      try {
-        return Transaction.from(buffer);
-      } 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 = 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 = useCallback(async () => {
-    if (!connected || !publicKey) {
-      onError("Wallet not connected");
-      return;
-    }
-    if (!selectedToken) {
-      onError("No payment token selected");
-      return;
-    }
-    if (!tokenBalance?.hasBalance) {
-      console.warn("payments-ui: insufficient balance for Solana direct payment", {
-        token: selectedToken.symbol
-      });
-      onError("Insufficient balance for this token");
-      return;
-    }
-    try {
-      setIsProcessing(true);
-      onStart();
-      console.log("payments-ui: initiating Solana direct payment", {
-        priceId,
-        token: selectedToken.symbol
-      });
-      const paymentData = await solanaService.generatePayment(
-        priceId,
-        selectedToken.symbol,
-        publicKey.toBase58()
-      );
-      console.log("payments-ui: Solana payment intent created", {
-        intentId: paymentData.intent_id
-      });
-      const transactionToSign = decodeTransaction(paymentData.transaction);
-      console.log("payments-ui: requesting Solana wallet signature");
-      const signedTx = await signWithWallet(transactionToSign);
-      const signedSerialized = Buffer.from(signedTx.serialize()).toString("base64");
-      onConfirming();
-      console.log("payments-ui: submitting signed Solana transaction");
-      const result = await solanaService.submitPayment(
-        signedSerialized,
-        priceId,
-        paymentData.intent_id,
-        `Payment for subscription - ${selectedToken.symbol}`
-      );
-      console.log("payments-ui: Solana direct payment confirmed", {
-        transactionId: result.transaction_id
-      });
-      onSuccess(result, result.transaction_id);
-    } catch (err) {
-      console.error("Solana direct payment failed:", {
-        priceId,
-        token: selectedToken.symbol,
-        error: 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 Card = React3.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref,
-      className: cn("rounded-xl border bg-card text-card-foreground shadow", className),
-      ...props
-    }
-  )
-);
-Card.displayName = "Card";
-var CardHeader = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  "div",
-  {
-    ref,
-    className: cn("flex flex-col space-y-1.5 p-6", className),
-    ...props
-  }
-));
-CardHeader.displayName = "CardHeader";
-var CardTitle = React3.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("h3", { ref, className: cn("text-2xl font-semibold leading-none tracking-tight", className), ...props })
-);
-CardTitle.displayName = "CardTitle";
-var CardDescription = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("p", { ref, className: cn("text-sm text-muted-foreground", className), ...props }));
-CardDescription.displayName = "CardDescription";
-var CardContent = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("p-6 pt-0", className), ...props }));
-CardContent.displayName = "CardContent";
-var CardFooter = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  "div",
-  {
-    ref,
-    className: cn("flex items-center p-6 pt-0", className),
-    ...props
-  }
-));
-CardFooter.displayName = "CardFooter";
-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__ */ jsxs(Card, { className: "space-y-4 rounded-md border border-border/60 bg-background/80 shadow-none p-6", children: [
-    /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
-      /* @__PURE__ */ jsxs("p", { className: "flex items-center gap-2 text-sm font-semibold uppercase tracking-wide text-muted-foreground", children: [
-        /* @__PURE__ */ jsx(Wallet, { className: "h-4 w-4" }),
-        " Pay with connected wallet"
-      ] }),
-      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Sign the transaction directly in your Solana wallet." })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between rounded-lg border border-border/50 bg-muted/10 px-4 py-3 text-sm", children: [
-      /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Available balance" }),
-      isBalanceLoading ? /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin text-muted-foreground" }) : /* @__PURE__ */ jsx("strong", { className: "text-foreground", children: balanceLabel })
-    ] }),
-    /* @__PURE__ */ jsx(
-      Button,
-      {
-        type: "button",
-        className: "w-full",
-        disabled: !canPay,
-        onClick: pay,
-        children: isProcessing ? /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }),
-          " Processing\u2026"
-        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(Wallet, { className: "mr-2 h-4 w-4" }),
-          " Pay with wallet"
-        ] })
-      }
-    )
-  ] });
-};
 var useSolanaQrPayment = (options) => {
   const { priceId, selectedToken, onSuccess, onError } = options;
-  const solanaService = useSolanaService();
+  const { client } = usePaymentContext();
   const tokenSymbol = selectedToken?.symbol ?? null;
   const onSuccessRef = useRef(onSuccess);
   const onErrorRef = useRef(onError);
@@ -1874,14 +1170,16 @@ var useSolanaQrPayment = (options) => {
         paymentId: status.payment_id,
         intentId: status.intent_id
       });
-      onSuccessRef.current?.(status.payment_id, status.transaction || "");
+      const paymentId = status.payment_id ?? void 0;
+      const txId = status.transaction ?? void 0;
+      onSuccessRef.current?.(paymentId, txId);
     },
     [clearTimers, resetState]
   );
   const pollStatus = useCallback(
     async (reference) => {
       try {
-        const status = await solanaService.checkPaymentStatus(reference);
+        const status = await client.getSolanaPayStatus(reference);
         if (status.status === "confirmed") {
           handleSuccess(status);
         }
@@ -1895,7 +1193,7 @@ var useSolanaQrPayment = (options) => {
         console.error("Failed to poll Solana Pay status:", err);
       }
     },
-    [handleError, handleSuccess, solanaService]
+    [handleError, handleSuccess, client]
   );
   const startCountdown = useCallback(
     (expiresAt, reference) => {
@@ -1944,10 +1242,10 @@ var useSolanaQrPayment = (options) => {
           priceId,
           token: tokenSymbol
         });
-        const nextIntent = await solanaService.generateQRCode(
+        const nextIntent = await client.createSolanaPayIntent({
           priceId,
-          tokenSymbol
-        );
+          token: tokenSymbol
+        });
         if (cancelled) return;
         setIntent(nextIntent);
         setTimeRemaining(
@@ -1957,8 +1255,13 @@ var useSolanaQrPayment = (options) => {
         console.log("[payments-ui] Solana Pay QR ready", {
           reference: nextIntent.reference
         });
-        startCountdown(nextIntent.expires_at, nextIntent.reference);
-        pollStatus(nextIntent.reference);
+        const reference = nextIntent.reference;
+        if (typeof reference === "string" && reference.length > 0) {
+          startCountdown(nextIntent.expires_at, reference);
+          pollStatus(reference);
+        } else {
+          handleError("Payment reference missing from intent", true);
+        }
       } catch (err) {
         if (cancelled) return;
         console.error("Failed to generate Solana Pay QR intent:", err);
@@ -1982,7 +1285,7 @@ var useSolanaQrPayment = (options) => {
     priceId,
     renderQr,
     resetState,
-    solanaService,
+    client,
     startCountdown,
     tokenSymbol,
     refreshNonce
@@ -1999,17 +1302,65 @@ var useSolanaQrPayment = (options) => {
     refresh
   };
 };
+var Card = React17.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn("rounded-xl border border-white/10 bg-[#161b22] text-white shadow", className),
+      ...props
+    }
+  )
+);
+Card.displayName = "Card";
+var CardHeader = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn("flex flex-col space-y-1.5 p-6", className),
+    ...props
+  }
+));
+CardHeader.displayName = "CardHeader";
+var CardTitle = React17.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("h3", { ref, className: cn("text-xl font-semibold leading-none tracking-tight text-white", className), ...props })
+);
+CardTitle.displayName = "CardTitle";
+var CardDescription = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("p", { ref, className: cn("text-sm text-white/60", className), ...props }));
+CardDescription.displayName = "CardDescription";
+var CardContent = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("p-6 pt-0", className), ...props }));
+CardContent.displayName = "CardContent";
+var CardFooter = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn("flex items-center p-6 pt-0", className),
+    ...props
+  }
+));
+CardFooter.displayName = "CardFooter";
 var QRCodePayment = ({
   priceId,
   selectedToken,
   onPaymentError,
   onPaymentSuccess
 }) => {
+  const handleQrSuccess = React17__default.useCallback(
+    (paymentId, txId) => {
+      if (!paymentId && !txId) {
+        onPaymentError("Missing payment confirmation details");
+        return;
+      }
+      const resolvedResult = paymentId ?? txId ?? "";
+      onPaymentSuccess(resolvedResult, txId);
+    },
+    [onPaymentError, onPaymentSuccess]
+  );
   const { intent, qrDataUri, isLoading, error, timeRemaining, refresh } = useSolanaQrPayment({
     priceId,
     selectedToken,
     onError: onPaymentError,
-    onSuccess: onPaymentSuccess
+    onSuccess: handleQrSuccess
   });
   if (!selectedToken) {
     return /* @__PURE__ */ jsx("div", { className: "rounded-md border border-dashed border-border/60 bg-muted/10 px-4 py-6 text-center text-sm text-muted-foreground", children: "Select a token to continue." });
@@ -2102,7 +1453,7 @@ var PaymentStatus = ({
   return null;
 };
 var useSupportedTokens = () => {
-  const solanaService = useSolanaService();
+  const { client } = usePaymentContext();
   const [tokens, setTokens] = useState([]);
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState(null);
@@ -2120,7 +1471,7 @@ var useSupportedTokens = () => {
     setError(null);
     try {
       console.log("payments-ui: fetching supported Solana tokens");
-      const tokens2 = await solanaService.getSupportedTokens();
+      const tokens2 = await client.getSolanaTokens();
       const sortedTokens = [...tokens2].sort(
         (a, b) => a.symbol.localeCompare(b.symbol)
       );
@@ -2138,7 +1489,7 @@ var useSupportedTokens = () => {
     } finally {
       setIsLoading(false);
     }
-  }, [solanaService]);
+  }, [client]);
   useEffect(() => {
     if (tokens.length === 0) {
       fetchSupportedTokens();
@@ -2250,9 +1601,7 @@ var SolanaPaymentView = ({
   onError,
   onClose
 }) => {
-  const { connected } = useWallet();
   const { notifyStatus, notifyError, notifySuccess } = usePaymentNotifications();
-  const [activeTab, setActiveTab] = useState("wallet");
   const [paymentState, setPaymentState] = useState("selecting");
   const [errorMessage, setErrorMessage] = useState(null);
   const [transactionId, setTransactionId] = useState(null);
@@ -2274,14 +1623,6 @@ var SolanaPaymentView = ({
       setSelectedTokenSymbol(defaultToken.symbol);
     }
   }, [tokens, selectedTokenSymbol]);
-  const handlePaymentStart = useCallback(() => {
-    setPaymentState("processing");
-    setErrorMessage(null);
-    notifyStatus("processing", { source: "solana" });
-  }, [notifyStatus]);
-  const handlePaymentConfirming = useCallback(() => {
-    setPaymentState("confirming");
-  }, []);
   const handlePaymentSuccess = useCallback(
     (result, txId) => {
       const resolvedTx = txId || (typeof result === "string" ? result : result.transaction_id);
@@ -2350,16 +1691,6 @@ var SolanaPaymentView = ({
   const handleTokenChange = useCallback((value) => {
     setSelectedTokenSymbol(value);
   }, []);
-  const wasConnectedRef = useRef(connected);
-  useEffect(() => {
-    if (connected && !wasConnectedRef.current) {
-      setActiveTab("wallet");
-    }
-    if (!connected && wasConnectedRef.current) {
-      setActiveTab("qr");
-    }
-    wasConnectedRef.current = connected;
-  }, [connected]);
   const renderBody = () => {
     if (paymentState !== "selecting") {
       return /* @__PURE__ */ jsx(
@@ -2414,51 +1745,15 @@ var SolanaPaymentView = ({
           ] }, token.symbol)) })
         ] })
       ] }),
-      /* @__PURE__ */ jsx("div", { className: "space-y-3", children: /* @__PURE__ */ jsxs(
-        Tabs,
+      /* @__PURE__ */ jsx(
+        QRCodePayment,
         {
-          value: activeTab,
-          onValueChange: (value) => setActiveTab(value),
-          className: "w-full space-y-3",
-          children: [
-            /* @__PURE__ */ jsxs(TabsList, { className: "grid w-full grid-cols-2 bg-muted/10", children: [
-              /* @__PURE__ */ jsxs(TabsTrigger, { value: "wallet", disabled: !connected, children: [
-                /* @__PURE__ */ jsx(Wallet, { className: "mr-2 h-4 w-4" }),
-                " Wallet"
-              ] }),
-              /* @__PURE__ */ jsxs(TabsTrigger, { value: "qr", children: [
-                /* @__PURE__ */ jsx(CreditCard, { className: "mr-2 h-4 w-4" }),
-                " QR Code"
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxs(TabsContent, { value: "wallet", className: "space-y-4", children: [
-              activeTab === "wallet" && /* @__PURE__ */ jsx(
-                DirectPayment,
-                {
-                  priceId,
-                  tokenAmount,
-                  selectedToken,
-                  supportedTokens: tokens,
-                  onPaymentStart: handlePaymentStart,
-                  onPaymentConfirming: handlePaymentConfirming,
-                  onPaymentSuccess: handlePaymentSuccess,
-                  onPaymentError: handlePaymentError
-                }
-              ),
-              !connected && /* @__PURE__ */ jsx("div", { className: "text-sm text-amber-100", children: "Connect your Solana wallet to continue or switch to QR mode." })
-            ] }),
-            /* @__PURE__ */ jsx(TabsContent, { value: "qr", children: activeTab === "qr" && /* @__PURE__ */ jsx(
-              QRCodePayment,
-              {
-                priceId,
-                selectedToken,
-                onPaymentError: handlePaymentError,
-                onPaymentSuccess: handlePaymentSuccess
-              }
-            ) })
-          ]
+          priceId,
+          selectedToken,
+          onPaymentError: handlePaymentError,
+          onPaymentSuccess: handlePaymentSuccess
         }
-      ) })
+      )
     ] });
   };
   return /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
@@ -2466,7 +1761,7 @@ var SolanaPaymentView = ({
       /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
         /* @__PURE__ */ jsx("p", { className: "text-xs uppercase tracking-wide text-muted-foreground", children: "Solana Pay checkout" }),
         /* @__PURE__ */ jsx("p", { className: "text-2xl font-semibold text-foreground", children: "Pay with Solana" }),
-        /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Choose a supported token and send the payment with your wallet or a QR code." })
+        /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Choose a supported token and send the payment via Solana Pay QR code." })
       ] }),
       onClose && /* @__PURE__ */ jsxs(
         Button,
@@ -2487,176 +1782,31 @@ var SolanaPaymentView = ({
     renderBody()
   ] });
 };
-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 = 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 = 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 = 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 = 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
-  };
-};
-
-// src/hooks/useAlternativePaymentProvider.ts
-var useAlternativePaymentProvider = () => {
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState(null);
-  const { generateFlexFormUrl } = useSubscriptionActions();
-  const openFlexForm = useCallback(
-    async (payload) => {
-      setIsLoading(true);
-      setError(null);
-      try {
-        const response = await generateFlexFormUrl(payload);
-        if (response?.iframe_url) {
-          window.location.href = response.iframe_url;
-        } else {
-          throw new Error("Unable to launch payment provider.");
-        }
-      } catch (err) {
-        const message = err instanceof Error ? err.message : "Failed to open payment provider.";
-        setError(message);
-        console.error("[payments-ui] failed to open alternative payment provider", err);
-      } finally {
-        setIsLoading(false);
-      }
-    },
-    [generateFlexFormUrl]
-  );
-  return { openFlexForm, isLoading, error };
-};
-var PaymentExperience = ({
-  priceId,
-  usdAmount,
-  onNewCardPayment,
-  onSavedMethodPayment,
-  enableNewCard = true,
-  enableStoredMethods = true,
-  enableSolanaPay = true,
-  enableAlternativePayments = true,
-  onSolanaSuccess,
-  onSolanaError,
-  initialMode = "cards"
-}) => {
-  const showNewCard = enableNewCard && Boolean(onNewCardPayment);
-  const showStored = enableStoredMethods && Boolean(onSavedMethodPayment);
-  const defaultTab = showStored ? "saved" : "new";
-  const [activeTab, setActiveTab] = useState(defaultTab);
-  const [mode, setMode] = useState(
-    () => initialMode === "solana" && enableSolanaPay ? "solana" : "cards"
+var PaymentExperience = ({
+  priceId,
+  usdAmount,
+  onNewCardPayment,
+  onSavedMethodPayment,
+  enableNewCard = true,
+  enableStoredMethods = true,
+  enableSolanaPay = true,
+  onSolanaSuccess,
+  onSolanaError,
+  initialMode = "cards"
+}) => {
+  const showNewCard = enableNewCard && Boolean(onNewCardPayment);
+  const showStored = enableStoredMethods && Boolean(onSavedMethodPayment);
+  const defaultTab = showStored ? "saved" : "new";
+  const [activeTab, setActiveTab] = useState(defaultTab);
+  const [mode, setMode] = useState(
+    () => initialMode === "solana" && enableSolanaPay ? "solana" : "cards"
   );
   const [selectedMethodId, setSelectedMethodId] = useState(null);
   const [savedStatus, setSavedStatus] = useState("idle");
   const [savedError, setSavedError] = useState(null);
   const [newCardStatus, setNewCardStatus] = useState("idle");
   const [newCardError, setNewCardError] = useState(null);
-  const [billingDetails, setBillingDetails] = useState(null);
-  const [alternativePaymentError, setAlternativePaymentError] = useState(null);
   const { notifyStatus, notifySuccess, notifyError } = usePaymentNotifications();
-  const {
-    openFlexForm,
-    isLoading: flexFormLoading,
-    error: flexFormError
-  } = useAlternativePaymentProvider();
   useEffect(() => {
     setActiveTab(showStored ? "saved" : "new");
   }, [showStored]);
@@ -2736,48 +1886,6 @@ var PaymentExperience = ({
     },
     [onSolanaError]
   );
-  const handleAlternativePayment = useCallback(() => {
-    if (!enableAlternativePayments || !priceId) {
-      return;
-    }
-    if (!billingDetails) {
-      setAlternativePaymentError("Enter your billing details first.");
-      return;
-    }
-    const requiredFields = [
-      "firstName",
-      "lastName",
-      "address1",
-      "city",
-      "stateRegion",
-      "postalCode",
-      "country"
-    ];
-    const missingField = requiredFields.find((field) => {
-      const value = billingDetails[field];
-      return typeof value !== "string" || value.trim().length === 0;
-    });
-    if (missingField) {
-      setAlternativePaymentError("Please complete your billing address before continuing.");
-      return;
-    }
-    setAlternativePaymentError(null);
-    openFlexForm({
-      priceId,
-      firstName: billingDetails.firstName,
-      lastName: billingDetails.lastName,
-      address1: billingDetails.address1,
-      city: billingDetails.city,
-      state: billingDetails.stateRegion ?? "",
-      zipCode: billingDetails.postalCode,
-      country: billingDetails.country
-    });
-  }, [
-    billingDetails,
-    enableAlternativePayments,
-    openFlexForm,
-    priceId
-  ]);
   const renderSavedTab = () => {
     if (!showStored) {
       return /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Saved payment methods are unavailable right now. Add a new card to get started." });
@@ -2816,8 +1924,7 @@ var PaymentExperience = ({
         submitLabel: "Pay now",
         externalError: newCardError,
         onTokenize: handleNewCardTokenize,
-        submitting: newCardStatus === "processing",
-        onBillingChange: setBillingDetails
+        submitting: newCardStatus === "processing"
       }
     );
   };
@@ -2845,19 +1952,6 @@ var PaymentExperience = ({
   ] });
   return /* @__PURE__ */ jsxs("div", { className: "space-y-6 pt-4", children: [
     mode === "cards" && renderCardExperience(),
-    mode === "cards" && enableAlternativePayments && /* @__PURE__ */ jsxs("div", { className: "space-y-2 text-center text-sm text-muted-foreground", children: [
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          className: "text-primary underline-offset-4 hover:underline disabled:opacity-60",
-          onClick: handleAlternativePayment,
-          disabled: flexFormLoading || !priceId,
-          children: flexFormLoading ? "Preparing alternative checkout\u2026" : "Prefer a different processor? Pay with CCBill"
-        }
-      ),
-      (alternativePaymentError || flexFormError) && /* @__PURE__ */ jsx("p", { className: "text-xs text-destructive", children: alternativePaymentError || flexFormError })
-    ] }),
     mode === "solana" && enableSolanaPay && /* @__PURE__ */ jsx(
       SolanaPaymentView,
       {
@@ -2898,6 +1992,88 @@ var SubscriptionSuccessDialog = ({
     /* @__PURE__ */ jsx("div", { className: "px-6 py-6", children: /* @__PURE__ */ jsx(Button, { className: "w-full", onClick: onClose, children: "Continue exploring" }) })
   ] }) });
 };
+var useSubscriptionActions = () => {
+  const { client } = usePaymentContext();
+  const ensurePrice = (priceId) => {
+    if (!priceId) {
+      throw new Error("payments-ui: priceId is required for subscription actions");
+    }
+    return priceId;
+  };
+  const subscribeWithCard = useCallback(
+    async ({
+      priceId,
+      processor = "nmi",
+      provider,
+      paymentToken,
+      billing
+    }) => {
+      const payload = {
+        price_id: ensurePrice(priceId),
+        processor,
+        provider,
+        payment_token: paymentToken,
+        email: billing.email,
+        first_name: billing.firstName,
+        last_name: billing.lastName,
+        address1: billing.address1,
+        city: billing.city,
+        state: billing.stateRegion,
+        zip: billing.postalCode,
+        country: billing.country
+      };
+      return client.checkout(payload);
+    },
+    [client]
+  );
+  const subscribeWithSavedMethod = useCallback(
+    async ({
+      priceId,
+      processor = "nmi",
+      provider,
+      paymentMethodId,
+      email
+    }) => {
+      const payload = {
+        price_id: ensurePrice(priceId),
+        processor,
+        provider,
+        payment_method_id: paymentMethodId,
+        email
+      };
+      return client.checkout(payload);
+    },
+    [client]
+  );
+  const subscribeWithCCBill = useCallback(
+    async ({
+      priceId,
+      email,
+      firstName,
+      lastName,
+      zipCode,
+      country,
+      processor = "ccbill"
+    }) => {
+      const payload = {
+        price_id: ensurePrice(priceId),
+        processor,
+        email,
+        first_name: firstName,
+        last_name: lastName,
+        zip: zipCode,
+        country
+      };
+      return client.checkout(payload);
+    },
+    [client]
+  );
+  return {
+    subscribeWithCard,
+    subscribeWithSavedMethod,
+    subscribeWithCCBill
+  };
+};
 var SubscriptionCheckoutModal = ({
   open,
   onOpenChange,
@@ -2934,22 +2110,32 @@ var SubscriptionCheckoutModal = ({
       console.debug("[payments-ui] subscription success", result);
     }
   };
+  const assertCheckoutSuccess = (status, message) => {
+    if (status === "blocked") {
+      throw new Error(message || "This subscription cannot be completed right now.");
+    }
+    if (status === "redirect_required") {
+      throw new Error(message || "Additional action required in an alternate flow.");
+    }
+  };
   const handleNewCardPayment = async ({ token, billing }) => {
-    await subscribeWithCard({
+    const response = await subscribeWithCard({
       priceId: ensurePrice(),
       provider,
       paymentToken: token,
       billing
     });
+    assertCheckoutSuccess(response.status, response.message);
     notifySuccess();
   };
   const handleSavedMethodPayment = async ({ paymentMethodId }) => {
-    await subscribeWithSavedMethod({
+    const response = await subscribeWithSavedMethod({
       priceId: ensurePrice(),
       provider,
       paymentMethodId,
       email: userEmail ?? ""
     });
+    assertCheckoutSuccess(response.status, response.message);
     notifySuccess();
   };
   const solanaSuccess = (result) => {
@@ -2961,27 +2147,33 @@ var SubscriptionCheckoutModal = ({
     onSolanaError?.(error);
   };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: handleClose, children: /* @__PURE__ */ jsx(DialogContent, { className: "w-full max-w-3xl max-h-[90vh] overflow-y-auto rounded-md border border-border/60 bg-background p-0 [&::-webkit-scrollbar]:hidden", children: /* @__PURE__ */ jsxs("div", { className: "p-6 space-y-6", children: [
-      !priceId && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 rounded-lg border border-destructive/40 bg-destructive/10 px-3 py-2 text-sm text-destructive", children: [
-        /* @__PURE__ */ jsx(AlertCircle, { className: "h-4 w-4" }),
-        " Select a subscription plan to continue."
-      ] }),
-      /* @__PURE__ */ jsx(
-        PaymentExperience,
-        {
-          usdAmount,
-          priceId: priceId ?? "",
-          onSolanaSuccess: solanaSuccess,
-          onSolanaError: solanaError,
-          enableNewCard: Boolean(priceId),
-          enableStoredMethods: Boolean(priceId),
-          enableSolanaPay: enableSolanaPay && Boolean(priceId),
-          onNewCardPayment: priceId ? handleNewCardPayment : void 0,
-          onSavedMethodPayment: priceId ? handleSavedMethodPayment : void 0,
-          initialMode
-        }
-      )
-    ] }) }) }),
+    /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: handleClose, children: /* @__PURE__ */ jsx(
+      DialogContent,
+      {
+        className: "max-w-3xl max-h-[90vh] overflow-y-auto p-0 [&::-webkit-scrollbar]:hidden",
+        children: /* @__PURE__ */ jsxs("div", { className: "p-6 space-y-6", children: [
+          !priceId && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 rounded-lg border border-destructive/40 bg-destructive/10 px-3 py-2 text-sm text-destructive", children: [
+            /* @__PURE__ */ jsx(AlertCircle, { className: "h-4 w-4" }),
+            " Select a subscription plan to continue."
+          ] }),
+          /* @__PURE__ */ jsx(
+            PaymentExperience,
+            {
+              usdAmount,
+              priceId: priceId ?? "",
+              onSolanaSuccess: solanaSuccess,
+              onSolanaError: solanaError,
+              enableNewCard: Boolean(priceId),
+              enableStoredMethods: Boolean(priceId),
+              enableSolanaPay: enableSolanaPay && Boolean(priceId),
+              onNewCardPayment: priceId ? handleNewCardPayment : void 0,
+              onSavedMethodPayment: priceId ? handleSavedMethodPayment : void 0,
+              initialMode
+            }
+          )
+        ] })
+      }
+    ) }),
     /* @__PURE__ */ jsx(
       SubscriptionSuccessDialog,
       {
@@ -3136,13 +2328,50 @@ var usePaymentDialogs = () => {
 var PaymentContext = createContext(void 0);
 var PaymentProvider = ({
   config,
-  runtime: runtimeProp,
   children
 }) => {
-  const runtime = useMemo(
-    () => runtimeProp ?? createPaymentsRuntime(config),
-    [runtimeProp, config]
-  );
+  const queryClient = useMemo(() => {
+    return new QueryClient({
+      defaultOptions: {
+        queries: {
+          staleTime: 3e4,
+          gcTime: 5 * 6e4,
+          refetchOnWindowFocus: false,
+          retry: 1
+        },
+        mutations: {
+          retry: 1
+        }
+      }
+    });
+  }, []);
+  const client = useMemo(() => {
+    const authProvider = config.getAuthToken ? async () => {
+      try {
+        const result = 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;
+      }
+    } : void 0;
+    const wrappedFetch = config.fetcher ? ((input, init) => {
+      const normalizedInput = input instanceof URL ? input.toString() : input;
+      return config.fetcher(normalizedInput, init);
+    }) : void 0;
+    return createClient({
+      billingBaseUrl: config.endpoints.billingBaseUrl,
+      billingBasePath: config.endpoints.billingBasePath,
+      accountBaseUrl: config.endpoints.accountBaseUrl,
+      accountBasePath: config.endpoints.accountBasePath,
+      getAuthToken: authProvider,
+      defaultHeaders: config.defaultHeaders,
+      fetch: wrappedFetch
+    });
+  }, [config]);
   const solanaEndpoint = useMemo(() => {
     if (config.solana?.endpoint) return config.solana.endpoint;
     const network = config.solana?.network ?? WalletAdapterNetwork.Mainnet;
@@ -3162,19 +2391,16 @@ var PaymentProvider = ({
   const autoConnect = config.solana?.autoConnect ?? true;
   const value = useMemo(() => {
     return {
-      config: runtime.config,
-      fetcher: runtime.app.getFetcher(),
-      resolveAuthToken: runtime.app.resolveAuthToken,
-      app: runtime.app,
-      services: runtime.services,
-      queryClient: runtime.queryClient
+      config,
+      client,
+      queryClient
     };
-  }, [runtime]);
+  }, [client, config, queryClient]);
   useEffect(() => {
     if (!config.collectJsKey) return;
     loadCollectJs(config.collectJsKey);
   }, [config.collectJsKey]);
-  return /* @__PURE__ */ jsx(PaymentContext.Provider, { value, children: /* @__PURE__ */ jsx(QueryClientProvider, { client: runtime.queryClient, children: /* @__PURE__ */ jsx(ConnectionProvider, { endpoint: solanaEndpoint, config: { commitment: "confirmed" }, children: /* @__PURE__ */ jsx(WalletProvider, { wallets: walletAdapters, autoConnect, children: /* @__PURE__ */ jsx(WalletModalProvider, { children: /* @__PURE__ */ jsx(PaymentsDialogProvider, { children }) }) }) }) }) });
+  return /* @__PURE__ */ jsx(PaymentContext.Provider, { value, children: /* @__PURE__ */ jsx(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx(ConnectionProvider, { endpoint: solanaEndpoint, config: { commitment: "confirmed" }, children: /* @__PURE__ */ jsx(WalletProvider, { wallets: walletAdapters, autoConnect, children: /* @__PURE__ */ jsx(WalletModalProvider, { children: /* @__PURE__ */ jsx(PaymentsDialogProvider, { children }) }) }) }) }) });
 };
 var usePaymentContext = () => {
   const context = useContext(PaymentContext);
@@ -3183,6 +2409,40 @@ var usePaymentContext = () => {
   }
   return context;
 };
+var PaymentsUIRoot = ({
+  children,
+  className,
+  dark = false
+}) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "payments-ui-root",
+        dark && "dark",
+        className
+      ),
+      children
+    }
+  );
+};
+var PaymentsUIPortalRoot = ({
+  children,
+  className,
+  dark = false
+}) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "payments-ui-portal",
+        dark && "dark",
+        className
+      ),
+      children
+    }
+  );
+};
 var SolanaPaymentSelector = ({
   isOpen,
   onClose,
@@ -3190,7 +2450,7 @@ var SolanaPaymentSelector = ({
 }) => {
   return /* @__PURE__ */ jsx(Dialog, { open: isOpen, onOpenChange: (value) => value ? void 0 : onClose(), children: /* @__PURE__ */ jsx(DialogContent, { className: "w-full max-w-2xl max-h-[90vh] overflow-y-auto rounded-md border border-border/70 bg-background/95 p-0 shadow-2xl [&::-webkit-scrollbar]:hidden", children: /* @__PURE__ */ jsx(SolanaPaymentView, { ...props, onClose }) }) });
 };
-var Table = React3.forwardRef(
+var Table = React17.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     "table",
     {
@@ -3201,15 +2461,15 @@ var Table = React3.forwardRef(
   )
 );
 Table.displayName = "Table";
-var TableHeader = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("thead", { ref, className: cn("[&_tr]:border-b", className), ...props }));
+var TableHeader = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("thead", { ref, className: cn("[&_tr]:border-b", className), ...props }));
 TableHeader.displayName = "TableHeader";
-var TableBody = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("tbody", { ref, className: cn("[&_tr:last-child]:border-0", className), ...props }));
+var TableBody = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("tbody", { ref, className: cn("[&_tr:last-child]:border-0", className), ...props }));
 TableBody.displayName = "TableBody";
-var TableFooter = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("tfoot", { ref, className: cn("bg-muted/50 font-medium text-muted-foreground", className), ...props }));
+var TableFooter = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("tfoot", { ref, className: cn("bg-muted/50 font-medium text-muted-foreground", className), ...props }));
 TableFooter.displayName = "TableFooter";
-var TableRow = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("tr", { ref, className: cn("border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted", className), ...props }));
+var TableRow = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("tr", { ref, className: cn("border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted", className), ...props }));
 TableRow.displayName = "TableRow";
-var TableHead = React3.forwardRef(
+var TableHead = React17.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     "th",
     {
@@ -3223,7 +2483,7 @@ var TableHead = React3.forwardRef(
   )
 );
 TableHead.displayName = "TableHead";
-var TableCell = React3.forwardRef(
+var TableCell = React17.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     "td",
     {
@@ -3234,37 +2494,37 @@ var TableCell = React3.forwardRef(
   )
 );
 TableCell.displayName = "TableCell";
-var TableCaption = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("caption", { ref, className: cn("mt-4 text-sm text-muted-foreground", className), ...props }));
+var TableCaption = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("caption", { ref, className: cn("mt-4 text-sm text-muted-foreground", className), ...props }));
 TableCaption.displayName = "TableCaption";
 var AlertDialog = AlertDialogPrimitive.Root;
 var AlertDialogTrigger = AlertDialogPrimitive.Trigger;
 var AlertDialogPortal = AlertDialogPrimitive.Portal;
-var AlertDialogOverlay = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var AlertDialogOverlay = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   AlertDialogPrimitive.Overlay,
   {
     ref,
     className: cn(
-      "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0",
+      "fixed inset-0 z-50 bg-black/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0",
       className
     ),
     ...props
   }
 ));
 AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
-var AlertDialogContent = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [
+var AlertDialogContent = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPortal, { children: /* @__PURE__ */ jsxs("div", { className: "payments-ui-portal", children: [
   /* @__PURE__ */ jsx(AlertDialogOverlay, {}),
   /* @__PURE__ */ jsx(
     AlertDialogPrimitive.Content,
     {
       ref,
       className: cn(
-        "fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-popover p-6 text-popover-foreground shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+        "fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-white/10 bg-[#161b22] text-white p-6 shadow-lg rounded-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
         className
       ),
       ...props
     }
   )
-] }));
+] }) }));
 AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
 var AlertDialogHeader = ({
   className,
@@ -3282,13 +2542,13 @@ var AlertDialogFooter = ({
   }
 );
 AlertDialogFooter.displayName = "AlertDialogFooter";
-var AlertDialogTitle = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Title, { ref, className: cn("text-lg font-semibold", className), ...props }));
+var AlertDialogTitle = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Title, { ref, className: cn("text-lg font-semibold text-white", className), ...props }));
 AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
-var AlertDialogDescription = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Description, { ref, className: cn("text-sm text-muted-foreground", className), ...props }));
+var AlertDialogDescription = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Description, { ref, className: cn("text-sm text-white/60", className), ...props }));
 AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
-var AlertDialogAction = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Action, { ref, className: cn(buttonVariants(), className), ...props }));
+var AlertDialogAction = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Action, { ref, className: cn(buttonVariants(), className), ...props }));
 AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
-var AlertDialogCancel = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var AlertDialogCancel = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   AlertDialogPrimitive.Cancel,
   {
     ref,
@@ -3297,7 +2557,7 @@ var AlertDialogCancel = React3.forwardRef(({ className, ...props }, ref) => /* @
   }
 ));
 AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
-var Textarea = React3.forwardRef(
+var Textarea = React17.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     "textarea",
     {
@@ -3315,13 +2575,33 @@ var notifyDefault = (payload) => {
   const level = payload.status === "destructive" ? "error" : "info";
   console[level === "error" ? "error" : "log"]("[payments-ui] cancellation", payload);
 };
+var defaultTranslations = {
+  buttonLabel: "Cancel Membership",
+  title: "Confirm Membership Cancellation",
+  description: "You are about to cancel your membership. Please review the consequences:",
+  consequence1: "You will immediately lose access to premium features upon confirmation.",
+  consequence2: "Your benefits remain active until the end of the billing cycle.",
+  consequence3: "Your account will revert to the free plan afterwards.",
+  reasonLabel: "Please provide a reason for cancellation (required):",
+  reasonPlaceholder: "Your feedback helps us improve...",
+  reasonError: "Reason must be at least {min} characters long.",
+  reasonHint: "Minimum {min} characters required.",
+  keepMembership: "Keep Membership",
+  confirmCancellation: "Confirm Cancellation",
+  cancelling: "Cancelling...",
+  membershipCancelled: "Membership cancelled",
+  cancellationSuccess: "Your subscription has been cancelled successfully.",
+  cancellationFailed: "Cancellation failed"
+};
 var CancelMembershipDialog = ({
   minReasonLength = 15,
   onCancelled,
-  onNotify
+  onNotify,
+  translations: customTranslations
 }) => {
-  const { services } = usePaymentContext();
+  const { client } = usePaymentContext();
   const notify = onNotify ?? notifyDefault;
+  const t = { ...defaultTranslations, ...customTranslations };
   const [cancelReason, setCancelReason] = useState("");
   const [isOpen, setIsOpen] = useState(false);
   const [isReasonValid, setIsReasonValid] = useState(false);
@@ -3353,17 +2633,17 @@ var CancelMembershipDialog = ({
     }
     setIsSubmitting(true);
     try {
-      await services.subscriptions.cancelSubscription(cancelReason.trim());
+      await client.cancelSubscription(cancelReason.trim());
       notify({
-        title: "Membership cancelled",
-        description: "Your subscription has been cancelled successfully.",
+        title: t.membershipCancelled,
+        description: t.cancellationSuccess,
         status: "success"
       });
       onCancelled?.();
       handleOpenChange(false);
     } catch (error) {
       const message = error instanceof Error ? error.message : "Unable to cancel membership";
-      notify({ title: "Cancellation failed", description: message, status: "destructive" });
+      notify({ title: t.cancellationFailed, description: message, status: "destructive" });
     } finally {
       setIsSubmitting(false);
     }
@@ -3372,32 +2652,34 @@ var CancelMembershipDialog = ({
   return /* @__PURE__ */ jsxs(AlertDialog, { open: isOpen, onOpenChange: handleOpenChange, children: [
     /* @__PURE__ */ jsx(AlertDialogTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "outline", className: "border-destructive/50 text-destructive", children: [
       /* @__PURE__ */ jsx(Ban, { className: "mr-2 h-4 w-4" }),
-      " Cancel Membership"
+      " ",
+      t.buttonLabel
     ] }) }),
     /* @__PURE__ */ jsxs(AlertDialogContent, { className: "max-h-[90vh] overflow-y-auto rounded-md border border-border bg-background", children: [
       /* @__PURE__ */ jsxs(AlertDialogHeader, { children: [
         /* @__PURE__ */ jsxs(AlertDialogTitle, { className: "flex items-center gap-2 text-lg font-semibold", children: [
           /* @__PURE__ */ jsx(TriangleAlert, { className: "h-5 w-5 text-destructive" }),
-          " Confirm Membership Cancellation"
+          " ",
+          t.title
         ] }),
         /* @__PURE__ */ jsxs(AlertDialogDescription, { className: "mt-3 space-y-3 text-muted-foreground", children: [
-          /* @__PURE__ */ jsx("p", { children: "You are about to cancel your membership. Please review the consequences:" }),
+          /* @__PURE__ */ jsx("p", { children: t.description }),
           /* @__PURE__ */ jsxs("ul", { className: "list-disc space-y-1 pl-5 text-sm", children: [
-            /* @__PURE__ */ jsx("li", { children: "You will immediately lose access to premium features upon confirmation." }),
-            /* @__PURE__ */ jsx("li", { children: "Your benefits remain active until the end of the billing cycle." }),
-            /* @__PURE__ */ jsx("li", { children: "Your account will revert to the free plan afterwards." })
+            /* @__PURE__ */ jsx("li", { children: t.consequence1 }),
+            /* @__PURE__ */ jsx("li", { children: t.consequence2 }),
+            /* @__PURE__ */ jsx("li", { children: t.consequence3 })
           ] })
         ] })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "my-4 space-y-2 py-2", children: [
-        /* @__PURE__ */ jsx(Label, { htmlFor: "cancelReason", className: "text-sm font-medium", children: "Please provide a reason for cancellation (required):" }),
+        /* @__PURE__ */ jsx(Label, { htmlFor: "cancelReason", className: "text-sm font-medium", children: t.reasonLabel }),
         /* @__PURE__ */ jsx(
           Textarea,
           {
             id: "cancelReason",
             value: cancelReason,
             onChange: handleReasonChange,
-            placeholder: "Your feedback helps us improve...",
+            placeholder: t.reasonPlaceholder,
             className: cn(
               "w-full resize-none border-border bg-background",
               showError && "border-destructive"
@@ -3412,19 +2694,19 @@ var CancelMembershipDialog = ({
           {
             id: "reason-hint",
             className: `text-xs ${showError ? "text-destructive" : "text-muted-foreground"}`,
-            children: showError ? `Reason must be at least ${minReasonLength} characters long.` : `Minimum ${minReasonLength} characters required.`
+            children: showError ? t.reasonError.replace("{min}", String(minReasonLength)) : t.reasonHint.replace("{min}", String(minReasonLength))
           }
         )
       ] }),
       /* @__PURE__ */ jsxs(AlertDialogFooter, { className: "mt-6 gap-2", children: [
-        /* @__PURE__ */ jsx(AlertDialogCancel, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "outline", className: "border-border text-muted-foreground", children: "Keep Membership" }) }),
+        /* @__PURE__ */ jsx(AlertDialogCancel, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "outline", className: "border-border text-muted-foreground", children: t.keepMembership }) }),
         /* @__PURE__ */ jsx(AlertDialogAction, { asChild: true, children: /* @__PURE__ */ jsx(
           Button,
           {
             className: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
             onClick: handleConfirm,
             disabled: !isReasonValid || isSubmitting,
-            children: isSubmitting ? "Cancelling..." : "Confirm Cancellation"
+            children: isSubmitting ? t.cancelling : t.confirmCancellation
           }
         ) })
       ] })
@@ -3435,14 +2717,29 @@ var notifyDefault2 = (payload) => {
   const level = payload.status === "destructive" ? "error" : "info";
   console[level === "error" ? "error" : "log"]("[payments-ui] billing", payload);
 };
+var defaultTranslations2 = {
+  title: "Transaction History",
+  description: "Record of billing history",
+  reviewActivity: "Review your account activity below",
+  loading: "Loading...",
+  error: "Error loading billing history.",
+  loadingMore: "Loading more...",
+  reference: "Reference",
+  date: "Date",
+  amount: "Amount",
+  processor: "Processor",
+  status: "Status"
+};
 var BillingHistory = ({
   pageSize = 10,
   initialPage = 1,
   enableCancel = true,
-  onNotify
+  onNotify,
+  translations: customTranslations
 }) => {
-  const { services } = usePaymentContext();
+  const { client } = usePaymentContext();
   const notify = onNotify ?? notifyDefault2;
+  const t = { ...defaultTranslations2, ...customTranslations };
   const [isExpanded, setIsExpanded] = useState(false);
   const observerRef = useRef(null);
   const loadMoreRef = useRef(null);
@@ -3450,7 +2747,17 @@ var BillingHistory = ({
     queryKey: ["payments-ui", "billing-history", pageSize],
     queryFn: async ({ pageParam = initialPage }) => {
       const offset = (pageParam - 1) * pageSize;
-      return services.subscriptions.getPaymentHistory({ limit: pageSize, offset });
+      return client.getPaymentHistory({ limit: pageSize, offset, type: void 0 }).then(
+        (response) => ({
+          data: response.data,
+          total_items: response.total,
+          limit: response.limit,
+          offset: response.offset,
+          page: response.limit > 0 ? Math.floor(response.offset / response.limit) + 1 : 1,
+          page_size: response.limit,
+          total_pages: response.limit > 0 ? Math.ceil(response.total / response.limit) : void 0
+        })
+      );
     },
     initialPageParam: initialPage,
     getNextPageParam: (lastPage) => {
@@ -3499,8 +2806,8 @@ var BillingHistory = ({
   return /* @__PURE__ */ jsx(Card, { className: "border-0 bg-background/5 shadow-lg", children: /* @__PURE__ */ jsxs("div", { className: "p-4 sm:p-6", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex cursor-pointer items-center justify-between", onClick: () => setIsExpanded((prev) => !prev), children: [
       /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx(CardTitle, { className: "text-xl font-semibold", children: "Transaction History" }),
-        /* @__PURE__ */ jsx(CardDescription, { children: "Record of billing history" })
+        /* @__PURE__ */ jsx(CardTitle, { className: "text-xl font-semibold", children: t.title }),
+        /* @__PURE__ */ jsx(CardDescription, { children: t.description })
       ] }),
       /* @__PURE__ */ jsx(ChevronDown, { className: cn("h-5 w-5 text-muted-foreground transition-transform", isExpanded && "rotate-180") })
     ] }),
@@ -3513,16 +2820,16 @@ var BillingHistory = ({
         ),
         children: /* @__PURE__ */ jsx(CardContent, { className: "p-0 pt-4", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between", children: [
-            /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Review your account activity below" }),
+            /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: t.reviewActivity }),
             enableCancel && /* @__PURE__ */ jsx(CancelMembershipDialog, { onNotify: notify })
           ] }),
-          /* @__PURE__ */ jsx("div", { className: "max-h-[300px] overflow-y-auto rounded-lg border border-border/70", children: /* @__PURE__ */ jsx("div", { className: "overflow-x-auto", children: historyQuery.isLoading ? /* @__PURE__ */ jsx("p", { className: "p-4 text-center text-sm text-muted-foreground", children: "Loading..." }) : historyQuery.isError ? /* @__PURE__ */ jsx("p", { className: "p-4 text-center text-sm text-destructive", children: "Error loading billing history." }) : /* @__PURE__ */ jsxs(Table, { children: [
+          /* @__PURE__ */ jsx("div", { className: "max-h-[300px] overflow-y-auto rounded-lg border border-border/70", children: /* @__PURE__ */ jsx("div", { className: "overflow-x-auto", children: historyQuery.isLoading ? /* @__PURE__ */ jsx("p", { className: "p-4 text-center text-sm text-muted-foreground", children: t.loading }) : historyQuery.isError ? /* @__PURE__ */ jsx("p", { className: "p-4 text-center text-sm text-destructive", children: t.error }) : /* @__PURE__ */ jsxs(Table, { children: [
             /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { className: "border-border/60", children: [
-              /* @__PURE__ */ jsx(TableHead, { children: "Reference" }),
-              /* @__PURE__ */ jsx(TableHead, { children: "Date" }),
-              /* @__PURE__ */ jsx(TableHead, { children: "Amount" }),
-              /* @__PURE__ */ jsx(TableHead, { children: "Processor" }),
-              /* @__PURE__ */ jsx(TableHead, { children: "Status" })
+              /* @__PURE__ */ jsx(TableHead, { children: t.reference }),
+              /* @__PURE__ */ jsx(TableHead, { children: t.date }),
+              /* @__PURE__ */ jsx(TableHead, { children: t.amount }),
+              /* @__PURE__ */ jsx(TableHead, { children: t.processor }),
+              /* @__PURE__ */ jsx(TableHead, { children: t.status })
             ] }) }),
             /* @__PURE__ */ jsx(TableBody, { children: payments.map(
               (page) => page.data.map((payment) => /* @__PURE__ */ jsxs(TableRow, { className: "border-border/40", children: [
@@ -3534,7 +2841,7 @@ var BillingHistory = ({
               ] }, payment.id))
             ) })
           ] }) }) }),
-          /* @__PURE__ */ jsx("div", { ref: loadMoreRef, className: "h-10 w-full", children: historyQuery.isFetchingNextPage && /* @__PURE__ */ jsx("p", { className: "text-center text-sm text-muted-foreground", children: "Loading more..." }) })
+          /* @__PURE__ */ jsx("div", { ref: loadMoreRef, className: "h-10 w-full", children: historyQuery.isFetchingNextPage && /* @__PURE__ */ jsx("p", { className: "text-center text-sm text-muted-foreground", children: t.loadingMore }) })
         ] }) })
       }
     )
@@ -3549,19 +2856,56 @@ var notifyDefault3 = (payload) => {
   const level = payload.status === "destructive" ? "error" : "info";
   console[level === "error" ? "error" : "log"]("[payments-ui] notification", payload);
 };
+var defaultTranslations3 = {
+  title: "Payment Methods",
+  description: "Manage your saved billing cards",
+  addCard: "Add card",
+  loadingCards: "Loading cards...",
+  noPaymentMethods: "No saved payment methods yet.",
+  addedOn: "Added on",
+  active: "Active",
+  inactive: "Inactive",
+  replaceCard: "Replace card",
+  makeDefault: "Make default",
+  defaultMethod: "Default method",
+  remove: "Remove",
+  addNewCard: "Add a new card",
+  addNewCardDescription: "Your card details are tokenized securely via our payment provider.",
+  saveCard: "Save card",
+  replaceCardTitle: "Replace card",
+  replaceCardDescription: "Update this card with new billing details.",
+  cardAddedSuccess: "Card added successfully",
+  unableToAddCard: "Unable to add card",
+  cardRemoved: "Card removed",
+  unableToRemoveCard: "Unable to remove card",
+  cardUpdated: "Card updated",
+  unableToReplaceCard: "Unable to replace card",
+  defaultPaymentMethodUpdated: "Default payment method updated",
+  unableToSetDefault: "Unable to set default payment method"
+};
 var PaymentMethodsSection = ({
   isAuthenticated = true,
   userEmail,
   provider = "mobius",
   defaultCountry = "US",
   collectPrefix = "account-card",
-  onNotify
+  onNotify,
+  translations: customTranslations
 }) => {
-  const paymentMethods = usePaymentMethodService();
+  const { client } = usePaymentContext();
   const queryClient = useQueryClient();
+  const paymentMethods = {
+    list: (params) => client.listPaymentMethods({ limit: params.pageSize }),
+    create: (payload) => client.createPaymentMethod(payload),
+    update: (id, payload) => client.updatePaymentMethod(id, payload),
+    remove: (id) => client.deletePaymentMethod(id),
+    activate: (id) => client.activatePaymentMethod(id)
+  };
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [deletingId, setDeletingId] = useState(null);
+  const [methodBeingReplaced, setMethodBeingReplaced] = useState(null);
   const notify = onNotify ?? notifyDefault3;
+  const t = { ...defaultTranslations3, ...customTranslations };
   const queryKey = ["payments-ui", "payment-methods"];
   const paymentQuery = useQuery({
     queryKey,
@@ -3572,13 +2916,13 @@ var PaymentMethodsSection = ({
   const createMutation = useMutation({
     mutationFn: (payload) => paymentMethods.create(payload),
     onSuccess: () => {
-      notify({ title: "Card added successfully", status: "success" });
+      notify({ title: t.cardAddedSuccess, status: "success" });
       setIsModalOpen(false);
       void queryClient.invalidateQueries({ queryKey });
     },
     onError: (error) => {
       notify({
-        title: "Unable to add card",
+        title: t.unableToAddCard,
         description: error.message,
         status: "destructive"
       });
@@ -3588,18 +2932,47 @@ var PaymentMethodsSection = ({
     mutationFn: (id) => paymentMethods.remove(id),
     onMutate: (id) => setDeletingId(id),
     onSuccess: () => {
-      notify({ title: "Card removed", status: "success" });
+      notify({ title: t.cardRemoved, status: "success" });
       void queryClient.invalidateQueries({ queryKey });
     },
     onError: (error) => {
       notify({
-        title: "Unable to remove card",
+        title: t.unableToRemoveCard,
         description: error.message,
         status: "destructive"
       });
     },
     onSettled: () => setDeletingId(null)
   });
+  const replaceMutation = useMutation({
+    mutationFn: ({ id, payload }) => paymentMethods.update(id, payload),
+    onSuccess: () => {
+      notify({ title: t.cardUpdated, status: "success" });
+      setMethodBeingReplaced(null);
+      void queryClient.invalidateQueries({ queryKey });
+    },
+    onError: (error) => {
+      notify({
+        title: t.unableToReplaceCard,
+        description: error.message,
+        status: "destructive"
+      });
+    }
+  });
+  const activateMutation = useMutation({
+    mutationFn: (id) => paymentMethods.activate(id),
+    onSuccess: () => {
+      notify({ title: t.defaultPaymentMethodUpdated, status: "success" });
+      void queryClient.invalidateQueries({ queryKey });
+    },
+    onError: (error) => {
+      notify({
+        title: t.unableToSetDefault,
+        description: error.message,
+        status: "destructive"
+      });
+    }
+  });
   useEffect(() => {
     if (!isModalOpen) {
       createMutation.reset();
@@ -3607,49 +2980,56 @@ var PaymentMethodsSection = ({
   }, [createMutation, isModalOpen]);
   const payments = useMemo(() => paymentQuery.data?.data ?? [], [paymentQuery.data]);
   const loading = paymentQuery.isLoading || paymentQuery.isFetching;
+  const buildPayload = (token, billing) => ({
+    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
+  });
   const handleCardTokenize = (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
-    };
-    createMutation.mutate(payload);
+    createMutation.mutate(buildPayload(token, billing));
   };
-  return /* @__PURE__ */ jsxs(Card, { className: "border-0 bg-background/5 shadow-lg", children: [
+  const handleReplaceTokenize = (token, billing) => {
+    if (!methodBeingReplaced) return;
+    replaceMutation.mutate({ id: methodBeingReplaced.id, payload: buildPayload(token, billing) });
+  };
+  return /* @__PURE__ */ jsxs(Card, { children: [
     /* @__PURE__ */ jsxs(CardHeader, { className: "flex flex-col gap-4 md:flex-row md:items-center md:justify-between", children: [
       /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsxs(CardTitle, { className: "flex items-center gap-2 text-xl", children: [
-          /* @__PURE__ */ jsx(WalletCards, { className: "h-5 w-5 text-primary" }),
-          " Payment Methods"
+        /* @__PURE__ */ jsxs(CardTitle, { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(WalletCards, { className: "h-5 w-5 text-emerald-400" }),
+          " ",
+          t.title
         ] }),
-        /* @__PURE__ */ jsx(CardDescription, { children: "Manage your saved billing cards" })
+        /* @__PURE__ */ jsx(CardDescription, { children: t.description })
       ] }),
       /* @__PURE__ */ jsxs(Button, { onClick: () => setIsModalOpen(true), children: [
         /* @__PURE__ */ jsx(CreditCard, { className: "mr-2 h-4 w-4" }),
-        " Add card"
+        " ",
+        t.addCard
       ] })
     ] }),
-    /* @__PURE__ */ jsx(CardContent, { className: "space-y-4", children: loading ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center py-10 text-muted-foreground", children: [
+    /* @__PURE__ */ jsx(CardContent, { className: "space-y-4", children: loading ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center py-10 text-white/60", children: [
       /* @__PURE__ */ jsx(Loader2, { className: "mr-2 h-5 w-5 animate-spin" }),
-      " Loading cards..."
-    ] }) : payments.length === 0 ? /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-dashed border-border/60 bg-muted/10 p-6 text-sm text-muted-foreground", children: "No saved payment methods yet." }) : /* @__PURE__ */ jsx("div", { className: "space-y-3", children: payments.map((method) => /* @__PURE__ */ jsxs(
+      " ",
+      t.loadingCards
+    ] }) : payments.length === 0 ? /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-dashed border-white/20 bg-white/5 p-6 text-sm text-white/60", children: t.noPaymentMethods }) : /* @__PURE__ */ jsx("div", { className: "space-y-3", children: payments.map((method) => /* @__PURE__ */ jsxs(
       "div",
       {
-        className: "rounded-lg border border-border/80 bg-background/40 p-4 shadow-sm",
+        className: "rounded-lg border border-white/10 bg-white/5 p-4 shadow-sm",
         children: [
           /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 md:flex-row md:items-center md:justify-between", children: [
             /* @__PURE__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsx("h4", { className: "text-base font-medium text-foreground", children: formatCardLabel2(method) }),
-              /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground", children: [
-                "Added on",
+              /* @__PURE__ */ jsx("h4", { className: "text-base font-medium text-white", children: formatCardLabel2(method) }),
+              /* @__PURE__ */ jsxs("p", { className: "text-sm text-white/60", children: [
+                t.addedOn,
                 " ",
                 method.created_at ? new Date(method.created_at).toLocaleDateString() : "unknown date"
               ] })
@@ -3659,34 +3039,60 @@ var PaymentMethodsSection = ({
                 Badge,
                 {
                   variant: method.is_active ? "default" : "secondary",
-                  className: method.is_active ? "bg-emerald-500/20 text-emerald-400" : "",
-                  children: method.is_active ? "Active" : "Inactive"
+                  children: method.is_active ? t.active : t.inactive
                 }
               ),
               method.failure_reason && /* @__PURE__ */ jsx(Badge, { variant: "destructive", children: method.failure_reason })
             ] })
           ] }),
-          /* @__PURE__ */ jsx("div", { className: "mt-3 flex flex-wrap gap-2", children: /* @__PURE__ */ jsxs(
-            Button,
-            {
-              variant: "ghost",
-              className: "text-destructive hover:text-destructive",
-              disabled: deletingId === method.id && deleteMutation.isPending,
-              onClick: () => deleteMutation.mutate(method.id),
-              children: [
-                deletingId === method.id && deleteMutation.isPending ? /* @__PURE__ */ jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }) : /* @__PURE__ */ jsx(Trash2, { className: "mr-2 h-4 w-4" }),
-                "Remove"
-              ]
-            }
-          ) })
+          /* @__PURE__ */ jsxs("div", { className: "mt-3 flex flex-wrap gap-2", children: [
+            /* @__PURE__ */ jsxs(
+              Button,
+              {
+                variant: "ghost",
+                className: "text-blue-400",
+                disabled: replaceMutation.isPending && methodBeingReplaced?.id === method.id,
+                onClick: () => setMethodBeingReplaced(method),
+                children: [
+                  replaceMutation.isPending && methodBeingReplaced?.id === method.id ? /* @__PURE__ */ jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }) : /* @__PURE__ */ jsx(CreditCard, { className: "mr-2 h-4 w-4" }),
+                  t.replaceCard
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              Button,
+              {
+                variant: "outline",
+                disabled: method.is_active || activateMutation.isPending,
+                onClick: () => activateMutation.mutate(method.id),
+                children: [
+                  activateMutation.isPending ? /* @__PURE__ */ jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }) : null,
+                  method.is_active ? t.defaultMethod : t.makeDefault
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              Button,
+              {
+                variant: "ghost",
+                className: "text-red-400 hover:text-red-300",
+                disabled: deletingId === method.id && deleteMutation.isPending,
+                onClick: () => deleteMutation.mutate(method.id),
+                children: [
+                  deletingId === method.id && deleteMutation.isPending ? /* @__PURE__ */ jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }) : /* @__PURE__ */ jsx(Trash2, { className: "mr-2 h-4 w-4" }),
+                  t.remove
+                ]
+              }
+            )
+          ] })
         ]
       },
       method.id
     )) }) }),
-    /* @__PURE__ */ jsx(Dialog, { open: isModalOpen, onOpenChange: setIsModalOpen, children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-h-[95vh] overflow-y-auto border border-border bg-background", children: [
+    /* @__PURE__ */ jsx(Dialog, { open: isModalOpen, onOpenChange: setIsModalOpen, children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-h-[95vh] overflow-y-auto", children: [
       /* @__PURE__ */ jsxs(DialogHeader, { children: [
-        /* @__PURE__ */ jsx(DialogTitle, { children: "Add a new card" }),
-        /* @__PURE__ */ jsx(DialogDescription, { children: "Your card details are tokenized securely via our payment provider." })
+        /* @__PURE__ */ jsx(DialogTitle, { children: t.addNewCard }),
+        /* @__PURE__ */ jsx(DialogDescription, { children: t.addNewCardDescription })
       ] }),
       /* @__PURE__ */ jsx(
         CardDetailsForm,
@@ -3694,7 +3100,7 @@ var PaymentMethodsSection = ({
           visible: isModalOpen,
           collectPrefix,
           submitting: createMutation.isPending,
-          submitLabel: "Save card",
+          submitLabel: t.saveCard,
           defaultValues: {
             email: userEmail ?? "",
             country: defaultCountry,
@@ -3702,640 +3108,36 @@ var PaymentMethodsSection = ({
           },
           externalError: createMutation.error?.message ?? null,
           onTokenize: handleCardTokenize,
-          className: "rounded-2xl border border-border bg-muted/20 p-6"
+          className: "rounded-2xl border border-white/10 bg-white/5 p-6"
         }
       )
-    ] }) })
-  ] });
-};
-var useWalletList = (options = {}) => {
-  const { services } = usePaymentContext();
-  const [state, setState] = useState({
-    wallets: [],
-    isLoading: false,
-    error: null
-  });
-  const fetchWallets = useCallback(async () => {
-    setState((prev) => ({ ...prev, isLoading: true, error: null }));
-    try {
-      const wallets2 = await services.solanaWallets.list();
-      setState({ wallets: wallets2, isLoading: false, error: null });
-      return wallets2;
-    } catch (error) {
-      const message = error instanceof Error ? error.message : "Failed to load wallets";
-      console.error("payments-ui: wallet list fetch failed", error);
-      setState((prev) => ({ ...prev, isLoading: false, error: message }));
-      throw error;
-    }
-  }, [services.solanaWallets]);
-  const deleteWallet = useCallback(
-    async (walletIdOrAddress) => {
-      setState((prev) => ({ ...prev, isLoading: true, error: null }));
-      try {
-        await services.solanaWallets.remove(walletIdOrAddress);
-        setState((prev) => ({
-          ...prev,
-          wallets: prev.wallets.filter(
-            (wallet) => wallet.id !== walletIdOrAddress && wallet.address !== walletIdOrAddress
-          ),
-          isLoading: false
-        }));
-      } catch (error) {
-        const message = error instanceof Error ? error.message : "Failed to remove wallet";
-        console.error("payments-ui: wallet removal failed", error);
-        setState((prev) => ({ ...prev, isLoading: false, error: message }));
-        throw error;
-      }
-    },
-    [services.solanaWallets]
-  );
-  const addWallet = useCallback((wallet) => {
-    setState((prev) => ({ ...prev, wallets: [...prev.wallets, wallet] }));
-  }, []);
-  const updateWallet = useCallback((walletId, updates) => {
-    setState((prev) => ({
-      ...prev,
-      wallets: prev.wallets.map(
-        (wallet) => wallet.id === walletId ? { ...wallet, ...updates } : wallet
-      )
-    }));
-  }, []);
-  const clearError = useCallback(() => {
-    setState((prev) => ({ ...prev, error: null }));
-  }, []);
-  const findWalletByAddress = useCallback(
-    (address) => state.wallets.find((wallet) => wallet.address === address),
-    [state.wallets]
-  );
-  const getVerifiedWallets = useCallback(
-    () => state.wallets.filter((wallet) => wallet.is_verified),
-    [state.wallets]
-  );
-  useEffect(() => {
-    if (options.autoFetch !== false) {
-      fetchWallets().catch(() => {
-      });
-    }
-  }, [fetchWallets, options.autoFetch]);
-  return {
-    wallets: state.wallets,
-    isLoading: state.isLoading,
-    error: state.error,
-    fetchWallets,
-    deleteWallet,
-    addWallet,
-    updateWallet,
-    clearError,
-    findWalletByAddress,
-    getVerifiedWallets,
-    hasVerifiedWallets: state.wallets.some((w) => w.is_verified),
-    totalWallets: state.wallets.length
-  };
-};
-var useWalletVerification = () => {
-  const { services } = usePaymentContext();
-  const { publicKey, signMessage } = useWallet();
-  const [state, setState] = useState({
-    isVerifying: false,
-    isVerified: false,
-    error: null
-  });
-  const signAndVerifyWallet = useCallback(
-    async (walletAddress, message, nonce) => {
-      if (!publicKey || !signMessage) {
-        throw new Error("Wallet not connected or signing unavailable");
-      }
-      if (publicKey.toBase58() !== walletAddress) {
-        throw new Error("Connected wallet does not match target wallet");
-      }
-      setState((prev) => ({ ...prev, isVerifying: true, error: null }));
-      try {
-        const encodedMessage = new TextEncoder().encode(message);
-        const signature = await signMessage(encodedMessage);
-        const signatureBase58 = bs58.encode(signature);
-        const response = await services.solanaWallets.verify(
-          walletAddress,
-          signatureBase58,
-          nonce
-        );
-        setState({ isVerifying: false, isVerified: response.verified, error: null });
-        return response;
-      } catch (error) {
-        const message2 = error instanceof Error ? error.message : "Wallet verification failed";
-        console.error("payments-ui: wallet verification failed", error);
-        setState({ isVerifying: false, isVerified: false, error: message2 });
-        throw error;
-      }
-    },
-    [publicKey, signMessage, services.solanaWallets]
-  );
-  const clearError = useCallback(() => {
-    setState((prev) => ({ ...prev, error: null }));
-  }, []);
-  const resetVerification = useCallback(() => {
-    setState({ isVerifying: false, isVerified: false, error: null });
-  }, []);
-  const autoVerifyWallet = useCallback(
-    async (walletAddress, message, nonce) => {
-      try {
-        return await signAndVerifyWallet(walletAddress, message, nonce);
-      } catch (error) {
-        console.warn("payments-ui: auto-verification skipped", error);
-        return null;
-      }
-    },
-    [signAndVerifyWallet]
-  );
-  return {
-    ...state,
-    signAndVerifyWallet,
-    autoVerifyWallet,
-    clearError,
-    resetVerification
-  };
-};
-var useWalletConnection = () => {
-  const { services } = usePaymentContext();
-  const { publicKey, connected, connecting, disconnect, wallet } = useWallet();
-  const [state, setState] = useState({
-    isConnected: false,
-    isConnecting: false,
-    publicKey: null,
-    wallets: [],
-    isLoading: false,
-    error: null
-  });
-  useEffect(() => {
-    setState((prev) => ({
-      ...prev,
-      isConnected: connected,
-      isConnecting: connecting,
-      publicKey: publicKey?.toBase58() ?? null
-    }));
-  }, [connected, connecting, publicKey]);
-  const connectWalletToBackend = useCallback(
-    async (address) => {
-      if (!address) {
-        throw new Error("Wallet address is required");
-      }
-      setState((prev) => ({ ...prev, isLoading: true, error: null }));
-      try {
-        const challenge = await services.solanaWallets.requestChallenge(address);
-        setState((prev) => ({ ...prev, isLoading: false }));
-        return challenge;
-      } catch (error) {
-        const message = error instanceof Error ? error.message : "Wallet challenge failed";
-        console.error("payments-ui: wallet challenge failed", error);
-        setState((prev) => ({ ...prev, isLoading: false, error: message }));
-        throw error;
-      }
-    },
-    [services.solanaWallets]
-  );
-  const connectWallet = useCallback(async () => {
-    if (!wallet) {
-      throw new Error("No wallet adapter selected");
-    }
-    setState((prev) => ({ ...prev, isConnecting: true, error: null }));
-    try {
-      await wallet.adapter.connect();
-      if (publicKey) {
-        await connectWalletToBackend(publicKey.toBase58());
-      }
-    } catch (error) {
-      const message = error instanceof Error ? error.message : "Failed to connect wallet";
-      console.error("payments-ui: wallet connection failed", error);
-      setState((prev) => ({ ...prev, isConnecting: false, error: message }));
-      throw error;
-    } finally {
-      setState((prev) => ({ ...prev, isConnecting: false }));
-    }
-  }, [wallet, publicKey, connectWalletToBackend]);
-  const disconnectWallet = useCallback(async () => {
-    try {
-      await disconnect();
-      setState((prev) => ({
-        ...prev,
-        isConnected: false,
-        publicKey: null,
-        wallets: [],
-        error: null
-      }));
-    } catch (error) {
-      const message = error instanceof Error ? error.message : "Failed to disconnect wallet";
-      console.error("payments-ui: wallet disconnect failed", error);
-      setState((prev) => ({ ...prev, error: message }));
-      throw error;
-    }
-  }, [disconnect]);
-  const clearError = useCallback(() => {
-    setState((prev) => ({ ...prev, error: null }));
-  }, []);
-  return {
-    ...state,
-    walletName: wallet?.adapter.name,
-    walletIcon: wallet?.adapter.icon,
-    connectWallet,
-    disconnectWallet,
-    connectWalletToBackend,
-    clearError
-  };
-};
-var notifyDefault4 = (payload) => {
-  console.log("[payments-ui] wallet-card", payload);
-};
-var WalletCard = ({
-  wallet,
-  isPrimary = false,
-  isConnected = false,
-  balance,
-  onSetPrimary,
-  onVerify,
-  onDelete,
-  isVerifying = false,
-  isDeleting = false,
-  notify = notifyDefault4
-}) => {
-  const [isCopying, setIsCopying] = useState(false);
-  const formatAddress = (address) => address.length <= 12 ? address : `${address.slice(0, 4)}...${address.slice(-4)}`;
-  const copyToClipboard = async (text) => {
-    setIsCopying(true);
-    try {
-      await navigator.clipboard.writeText(text);
-      notify({ title: "Copied", description: "Wallet address copied to clipboard" });
-    } catch (error) {
-      notify({ title: "Failed to copy", description: error.message, status: "destructive" });
-    } finally {
-      setTimeout(() => setIsCopying(false), 500);
-    }
-  };
-  const openExplorer = () => {
-    window.open(`https://solscan.io/account/${wallet.address}`, "_blank", "noopener,noreferrer");
-  };
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: cn(
-        "rounded-lg border bg-background/40 p-4 transition-shadow",
-        isPrimary && "border-primary/50 shadow-lg",
-        isConnected && "ring-1 ring-primary"
-      ),
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between", children: [
-          /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-            /* @__PURE__ */ jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-full bg-primary/20", children: /* @__PURE__ */ jsx("div", { className: "h-5 w-5 rounded-full bg-gradient-to-br from-primary to-primary/60" }) }),
-            /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
-                /* @__PURE__ */ jsx("span", { className: "font-mono text-sm font-medium", children: formatAddress(wallet.address) }),
-                isPrimary && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 rounded-full bg-yellow-500/20 px-2 py-0.5 text-xs text-yellow-500", children: [
-                  /* @__PURE__ */ jsx(Star, { className: "h-3 w-3 fill-yellow-500 text-yellow-500" }),
-                  " Primary"
-                ] }),
-                wallet.is_verified ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 text-xs text-emerald-400", children: [
-                  /* @__PURE__ */ jsx(CheckCircle, { className: "h-3.5 w-3.5" }),
-                  " Verified"
-                ] }) : /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 text-xs text-amber-400", children: [
-                  /* @__PURE__ */ jsx(AlertCircle, { className: "h-3.5 w-3.5" }),
-                  " Unverified"
-                ] }),
-                isConnected && /* @__PURE__ */ jsx("span", { className: "rounded bg-blue-500/20 px-2 py-0.5 text-xs text-blue-400", children: "Connected" })
-              ] }),
-              balance !== null && typeof balance !== "undefined" && /* @__PURE__ */ jsxs("p", { className: "mt-1 text-sm text-muted-foreground", children: [
-                "Balance: ",
-                balance.toFixed(4),
-                " SOL"
-              ] }),
-              /* @__PURE__ */ jsxs("p", { className: "mt-0.5 text-xs text-muted-foreground", children: [
-                "Added ",
-                new Date(wallet.created_at).toLocaleDateString()
-              ] })
-            ] })
-          ] }) }),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-            /* @__PURE__ */ jsx(
-              Button,
-              {
-                variant: "ghost",
-                size: "icon",
-                className: "h-8 w-8",
-                onClick: () => copyToClipboard(wallet.address),
-                disabled: isCopying,
-                children: isCopying ? /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ jsx(Copy, { className: "h-4 w-4" })
-              }
-            ),
-            /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-8 w-8", onClick: openExplorer, children: /* @__PURE__ */ jsx(ExternalLink, { className: "h-4 w-4" }) })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "mt-3 flex flex-wrap items-center gap-2", children: [
-          !isPrimary && onSetPrimary && wallet.is_verified && /* @__PURE__ */ jsxs(
-            Button,
-            {
-              variant: "outline",
-              size: "sm",
-              className: "border-primary/40 text-primary",
-              onClick: () => onSetPrimary(wallet.id),
-              children: [
-                /* @__PURE__ */ jsx(Star, { className: "mr-1 h-3 w-3" }),
-                " Set Primary"
-              ]
-            }
-          ),
-          !wallet.is_verified && onVerify && isConnected && /* @__PURE__ */ jsx(
-            Button,
-            {
-              variant: "outline",
-              size: "sm",
-              className: "border-emerald-500/40 text-emerald-400",
-              onClick: () => onVerify(wallet),
-              disabled: isVerifying,
-              children: isVerifying ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                /* @__PURE__ */ jsx(Loader2, { className: "mr-1 h-3 w-3 animate-spin" }),
-                " Verifying..."
-              ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-                /* @__PURE__ */ jsx(Shield, { className: "mr-1 h-3 w-3" }),
-                " Verify"
-              ] })
-            }
-          ),
-          onDelete && /* @__PURE__ */ jsx(
-            Button,
-            {
-              variant: "outline",
-              size: "sm",
-              className: "ml-auto border-destructive/40 text-destructive",
-              onClick: () => onDelete(wallet.id),
-              disabled: isDeleting,
-              children: isDeleting ? /* @__PURE__ */ jsx(Loader2, { className: "h-3 w-3 animate-spin" }) : /* @__PURE__ */ jsx(Trash2, { className: "h-3 w-3" })
-            }
-          )
-        ] })
-      ]
-    }
-  );
-};
-var EmptyWalletState = () => /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center py-12 text-center", children: [
-  /* @__PURE__ */ jsx(Wallet, { className: "mb-4 h-12 w-12 text-muted-foreground" }),
-  /* @__PURE__ */ jsx("h3", { className: "mb-2 text-lg font-medium", children: "No wallets connected" }),
-  /* @__PURE__ */ jsx("p", { className: "mb-6 text-sm text-muted-foreground", children: "Connect your Solana wallet to get started" }),
-  /* @__PURE__ */ jsx(WalletMultiButton, { className: "!bg-primary text-primary-foreground hover:!bg-primary/90" })
-] });
-var notifyDefault5 = (payload) => {
-  console.log("[payments-ui] solana-wallets", payload);
-};
-var SolanaWalletSection = ({
-  onNotify,
-  rpcUrl
-}) => {
-  const notify = onNotify ?? notifyDefault5;
-  const { config } = usePaymentContext();
-  const { connected, publicKey, disconnect } = useWallet();
-  const { wallets: wallets2, isLoading, deleteWallet, fetchWallets } = useWalletList();
-  const { signAndVerifyWallet } = useWalletVerification();
-  const walletConnection = useWalletConnection();
-  const [primaryWalletId, setPrimaryWalletId] = useState(null);
-  const [showOtherWallets, setShowOtherWallets] = useState(false);
-  const [balances, setBalances] = useState({});
-  const [verifyingWalletId, setVerifyingWalletId] = useState(null);
-  const [deletingWalletId, setDeletingWalletId] = useState(null);
-  const [walletToDelete, setWalletToDelete] = useState(null);
-  const [isRegistering, setIsRegistering] = useState(false);
-  const rpcEndpoint = rpcUrl || config.solanaRpcUrl || "https://api.mainnet-beta.solana.com";
-  const connection = useMemo(() => new Connection(rpcEndpoint), [rpcEndpoint]);
-  const primaryWallet = wallets2.find((w) => w.id === primaryWalletId) ?? wallets2.find((w) => w.is_verified) ?? null;
-  const otherWallets = wallets2.filter((w) => w.id !== primaryWallet?.id);
-  const fetchBalance = useCallback(
-    async (address) => {
-      try {
-        const pubkey = new PublicKey(address);
-        const balance = await connection.getBalance(pubkey);
-        return balance / LAMPORTS_PER_SOL;
-      } catch (error) {
-        console.error("payments-ui: failed to fetch balance", error);
-        return null;
-      }
-    },
-    [connection]
-  );
-  const fetchAllBalances = useCallback(async () => {
-    const results = await Promise.all(
-      wallets2.map(async (wallet) => ({ address: wallet.address, balance: await fetchBalance(wallet.address) }))
-    );
-    const next = {};
-    results.forEach(({ address, balance }) => {
-      if (balance !== null && typeof balance !== "undefined") {
-        next[address] = balance;
-      }
-    });
-    setBalances(next);
-  }, [wallets2, fetchBalance]);
-  useEffect(() => {
-    if (wallets2.length > 0) {
-      fetchAllBalances().catch(() => void 0);
-    }
-  }, [wallets2, fetchAllBalances]);
-  useEffect(() => {
-    const verifiedWallet = wallets2.find((w) => w.is_verified);
-    if (verifiedWallet && !primaryWalletId) {
-      setPrimaryWalletId(verifiedWallet.id);
-    }
-  }, [wallets2, primaryWalletId]);
-  const registerWallet = useCallback(async () => {
-    if (!connected || !publicKey || isRegistering) return;
-    setIsRegistering(true);
-    try {
-      const challenge = await walletConnection.connectWalletToBackend(publicKey.toBase58());
-      if (!challenge?.message) {
-        throw new Error("Failed to retrieve wallet verification challenge");
-      }
-      await signAndVerifyWallet(challenge.wallet, challenge.message, challenge.nonce);
-      await fetchWallets();
-      notify({
-        title: "Wallet verified",
-        description: "Your wallet has been linked successfully.",
-        status: "success"
-      });
-    } catch (error) {
-      notify({
-        title: "Wallet verification failed",
-        description: error instanceof Error ? error.message : "Failed to verify wallet",
-        status: "destructive"
-      });
-    } finally {
-      setIsRegistering(false);
-    }
-  }, [connected, publicKey, isRegistering, walletConnection, signAndVerifyWallet, fetchWallets, notify]);
-  useEffect(() => {
-    if (connected && publicKey && !walletConnection.isConnecting && wallets2.length === 0) {
-      registerWallet().catch(() => void 0);
-    }
-  }, [connected, publicKey, walletConnection.isConnecting, wallets2.length, registerWallet]);
-  const handleVerifyWallet = useCallback(
-    async (wallet) => {
-      if (!connected || publicKey?.toBase58() !== wallet.address) {
-        notify({
-          title: "Connect wallet first",
-          description: "Please connect the wallet you want to verify.",
-          status: "destructive"
-        });
-        return;
-      }
-      setVerifyingWalletId(wallet.id);
-      try {
-        const challenge = await walletConnection.connectWalletToBackend(wallet.address);
-        if (!challenge?.message) {
-          throw new Error("Failed to retrieve verification challenge");
-        }
-        await signAndVerifyWallet(challenge.wallet, challenge.message, challenge.nonce);
-        await fetchWallets();
-        notify({ title: "Wallet verified", status: "success" });
-      } catch (error) {
-        notify({
-          title: "Verification failed",
-          description: error instanceof Error ? error.message : "Failed to verify wallet",
-          status: "destructive"
-        });
-      } finally {
-        setVerifyingWalletId(null);
-      }
-    },
-    [connected, publicKey, walletConnection, signAndVerifyWallet, fetchWallets, notify]
-  );
-  const handleDeleteWallet = useCallback(
-    async (walletId) => {
-      setDeletingWalletId(walletId);
-      try {
-        await deleteWallet(walletId);
-        if (primaryWalletId === walletId) {
-          setPrimaryWalletId(null);
-        }
-        if (connected && publicKey) {
-          const deletedWallet = wallets2.find((w) => w.id === walletId);
-          if (deletedWallet?.address === publicKey.toBase58()) {
-            await disconnect();
-          }
-        }
-        notify({ title: "Wallet removed", status: "success" });
-      } catch (error) {
-        notify({
-          title: "Failed to remove wallet",
-          description: error instanceof Error ? error.message : "Please try again",
-          status: "destructive"
-        });
-      } finally {
-        setDeletingWalletId(null);
-        setWalletToDelete(null);
-      }
-    },
-    [deleteWallet, primaryWalletId, connected, publicKey, wallets2, disconnect, notify]
-  );
-  const handleSetPrimary = (walletId) => {
-    setPrimaryWalletId(walletId);
-    notify({ title: "Primary wallet updated", status: "success" });
-  };
-  const isWalletRegistered = connected && publicKey && wallets2.some((w) => w.address === publicKey.toBase58());
-  if (isLoading && wallets2.length === 0) {
-    return /* @__PURE__ */ jsxs(Card, { className: "border-0 bg-background/5", children: [
-      /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(CardTitle, { className: "text-xl", children: "Solana Wallets" }) }),
-      /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center py-8", children: [
-        /* @__PURE__ */ jsx(Loader2, { className: "mr-2 h-6 w-6 animate-spin text-muted-foreground" }),
-        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Loading wallets..." })
-      ] }) })
-    ] });
-  }
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(Card, { className: "border-0 bg-background/5", children: [
-      /* @__PURE__ */ jsxs(CardHeader, { children: [
-        /* @__PURE__ */ jsx(CardTitle, { className: "text-xl", children: "Solana Wallets" }),
-        /* @__PURE__ */ jsx(CardDescription, { children: "Connect and manage your Solana wallets for payments" })
-      ] }),
-      /* @__PURE__ */ jsx(CardContent, { className: "space-y-4", children: wallets2.length === 0 && !connected ? /* @__PURE__ */ jsx(EmptyWalletState, {}) : /* @__PURE__ */ jsxs(Fragment, { children: [
-        primaryWallet && /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("h3", { className: "mb-3 text-sm font-medium uppercase tracking-wide text-muted-foreground", children: "Primary Wallet" }),
-          /* @__PURE__ */ jsx(
-            WalletCard,
-            {
-              wallet: primaryWallet,
-              isPrimary: true,
-              isConnected: connected && publicKey?.toBase58() === primaryWallet.address,
-              balance: balances[primaryWallet.address],
-              onVerify: handleVerifyWallet,
-              onDelete: (id) => {
-                const target = wallets2.find((w) => w.id === id);
-                if (target) setWalletToDelete(target);
-              },
-              isVerifying: verifyingWalletId === primaryWallet.id,
-              isDeleting: deletingWalletId === primaryWallet.id,
-              notify
-            }
-          )
-        ] }),
-        otherWallets.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsxs(
-            "button",
-            {
-              className: "mb-3 flex w-full items-center justify-between text-left",
-              onClick: () => setShowOtherWallets((prev) => !prev),
-              children: [
-                /* @__PURE__ */ jsxs("h3", { className: "text-sm font-medium uppercase tracking-wide text-muted-foreground", children: [
-                  "Other Wallets (",
-                  otherWallets.length,
-                  ")"
-                ] }),
-                showOtherWallets ? /* @__PURE__ */ jsx(ChevronUp, { className: "h-4 w-4 text-muted-foreground" }) : /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 text-muted-foreground" })
-              ]
-            }
-          ),
-          showOtherWallets && /* @__PURE__ */ jsx("div", { className: "space-y-2", children: otherWallets.map((wallet) => /* @__PURE__ */ jsx(
-            WalletCard,
-            {
-              wallet,
-              isConnected: connected && publicKey?.toBase58() === wallet.address,
-              balance: balances[wallet.address],
-              onSetPrimary: handleSetPrimary,
-              onVerify: handleVerifyWallet,
-              onDelete: (id) => {
-                const target = wallets2.find((w) => w.id === id);
-                if (target) setWalletToDelete(target);
-              },
-              isVerifying: verifyingWalletId === wallet.id,
-              isDeleting: deletingWalletId === wallet.id,
-              notify
-            },
-            wallet.id
-          )) })
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: "pt-4", children: connected && publicKey ? isWalletRegistered ? /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 rounded-lg border border-emerald-500/40 bg-emerald-500/10 p-3 text-sm text-emerald-200", children: [
-            /* @__PURE__ */ jsx(CheckCircle, { className: "h-4 w-4" }),
-            " Connected wallet is verified and linked to your account."
-          ] }),
-          /* @__PURE__ */ jsx(WalletMultiButton, { className: "w-full !bg-primary text-primary-foreground" })
-        ] }) : /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
-          /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-amber-500/40 bg-amber-500/10 p-3 text-sm text-amber-200", children: "Your connected wallet is not registered with your account." }),
-          /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
-            /* @__PURE__ */ jsx(Button, { onClick: registerWallet, disabled: isRegistering || walletConnection.isConnecting, className: "flex-1 bg-primary text-primary-foreground", children: isRegistering ? /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }),
-              " Registering..."
-            ] }) : "Register This Wallet" }),
-            /* @__PURE__ */ jsx(Button, { onClick: () => disconnect(), variant: "outline", className: "border-border", children: "Disconnect" })
-          ] })
-        ] }) : /* @__PURE__ */ jsx(WalletMultiButton, { className: "w-full !bg-primary text-primary-foreground" }) })
-      ] }) })
-    ] }),
-    /* @__PURE__ */ jsx(AlertDialog, { open: !!walletToDelete, onOpenChange: () => setWalletToDelete(null), children: /* @__PURE__ */ jsxs(AlertDialogContent, { children: [
-      /* @__PURE__ */ jsxs(AlertDialogHeader, { children: [
-        /* @__PURE__ */ jsx(AlertDialogTitle, { children: "Remove Wallet" }),
-        /* @__PURE__ */ jsx(AlertDialogDescription, { children: "Are you sure you want to remove this wallet from your account? This action cannot be undone." })
+    ] }) }),
+    /* @__PURE__ */ jsx(Dialog, { open: Boolean(methodBeingReplaced), onOpenChange: (open) => !open && setMethodBeingReplaced(null), children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-h-[95vh] overflow-y-auto", children: [
+      /* @__PURE__ */ jsxs(DialogHeader, { children: [
+        /* @__PURE__ */ jsx(DialogTitle, { children: t.replaceCardTitle }),
+        /* @__PURE__ */ jsx(DialogDescription, { children: t.replaceCardDescription })
       ] }),
-      /* @__PURE__ */ jsxs(AlertDialogFooter, { children: [
-        /* @__PURE__ */ jsx(AlertDialogCancel, { children: "Cancel" }),
-        /* @__PURE__ */ jsx(AlertDialogAction, { onClick: () => walletToDelete && handleDeleteWallet(walletToDelete.id), className: "bg-destructive text-destructive-foreground", children: "Remove" })
-      ] })
+      methodBeingReplaced && /* @__PURE__ */ jsx(
+        CardDetailsForm,
+        {
+          visible: true,
+          collectPrefix: `${collectPrefix}-replace-${methodBeingReplaced.id}`,
+          submitting: replaceMutation.isPending,
+          submitLabel: t.replaceCard,
+          defaultValues: {
+            email: userEmail ?? "",
+            country: defaultCountry,
+            provider
+          },
+          externalError: replaceMutation.error?.message ?? null,
+          onTokenize: handleReplaceTokenize,
+          className: "rounded-2xl border border-white/10 bg-white/5 p-6"
+        }
+      )
     ] }) })
   ] });
 };
-var WalletManagement = (props) => /* @__PURE__ */ jsx(SolanaWalletSection, { ...props });
-var Checkbox = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var Checkbox = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   CheckboxPrimitive.Root,
   {
     ref,
@@ -4532,7 +3334,7 @@ var useTokenBalance = (tokens) => {
     },
     [balances]
   );
-  const hasSufficientBalance2 = useCallback(
+  const hasSufficientBalance = useCallback(
     (tokenSymbol, requiredAmount) => {
       const balance = getTokenBalance(tokenSymbol);
       return balance ? balance.uiAmount >= requiredAmount : false;
@@ -4593,106 +3395,16 @@ var useTokenBalance = (tokens) => {
     error,
     refreshBalances,
     getTokenBalance,
-    hasSufficientBalance: hasSufficientBalance2,
+    hasSufficientBalance,
     getFormattedBalance,
     getTotalValue,
     hasAnyBalance: positiveBalances.length > 0,
     isConnected: !!publicKey
   };
 };
-var useDirectWalletPayment = () => {
-  const { publicKey, signTransaction, connected } = useWallet();
-  const solanaService = useSolanaService();
-  const [paymentState, setPaymentState] = useState({
-    loading: false,
-    error: null,
-    success: false,
-    transactionId: null
-  });
-  const resetPayment = useCallback(() => {
-    setPaymentState({
-      loading: false,
-      error: null,
-      success: false,
-      transactionId: null
-    });
-  }, []);
-  const payWithWallet = 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.from(paymentData.transaction, "base64");
-        const transaction = 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 } = useConnection();
-  const { services } = usePaymentContext();
-  const billingApi = services.billingApi;
+  const { client } = usePaymentContext();
   const {
     transactionId,
     purchaseId,
@@ -4765,14 +3477,8 @@ var usePaymentStatus = (options = {}) => {
   const checkPaymentStatus = useCallback(
     async (id) => {
       try {
-        const data = await billingApi.get(
-          `/payment/status/${id}`
-        );
-        return data;
+        return await client.getPaymentStatus(id);
       } catch (error2) {
-        if (error2?.status === 404) {
-          return null;
-        }
         console.error("Failed to check payment status:", {
           purchaseId: id,
           error: error2
@@ -4780,7 +3486,7 @@ var usePaymentStatus = (options = {}) => {
         return null;
       }
     },
-    [billingApi]
+    [client]
   );
   const startMonitoring = useCallback(async () => {
     if (isMonitoringRef.current || !transactionId && !purchaseId) {
@@ -4946,6 +3652,6 @@ var usePaymentStatus = (options = {}) => {
   };
 };
 
-export { BillingHistory, CancelMembershipDialog, CardDetailsForm, CardPaymentService, EmptyWalletState, PaymentApp, PaymentExperience, PaymentMethodService, PaymentMethodsSection, PaymentProvider, PaymentsDialogProvider, PaymentsRuntime, SolanaPaymentSelector, SolanaPaymentService, SolanaPaymentView, SolanaWalletSection, SolanaWalletService, StoredPaymentMethods, SubscriptionCheckoutModal, SubscriptionService, SubscriptionSuccessDialog, TokenCatalog, WalletCard, WalletDialog, WalletGateway, WalletManagement, WalletModal, createPaymentsRuntime, useAlternativePaymentProvider, useDirectWalletPayment, usePaymentContext, usePaymentDialogs, usePaymentMethodService, usePaymentMethods, usePaymentNotifications, usePaymentStatus, useSolanaDirectPayment, useSolanaQrPayment, useSolanaService, useSubscriptionActions, useSupportedTokens, useTokenBalance, useWalletConnection, useWalletList, useWalletVerification };
+export { BillingHistory, CancelMembershipDialog, CardDetailsForm, ClientApiError, PaymentContext, PaymentExperience, PaymentMethodsSection, PaymentProvider, PaymentsDialogProvider, PaymentsUIPortalRoot, PaymentsUIRoot, SolanaPaymentSelector, SolanaPaymentView, StoredPaymentMethods, SubscriptionCheckoutModal, SubscriptionSuccessDialog, WalletDialog, WalletModal, createClient, usePaymentContext, usePaymentDialogs, usePaymentMethods, usePaymentNotifications, usePaymentStatus, useSolanaQrPayment, useSubscriptionActions, useSupportedTokens, useTokenBalance };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map