@doujins/payments-ui 0.0.12 → 0.0.14

package/dist/index.cjs

@@ -1,27 +1,30 @@
 'use strict';
 
 var React3 = require('react');
-var vanilla = require('zustand/vanilla');
-var jsxRuntime = require('react/jsx-runtime');
+var reactQuery = require('@tanstack/react-query');
+var walletAdapterReact = require('@solana/wallet-adapter-react');
+var walletAdapterReactUi = require('@solana/wallet-adapter-react-ui');
+require('@solana/wallet-adapter-react-ui/styles.css');
+var web3_js = require('@solana/web3.js');
+var walletAdapterPhantom = require('@solana/wallet-adapter-phantom');
+var walletAdapterSolflare = require('@solana/wallet-adapter-solflare');
+var walletAdapterTrust = require('@solana/wallet-adapter-trust');
+var walletAdapterCoinbase = require('@solana/wallet-adapter-coinbase');
+var DialogPrimitive = require('@radix-ui/react-dialog');
 var lucideReact = require('lucide-react');
-var countryList = require('country-list');
-var classVarianceAuthority = require('class-variance-authority');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
+var jsxRuntime = require('react/jsx-runtime');
+var countryList = require('country-list');
+var classVarianceAuthority = require('class-variance-authority');
 var LabelPrimitive = require('@radix-ui/react-label');
 var SelectPrimitive = require('@radix-ui/react-select');
-var reactQuery = require('@tanstack/react-query');
-var DialogPrimitive = require('@radix-ui/react-dialog');
 var ScrollAreaPrimitive = require('@radix-ui/react-scroll-area');
-var walletAdapterReact = require('@solana/wallet-adapter-react');
+var TabsPrimitive = require('@radix-ui/react-tabs');
 var buffer = require('buffer');
-var web3_js = require('@solana/web3.js');
 var splToken = require('@solana/spl-token');
 var QRCode = require('qrcode');
-var zustand = require('zustand');
-var TabsPrimitive = require('@radix-ui/react-tabs');
 var AlertDialogPrimitive = require('@radix-ui/react-alert-dialog');
-var walletAdapterReactUi = require('@solana/wallet-adapter-react-ui');
 var bs58 = require('bs58');
 var CheckboxPrimitive = require('@radix-ui/react-checkbox');
 
@@ -46,13 +49,13 @@ function _interopNamespace(e) {
 }
 
 var React3__namespace = /*#__PURE__*/_interopNamespace(React3);
+var DialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(DialogPrimitive);
 var countryList__default = /*#__PURE__*/_interopDefault(countryList);
 var LabelPrimitive__namespace = /*#__PURE__*/_interopNamespace(LabelPrimitive);
 var SelectPrimitive__namespace = /*#__PURE__*/_interopNamespace(SelectPrimitive);
-var DialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(DialogPrimitive);
 var ScrollAreaPrimitive__namespace = /*#__PURE__*/_interopNamespace(ScrollAreaPrimitive);
-var QRCode__default = /*#__PURE__*/_interopDefault(QRCode);
 var TabsPrimitive__namespace = /*#__PURE__*/_interopNamespace(TabsPrimitive);
+var QRCode__default = /*#__PURE__*/_interopDefault(QRCode);
 var AlertDialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(AlertDialogPrimitive);
 var bs58__default = /*#__PURE__*/_interopDefault(bs58);
 var CheckboxPrimitive__namespace = /*#__PURE__*/_interopNamespace(CheckboxPrimitive);
@@ -524,141 +527,98 @@ var PaymentApp = class {
     };
   }
 };
-var initialState = {
-  selectedMethodId: null,
-  solanaModalOpen: false,
-  savedPaymentStatus: "idle",
-  savedPaymentError: null,
-  newCardStatus: "idle",
-  newCardError: null,
-  solanaTab: "wallet",
-  solanaStatus: "selecting",
-  solanaError: null,
-  solanaTransactionId: null,
-  solanaSelectedToken: null,
-  solanaTokenAmount: 0
-};
-var createPaymentStore = (options) => vanilla.createStore((set, get) => {
-  const notifyStatus = (status, context) => {
-    options?.callbacks?.onStatusChange?.({ status, context });
-  };
-  const notifySuccess = (payload) => {
-    if (!options?.callbacks?.onSuccess) return;
-    options.callbacks.onSuccess(payload ?? {});
-  };
-  const notifyError = (error) => {
-    options?.callbacks?.onError?.(new Error(error));
-  };
-  return {
-    ...initialState,
-    setSelectedMethod: (methodId) => {
-      if (get().selectedMethodId === methodId) return;
-      set({ selectedMethodId: methodId });
-    },
-    setSolanaModalOpen: (open) => {
-      if (get().solanaModalOpen === open) return;
-      set({ solanaModalOpen: open });
-    },
-    setSolanaTab: (tab) => {
-      if (get().solanaTab === tab) return;
-      set({ solanaTab: tab });
-    },
-    setSolanaSelectedToken: (symbol) => {
-      if (get().solanaSelectedToken === symbol) return;
-      set({ solanaSelectedToken: symbol });
-    },
-    setSolanaTokenAmount: (amount) => {
-      if (get().solanaTokenAmount === amount) return;
-      set({ solanaTokenAmount: amount });
-    },
-    setSolanaTransactionId: (txId) => {
-      if (get().solanaTransactionId === txId) return;
-      set({ solanaTransactionId: txId });
-    },
-    startSavedPayment: () => {
-      notifyStatus("processing", { source: "saved-payment" });
-      set({ savedPaymentStatus: "processing", savedPaymentError: null });
-    },
-    completeSavedPayment: () => {
-      notifyStatus("success", { source: "saved-payment" });
-      set({ savedPaymentStatus: "success", savedPaymentError: null });
-    },
-    failSavedPayment: (error) => {
-      notifyStatus("error", { source: "saved-payment" });
-      notifyError(error);
-      set({ savedPaymentStatus: "error", savedPaymentError: error });
-    },
-    resetSavedPayment: () => set({ savedPaymentStatus: "idle", savedPaymentError: null }),
-    startNewCardPayment: () => {
-      notifyStatus("processing", { source: "new-card" });
-      set({ newCardStatus: "processing", newCardError: null });
-    },
-    completeNewCardPayment: () => {
-      notifyStatus("success", { source: "new-card" });
-      set({ newCardStatus: "success", newCardError: null });
-    },
-    failNewCardPayment: (error) => {
-      notifyStatus("error", { source: "new-card" });
-      notifyError(error);
-      set({ newCardStatus: "error", newCardError: error });
-    },
-    resetNewCardPayment: () => set({ newCardStatus: "idle", newCardError: null }),
-    startSolanaPayment: () => {
-      notifyStatus("processing", { source: "solana" });
-      set({ solanaStatus: "processing", solanaError: null });
-    },
-    confirmSolanaPayment: () => set({ solanaStatus: "confirming" }),
-    completeSolanaPayment: (payload) => {
-      notifyStatus("success", { source: "solana" });
-      notifySuccess(payload);
-      set({ solanaStatus: "success", solanaError: null });
-    },
-    failSolanaPayment: (error) => {
-      notifyStatus("error", { source: "solana" });
-      notifyError(error);
-      set({ solanaStatus: "error", solanaError: error });
+
+// src/runtime/PaymentsRuntime.ts
+var createQueryClient = () => new reactQuery.QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 3e4,
+      gcTime: 5 * 6e4,
+      refetchOnWindowFocus: false,
+      retry: 1
     },
-    resetSolanaPayment: () => set({
-      solanaStatus: "selecting",
-      solanaError: null,
-      solanaTransactionId: null
-    }),
-    resetAll: () => set(initialState)
-  };
+    mutations: {
+      retry: 1
+    }
+  }
 });
-var PaymentContext = React3.createContext(void 0);
-var PaymentProvider = ({
-  config,
-  children
-}) => {
-  const app = React3.useMemo(() => new PaymentApp({ config }), [config]);
-  const store = React3.useMemo(
-    () => createPaymentStore({ callbacks: config.callbacks }),
-    [config.callbacks]
-  );
-  const value = React3.useMemo(() => {
-    return {
-      config: app.getConfig(),
-      fetcher: app.getFetcher(),
-      resolveAuthToken: app.resolveAuthToken,
-      app,
-      services: app.getServices(),
-      store
-    };
-  }, [app, store]);
-  React3.useEffect(() => {
-    if (!value.config.collectJsKey) return;
-    loadCollectJs(value.config.collectJsKey);
-  }, [value.config.collectJsKey]);
-  return /* @__PURE__ */ jsxRuntime.jsx(PaymentContext.Provider, { value, children });
-};
-var usePaymentContext = () => {
-  const context = React3.useContext(PaymentContext);
-  if (!context) {
-    throw new Error("usePaymentContext must be used within a PaymentProvider");
+var PaymentsRuntime = class {
+  constructor(config) {
+    this.config = config;
+    this.app = new PaymentApp({ config });
+    this.services = this.app.getServices();
+    this.queryClient = createQueryClient();
   }
-  return context;
 };
+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 tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var Dialog = DialogPrimitive__namespace.Root;
+var DialogPortal = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Portal, { className: cn(className), ...props });
+DialogPortal.displayName = DialogPrimitive__namespace.Portal.displayName;
+var DialogOverlay = React3__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  DialogPrimitive__namespace.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",
+      className
+    ),
+    ...props
+  }
+));
+DialogOverlay.displayName = DialogPrimitive__namespace.Overlay.displayName;
+var DialogContent = React3__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(DialogPortal, { children: [
+  /* @__PURE__ */ jsxRuntime.jsx(DialogOverlay, {}),
+  /* @__PURE__ */ jsxRuntime.jsxs(
+    DialogPrimitive__namespace.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%]",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsxRuntime.jsxs(DialogPrimitive__namespace.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__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
+        ] })
+      ]
+    }
+  )
+] }));
+DialogContent.displayName = DialogPrimitive__namespace.Content.displayName;
+var DialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col space-y-1.5 text-center sm:text-left", className), ...props });
+DialogHeader.displayName = "DialogHeader";
+var DialogTitle = React3__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  DialogPrimitive__namespace.Title,
+  {
+    ref,
+    className: cn("text-lg font-semibold leading-none tracking-tight", className),
+    ...props
+  }
+));
+DialogTitle.displayName = DialogPrimitive__namespace.Title.displayName;
+var DialogDescription = React3__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  DialogPrimitive__namespace.Description,
+  {
+    ref,
+    className: cn("text-sm text-muted-foreground", className),
+    ...props
+  }
+));
+DialogDescription.displayName = DialogPrimitive__namespace.Description.displayName;
 var customCountries = [
   { code: "TW", name: "Taiwan, Province of China" },
   { code: "KR", name: "Korea" },
@@ -788,9 +748,6 @@ function getElementRef(element) {
   }
   return element.props.ref || element.ref;
 }
-function cn(...inputs) {
-  return tailwindMerge.twMerge(clsx.clsx(inputs));
-}
 var buttonVariants = classVarianceAuthority.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",
   {
@@ -933,7 +890,6 @@ var defaultBilling = {
   firstName: "",
   lastName: "",
   address1: "",
-  address2: "",
   city: "",
   stateRegion: "",
   postalCode: "",
@@ -967,7 +923,6 @@ var CardDetailsForm = ({
   const [firstName, setFirstName] = React3.useState(mergedDefaults.firstName);
   const [lastName, setLastName] = React3.useState(mergedDefaults.lastName);
   const [address1, setAddress1] = React3.useState(mergedDefaults.address1);
-  const [address2, setAddress2] = React3.useState(mergedDefaults.address2 ?? "");
   const [city, setCity] = React3.useState(mergedDefaults.city);
   const [stateRegion, setStateRegion] = React3.useState(mergedDefaults.stateRegion ?? "");
   const [postalCode, setPostalCode] = React3.useState(mergedDefaults.postalCode);
@@ -986,7 +941,6 @@ var CardDetailsForm = ({
     setFirstName(mergedDefaults.firstName);
     setLastName(mergedDefaults.lastName);
     setAddress1(mergedDefaults.address1);
-    setAddress2(mergedDefaults.address2 ?? "");
     setCity(mergedDefaults.city);
     setStateRegion(mergedDefaults.stateRegion ?? "");
     setPostalCode(mergedDefaults.postalCode);
@@ -999,7 +953,6 @@ var CardDetailsForm = ({
       firstName,
       lastName,
       address1,
-      address2,
       city,
       stateRegion,
       postalCode,
@@ -1011,7 +964,6 @@ var CardDetailsForm = ({
     firstName,
     lastName,
     address1,
-    address2,
     city,
     stateRegion,
     postalCode,
@@ -1035,7 +987,6 @@ var CardDetailsForm = ({
         firstName,
         lastName,
         address1,
-        address2,
         city,
         stateRegion,
         postalCode,
@@ -1066,7 +1017,6 @@ var CardDetailsForm = ({
     firstName,
     lastName,
     address1,
-    address2,
     city,
     stateRegion,
     postalCode,
@@ -1095,19 +1045,16 @@ var CardDetailsForm = ({
     window.CollectJS.startPaymentRequest();
   };
   const errorMessage = localError ?? externalError;
-  const collectFieldClass = "flex h-11 w-full items-center rounded-md border border-dashed border-muted-foreground/40 bg-muted/20 px-3 text-sm text-muted-foreground";
+  const collectFieldClass = "flex h-11 w-full items-center rounded-md border border-border/60 bg-background px-3 text-sm text-muted-foreground";
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "form",
     {
-      className: cn(
-        "space-y-6 rounded-2xl border border-border/60 bg-card/90 p-6 shadow-lg",
-        className
-      ),
+      className: cn("space-y-5", className),
       onSubmit: handleSubmit,
       noValidate: true,
       children: [
         errorMessage && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-md border border-destructive/40 bg-destructive/10 px-4 py-2 text-sm text-destructive", children: errorMessage }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-4 md:grid-cols-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-5 md:grid-cols-2", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
             /* @__PURE__ */ jsxRuntime.jsxs(Label, { htmlFor: "payments-first", className: "flex items-center gap-2 text-muted-foreground", children: [
               /* @__PURE__ */ jsxRuntime.jsx(lucideReact.User, { className: "h-4 w-4" }),
@@ -1153,7 +1100,7 @@ var CardDetailsForm = ({
           )
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "payments-address1", children: "Address line 1" }),
+          /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "payments-address1", children: "Address" }),
           /* @__PURE__ */ jsxRuntime.jsx(
             Input,
             {
@@ -1164,18 +1111,7 @@ var CardDetailsForm = ({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "payments-address2", children: "Address line 2 (optional)" }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Input,
-            {
-              id: "payments-address2",
-              value: address2,
-              onChange: (e) => setAddress2(e.target.value)
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-4 md:grid-cols-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-5 md:grid-cols-2", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
             /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "payments-city", children: "City" }),
             /* @__PURE__ */ jsxRuntime.jsx(
@@ -1200,7 +1136,7 @@ var CardDetailsForm = ({
             )
           ] })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-4 md:grid-cols-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-5 md:grid-cols-2", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
             /* @__PURE__ */ jsxRuntime.jsxs(Label, { htmlFor: "payments-postal", className: "flex items-center gap-2 text-muted-foreground", children: [
               /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MapPin, { className: "h-4 w-4" }),
@@ -1220,7 +1156,7 @@ var CardDetailsForm = ({
             /* @__PURE__ */ jsxRuntime.jsx(Label, { children: "Country" }),
             /* @__PURE__ */ jsxRuntime.jsxs(Select, { value: country, onValueChange: setCountry, children: [
               /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, { placeholder: "Select a country" }) }),
-              /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { className: "max-h-64", children: countries.map((option) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: option.code, children: option.name }, option.code)) })
+              /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { className: "max-h-64 w-full", children: countries.map((option) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: option.code, children: option.name }, option.code)) })
             ] })
           ] })
         ] }),
@@ -1309,63 +1245,6 @@ var usePaymentMethods = () => {
     deleteMutation
   };
 };
-var Dialog = DialogPrimitive__namespace.Root;
-var DialogPortal = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Portal, { className: cn(className), ...props });
-DialogPortal.displayName = DialogPrimitive__namespace.Portal.displayName;
-var DialogOverlay = React3__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  DialogPrimitive__namespace.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",
-      className
-    ),
-    ...props
-  }
-));
-DialogOverlay.displayName = DialogPrimitive__namespace.Overlay.displayName;
-var DialogContent = React3__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(DialogPortal, { children: [
-  /* @__PURE__ */ jsxRuntime.jsx(DialogOverlay, {}),
-  /* @__PURE__ */ jsxRuntime.jsxs(
-    DialogPrimitive__namespace.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%]",
-        className
-      ),
-      ...props,
-      children: [
-        children,
-        /* @__PURE__ */ jsxRuntime.jsxs(DialogPrimitive__namespace.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__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
-        ] })
-      ]
-    }
-  )
-] }));
-DialogContent.displayName = DialogPrimitive__namespace.Content.displayName;
-var DialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col space-y-1.5 text-center sm:text-left", className), ...props });
-DialogHeader.displayName = "DialogHeader";
-var DialogTitle = React3__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  DialogPrimitive__namespace.Title,
-  {
-    ref,
-    className: cn("text-lg font-semibold leading-none tracking-tight", className),
-    ...props
-  }
-));
-DialogTitle.displayName = DialogPrimitive__namespace.Title.displayName;
-var DialogDescription = React3__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  DialogPrimitive__namespace.Description,
-  {
-    ref,
-    className: cn("text-sm text-muted-foreground", className),
-    ...props
-  }
-));
-DialogDescription.displayName = DialogPrimitive__namespace.Description.displayName;
 var badgeVariants = classVarianceAuthority.cva(
   "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none",
   {
@@ -1415,43 +1294,6 @@ var ScrollBar = React3__namespace.forwardRef(({ className, orientation = "vertic
   }
 ));
 ScrollBar.displayName = ScrollAreaPrimitive__namespace.ScrollAreaScrollbar.displayName;
-var Card = React3__namespace.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      ref,
-      className: cn("rounded-xl border bg-card text-card-foreground shadow", className),
-      ...props
-    }
-  )
-);
-Card.displayName = "Card";
-var CardHeader = React3__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  "div",
-  {
-    ref,
-    className: cn("flex flex-col space-y-1.5 p-6", className),
-    ...props
-  }
-));
-CardHeader.displayName = "CardHeader";
-var CardTitle = React3__namespace.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("h3", { ref, className: cn("text-2xl font-semibold leading-none tracking-tight", className), ...props })
-);
-CardTitle.displayName = "CardTitle";
-var CardDescription = React3__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("p", { ref, className: cn("text-sm text-muted-foreground", className), ...props }));
-CardDescription.displayName = "CardDescription";
-var CardContent = React3__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("p-6 pt-0", className), ...props }));
-CardContent.displayName = "CardContent";
-var CardFooter = React3__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  "div",
-  {
-    ref,
-    className: cn("flex items-center p-6 pt-0", className),
-    ...props
-  }
-));
-CardFooter.displayName = "CardFooter";
 var formatCardLabel = (method) => {
   const brand = method.card_type ? method.card_type.toUpperCase() : "CARD";
   const lastFour = method.last_four ? `\u2022\u2022\u2022\u2022 ${method.last_four}` : "";
@@ -1480,22 +1322,22 @@ var StoredPaymentMethods = ({
       }
     );
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "border-border/60 bg-card/95", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(CardHeader, { className: "flex flex-row items-start justify-between space-y-0", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { className: "text-base font-semibold text-foreground", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-2 text-sm font-medium text-muted-foreground", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "flex items-center gap-2 text-sm font-medium text-muted-foreground", children: [
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.WalletCards, { className: "h-4 w-4" }),
           " ",
           heading
-        ] }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(CardDescription, { children: description })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: description })
       ] }),
-      showAddButton && /* @__PURE__ */ jsxRuntime.jsxs(Button, { size: "sm", onClick: () => setIsModalOpen(true), children: [
+      showAddButton && /* @__PURE__ */ jsxRuntime.jsxs(Button, { size: "sm", variant: "outline", onClick: () => setIsModalOpen(true), children: [
         /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CreditCard, { className: "mr-2 h-4 w-4" }),
         " Add card"
       ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(CardContent, { children: listQuery.isLoading ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center rounded-lg border border-dashed border-border/60 bg-muted/10 py-8 text-sm text-muted-foreground", children: [
+    listQuery.isLoading ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center rounded-lg border border-dashed border-border/60 bg-muted/10 py-8 text-sm text-muted-foreground", children: [
       /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "mr-2 h-4 w-4 animate-spin" }),
       " Loading cards\u2026"
     ] }) : payments.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg border border-dashed border-border/60 bg-muted/10 px-4 py-6 text-sm text-muted-foreground", children: "No saved payment methods yet." }) : /* @__PURE__ */ jsxRuntime.jsx(ScrollArea, { className: "max-h-[320px] pr-2", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3", children: payments.map((method) => {
@@ -1553,8 +1395,8 @@ var StoredPaymentMethods = ({
         },
         method.id
       );
-    }) }) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open: isModalOpen, onOpenChange: setIsModalOpen, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "max-h-[90vh] overflow-y-auto", children: [
+    }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open: isModalOpen, onOpenChange: setIsModalOpen, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "max-h-[85vh] overflow-y-auto", children: [
       /* @__PURE__ */ jsxRuntime.jsxs(DialogHeader, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { children: "Add a new card" }),
         /* @__PURE__ */ jsxRuntime.jsx(DialogDescription, { children: "Your card details are tokenized securely via our payment provider." })
@@ -1573,12 +1415,77 @@ var StoredPaymentMethods = ({
     ] }) })
   ] });
 };
-var useSolanaService = () => {
-  const { services } = usePaymentContext();
-  return React3.useMemo(() => services.solanaPayments, [services]);
-};
-var getSolBalance = async (connection, publicKey) => {
-  try {
+var Tabs = TabsPrimitive__namespace.Root;
+var TabsList = React3__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  TabsPrimitive__namespace.List,
+  {
+    ref,
+    className: cn(
+      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+      className
+    ),
+    ...props
+  }
+));
+TabsList.displayName = TabsPrimitive__namespace.List.displayName;
+var TabsTrigger = React3__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  TabsPrimitive__namespace.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",
+      className
+    ),
+    ...props
+  }
+));
+TabsTrigger.displayName = TabsPrimitive__namespace.Trigger.displayName;
+var TabsContent = React3__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  TabsPrimitive__namespace.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",
+      className
+    ),
+    ...props
+  }
+));
+TabsContent.displayName = TabsPrimitive__namespace.Content.displayName;
+var usePaymentNotifications = () => {
+  const { config } = usePaymentContext();
+  const notifyStatus = React3.useCallback(
+    (status, context) => {
+      config.callbacks?.onStatusChange?.({ status, context });
+    },
+    [config.callbacks]
+  );
+  const notifySuccess = React3.useCallback(
+    (payload) => {
+      config.callbacks?.onSuccess?.(payload ?? {});
+    },
+    [config.callbacks]
+  );
+  const notifyError = React3.useCallback(
+    (error) => {
+      config.callbacks?.onError?.(
+        typeof error === "string" ? new Error(error) : error
+      );
+    },
+    [config.callbacks]
+  );
+  return {
+    notifyStatus,
+    notifySuccess,
+    notifyError
+  };
+};
+var useSolanaService = () => {
+  const { services } = usePaymentContext();
+  return React3.useMemo(() => services.solanaPayments, [services]);
+};
+var getSolBalance = async (connection, publicKey) => {
+  try {
     const lamports = await connection.getBalance(publicKey);
     return lamports / web3_js.LAMPORTS_PER_SOL;
   } catch (error) {
@@ -1849,6 +1756,43 @@ var useSolanaDirectPayment = (options) => {
     pay
   };
 };
+var Card = React3__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      className: cn("rounded-xl border bg-card text-card-foreground shadow", className),
+      ...props
+    }
+  )
+);
+Card.displayName = "Card";
+var CardHeader = React3__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  "div",
+  {
+    ref,
+    className: cn("flex flex-col space-y-1.5 p-6", className),
+    ...props
+  }
+));
+CardHeader.displayName = "CardHeader";
+var CardTitle = React3__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("h3", { ref, className: cn("text-2xl font-semibold leading-none tracking-tight", className), ...props })
+);
+CardTitle.displayName = "CardTitle";
+var CardDescription = React3__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("p", { ref, className: cn("text-sm text-muted-foreground", className), ...props }));
+CardDescription.displayName = "CardDescription";
+var CardContent = React3__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("p-6 pt-0", className), ...props }));
+CardContent.displayName = "CardContent";
+var CardFooter = React3__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  "div",
+  {
+    ref,
+    className: cn("flex items-center p-6 pt-0", className),
+    ...props
+  }
+));
+CardFooter.displayName = "CardFooter";
 var DirectPayment = ({
   priceId,
   tokenAmount,
@@ -1869,7 +1813,7 @@ var DirectPayment = ({
     onSuccess: onPaymentSuccess,
     onError: onPaymentError
   });
-  return /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "space-y-4 border border-border/60 bg-background/80 p-6", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "space-y-4 rounded-md border border-border/60 bg-background/80 shadow-none p-6", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "flex items-center gap-2 text-sm font-semibold uppercase tracking-wide text-muted-foreground", children: [
         /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Wallet, { className: "h-4 w-4" }),
@@ -2101,9 +2045,9 @@ var QRCodePayment = ({
     onSuccess: onPaymentSuccess
   });
   if (!selectedToken) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-xl 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." });
+    return /* @__PURE__ */ jsxRuntime.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." });
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "space-y-4 border border-border/60 bg-background/80 p-6", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "space-y-4 border border-border/60 bg-background/80 p-6 shadow-none rounded-md", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
         /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold text-foreground", children: "Scan with Solana Pay" }),
@@ -2332,109 +2276,21 @@ var useSupportedTokens = () => {
     tokenCount: tokens.length
   };
 };
-var usePaymentStore = (selector) => {
-  const { store } = usePaymentContext();
-  return zustand.useStore(store, selector);
-};
-
-// src/state/selectors.ts
-var selectCheckoutFlow = (state) => ({
-  selectedMethodId: state.selectedMethodId,
-  savedStatus: state.savedPaymentStatus,
-  savedError: state.savedPaymentError,
-  newCardStatus: state.newCardStatus,
-  newCardError: state.newCardError,
-  solanaModalOpen: state.solanaModalOpen,
-  setSelectedMethod: state.setSelectedMethod,
-  setSolanaModalOpen: state.setSolanaModalOpen,
-  startSavedPayment: state.startSavedPayment,
-  completeSavedPayment: state.completeSavedPayment,
-  failSavedPayment: state.failSavedPayment,
-  startNewCardPayment: state.startNewCardPayment,
-  completeNewCardPayment: state.completeNewCardPayment,
-  failNewCardPayment: state.failNewCardPayment,
-  resetSavedPayment: state.resetSavedPayment
-});
-var selectSolanaFlow = (state) => ({
-  tab: state.solanaTab,
-  status: state.solanaStatus,
-  error: state.solanaError,
-  transactionId: state.solanaTransactionId,
-  tokenAmount: state.solanaTokenAmount,
-  selectedTokenSymbol: state.solanaSelectedToken,
-  setTab: state.setSolanaTab,
-  setTokenAmount: state.setSolanaTokenAmount,
-  setTransactionId: state.setSolanaTransactionId,
-  setSelectedTokenSymbol: state.setSolanaSelectedToken,
-  startSolanaPayment: state.startSolanaPayment,
-  confirmSolanaPayment: state.confirmSolanaPayment,
-  completeSolanaPayment: state.completeSolanaPayment,
-  failSolanaPayment: state.failSolanaPayment,
-  resetSolanaPayment: state.resetSolanaPayment
-});
-var Tabs = TabsPrimitive__namespace.Root;
-var TabsList = React3__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  TabsPrimitive__namespace.List,
-  {
-    ref,
-    className: cn(
-      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
-      className
-    ),
-    ...props
-  }
-));
-TabsList.displayName = TabsPrimitive__namespace.List.displayName;
-var TabsTrigger = React3__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  TabsPrimitive__namespace.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",
-      className
-    ),
-    ...props
-  }
-));
-TabsTrigger.displayName = TabsPrimitive__namespace.Trigger.displayName;
-var TabsContent = React3__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  TabsPrimitive__namespace.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",
-      className
-    ),
-    ...props
-  }
-));
-TabsContent.displayName = TabsPrimitive__namespace.Content.displayName;
-var SolanaPaymentSelector = ({
-  isOpen,
-  onClose,
+var SolanaPaymentView = ({
   priceId,
   usdAmount,
   onSuccess,
-  onError
+  onError,
+  onClose
 }) => {
   const { connected } = walletAdapterReact.useWallet();
-  const {
-    tab: activeTab,
-    status: paymentState,
-    error: errorMessage,
-    transactionId,
-    tokenAmount,
-    selectedTokenSymbol,
-    setTab,
-    setTokenAmount,
-    setTransactionId,
-    setSelectedTokenSymbol,
-    startSolanaPayment,
-    confirmSolanaPayment,
-    completeSolanaPayment,
-    failSolanaPayment,
-    resetSolanaPayment
-  } = usePaymentStore(selectSolanaFlow);
+  const { notifyStatus, notifyError, notifySuccess } = usePaymentNotifications();
+  const [activeTab, setActiveTab] = React3.useState("wallet");
+  const [paymentState, setPaymentState] = React3.useState("selecting");
+  const [errorMessage, setErrorMessage] = React3.useState(null);
+  const [transactionId, setTransactionId] = React3.useState(null);
+  const [tokenAmount, setTokenAmount] = React3.useState(0);
+  const [selectedTokenSymbol, setSelectedTokenSymbol] = React3.useState(null);
   const {
     tokens,
     isLoading: tokensLoading,
@@ -2450,60 +2306,70 @@ var SolanaPaymentSelector = ({
       const defaultToken = tokens.find((token) => token.symbol === "SOL") || tokens[0];
       setSelectedTokenSymbol(defaultToken.symbol);
     }
-  }, [tokens, selectedTokenSymbol, setSelectedTokenSymbol]);
+  }, [tokens, selectedTokenSymbol]);
   const handlePaymentStart = React3.useCallback(() => {
-    startSolanaPayment();
-  }, [startSolanaPayment]);
+    setPaymentState("processing");
+    setErrorMessage(null);
+    notifyStatus("processing", { source: "solana" });
+  }, [notifyStatus]);
   const handlePaymentConfirming = React3.useCallback(() => {
-    confirmSolanaPayment();
-  }, [confirmSolanaPayment]);
+    setPaymentState("confirming");
+  }, []);
   const handlePaymentSuccess = React3.useCallback(
     (result, txId) => {
       const resolvedTx = txId || (typeof result === "string" ? result : result.transaction_id);
       setTransactionId(resolvedTx);
-      completeSolanaPayment(
-        typeof result === "string" ? {
-          transactionId: resolvedTx,
-          processor: "solana",
-          metadata: { source: "solana-pay" }
-        } : {
-          transactionId: result.transaction_id,
-          intentId: result.intent_id,
-          processor: "solana",
-          metadata: {
-            purchaseId: result.purchase_id,
-            amount: result.amount,
-            currency: result.currency
-          }
+      setPaymentState("success");
+      setErrorMessage(null);
+      const payload = typeof result === "string" ? {
+        transactionId: resolvedTx,
+        processor: "solana",
+        metadata: { source: "solana-pay" }
+      } : {
+        transactionId: result.transaction_id,
+        intentId: result.intent_id,
+        processor: "solana",
+        metadata: {
+          purchaseId: result.purchase_id,
+          amount: result.amount,
+          currency: result.currency
         }
-      );
+      };
+      notifyStatus("success", { source: "solana" });
+      notifySuccess(payload);
       setTimeout(() => {
         onSuccess(result);
       }, 1500);
     },
-    [completeSolanaPayment, onSuccess, setTransactionId]
+    [notifyStatus, notifySuccess, onSuccess]
   );
   const handlePaymentError = React3.useCallback(
     (error) => {
-      failSolanaPayment(error);
+      setPaymentState("error");
+      setErrorMessage(error);
+      notifyStatus("error", { source: "solana" });
+      notifyError(error);
       onError?.(error);
     },
-    [failSolanaPayment, onError]
+    [notifyError, notifyStatus, onError]
   );
-  const handleRetry = React3.useCallback(() => {
-    resetSolanaPayment();
+  const resetState = React3.useCallback(() => {
+    setPaymentState("selecting");
+    setErrorMessage(null);
     setTransactionId(null);
-  }, [resetSolanaPayment, setTransactionId]);
+  }, []);
+  const handleRetry = React3.useCallback(() => {
+    resetState();
+  }, [resetState]);
   const handleClose = React3.useCallback(() => {
     if (paymentState === "processing" || paymentState === "confirming") {
       return;
     }
-    resetSolanaPayment();
-    setTransactionId(null);
-    onClose();
-  }, [paymentState, resetSolanaPayment, setTransactionId, onClose]);
+    resetState();
+    onClose?.();
+  }, [paymentState, onClose, resetState]);
   React3.useEffect(() => {
-    if (!isOpen || !selectedToken || usdAmount === 0) {
+    if (!selectedToken || usdAmount === 0) {
       setTokenAmount(0);
       return;
     }
@@ -2513,23 +2379,20 @@ var SolanaPaymentSelector = ({
       return;
     }
     setTokenAmount(usdAmount / price);
-  }, [isOpen, usdAmount, selectedToken, setTokenAmount]);
-  const handleTokenChange = React3.useCallback(
-    (value) => {
-      setSelectedTokenSymbol(value);
-    },
-    [setSelectedTokenSymbol]
-  );
+  }, [usdAmount, selectedToken]);
+  const handleTokenChange = React3.useCallback((value) => {
+    setSelectedTokenSymbol(value);
+  }, []);
   const wasConnectedRef = React3.useRef(connected);
   React3.useEffect(() => {
     if (connected && !wasConnectedRef.current) {
-      setTab("wallet");
+      setActiveTab("wallet");
     }
     if (!connected && wasConnectedRef.current) {
-      setTab("qr");
+      setActiveTab("qr");
     }
     wasConnectedRef.current = connected;
-  }, [connected, setTab]);
+  }, [connected]);
   const renderBody = () => {
     if (paymentState !== "selecting") {
       return /* @__PURE__ */ jsxRuntime.jsx(
@@ -2545,63 +2408,79 @@ var SolanaPaymentSelector = ({
         }
       );
     }
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-6", children: tokensLoading ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center rounded-lg border border-dashed border-border/60 bg-muted/10 py-8 text-sm text-muted-foreground", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "mr-2 h-4 w-4 animate-spin" }),
-      " Loading supported tokens\u2026"
-    ] }) : tokensError ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg border border-destructive/40 bg-destructive/10 px-3 py-2 text-sm text-destructive", children: tokensError }) : !tokens.length ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg border border-dashed border-border/60 bg-muted/10 px-4 py-6 text-sm text-muted-foreground", children: "No payment tokens available." }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-xl border border-border/60 bg-muted/10 p-4 text-center", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-2xl font-semibold text-foreground", children: [
+    if (tokensLoading) {
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center py-10 text-sm text-muted-foreground", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "mr-2 h-4 w-4 animate-spin" }),
+        " Loading supported tokens\u2026"
+      ] });
+    }
+    if (tokensError) {
+      return /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-destructive", children: tokensError });
+    }
+    if (!tokens.length) {
+      return /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: "No payment tokens available." });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1 text-center", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: "Amount due" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-3xl font-semibold text-foreground", children: [
           "$",
           usdAmount.toFixed(2),
           " USD"
         ] }),
-        selectedToken && tokenAmount > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm text-muted-foreground", children: [
+        selectedToken && tokenAmount > 0 && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-muted-foreground", children: [
           "\u2248 ",
           tokenAmount.toFixed(selectedToken.symbol === "SOL" ? 4 : 2),
           " ",
           selectedToken.symbol
         ] })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(Select, { value: selectedToken?.symbol ?? "", onValueChange: handleTokenChange, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, { placeholder: "Select token" }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { className: "max-h-64", children: tokens.map((token) => /* @__PURE__ */ jsxRuntime.jsxs(SelectItem, { value: token.symbol, children: [
-          token.name,
-          " (",
-          token.symbol,
-          ")"
-        ] }, token.symbol)) })
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-foreground", children: "Select token" }),
+        /* @__PURE__ */ jsxRuntime.jsxs(Select, { value: selectedToken?.symbol ?? "", onValueChange: handleTokenChange, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, { placeholder: "Select token" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { className: "max-h-64", children: tokens.map((token) => /* @__PURE__ */ jsxRuntime.jsxs(SelectItem, { value: token.symbol, children: [
+            token.name,
+            " (",
+            token.symbol,
+            ")"
+          ] }, token.symbol)) })
+        ] })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3", children: /* @__PURE__ */ jsxRuntime.jsxs(
         Tabs,
         {
           value: activeTab,
-          onValueChange: (value) => setTab(value),
-          className: "w-full",
+          onValueChange: (value) => setActiveTab(value),
+          className: "w-full space-y-3",
           children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(TabsList, { className: "grid w-full grid-cols-2 bg-muted/20", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(TabsList, { className: "grid w-full grid-cols-2 bg-muted/10", children: [
               /* @__PURE__ */ jsxRuntime.jsxs(TabsTrigger, { value: "wallet", disabled: !connected, children: [
                 /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Wallet, { className: "mr-2 h-4 w-4" }),
-                " Pay with Wallet"
+                " Wallet"
               ] }),
               /* @__PURE__ */ jsxRuntime.jsxs(TabsTrigger, { value: "qr", children: [
                 /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CreditCard, { className: "mr-2 h-4 w-4" }),
-                " Scan QR Code"
+                " QR Code"
               ] })
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(TabsContent, { value: "wallet", className: "mt-4", children: activeTab === "wallet" && /* @__PURE__ */ jsxRuntime.jsx(
-              DirectPayment,
-              {
-                priceId,
-                tokenAmount,
-                selectedToken,
-                supportedTokens: tokens,
-                onPaymentStart: handlePaymentStart,
-                onPaymentConfirming: handlePaymentConfirming,
-                onPaymentSuccess: handlePaymentSuccess,
-                onPaymentError: handlePaymentError
-              }
-            ) }),
-            /* @__PURE__ */ jsxRuntime.jsx(TabsContent, { value: "qr", className: "mt-4", children: activeTab === "qr" && /* @__PURE__ */ jsxRuntime.jsx(
+            /* @__PURE__ */ jsxRuntime.jsxs(TabsContent, { value: "wallet", className: "space-y-4", children: [
+              activeTab === "wallet" && /* @__PURE__ */ jsxRuntime.jsx(
+                DirectPayment,
+                {
+                  priceId,
+                  tokenAmount,
+                  selectedToken,
+                  supportedTokens: tokens,
+                  onPaymentStart: handlePaymentStart,
+                  onPaymentConfirming: handlePaymentConfirming,
+                  onPaymentSuccess: handlePaymentSuccess,
+                  onPaymentError: handlePaymentError
+                }
+              ),
+              !connected && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-amber-100", children: "Connect your Solana wallet to continue or switch to QR mode." })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(TabsContent, { value: "qr", children: activeTab === "qr" && /* @__PURE__ */ jsxRuntime.jsx(
               QRCodePayment,
               {
                 priceId,
@@ -2612,165 +2491,741 @@ var SolanaPaymentSelector = ({
             ) })
           ]
         }
-      ),
-      !connected && activeTab === "wallet" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-xl border border-amber-500/40 bg-amber-500/10 p-4 text-sm text-amber-100", children: "Please connect your Solana wallet to complete this payment, or switch to QR mode." })
-    ] }) });
+      ) })
+    ] });
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open: isOpen, onOpenChange: handleClose, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "sm:max-w-lg", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(DialogHeader, { className: "space-y-1", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { children: "Complete your payment" }),
-      /* @__PURE__ */ jsxRuntime.jsx(DialogDescription, { children: "Select a token and preferred method. We\u2019ll guide you through the rest." })
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs uppercase tracking-wide text-muted-foreground", children: "Solana Pay checkout" }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-2xl font-semibold text-foreground", children: "Pay with Solana" }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: "Choose a supported token and send the payment with your wallet or a QR code." })
+      ] }),
+      onClose && /* @__PURE__ */ jsxRuntime.jsxs(
+        Button,
+        {
+          type: "button",
+          size: "sm",
+          variant: "ghost",
+          onClick: handleClose,
+          disabled: paymentState === "processing" || paymentState === "confirming",
+          className: "h-8 px-2 text-sm",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeft, { className: "mr-2 h-4 w-4" }),
+            " Back"
+          ]
+        }
+      )
     ] }),
     renderBody()
-  ] }) });
+  ] });
 };
-var PaymentExperience = ({
-  priceId,
-  usdAmount,
-  onNewCardPayment,
-  onSavedMethodPayment,
-  enableNewCard = true,
-  enableStoredMethods = true,
-  enableSolanaPay = true,
-  checkoutSummary,
-  onSolanaSuccess,
-  onSolanaError
-}) => {
-  const showNewCard = enableNewCard && Boolean(onNewCardPayment);
-  const showStored = enableStoredMethods;
-  const {
-    selectedMethodId,
-    savedStatus,
-    savedError,
-    newCardStatus,
-    newCardError,
-    solanaModalOpen,
-    setSelectedMethod,
-    setSolanaModalOpen,
-    startSavedPayment,
-    completeSavedPayment,
-    failSavedPayment,
-    startNewCardPayment,
-    completeNewCardPayment,
-    failNewCardPayment,
-    resetSavedPayment
-  } = usePaymentStore(selectCheckoutFlow);
-  const handleMethodSelect = (method) => {
-    setSelectedMethod(method.id);
-    resetSavedPayment();
-  };
-  const handleNewCardTokenize = async (token, billing) => {
-    if (!onNewCardPayment) return;
-    try {
-      startNewCardPayment();
-      await onNewCardPayment({ token, billing });
-      completeNewCardPayment();
-    } catch (error) {
-      const message = error instanceof Error ? error.message : "Unable to complete payment";
-      failNewCardPayment(message);
-    }
-  };
-  const handleSavedPayment = async () => {
-    if (!onSavedMethodPayment || !selectedMethodId) return;
-    try {
-      startSavedPayment();
-      await onSavedMethodPayment({
-        paymentMethodId: selectedMethodId,
-        amount: usdAmount
-      });
-      completeSavedPayment();
-    } catch (error) {
-      const message = error instanceof Error ? error.message : "Unable to complete payment with saved card";
-      failSavedPayment(message);
+var useSubscriptionActions = () => {
+  const { services } = usePaymentContext();
+  const ensurePrice = (priceId) => {
+    if (!priceId) {
+      throw new Error("payments-ui: priceId is required for subscription actions");
     }
+    return priceId;
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-8", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "border-border/60 bg-card/95", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(CardHeader, { className: "flex flex-col gap-3 md:flex-row md:items-center md:justify-between", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(CardTitle, { className: "flex items-center gap-2 text-lg text-foreground", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CreditCard, { className: "h-5 w-5 text-primary" }),
-            " Secure checkout"
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs(CardDescription, { children: [
-            "Amount due: $",
-            usdAmount.toFixed(2)
-          ] })
-        ] }),
-        checkoutSummary && /* @__PURE__ */ jsxRuntime.jsx("div", { children: checkoutSummary })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(CardContent, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-8 lg:grid-cols-2", children: [
-        showStored && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            StoredPaymentMethods,
-            {
-              selectedMethodId,
-              onMethodSelect: handleMethodSelect,
-              heading: "Saved cards",
-              description: "Use or manage your saved payment methods."
-            }
-          ),
-          onSavedMethodPayment && /* @__PURE__ */ jsxRuntime.jsx(
-            Button,
-            {
-              className: "w-full",
-              disabled: !selectedMethodId || savedStatus === "processing",
-              onClick: handleSavedPayment,
-              children: savedStatus === "processing" ? "Processing\u2026" : "Pay with selected card"
-            }
-          ),
-          savedError && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-destructive", children: savedError })
-        ] }),
-        showNewCard && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-2xl border border-border/60 bg-background/80 p-6", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4 space-y-1", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "flex items-center gap-2 text-sm font-semibold uppercase tracking-wide text-muted-foreground", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CreditCard, { className: "h-4 w-4" }),
-              " Pay with a new card"
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: "Card details are tokenized via Collect.js and never hit your server." })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            CardDetailsForm,
-            {
-              visible: true,
-              submitLabel: "Pay now",
-              submitting: newCardStatus === "processing",
-              externalError: newCardError,
-              onTokenize: handleNewCardTokenize
-            }
-          )
-        ] }) })
-      ] }) })
-    ] }),
-    enableSolanaPay && /* @__PURE__ */ jsxRuntime.jsx(Card, { className: "border border-primary/40 bg-primary/5", children: /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { className: "flex flex-col gap-4 text-sm text-primary md:flex-row md:items-center md:justify-between", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "flex items-center gap-2 text-base font-semibold text-primary", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sparkles, { className: "h-4 w-4" }),
-          " Prefer Solana Pay?"
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-primary/80", children: "Use a Solana wallet or QR code for instant settlement." })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(Button, { onClick: () => setSolanaModalOpen(true), children: "Open Solana Pay" })
-    ] }) }),
-    enableSolanaPay && /* @__PURE__ */ jsxRuntime.jsx(
-      SolanaPaymentSelector,
-      {
-        isOpen: solanaModalOpen,
-        onClose: () => setSolanaModalOpen(false),
-        priceId,
-        usdAmount,
-        onSuccess: (result) => {
-          setSolanaModalOpen(false);
-          onSolanaSuccess?.(result);
-        },
-        onError: onSolanaError
-      }
-    )
-  ] });
-};
-var Table = React3__namespace.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-    "table",
+  const subscribeWithCard = React3.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 = React3.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 = React3.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 = React3.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] = React3.useState(false);
+  const [error, setError] = React3.useState(null);
+  const { generateFlexFormUrl } = useSubscriptionActions();
+  const openFlexForm = React3.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] = React3.useState(defaultTab);
+  const [mode, setMode] = React3.useState(
+    () => initialMode === "solana" && enableSolanaPay ? "solana" : "cards"
+  );
+  const [selectedMethodId, setSelectedMethodId] = React3.useState(null);
+  const [savedStatus, setSavedStatus] = React3.useState("idle");
+  const [savedError, setSavedError] = React3.useState(null);
+  const [newCardStatus, setNewCardStatus] = React3.useState("idle");
+  const [newCardError, setNewCardError] = React3.useState(null);
+  const [billingDetails, setBillingDetails] = React3.useState(null);
+  const [alternativePaymentError, setAlternativePaymentError] = React3.useState(null);
+  const { notifyStatus, notifySuccess, notifyError } = usePaymentNotifications();
+  const {
+    openFlexForm,
+    isLoading: flexFormLoading,
+    error: flexFormError
+  } = useAlternativePaymentProvider();
+  React3.useEffect(() => {
+    setActiveTab(showStored ? "saved" : "new");
+  }, [showStored]);
+  React3.useEffect(() => {
+    if (!enableSolanaPay) {
+      setMode("cards");
+      return;
+    }
+    if (initialMode === "solana") {
+      setMode("solana");
+    } else {
+      setMode("cards");
+    }
+  }, [enableSolanaPay, initialMode]);
+  const handleMethodSelect = React3.useCallback((method) => {
+    setSelectedMethodId(method.id);
+    setSavedStatus("idle");
+    setSavedError(null);
+  }, []);
+  const handleSavedPayment = React3.useCallback(async () => {
+    if (!onSavedMethodPayment || !selectedMethodId) return;
+    try {
+      setSavedStatus("processing");
+      setSavedError(null);
+      notifyStatus("processing", { source: "saved-payment" });
+      await onSavedMethodPayment({
+        paymentMethodId: selectedMethodId,
+        amount: usdAmount
+      });
+      setSavedStatus("success");
+      notifyStatus("success", { source: "saved-payment" });
+    } catch (error) {
+      const message = error instanceof Error ? error.message : "Unable to complete payment with saved card";
+      setSavedStatus("error");
+      setSavedError(message);
+      notifyStatus("error", { source: "saved-payment" });
+      notifyError(message);
+    }
+  }, [notifyError, notifyStatus, onSavedMethodPayment, selectedMethodId, usdAmount]);
+  const handleNewCardTokenize = React3.useCallback(
+    async (token, billing) => {
+      if (!onNewCardPayment) return;
+      try {
+        setNewCardStatus("processing");
+        setNewCardError(null);
+        notifyStatus("processing", { source: "new-card" });
+        await onNewCardPayment({ token, billing });
+        setNewCardStatus("success");
+        notifyStatus("success", { source: "new-card" });
+      } catch (error) {
+        const message = error instanceof Error ? error.message : "Unable to complete payment";
+        setNewCardStatus("error");
+        setNewCardError(message);
+        notifyStatus("error", { source: "new-card" });
+        notifyError(message);
+      }
+    },
+    [notifyError, notifyStatus, onNewCardPayment]
+  );
+  const showSolanaView = React3.useCallback(() => {
+    if (!enableSolanaPay) return;
+    setMode("solana");
+  }, [enableSolanaPay]);
+  const exitSolanaView = React3.useCallback(() => {
+    setMode("cards");
+  }, []);
+  const handleSolanaSuccess = React3.useCallback(
+    (result) => {
+      onSolanaSuccess?.(result);
+      exitSolanaView();
+    },
+    [exitSolanaView, onSolanaSuccess]
+  );
+  const handleSolanaError = React3.useCallback(
+    (error) => {
+      onSolanaError?.(error);
+    },
+    [onSolanaError]
+  );
+  const handleAlternativePayment = React3.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__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: "Saved payment methods are unavailable right now. Add a new card to get started." });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        StoredPaymentMethods,
+        {
+          heading: "Saved cards",
+          selectedMethodId,
+          onMethodSelect: handleMethodSelect,
+          description: "Select one of your stored payment methods.",
+          showAddButton: false
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Button,
+        {
+          className: "w-full",
+          disabled: !selectedMethodId || savedStatus === "processing",
+          onClick: handleSavedPayment,
+          children: savedStatus === "processing" ? "Processing\u2026" : "Pay with selected card"
+        }
+      ),
+      savedError && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-destructive", children: savedError })
+    ] });
+  };
+  const renderNewTab = () => {
+    if (!showNewCard) {
+      return /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: "Select a subscription plan to add a new card." });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      CardDetailsForm,
+      {
+        visible: true,
+        submitLabel: "Pay now",
+        externalError: newCardError,
+        onTokenize: handleNewCardTokenize,
+        submitting: newCardStatus === "processing",
+        onBillingChange: setBillingDetails
+      }
+    );
+  };
+  const renderCardExperience = () => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      Tabs,
+      {
+        value: activeTab,
+        onValueChange: (value) => setActiveTab(value),
+        className: "space-y-3",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(TabsList, { className: "grid w-full grid-cols-2 border border-border/60", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(TabsTrigger, { value: "saved", disabled: !showStored, children: "Use saved card" }),
+            /* @__PURE__ */ jsxRuntime.jsx(TabsTrigger, { value: "new", disabled: !showNewCard, children: "Add new card" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(TabsContent, { value: "saved", className: "space-y-4", children: renderSavedTab() }),
+          /* @__PURE__ */ jsxRuntime.jsx(TabsContent, { value: "new", className: "space-y-4", children: renderNewTab() })
+        ]
+      }
+    ),
+    enableSolanaPay && /* @__PURE__ */ jsxRuntime.jsxs(Button, { className: "w-full", variant: "secondary", onClick: showSolanaView, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sparkles, { className: "mr-2 h-4 w-4" }),
+      " Pay with Solana"
+    ] })
+  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6 pt-4", children: [
+    mode === "cards" && renderCardExperience(),
+    mode === "cards" && enableAlternativePayments && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2 text-center text-sm text-muted-foreground", children: [
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("p", { className: "text-xs text-destructive", children: alternativePaymentError || flexFormError })
+    ] }),
+    mode === "solana" && enableSolanaPay && /* @__PURE__ */ jsxRuntime.jsx(
+      SolanaPaymentView,
+      {
+        priceId,
+        usdAmount,
+        onSuccess: handleSolanaSuccess,
+        onError: handleSolanaError,
+        onClose: exitSolanaView
+      }
+    )
+  ] });
+};
+var SubscriptionSuccessDialog = ({
+  open,
+  planName = "Premium Plan",
+  amountLabel = "$0.00",
+  billingPeriodLabel = "billing period",
+  onClose
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open, onOpenChange: (value) => {
+    if (!value) onClose();
+  }, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "w-full max-w-md overflow-hidden border border-border/70 bg-background/95 p-0 shadow-2xl", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-gradient-to-b from-primary/25 via-primary/10 to-background px-6 py-8 text-center", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-background/60", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCircle, { className: "h-10 w-10 text-primary" }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(DialogHeader, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { className: "text-2xl font-semibold text-foreground", children: "Subscription activated" }),
+        /* @__PURE__ */ jsxRuntime.jsxs(DialogDescription, { className: "text-base text-muted-foreground", children: [
+          "You now have access to ",
+          planName,
+          ". Billing: ",
+          amountLabel,
+          " / ",
+          billingPeriodLabel,
+          "."
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-6 py-6", children: /* @__PURE__ */ jsxRuntime.jsx(Button, { className: "w-full", onClick: onClose, children: "Continue exploring" }) })
+  ] }) });
+};
+var SubscriptionCheckoutModal = ({
+  open,
+  onOpenChange,
+  priceId,
+  usdAmount = 0,
+  planName,
+  amountLabel,
+  billingPeriodLabel,
+  userEmail,
+  provider = "mobius",
+  onSuccess,
+  enableSolanaPay = true,
+  onSolanaSuccess,
+  onSolanaError,
+  initialMode = "cards"
+}) => {
+  const [showSuccess, setShowSuccess] = React3.useState(false);
+  const { subscribeWithCard, subscribeWithSavedMethod } = useSubscriptionActions();
+  const handleClose = React3.useCallback(
+    (nextOpen) => {
+      onOpenChange(nextOpen);
+      if (!nextOpen) setShowSuccess(false);
+    },
+    [onOpenChange]
+  );
+  const ensurePrice = () => {
+    if (!priceId) throw new Error("Select a plan before subscribing.");
+    return priceId;
+  };
+  const notifySuccess = (result) => {
+    setShowSuccess(true);
+    onSuccess?.();
+    if (result && typeof window !== "undefined") {
+      console.debug("[payments-ui] subscription success", result);
+    }
+  };
+  const handleNewCardPayment = async ({ token, billing }) => {
+    await subscribeWithCard({
+      priceId: ensurePrice(),
+      provider,
+      paymentToken: token,
+      billing
+    });
+    notifySuccess();
+  };
+  const handleSavedMethodPayment = async ({ paymentMethodId }) => {
+    await subscribeWithSavedMethod({
+      priceId: ensurePrice(),
+      provider,
+      paymentMethodId,
+      email: userEmail ?? ""
+    });
+    notifySuccess();
+  };
+  const solanaSuccess = (result) => {
+    notifySuccess(result);
+    onSolanaSuccess?.(result);
+    onOpenChange(false);
+  };
+  const solanaError = (error) => {
+    onSolanaError?.(error);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open, onOpenChange: handleClose, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "p-6 space-y-6", children: [
+      !priceId && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { className: "h-4 w-4" }),
+        " Select a subscription plan to continue."
+      ] }),
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+      SubscriptionSuccessDialog,
+      {
+        open: showSuccess,
+        onClose: () => setShowSuccess(false),
+        planName,
+        amountLabel: amountLabel ?? `$${usdAmount.toFixed(2)}`,
+        billingPeriodLabel
+      }
+    )
+  ] });
+};
+var wallets = [
+  {
+    id: "phantom",
+    name: "Phantom",
+    icon: "https://phantom.app/img/logo.png"
+  },
+  {
+    id: "solflare",
+    name: "Solflare",
+    icon: "https://solflare.com/favicon.ico"
+  }
+];
+var WalletModal = ({ open, onOpenChange }) => {
+  const [expandedWallet, setExpandedWallet] = React3.useState(null);
+  return /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "w-full max-w-lg max-h-[90vh] overflow-y-auto rounded-md border border-border/70 bg-background/95 p-0 shadow-2xl [&::-webkit-scrollbar]:hidden", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(DialogHeader, { className: "border-b border-border/40 bg-gradient-to-r from-primary/10 via-background to-background px-6 py-5 text-left", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(DialogTitle, { className: "flex items-center gap-2 text-foreground", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Wallet, { className: "h-5 w-5 text-primary" }),
+        " Connect a Solana wallet"
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(DialogDescription, { className: "text-sm text-muted-foreground", children: "Pick a supported wallet to link with Doujins. Verified wallets unlock Solana payments and withdrawals." })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-6 space-y-4", children: [
+      wallets.map((wallet) => /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: "rounded-2xl border border-border/60 bg-background/80 p-4 shadow-sm",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                className: "flex w-full items-center justify-between",
+                onClick: () => setExpandedWallet((prev) => prev === wallet.id ? null : wallet.id),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 text-left", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("img", { src: wallet.icon, alt: wallet.name, className: "h-10 w-10 rounded-full" }),
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base font-semibold text-foreground", children: wallet.name }),
+                      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: "Browser extension or mobile app" })
+                    ] })
+                  ] }),
+                  expandedWallet === wallet.id ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUp, { className: "h-4 w-4 text-muted-foreground" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "h-4 w-4 text-muted-foreground" })
+                ]
+              }
+            ),
+            expandedWallet === wallet.id && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 space-y-3 text-sm text-muted-foreground", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
+                "Open the ",
+                wallet.name,
+                " wallet, approve the connection request, and confirm the signature prompt to finish linking."
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(Button, { className: "w-full", variant: "outline", disabled: true, children: [
+                "Connect with ",
+                wallet.name,
+                " (coming soon)"
+              ] })
+            ] })
+          ]
+        },
+        wallet.id
+      )),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-2xl border border-border/60 bg-muted/10 p-4 text-xs text-muted-foreground", children: "Don\u2019t see your wallet? Additional providers will be added soon. Contact support if you need manual verification." })
+    ] })
+  ] }) });
+};
+var createDialogState = () => ({
+  isOpen: false,
+  props: null
+});
+var PaymentsDialogContext = React3.createContext(void 0);
+var PaymentsDialogProvider = ({
+  children
+}) => {
+  const [checkoutState, setCheckoutState] = React3.useState(
+    () => createDialogState()
+  );
+  const [walletState, setWalletState] = React3.useState(
+    () => createDialogState()
+  );
+  const contextValue = React3.useMemo(() => {
+    const openCheckout = (options) => setCheckoutState({
+      isOpen: true,
+      props: options
+    });
+    return {
+      checkout: {
+        isOpen: checkoutState.isOpen,
+        open: openCheckout,
+        close: () => setCheckoutState(createDialogState())
+      },
+      solana: {
+        isOpen: checkoutState.isOpen && checkoutState.props?.initialMode === "solana",
+        open: (options) => openCheckout({
+          priceId: options.priceId,
+          usdAmount: options.usdAmount,
+          enableSolanaPay: true,
+          initialMode: "solana",
+          onSolanaSuccess: options.onSuccess,
+          onSolanaError: options.onError
+        }),
+        close: () => setCheckoutState(createDialogState())
+      },
+      wallet: {
+        isOpen: walletState.isOpen,
+        open: (options) => setWalletState({
+          isOpen: true,
+          props: options ?? null
+        }),
+        close: () => setWalletState(createDialogState())
+      }
+    };
+  }, [checkoutState, walletState.isOpen]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(PaymentsDialogContext.Provider, { value: contextValue, children: [
+    children,
+    checkoutState.props && /* @__PURE__ */ jsxRuntime.jsx(
+      SubscriptionCheckoutModal,
+      {
+        open: checkoutState.isOpen,
+        onOpenChange: (open) => open ? setCheckoutState((prev) => ({ ...prev, isOpen: true })) : setCheckoutState(createDialogState()),
+        ...checkoutState.props
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      WalletModal,
+      {
+        open: walletState.isOpen,
+        onOpenChange: (open) => open ? setWalletState((prev) => ({ ...prev, isOpen: true })) : setWalletState(createDialogState()),
+        ...walletState.props ?? {}
+      }
+    )
+  ] });
+};
+var usePaymentDialogs = () => {
+  const context = React3.useContext(PaymentsDialogContext);
+  if (!context) {
+    throw new Error("usePaymentDialogs must be used within PaymentProvider");
+  }
+  return context;
+};
+var PaymentContext = React3.createContext(void 0);
+var PaymentProvider = ({
+  config,
+  runtime: runtimeProp,
+  children
+}) => {
+  const runtime = React3.useMemo(
+    () => runtimeProp ?? createPaymentsRuntime(config),
+    [runtimeProp, config]
+  );
+  const solanaEndpoint = React3.useMemo(() => {
+    if (config.solana?.endpoint) return config.solana.endpoint;
+    const network = config.solana?.network ?? WalletAdapterNetwork.Mainnet;
+    return web3_js.clusterApiUrl(network);
+  }, [config.solana?.endpoint, config.solana?.network]);
+  const walletAdapters = React3.useMemo(() => {
+    if (config.solana?.wallets?.length) {
+      return config.solana.wallets;
+    }
+    return [
+      new walletAdapterPhantom.PhantomWalletAdapter(),
+      new walletAdapterSolflare.SolflareWalletAdapter(),
+      new walletAdapterTrust.TrustWalletAdapter(),
+      new walletAdapterCoinbase.CoinbaseWalletAdapter()
+    ];
+  }, [config.solana?.wallets]);
+  const autoConnect = config.solana?.autoConnect ?? true;
+  const value = React3.useMemo(() => {
+    return {
+      config: runtime.config,
+      fetcher: runtime.app.getFetcher(),
+      resolveAuthToken: runtime.app.resolveAuthToken,
+      app: runtime.app,
+      services: runtime.services,
+      queryClient: runtime.queryClient
+    };
+  }, [runtime]);
+  React3.useEffect(() => {
+    if (!config.collectJsKey) return;
+    loadCollectJs(config.collectJsKey);
+  }, [config.collectJsKey]);
+  return /* @__PURE__ */ jsxRuntime.jsx(PaymentContext.Provider, { value, children: /* @__PURE__ */ jsxRuntime.jsx(reactQuery.QueryClientProvider, { client: runtime.queryClient, children: /* @__PURE__ */ jsxRuntime.jsx(walletAdapterReact.ConnectionProvider, { endpoint: solanaEndpoint, config: { commitment: "confirmed" }, children: /* @__PURE__ */ jsxRuntime.jsx(walletAdapterReact.WalletProvider, { wallets: walletAdapters, autoConnect, children: /* @__PURE__ */ jsxRuntime.jsx(walletAdapterReactUi.WalletModalProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(PaymentsDialogProvider, { children }) }) }) }) }) });
+};
+var usePaymentContext = () => {
+  const context = React3.useContext(PaymentContext);
+  if (!context) {
+    throw new Error("usePaymentContext must be used within a PaymentProvider");
+  }
+  return context;
+};
+var SolanaPaymentSelector = ({
+  isOpen,
+  onClose,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open: isOpen, onOpenChange: (value) => value ? void 0 : onClose(), children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(SolanaPaymentView, { ...props, onClose }) }) });
+};
+var Table = React3__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "table",
     {
       ref,
       className: cn("w-full caption-bottom text-sm", className),
@@ -2952,7 +3407,7 @@ var CancelMembershipDialog = ({
       /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Ban, { className: "mr-2 h-4 w-4" }),
       " Cancel Membership"
     ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogContent, { className: "max-h-[90vh] overflow-y-auto rounded-xl border border-border bg-background", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogContent, { className: "max-h-[90vh] overflow-y-auto rounded-md border border-border bg-background", children: [
       /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogHeader, { children: [
         /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogTitle, { className: "flex items-center gap-2 text-lg font-semibold", children: [
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TriangleAlert, { className: "h-5 w-5 text-destructive" }),
@@ -3893,65 +4348,26 @@ var SolanaWalletSection = ({
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
             /* @__PURE__ */ jsxRuntime.jsx(Button, { onClick: registerWallet, disabled: isRegistering || walletConnection.isConnecting, className: "flex-1 bg-primary text-primary-foreground", children: isRegistering ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
               /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "mr-2 h-4 w-4 animate-spin" }),
-              " Registering..."
-            ] }) : "Register This Wallet" }),
-            /* @__PURE__ */ jsxRuntime.jsx(Button, { onClick: () => disconnect(), variant: "outline", className: "border-border", children: "Disconnect" })
-          ] })
-        ] }) : /* @__PURE__ */ jsxRuntime.jsx(walletAdapterReactUi.WalletMultiButton, { className: "w-full !bg-primary text-primary-foreground" }) })
-      ] }) })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(AlertDialog, { open: !!walletToDelete, onOpenChange: () => setWalletToDelete(null), children: /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogContent, { children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogHeader, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(AlertDialogTitle, { children: "Remove Wallet" }),
-        /* @__PURE__ */ jsxRuntime.jsx(AlertDialogDescription, { children: "Are you sure you want to remove this wallet from your account? This action cannot be undone." })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogFooter, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(AlertDialogCancel, { children: "Cancel" }),
-        /* @__PURE__ */ jsxRuntime.jsx(AlertDialogAction, { onClick: () => walletToDelete && handleDeleteWallet(walletToDelete.id), className: "bg-destructive text-destructive-foreground", children: "Remove" })
-      ] })
-    ] }) })
-  ] });
-};
-var WalletManagement = (props) => /* @__PURE__ */ jsxRuntime.jsx(SolanaWalletSection, { ...props });
-var wallets = [
-  {
-    id: "phantom",
-    name: "Phantom",
-    icon: "https://phantom.app/img/logo.png"
-  },
-  {
-    id: "solflare",
-    name: "Solflare",
-    icon: "https://solflare.com/favicon.ico"
-  }
-];
-var WalletModal = ({ open, onOpenChange }) => {
-  const [expandedWallet, setExpandedWallet] = React3.useState(null);
-  return /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxRuntime.jsx(DialogContent, { className: "max-w-md border border-border bg-background", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-4", children: wallets.map((wallet) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-lg border border-border/80", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      "button",
-      {
-        className: "flex w-full items-center justify-between px-4 py-3",
-        onClick: () => setExpandedWallet((prev) => prev === wallet.id ? null : wallet.id),
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 text-left", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("img", { src: wallet.icon, alt: wallet.name, className: "h-8 w-8 rounded-full" }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-semibold", children: wallet.name }),
-              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: "Connect via browser extension" })
-            ] })
-          ] }),
-          expandedWallet === wallet.id ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUp, { className: "h-4 w-4 text-muted-foreground" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "h-4 w-4 text-muted-foreground" })
-        ]
-      }
-    ),
-    expandedWallet === wallet.id && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-t border-border/60 px-4 py-3 text-sm text-muted-foreground", children: [
-      "Follow the prompts in your ",
-      wallet.name,
-      " wallet to approve access."
-    ] })
-  ] }, wallet.id)) }) }) });
+              " Registering..."
+            ] }) : "Register This Wallet" }),
+            /* @__PURE__ */ jsxRuntime.jsx(Button, { onClick: () => disconnect(), variant: "outline", className: "border-border", children: "Disconnect" })
+          ] })
+        ] }) : /* @__PURE__ */ jsxRuntime.jsx(walletAdapterReactUi.WalletMultiButton, { className: "w-full !bg-primary text-primary-foreground" }) })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(AlertDialog, { open: !!walletToDelete, onOpenChange: () => setWalletToDelete(null), children: /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogContent, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogHeader, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(AlertDialogTitle, { children: "Remove Wallet" }),
+        /* @__PURE__ */ jsxRuntime.jsx(AlertDialogDescription, { children: "Are you sure you want to remove this wallet from your account? This action cannot be undone." })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogFooter, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(AlertDialogCancel, { children: "Cancel" }),
+        /* @__PURE__ */ jsxRuntime.jsx(AlertDialogAction, { onClick: () => walletToDelete && handleDeleteWallet(walletToDelete.id), className: "bg-destructive text-destructive-foreground", children: "Remove" })
+      ] })
+    ] }) })
+  ] });
 };
+var WalletManagement = (props) => /* @__PURE__ */ jsxRuntime.jsx(SolanaWalletSection, { ...props });
 var Checkbox = React3__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   CheckboxPrimitive__namespace.Root,
   {
@@ -3971,7 +4387,7 @@ var Checkbox = React3__namespace.forwardRef(({ className, ...props }, ref) => /*
   }
 ));
 Checkbox.displayName = CheckboxPrimitive__namespace.Root.displayName;
-var initialState2 = {
+var initialState = {
   nameOnCard: "",
   cardNumber: "",
   expiration: "",
@@ -3979,7 +4395,7 @@ var initialState2 = {
   termsAccepted: false
 };
 var WalletDialog = ({ open, onOpenChange }) => {
-  const [form, setForm] = React3.useState(initialState2);
+  const [form, setForm] = React3.useState(initialState);
   const [errors, setErrors] = React3.useState({});
   const validators = React3.useMemo(
     () => ({
@@ -4012,7 +4428,7 @@ var WalletDialog = ({ open, onOpenChange }) => {
     if (!validate()) return;
     console.log("[payments-ui] wallet dialog submit", form);
     onOpenChange(false);
-    setForm(initialState2);
+    setForm(initialState);
   };
   return /* @__PURE__ */ jsxRuntime.jsx(AlertDialog, { open, onOpenChange, children: /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogContent, { className: "max-h-[95vh] max-w-lg overflow-y-auto rounded-2xl border border-border bg-background", children: [
     /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogHeader, { className: "border-b border-border/60 pb-4", children: [
@@ -4059,7 +4475,7 @@ var WalletDialog = ({ open, onOpenChange }) => {
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3 rounded-xl border border-border/70 bg-muted/10 p-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3 rounded-md border border-border/70 bg-muted/10 p-4", children: [
         /* @__PURE__ */ jsxRuntime.jsx(Checkbox, { id: "terms-agree", checked: form.termsAccepted, onCheckedChange: (checked) => updateField("termsAccepted", Boolean(checked)) }),
         /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "terms-agree", className: "text-sm text-muted-foreground", children: "By completing this order, I confirm that I am 18 years or older and agree to your privacy policy and terms." })
       ] }),
@@ -4071,245 +4487,6 @@ var WalletDialog = ({ open, onOpenChange }) => {
     ] })
   ] }) });
 };
-var SubscriptionSuccessDialog = ({
-  open,
-  planName = "Premium Plan",
-  amountLabel = "$0.00",
-  billingPeriodLabel = "billing period",
-  onClose
-}) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open, onOpenChange: (value) => {
-    if (!value) onClose();
-  }, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "max-w-sm text-center", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(DialogHeader, { children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(DialogTitle, { className: "flex flex-col items-center gap-3 text-foreground", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCircle, { className: "h-10 w-10 text-primary" }),
-        "Subscription activated"
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(DialogDescription, { className: "text-base text-muted-foreground", children: [
-        "You now have access to ",
-        planName,
-        ". Billing: ",
-        amountLabel,
-        " / ",
-        billingPeriodLabel,
-        "."
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(Button, { className: "mt-6 w-full", onClick: onClose, children: "Continue" })
-  ] }) });
-};
-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 = React3.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 = React3.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 = React3.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 = React3.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
-  };
-};
-var SubscriptionCheckoutModal = ({
-  open,
-  onOpenChange,
-  priceId,
-  usdAmount = 0,
-  planName,
-  amountLabel,
-  billingPeriodLabel,
-  userEmail,
-  provider = "mobius",
-  onSuccess,
-  enableSolanaPay = true
-}) => {
-  const [showSuccess, setShowSuccess] = React3.useState(false);
-  const { subscribeWithCard, subscribeWithSavedMethod } = useSubscriptionActions();
-  const handleClose = React3.useCallback(
-    (nextOpen) => {
-      onOpenChange(nextOpen);
-      if (!nextOpen) {
-        setShowSuccess(false);
-      }
-    },
-    [onOpenChange]
-  );
-  const ensurePrice = () => {
-    if (!priceId) {
-      throw new Error("Select a plan before subscribing.");
-    }
-    return priceId;
-  };
-  const notifySuccess = (result) => {
-    setShowSuccess(true);
-    onSuccess?.();
-    if (result && typeof window !== "undefined") {
-      console.debug("[payments-ui] subscription success", result);
-    }
-  };
-  const handleNewCardPayment = async ({ token, billing }) => {
-    await subscribeWithCard({
-      priceId: ensurePrice(),
-      provider,
-      paymentToken: token,
-      billing
-    });
-    notifySuccess();
-  };
-  const handleSavedMethodPayment = async ({ paymentMethodId }) => {
-    await subscribeWithSavedMethod({
-      priceId: ensurePrice(),
-      provider,
-      paymentMethodId,
-      email: userEmail ?? ""
-    });
-    notifySuccess();
-  };
-  const solanaSuccess = (result) => {
-    notifySuccess(result);
-    onOpenChange(false);
-  };
-  const summary = React3.useMemo(() => {
-    if (!planName && !amountLabel) return null;
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-xl border border-border/60 bg-muted/10 p-3 text-sm text-muted-foreground", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium text-foreground", children: planName ?? "Selected plan" }),
-      /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
-        amountLabel ?? `$${usdAmount.toFixed(2)}`,
-        " ",
-        billingPeriodLabel ? `/ ${billingPeriodLabel}` : ""
-      ] })
-    ] });
-  }, [planName, amountLabel, billingPeriodLabel, usdAmount]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open, onOpenChange: handleClose, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "sm:max-w-3xl", children: [
-      !priceId && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4 flex items-center gap-2 rounded-lg border border-destructive/40 bg-destructive/10 px-3 py-2 text-sm text-destructive", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { className: "h-4 w-4" }),
-        " Select a subscription plan to continue."
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        PaymentExperience,
-        {
-          priceId: priceId ?? "",
-          usdAmount,
-          checkoutSummary: summary,
-          onNewCardPayment: priceId ? handleNewCardPayment : void 0,
-          onSavedMethodPayment: priceId ? handleSavedMethodPayment : void 0,
-          enableNewCard: Boolean(priceId),
-          enableStoredMethods: Boolean(priceId),
-          enableSolanaPay: enableSolanaPay && Boolean(priceId),
-          onSolanaSuccess: solanaSuccess
-        }
-      )
-    ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      SubscriptionSuccessDialog,
-      {
-        open: showSuccess,
-        onClose: () => setShowSuccess(false),
-        planName,
-        amountLabel: amountLabel ?? `$${usdAmount.toFixed(2)}`,
-        billingPeriodLabel
-      }
-    )
-  ] });
-};
 var useTokenBalance = (tokens) => {
   const { publicKey } = walletAdapterReact.useWallet();
   const { connection } = walletAdapterReact.useConnection();
@@ -4801,33 +4978,6 @@ var usePaymentStatus = (options = {}) => {
     isPending: getConfirmationStatus() === "pending"
   };
 };
-var useAlternativePaymentProvider = () => {
-  const [isLoading, setIsLoading] = React3.useState(false);
-  const [error, setError] = React3.useState(null);
-  const { generateFlexFormUrl } = useSubscriptionActions();
-  const openFlexForm = React3.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 };
-};
 
 exports.BillingHistory = BillingHistory;
 exports.CancelMembershipDialog = CancelMembershipDialog;
@@ -4839,8 +4989,11 @@ exports.PaymentExperience = PaymentExperience;
 exports.PaymentMethodService = PaymentMethodService;
 exports.PaymentMethodsSection = PaymentMethodsSection;
 exports.PaymentProvider = PaymentProvider;
+exports.PaymentsDialogProvider = PaymentsDialogProvider;
+exports.PaymentsRuntime = PaymentsRuntime;
 exports.SolanaPaymentSelector = SolanaPaymentSelector;
 exports.SolanaPaymentService = SolanaPaymentService;
+exports.SolanaPaymentView = SolanaPaymentView;
 exports.SolanaWalletSection = SolanaWalletSection;
 exports.SolanaWalletService = SolanaWalletService;
 exports.StoredPaymentMethods = StoredPaymentMethods;
@@ -4853,14 +5006,15 @@ exports.WalletDialog = WalletDialog;
 exports.WalletGateway = WalletGateway;
 exports.WalletManagement = WalletManagement;
 exports.WalletModal = WalletModal;
-exports.createPaymentStore = createPaymentStore;
+exports.createPaymentsRuntime = createPaymentsRuntime;
 exports.useAlternativePaymentProvider = useAlternativePaymentProvider;
 exports.useDirectWalletPayment = useDirectWalletPayment;
 exports.usePaymentContext = usePaymentContext;
+exports.usePaymentDialogs = usePaymentDialogs;
 exports.usePaymentMethodService = usePaymentMethodService;
 exports.usePaymentMethods = usePaymentMethods;
+exports.usePaymentNotifications = usePaymentNotifications;
 exports.usePaymentStatus = usePaymentStatus;
-exports.usePaymentStore = usePaymentStore;
 exports.useSolanaDirectPayment = useSolanaDirectPayment;
 exports.useSolanaQrPayment = useSolanaQrPayment;
 exports.useSolanaService = useSolanaService;