@doujins/payments-ui 0.1.15 → 0.1.17-alpha

package/dist/index.js

@@ -1,5 +1,5 @@
-import * as React15 from 'react';
-import React15__default, { createContext, useMemo, useState, useEffect, useCallback, useRef, useContext } from 'react';
+import * as React4 from 'react';
+import React4__default, { createContext, useMemo, useState, useEffect, useCallback, useRef, useContext } from 'react';
 import { useQueryClient, useQuery, useMutation, QueryClient, QueryClientProvider, useInfiniteQuery } from '@tanstack/react-query';
 import { ConnectionProvider, WalletProvider, useWallet, useConnection } from '@solana/wallet-adapter-react';
 import { WalletModalProvider } from '@solana/wallet-adapter-react-ui';
@@ -11,7 +11,7 @@ import { SolflareWalletAdapter } from '@solana/wallet-adapter-solflare';
 import { TrustWalletAdapter } from '@solana/wallet-adapter-trust';
 import { CoinbaseWalletAdapter } from '@solana/wallet-adapter-coinbase';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
-import { ChevronDown, ChevronUp, Check, Loader2, CheckCircle, AlertCircle, Wallet, Ban, TriangleAlert, CreditCard, Trash2, Shield, UserRound, Calendar, KeyRound, XIcon, XCircle, RotateCcw, RefreshCw } from 'lucide-react';
+import { ChevronDown, ChevronUp, Check, Pencil, Loader2, CheckCircle, AlertCircle, Wallet, Ban, TriangleAlert, CreditCard, Trash2, WalletCards, RefreshCw, Shield, UserRound, Calendar, KeyRound, XIcon, XCircle, RotateCcw } from 'lucide-react';
 import clsx2, { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -248,6 +248,7 @@ var createClient = (config) => {
       return normalizeList(result);
     },
     createPaymentMethod(payload) {
+      console.log("Creating payment method with payload:", payload);
       return request("POST", "/me/payment-methods", {
         body: payload
       });
@@ -265,10 +266,10 @@ var createClient = (config) => {
     },
     checkout(payload, idempotencyKey) {
       const key = idempotencyKey ?? crypto.randomUUID();
-      return request("POST", "/me/checkout", {
+      return request("POST", "/checkout", {
         body: payload,
         headers: {
-          "Idempotency-Key": key
+          "X-Idempotency-Key": key
         }
       });
     },
@@ -277,6 +278,36 @@ var createClient = (config) => {
         body: feedback ? { feedback } : void 0
       });
     },
+    async listSubscriptions(params) {
+      const result = await request(
+        "GET",
+        "/me/subscriptions",
+        {
+          query: {
+            status: params?.status,
+            limit: params?.limit,
+            offset: params?.offset
+          }
+        }
+      );
+      return normalizeList(result);
+    },
+    updateSubscriptionPaymentMethod(payload) {
+      return request("PUT", "/me/subscriptions/payment-method", {
+        body: {
+          subscription_id: payload.subscription_id,
+          payment_method_id: payload.payment_method_id
+        }
+      });
+    },
+    resumeSubscription() {
+      return request("POST", "/me/subscriptions/resume");
+    },
+    changeSubscription(payload) {
+      return request("POST", "/me/subscriptions/change", {
+        body: payload
+      });
+    },
     async getPaymentHistory(params) {
       const result = await request("GET", "/me/payments", {
         query: {
@@ -422,6 +453,19 @@ function DialogHeader({ className, ...props }) {
     }
   );
 }
+function DialogFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "dialog-footer",
+      className: cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      ),
+      ...props
+    }
+  );
+}
 function DialogTitle({
   className,
   ...props
@@ -488,7 +532,7 @@ var buttonVariants = cva(
     }
   }
 );
-var Button = React15.forwardRef(
+var Button = React4.forwardRef(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
     const Comp = asChild ? Slot : "button";
     return /* @__PURE__ */ jsx(
@@ -502,7 +546,7 @@ var Button = React15.forwardRef(
   }
 );
 Button.displayName = "Button";
-var Input = React15.forwardRef(
+var Input = React4.forwardRef(
   ({ className, type, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "input",
@@ -522,7 +566,7 @@ Input.displayName = "Input";
 var labelVariants = cva(
   "text-sm font-medium leading-none text-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
 );
-var Label = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var Label = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   LabelPrimitive.Root,
   {
     ref,
@@ -531,9 +575,9 @@ var Label = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
   }
 ));
 Label.displayName = LabelPrimitive.Root.displayName;
-var Select = ({ children, ...props }) => /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsx(SelectPrimitive.Root, { ...props, children }) });
+var Select = SelectPrimitive.Root;
 var SelectValue = SelectPrimitive.Value;
-var SelectTrigger = React15.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var SelectTrigger = React4.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   SelectPrimitive.Trigger,
   {
     ref,
@@ -549,7 +593,7 @@ var SelectTrigger = React15.forwardRef(({ className, children, ...props }, ref)
   }
 ));
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-var SelectScrollUpButton = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectScrollUpButton = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.ScrollUpButton,
   {
     ref,
@@ -562,7 +606,7 @@ var SelectScrollUpButton = React15.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
-var SelectScrollDownButton = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectScrollDownButton = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.ScrollDownButton,
   {
     ref,
@@ -575,39 +619,61 @@ var SelectScrollDownButton = React15.forwardRef(({ className, ...props }, ref) =
   }
 ));
 SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
-var SelectContent = React15.forwardRef(
-  ({
-    className,
-    children,
-    position = "popper",
-    side = "bottom",
-    sideOffset = 4,
-    align = "start",
-    ...props
-  }, ref) => {
-    const popperProps = position === "popper" ? { side, sideOffset, align } : {};
-    return /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
-      SelectPrimitive.Content,
-      {
-        ref,
-        className: cn(
-          "z-[200] max-h-64 w-[var(--radix-select-trigger-width)] overflow-y-auto overflow-x-hidden rounded-md border border-white/20 bg-background-regular text-foreground shadow-lg backdrop-blur-xl data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-          className
-        ),
-        position,
-        ...popperProps,
-        ...props,
-        children: [
-          /* @__PURE__ */ jsx(SelectScrollUpButton, {}),
-          /* @__PURE__ */ jsx(SelectPrimitive.Viewport, { className: "p-1", children }),
-          /* @__PURE__ */ jsx(SelectScrollDownButton, {})
-        ]
+var SelectContent = React4.forwardRef(({ className, children, position = "popper", ...props }, ref) => {
+  const viewportRef = React4.useRef(null);
+  const contentRef = React4.useCallback((node) => {
+    if (node) {
+      node.style.setProperty("max-height", "40vh", "important");
+      const anchorWidth = window.getComputedStyle(node).getPropertyValue("--radix-popper-anchor-width");
+      if (anchorWidth) {
+        node.style.setProperty("width", anchorWidth, "important");
       }
-    ) });
-  }
-);
+    }
+  }, []);
+  const combinedRef = React4.useCallback((node) => {
+    contentRef(node);
+    if (typeof ref === "function") {
+      ref(node);
+    } else if (ref) {
+      ref.current = node;
+    }
+  }, [contentRef, ref]);
+  React4.useEffect(() => {
+    if (viewportRef.current) {
+      viewportRef.current.style.setProperty("max-height", "40vh", "important");
+    }
+  });
+  return /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+    SelectPrimitive.Content,
+    {
+      ref: combinedRef,
+      className: cn(
+        "relative z-50 min-w-[8rem] overflow-hidden rounded-md border border-white/20 bg-background-regular text-foreground shadow-lg backdrop-blur-xl data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className
+      ),
+      position,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(SelectScrollUpButton, {}),
+        /* @__PURE__ */ jsx(
+          SelectPrimitive.Viewport,
+          {
+            ref: viewportRef,
+            className: cn(
+              "p-1 overflow-y-auto",
+              position === "popper" && "w-full min-w-[var(--radix-select-trigger-width)]"
+            ),
+            children
+          }
+        ),
+        /* @__PURE__ */ jsx(SelectScrollDownButton, {})
+      ]
+    }
+  ) });
+});
 SelectContent.displayName = SelectPrimitive.Content.displayName;
-var SelectLabel = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectLabel = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.Label,
   {
     ref,
@@ -616,7 +682,7 @@ var SelectLabel = React15.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
-var SelectItem = React15.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var SelectItem = React4.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   SelectPrimitive.Item,
   {
     ref,
@@ -632,7 +698,7 @@ var SelectItem = React15.forwardRef(({ className, children, ...props }, ref) =>
   }
 ));
 SelectItem.displayName = SelectPrimitive.Item.displayName;
-var SelectSeparator = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectSeparator = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.Separator,
   {
     ref,
@@ -654,6 +720,28 @@ var defaultBillingDetails = {
   email: "",
   provider: "mobius"
 };
+var defaultCardDetailsFormTranslations = {
+  firstName: "First name",
+  lastName: "Last name",
+  email: "Email",
+  address: "Address",
+  city: "City",
+  state: "State / Region",
+  postalCode: "Postal code",
+  country: "Country",
+  cardNumber: "Card number",
+  expiry: "Expiry",
+  cvv: "CVV",
+  submit: "Submit",
+  processing: "Processing\u2026",
+  errorRequiredFields: "Please complete all required billing fields.",
+  errorTokenization: "Payment tokenization failed. Please try again.",
+  errorFormNotReady: "Payment form is not ready. Please try again later.",
+  infoSecure: "Your payment information is encrypted and processed securely.",
+  cancel: "Cancel",
+  editEmail: "Edit email",
+  selectCountry: "Select a country"
+};
 var buildSelector = (prefix, field) => `#${prefix}-${field}`;
 var CardDetailsForm = ({
   visible,
@@ -665,8 +753,10 @@ var CardDetailsForm = ({
   collectPrefix = "card-form",
   className,
   onBillingChange,
-  submitDisabled = false
+  submitDisabled = false,
+  translations
 }) => {
+  const t = { ...defaultCardDetailsFormTranslations, ...translations };
   const { config } = usePaymentContext();
   const defaultValuesKey = useMemo(() => JSON.stringify(defaultValues ?? {}), [defaultValues]);
   const mergedDefaults = useMemo(
@@ -685,6 +775,7 @@ var CardDetailsForm = ({
   const [postalCode, setPostalCode] = useState(mergedDefaults.postalCode);
   const [country, setCountry] = useState(mergedDefaults.country);
   const [email, setEmail] = useState(mergedDefaults.email ?? "");
+  const [isEditingEmail, setIsEditingEmail] = useState(false);
   const [localError, setLocalError] = useState(null);
   const [isTokenizing, setIsTokenizing] = useState(false);
   const [collectReady, setCollectReady] = useState(
@@ -706,8 +797,11 @@ var CardDetailsForm = ({
     if (!visible) {
       setLocalError(null);
       setIsTokenizing(false);
+      if (typeof window !== "undefined" && window.__doujinsCollectConfigured && collectPrefix) {
+        window.__doujinsCollectConfigured[collectPrefix] = false;
+      }
     }
-  }, [visible]);
+  }, [visible, collectPrefix]);
   useEffect(() => {
     if (!visible) return;
     setFirstName(mergedDefaults.firstName);
@@ -769,6 +863,8 @@ var CardDetailsForm = ({
         setLocalError("Payment tokenization failed. Please try again.");
         return;
       }
+      let rawExp = response.card?.exp;
+      let formattedExp = rawExp && rawExp.length === 4 ? `${rawExp.slice(0, 2)}/${rawExp.slice(2)}` : rawExp;
       const billing = {
         firstName,
         lastName,
@@ -778,7 +874,10 @@ var CardDetailsForm = ({
         postalCode,
         country,
         email,
-        provider: mergedDefaults.provider ?? "mobius"
+        provider: mergedDefaults.provider ?? "mobius",
+        last_four: response.card?.number,
+        card_type: response.card?.type,
+        expiry_date: formattedExp
       };
       onTokenize(response.token, billing);
     };
@@ -818,9 +917,8 @@ var CardDetailsForm = ({
     visible
   ]);
   const validate = () => {
-    const emailRequired = !defaultValues?.email && !config.defaultUser?.email;
-    if (!firstName.trim() || !lastName.trim() || !address1.trim() || !city.trim() || !postalCode.trim() || !country.trim() || emailRequired && !email.trim()) {
-      setLocalError("Please complete all required billing fields.");
+    if (!firstName.trim() || !lastName.trim() || !address1.trim() || !city.trim() || !postalCode.trim() || !country.trim() || !email.trim()) {
+      setLocalError(t.errorRequiredFields);
       return false;
     }
     setLocalError(null);
@@ -830,7 +928,7 @@ var CardDetailsForm = ({
     event.preventDefault();
     if (!validate()) return;
     if (!window.CollectJS) {
-      setLocalError("Payment form is not ready. Please try again later.");
+      setLocalError(t.errorFormNotReady);
       return;
     }
     setIsTokenizing(true);
@@ -838,7 +936,8 @@ var CardDetailsForm = ({
   };
   const errorMessage = localError ?? externalError;
   const collectFieldClass = "relative flex h-9 w-full items-center overflow-hidden rounded-md border border-white/30 bg-transparent px-3 text-sm text-foreground";
-  const showEmailField = !defaultValues?.email && !config.defaultUser?.email;
+  const hasDefaultEmail = Boolean(defaultValues?.email || config.defaultUser?.email);
+  const showEmailInput = !hasDefaultEmail || isEditingEmail;
   return /* @__PURE__ */ jsxs(
     "form",
     {
@@ -849,7 +948,7 @@ var CardDetailsForm = ({
         errorMessage && /* @__PURE__ */ jsx("div", { className: "rounded-md border border-red-500/40 bg-red-500/10 px-4 py-2 text-sm text-red-400", children: errorMessage }),
         /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 md:flex-row", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-2", children: [
-            /* @__PURE__ */ jsx(Label, { htmlFor: "firstName", children: "First name" }),
+            /* @__PURE__ */ jsx(Label, { htmlFor: "firstName", children: t.firstName }),
             /* @__PURE__ */ jsx(
               Input,
               {
@@ -861,7 +960,7 @@ var CardDetailsForm = ({
             )
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-2", children: [
-            /* @__PURE__ */ jsx(Label, { htmlFor: "lastName", children: "Last name" }),
+            /* @__PURE__ */ jsx(Label, { htmlFor: "lastName", children: t.lastName }),
             /* @__PURE__ */ jsx(
               Input,
               {
@@ -873,21 +972,50 @@ var CardDetailsForm = ({
             )
           ] })
         ] }),
-        showEmailField && /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ jsx(Label, { htmlFor: "email", children: "Email" }),
-          /* @__PURE__ */ jsx(
-            Input,
-            {
-              id: "email",
-              type: "email",
-              value: email,
-              onChange: (e) => setEmail(e.target.value),
-              required: true
-            }
-          )
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx(Label, { htmlFor: "email", children: t.email }),
+          showEmailInput ? /* @__PURE__ */ jsxs("div", { className: "flex gap-2 items-center", children: [
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                id: "email",
+                type: "email",
+                value: email,
+                onChange: (e) => setEmail(e.target.value),
+                required: true,
+                className: "flex-1"
+              }
+            ),
+            hasDefaultEmail && /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "button",
+                variant: "ghost",
+                size: "sm",
+                onClick: () => {
+                  setIsEditingEmail(false);
+                  setEmail(mergedDefaults.email ?? "");
+                },
+                className: "px-3 text-xs text-muted-foreground hover:text-foreground",
+                children: t.cancel
+              }
+            )
+          ] }) : /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between h-9 w-full rounded-md border border-white/30 bg-transparent px-3 text-sm text-foreground", children: [
+            /* @__PURE__ */ jsx("span", { children: email }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => setIsEditingEmail(true),
+                className: "text-muted-foreground hover:text-foreground transition-colors",
+                "aria-label": t.editEmail,
+                children: /* @__PURE__ */ jsx(Pencil, { className: "h-4 w-4" })
+              }
+            )
+          ] })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ jsx(Label, { htmlFor: "address1", children: "Address" }),
+          /* @__PURE__ */ jsx(Label, { htmlFor: "address1", children: t.address }),
           /* @__PURE__ */ jsx(
             Input,
             {
@@ -900,7 +1028,7 @@ var CardDetailsForm = ({
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "grid gap-2 md:grid-cols-2", children: [
           /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-            /* @__PURE__ */ jsx(Label, { htmlFor: "city", children: "City" }),
+            /* @__PURE__ */ jsx(Label, { htmlFor: "city", children: t.city }),
             /* @__PURE__ */ jsx(
               Input,
               {
@@ -912,7 +1040,7 @@ var CardDetailsForm = ({
             )
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-            /* @__PURE__ */ jsx(Label, { htmlFor: "state", children: "State / Region" }),
+            /* @__PURE__ */ jsx(Label, { htmlFor: "state", children: t.state }),
             /* @__PURE__ */ jsx(
               Input,
               {
@@ -925,7 +1053,7 @@ var CardDetailsForm = ({
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "grid gap-2 md:grid-cols-2", children: [
           /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-            /* @__PURE__ */ jsx(Label, { htmlFor: "postal", children: "Postal code" }),
+            /* @__PURE__ */ jsx(Label, { htmlFor: "postal", children: t.postalCode }),
             /* @__PURE__ */ jsx(
               Input,
               {
@@ -937,24 +1065,24 @@ var CardDetailsForm = ({
             )
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-            /* @__PURE__ */ jsx(Label, { children: "Country" }),
+            /* @__PURE__ */ jsx(Label, { children: t.country }),
             /* @__PURE__ */ jsxs(Select, { value: country, onValueChange: setCountry, children: [
-              /* @__PURE__ */ jsx(SelectTrigger, { children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select a country" }) }),
-              /* @__PURE__ */ jsx(SelectContent, { className: "max-h-64 w-full", children: countries.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.code, children: option.name }, option.code)) })
+              /* @__PURE__ */ jsx(SelectTrigger, { children: /* @__PURE__ */ jsx(SelectValue, { placeholder: t.selectCountry }) }),
+              /* @__PURE__ */ jsx(SelectContent, { children: countries.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.code, children: option.name }, option.code)) })
             ] })
           ] })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ jsx(Label, { children: "Card number" }),
+          /* @__PURE__ */ jsx(Label, { children: t.cardNumber }),
           /* @__PURE__ */ jsx("div", { id: buildSelector(collectPrefix, "ccnumber").slice(1), className: collectFieldClass })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "grid gap-2 md:grid-cols-2", children: [
           /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-            /* @__PURE__ */ jsx(Label, { children: "Expiry" }),
+            /* @__PURE__ */ jsx(Label, { children: t.expiry }),
             /* @__PURE__ */ jsx("div", { id: buildSelector(collectPrefix, "ccexp").slice(1), className: collectFieldClass })
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-            /* @__PURE__ */ jsx(Label, { children: "CVV" }),
+            /* @__PURE__ */ jsx(Label, { children: t.cvv }),
             /* @__PURE__ */ jsx("div", { id: buildSelector(collectPrefix, "cvv").slice(1), className: collectFieldClass })
           ] })
         ] }),
@@ -966,11 +1094,12 @@ var CardDetailsForm = ({
             disabled: submitting || submitDisabled || isTokenizing,
             children: submitting || isTokenizing ? /* @__PURE__ */ jsxs(Fragment, { children: [
               /* @__PURE__ */ jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }),
-              " Processing\u2026"
-            ] }) : submitLabel
+              " ",
+              t.processing
+            ] }) : submitLabel || t.submit
           }
         ),
-        /* @__PURE__ */ jsx("p", { className: "text-xs text-white/60", children: "Your payment information is encrypted and processed securely." })
+        /* @__PURE__ */ jsx("p", { className: "text-xs text-white/60", children: t.infoSecure })
       ]
     }
   );
@@ -1007,7 +1136,9 @@ var usePaymentMethods = () => {
         zip: billing.postalCode,
         country: billing.country,
         email: billing.email,
-        provider: billing.provider
+        provider: billing.provider,
+        last_four: billing.last_four,
+        card_type: billing.card_type
       };
       return client.createPaymentMethod(payload);
     },
@@ -1046,7 +1177,7 @@ var badgeVariants = cva(
 function Badge({ className, variant, ...props }) {
   return /* @__PURE__ */ jsx("div", { className: cn(badgeVariants({ variant }), className), ...props });
 }
-var ScrollArea = React15.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var ScrollArea = React4.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   ScrollAreaPrimitive.Root,
   {
     ref,
@@ -1060,7 +1191,7 @@ var ScrollArea = React15.forwardRef(({ className, children, ...props }, ref) =>
   }
 ));
 ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
-var ScrollBar = React15.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsx(
+var ScrollBar = React4.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsx(
   ScrollAreaPrimitive.ScrollAreaScrollbar,
   {
     ref,
@@ -1076,21 +1207,34 @@ var ScrollBar = React15.forwardRef(({ className, orientation = "vertical", ...pr
   }
 ));
 ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+var defaultTranslations = {
+  loadingCards: "Loading cards...",
+  noSavedMethods: "No saved payment methods yet.",
+  selectedLabel: "Selected",
+  useCardLabel: "Use card"
+};
 var formatCardLabel = (method) => {
-  const brand = method.card_type ? method.card_type.toUpperCase() : "CARD";
-  const lastFour = method.last_four ? `\u2022\u2022\u2022\u2022 ${method.last_four}` : "";
-  return `${brand} ${lastFour}`.trim();
+  if (method.card) {
+    const brand = method.card.brand ? method.card.brand.toUpperCase() : "CARD";
+    const lastFour = method.card.last4 ? `\u2022\u2022\u2022\u2022 ${method.card.last4}` : "";
+    const exp = method.card.exp_month && method.card.exp_year ? ` \u2022 ${String(method.card.exp_month).padStart(2, "0")}/${String(method.card.exp_year).slice(-2)}` : "";
+    return `${brand} ${lastFour}${exp}`.trim();
+  }
+  return "CARD";
 };
 var StoredPaymentMethods = ({
   selectedMethodId,
-  onMethodSelect
+  onMethodSelect,
+  translations
 }) => {
   const { listQuery } = usePaymentMethods();
   const payments = useMemo(() => listQuery.data?.data ?? [], [listQuery.data]);
+  const t = { ...defaultTranslations, ...translations };
   return /* @__PURE__ */ jsx("div", { className: "space-y-4", children: listQuery.isLoading ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center py-4 text-sm text-muted-foreground", children: [
     /* @__PURE__ */ jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }),
-    " Loading cards..."
-  ] }) : payments.length === 0 ? /* @__PURE__ */ jsx("div", { className: "p-4 text-center text-sm text-muted-foreground", children: "No saved payment methods yet." }) : /* @__PURE__ */ jsx(ScrollArea, { className: "max-h-[320px] pr-2", children: /* @__PURE__ */ jsx("div", { className: "space-y-3", children: payments.map((method) => {
+    " ",
+    t.loadingCards
+  ] }) : payments.length === 0 ? /* @__PURE__ */ jsx("div", { className: "p-4 text-center text-sm text-muted-foreground", children: t.noSavedMethods }) : /* @__PURE__ */ jsx(ScrollArea, { className: "max-h-[320px] pr-2", children: /* @__PURE__ */ jsx("div", { className: "space-y-3", children: payments.map((method) => {
     const isSelected = selectedMethodId === method.id;
     return /* @__PURE__ */ jsxs(
       "div",
@@ -1113,7 +1257,7 @@ var StoredPaymentMethods = ({
                 disabled: isSelected,
                 onClick: () => onMethodSelect(method),
                 className: clsx2("px-3", { "bg-muted/90": !isSelected, "bg-inherit": isSelected }),
-                children: isSelected ? "Selected" : "Use card"
+                children: isSelected ? t.selectedLabel : t.useCardLabel
               }
             )
           ] })
@@ -1123,6 +1267,26 @@ var StoredPaymentMethods = ({
     );
   }) }) }) });
 };
+
+// src/utils/errorMessages.ts
+var resolveErrorMessageByCode = (error, translationErrors, fallbackMessage) => {
+  const errors = translationErrors ?? {};
+  const defaultMessage = fallbackMessage ?? (error instanceof Error ? error.message : typeof error === "string" ? error : "An unexpected error occurred");
+  if (error instanceof ClientApiError) {
+    const payload = error.body;
+    const code = payload?.code ?? payload?.error?.code;
+    if (code && errors[code]) return errors[code];
+    if (typeof payload?.error?.message === "string") return payload.error.message;
+    return error.message;
+  }
+  if (typeof error === "object" && error !== null && "code" in error) {
+    const code = error.code;
+    if (typeof code === "string" && errors[code]) return errors[code];
+  }
+  if (error instanceof Error) return error.message;
+  if (typeof error === "string") return error;
+  return defaultMessage;
+};
 function Tabs({
   className,
   ...props
@@ -1145,7 +1309,7 @@ function TabsList({
     {
       "data-slot": "tabs-list",
       className: cn(
-        "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
+        "bg-transparent border border-white/30 text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-1",
         className
       ),
       ...props
@@ -1156,12 +1320,32 @@ function TabsTrigger({
   className,
   ...props
 }) {
+  const triggerRef = React4.useRef(null);
+  React4.useEffect(() => {
+    const element = triggerRef.current;
+    if (!element) return;
+    const updateStyles = () => {
+      const isActive = element.getAttribute("data-state") === "active";
+      if (isActive) {
+        element.style.setProperty("background-color", "rgba(255, 255, 255, 0.3)", "important");
+        element.style.setProperty("border-color", "transparent", "important");
+      } else {
+        element.style.removeProperty("background-color");
+        element.style.removeProperty("border-color");
+      }
+    };
+    updateStyles();
+    const observer = new MutationObserver(updateStyles);
+    observer.observe(element, { attributes: true, attributeFilter: ["data-state"] });
+    return () => observer.disconnect();
+  }, []);
   return /* @__PURE__ */ jsx(
     TabsPrimitive.Trigger,
     {
+      ref: triggerRef,
       "data-slot": "tabs-trigger",
       className: cn(
-        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/70 inline-flex h-[calc(100%-0.5rem)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow,background-color,border-color] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       ),
       ...props
@@ -1405,7 +1589,7 @@ var useSolanaQrPayment = (options) => {
     refresh
   };
 };
-var Card = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var Card = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -1417,7 +1601,7 @@ var Card = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
   }
 ));
 Card.displayName = "Card";
-var CardHeader = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CardHeader = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -1426,7 +1610,7 @@ var CardHeader = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 CardHeader.displayName = "CardHeader";
-var CardTitle = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CardTitle = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -1438,7 +1622,7 @@ var CardTitle = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 CardTitle.displayName = "CardTitle";
-var CardDescription = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CardDescription = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -1447,9 +1631,9 @@ var CardDescription = React15.forwardRef(({ className, ...props }, ref) => /* @_
   }
 ));
 CardDescription.displayName = "CardDescription";
-var CardContent = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("p-6 pt-0", className), ...props }));
+var CardContent = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("p-6 pt-0", className), ...props }));
 CardContent.displayName = "CardContent";
-var CardFooter = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CardFooter = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -1464,7 +1648,7 @@ var QRCodePayment = ({
   onPaymentError,
   onPaymentSuccess
 }) => {
-  const handleQrSuccess = React15__default.useCallback(
+  const handleQrSuccess = React4__default.useCallback(
     (paymentId, txId) => {
       if (!paymentId && !txId) {
         onPaymentError("Missing payment confirmation details");
@@ -1898,20 +2082,45 @@ var SolanaPaymentView = ({
     renderBody()
   ] });
 };
+var defaultPaymentExperienceTranslations = {
+  ...defaultCardDetailsFormTranslations,
+  useSavedCardTab: "Use saved card",
+  addNewCardTab: "Add new card",
+  savedUnavailable: "Saved payment methods are unavailable right now. Add a new card to get started.",
+  payWithSavedCard: "Pay with selected card",
+  processingSavedCard: "Processing...",
+  savedErrorFallback: "Unable to complete payment with saved card",
+  newCardUnavailable: "Select a subscription plan to add a new card.",
+  payNow: "Pay now",
+  storedLoadingCards: "Loading cards...",
+  storedNoSavedMethods: "No saved payment methods yet.",
+  storedSelectedLabel: "Selected",
+  storedUseCardLabel: "Use card",
+  payWithCcbill: "Pay with CCBill",
+  processingCcbill: "Redirecting...",
+  errors: {}
+};
 var PaymentExperience = ({
   priceId,
   usdAmount,
   onNewCardPayment,
   onSavedMethodPayment,
+  onCcbillPayment,
   enableNewCard = true,
   enableStoredMethods = true,
   enableSolanaPay = true,
   onSolanaSuccess,
   onSolanaError,
-  initialMode = "cards"
+  initialMode = "cards",
+  translations
 }) => {
+  const t = {
+    ...defaultPaymentExperienceTranslations,
+    ...translations
+  };
   const showNewCard = enableNewCard && Boolean(onNewCardPayment);
   const showStored = enableStoredMethods && Boolean(onSavedMethodPayment);
+  const showCcbill = showNewCard && Boolean(onCcbillPayment);
   const defaultTab = showStored ? "saved" : "new";
   const [activeTab, setActiveTab] = useState(defaultTab);
   const [mode, setMode] = useState(
@@ -1922,6 +2131,9 @@ var PaymentExperience = ({
   const [savedError, setSavedError] = useState(null);
   const [newCardStatus, setNewCardStatus] = useState("idle");
   const [newCardError, setNewCardError] = useState(null);
+  const [billingDetails, setBillingDetails] = useState(null);
+  const [ccbillStatus, setCcbillStatus] = useState("idle");
+  const [ccbillError, setCcbillError] = useState(null);
   const { notifyStatus, notifyError } = usePaymentNotifications();
   useEffect(() => {
     setActiveTab(showStored ? "saved" : "new");
@@ -1937,6 +2149,24 @@ var PaymentExperience = ({
       setMode("cards");
     }
   }, [enableSolanaPay, initialMode]);
+  useEffect(() => {
+    if (!showNewCard) {
+      setBillingDetails(null);
+      setCcbillStatus("idle");
+      setCcbillError(null);
+    }
+  }, [showNewCard]);
+  const handleBillingChange = useCallback((billing) => {
+    setBillingDetails(billing);
+    setCcbillError(null);
+    setCcbillStatus("idle");
+  }, []);
+  const isBillingComplete = useCallback((billing) => {
+    if (!billing) return false;
+    return Boolean(
+      billing.firstName.trim() && billing.lastName.trim() && billing.address1.trim() && billing.city.trim() && billing.postalCode.trim() && billing.country.trim() && billing.email.trim()
+    );
+  }, []);
   const handleMethodSelect = useCallback((method) => {
     setSelectedMethodId(method.id);
     setSavedStatus("idle");
@@ -1955,13 +2185,17 @@ var PaymentExperience = ({
       setSavedStatus("success");
       notifyStatus("success", { source: "saved-payment" });
     } catch (error) {
-      const message = error instanceof Error ? error.message : "Unable to complete payment with saved card";
+      const message = resolveErrorMessageByCode(
+        error,
+        t.errors,
+        t.savedErrorFallback
+      );
       setSavedStatus("error");
       setSavedError(message);
       notifyStatus("error", { source: "saved-payment" });
       notifyError(message);
     }
-  }, [notifyError, notifyStatus, onSavedMethodPayment, selectedMethodId, usdAmount]);
+  }, [notifyError, notifyStatus, onSavedMethodPayment, selectedMethodId, t, usdAmount]);
   const handleNewCardTokenize = useCallback(
     async (token, billing) => {
       if (!onNewCardPayment) return;
@@ -1973,15 +2207,56 @@ var PaymentExperience = ({
         setNewCardStatus("success");
         notifyStatus("success", { source: "new-card" });
       } catch (error) {
-        const message = error instanceof Error ? error.message : "Unable to complete payment";
+        const message = resolveErrorMessageByCode(
+          error,
+          t.errors,
+          "Unable to complete payment"
+        );
         setNewCardStatus("error");
         setNewCardError(message);
         notifyStatus("error", { source: "new-card" });
         notifyError(message);
       }
     },
-    [notifyError, notifyStatus, onNewCardPayment]
+    [notifyError, notifyStatus, onNewCardPayment, t]
   );
+  const handleCcbillPayment = useCallback(async () => {
+    if (!onCcbillPayment) return;
+    if (!billingDetails || !isBillingComplete(billingDetails)) {
+      const message = t.errorRequiredFields;
+      setActiveTab("new");
+      setCcbillStatus("error");
+      setCcbillError(message);
+      notifyStatus("error", { source: "ccbill" });
+      notifyError(message);
+      return;
+    }
+    try {
+      setCcbillStatus("processing");
+      setCcbillError(null);
+      notifyStatus("processing", { source: "ccbill" });
+      await onCcbillPayment({ billing: billingDetails });
+      setCcbillStatus("success");
+      notifyStatus("success", { source: "ccbill" });
+    } catch (error) {
+      const message = resolveErrorMessageByCode(
+        error,
+        t.errors,
+        "Unable to start CCBill checkout"
+      );
+      setCcbillStatus("error");
+      setCcbillError(message);
+      notifyStatus("error", { source: "ccbill" });
+      notifyError(message);
+    }
+  }, [
+    billingDetails,
+    isBillingComplete,
+    notifyError,
+    notifyStatus,
+    onCcbillPayment,
+    t
+  ]);
   useCallback(() => {
     if (!enableSolanaPay) return;
     setMode("solana");
@@ -2004,14 +2279,20 @@ var PaymentExperience = ({
   );
   const renderSavedTab = () => {
     if (!showStored) {
-      return /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Saved payment methods are unavailable right now. Add a new card to get started." });
+      return /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: t.savedUnavailable });
     }
     return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
       /* @__PURE__ */ jsx(
         StoredPaymentMethods,
         {
           selectedMethodId,
-          onMethodSelect: handleMethodSelect
+          onMethodSelect: handleMethodSelect,
+          translations: {
+            loadingCards: t.storedLoadingCards,
+            noSavedMethods: t.storedNoSavedMethods,
+            selectedLabel: t.storedSelectedLabel,
+            useCardLabel: t.storedUseCardLabel
+          }
         }
       ),
       /* @__PURE__ */ jsx(
@@ -2020,7 +2301,7 @@ var PaymentExperience = ({
           className: "w-full",
           disabled: !selectedMethodId || savedStatus === "processing",
           onClick: handleSavedPayment,
-          children: savedStatus === "processing" ? "Processing..." : "Pay with selected card"
+          children: savedStatus === "processing" ? t.processingSavedCard : t.payWithSavedCard
         }
       ),
       savedError && /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive", children: savedError })
@@ -2028,29 +2309,50 @@ var PaymentExperience = ({
   };
   const renderNewTab = () => {
     if (!showNewCard) {
-      return /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Select a subscription plan to add a new card." });
+      return /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: t.newCardUnavailable });
     }
     return /* @__PURE__ */ jsx(
       CardDetailsForm,
       {
         visible: true,
-        submitLabel: "Pay now",
+        submitLabel: t.payNow,
         externalError: newCardError,
         onTokenize: handleNewCardTokenize,
-        submitting: newCardStatus === "processing"
+        submitting: newCardStatus === "processing",
+        onBillingChange: handleBillingChange,
+        translations: t
       }
     );
   };
   const renderCardExperience = () => /* @__PURE__ */ jsxs(Tabs, { value: activeTab, onValueChange: setActiveTab, children: [
     /* @__PURE__ */ jsxs(TabsList, { className: "w-full rounded-md mb-4", children: [
-      /* @__PURE__ */ jsx(TabsTrigger, { className: clsx("cursor-pointer", { "bg-background": activeTab == "saved" }), value: "saved", children: "Use saved card" }),
-      /* @__PURE__ */ jsx(TabsTrigger, { className: clsx("cursor-pointer", { "bg-background": activeTab == "new" }), value: "new", children: "Add new card" })
+      /* @__PURE__ */ jsx(TabsTrigger, { className: "cursor-pointer", value: "saved", children: t.useSavedCardTab }),
+      /* @__PURE__ */ jsx(TabsTrigger, { className: "cursor-pointer", value: "new", children: t.addNewCardTab })
     ] }),
     /* @__PURE__ */ jsx(TabsContent, { value: "saved", children: renderSavedTab() }),
     /* @__PURE__ */ jsx(TabsContent, { value: "new", children: renderNewTab() })
   ] });
+  const renderCcbillAction = () => {
+    if (!showCcbill) return null;
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-2 border-t border-white/10 pt-4", children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          className: "w-full",
+          variant: "outline",
+          disabled: ccbillStatus === "processing",
+          onClick: handleCcbillPayment,
+          children: ccbillStatus === "processing" ? t.processingCcbill : t.payWithCcbill
+        }
+      ),
+      ccbillError && /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive", children: ccbillError })
+    ] });
+  };
   return /* @__PURE__ */ jsxs("div", { className: "space-y-6 pt-4", children: [
-    mode === "cards" && renderCardExperience(),
+    mode === "cards" && /* @__PURE__ */ jsxs(Fragment, { children: [
+      renderCardExperience(),
+      renderCcbillAction()
+    ] }),
     mode === "solana" && enableSolanaPay && /* @__PURE__ */ jsx(
       SolanaPaymentView,
       {
@@ -2102,17 +2404,17 @@ var useSubscriptionActions = () => {
   const subscribeWithCard = useCallback(
     async ({
       priceId,
-      processor = "nmi",
+      processor = "mobius",
       provider,
       paymentToken,
       billing,
       idempotencyKey
     }) => {
-      const payload = {
-        price_id: ensurePrice(priceId),
+      if (processor !== "ccbill" && !paymentToken) {
+        throw new Error("payments-ui: payment token is required for card checkout");
+      }
+      const payment = {
         processor,
-        provider,
-        payment_token: paymentToken,
         email: billing.email,
         first_name: billing.firstName,
         last_name: billing.lastName,
@@ -2122,6 +2424,17 @@ var useSubscriptionActions = () => {
         zip: billing.postalCode,
         country: billing.country
       };
+      if (paymentToken) {
+        payment.payment_token = paymentToken;
+        payment.last_four = billing.last_four;
+        payment.card_type = billing.card_type;
+        payment.expiry_date = billing.expiry_date;
+      }
+      const payload = {
+        price_id: ensurePrice(priceId),
+        provider,
+        payment
+      };
       return client.checkout(payload, idempotencyKey);
     },
     [client]
@@ -2129,7 +2442,7 @@ var useSubscriptionActions = () => {
   const subscribeWithSavedMethod = useCallback(
     async ({
       priceId,
-      processor = "nmi",
+      processor = "mobius",
       provider,
       paymentMethodId,
       email,
@@ -2137,10 +2450,12 @@ var useSubscriptionActions = () => {
     }) => {
       const payload = {
         price_id: ensurePrice(priceId),
-        processor,
         provider,
-        payment_method_id: paymentMethodId,
-        email
+        payment: {
+          processor,
+          payment_method_id: paymentMethodId,
+          email
+        }
       };
       return client.checkout(payload, idempotencyKey);
     },
@@ -2159,12 +2474,14 @@ var useSubscriptionActions = () => {
     }) => {
       const payload = {
         price_id: ensurePrice(priceId),
-        processor,
-        email,
-        first_name: firstName,
-        last_name: lastName,
-        zip: zipCode,
-        country
+        payment: {
+          processor,
+          email,
+          first_name: firstName,
+          last_name: lastName,
+          zip: zipCode,
+          country
+        }
       };
       return client.checkout(payload, idempotencyKey);
     },
@@ -2176,6 +2493,11 @@ var useSubscriptionActions = () => {
     subscribeWithCCBill
   };
 };
+var defaultTranslations2 = {
+  ...defaultPaymentExperienceTranslations,
+  title: "Checkout",
+  selectPlanMessage: "Select a subscription plan to continue."
+};
 var SubscriptionCheckoutModal = ({
   open,
   onOpenChange,
@@ -2190,11 +2512,16 @@ var SubscriptionCheckoutModal = ({
   enableSolanaPay = true,
   onSolanaSuccess,
   onSolanaError,
-  initialMode = "cards"
+  initialMode = "cards",
+  translations
 }) => {
   const [showSuccess, setShowSuccess] = useState(false);
   const [idempotencyKey, setIdempotencyKey] = useState(() => crypto.randomUUID());
   const { subscribeWithCard, subscribeWithSavedMethod } = useSubscriptionActions();
+  const t = {
+    ...defaultTranslations2,
+    ...translations
+  };
   useEffect(() => {
     if (open) {
       setIdempotencyKey(crypto.randomUUID());
@@ -2218,13 +2545,31 @@ var SubscriptionCheckoutModal = ({
       console.debug("[payments-ui] subscription success", result);
     }
   };
-  const assertCheckoutSuccess = (status, message) => {
-    if (status === "blocked") {
-      throw new Error(message || "This subscription cannot be completed right now.");
+  const handleCheckoutResponse = (response) => {
+    if (response.status === "blocked") {
+      throw new Error(response.message || "This subscription cannot be completed right now.");
     }
-    if (status === "redirect_required") {
-      throw new Error(message || "Additional action required in an alternate flow.");
+    const nextAction = response.next_action;
+    if (nextAction?.type === "redirect_to_url") {
+      const redirectUrl = nextAction.redirect_to_url?.url || response.payment?.redirect_url;
+      if (!redirectUrl) {
+        throw new Error(response.message || "Checkout requires a redirect URL.");
+      }
+      if (typeof window !== "undefined") {
+        window.location.assign(redirectUrl);
+      }
+      return;
     }
+    if (response.payment?.redirect_url) {
+      if (typeof window !== "undefined") {
+        window.location.assign(response.payment.redirect_url);
+      }
+      return;
+    }
+    if (nextAction && nextAction.type !== "none") {
+      throw new Error(response.message || "Unsupported checkout action.");
+    }
+    notifySuccess();
   };
   const handleNewCardPayment = async ({ token, billing }) => {
     const response = await subscribeWithCard({
@@ -2234,8 +2579,7 @@ var SubscriptionCheckoutModal = ({
       paymentToken: token,
       priceId: ensurePrice()
     });
-    assertCheckoutSuccess(response.status, response.message);
-    notifySuccess();
+    handleCheckoutResponse(response);
   };
   const handleSavedMethodPayment = async ({ paymentMethodId }) => {
     const response = await subscribeWithSavedMethod({
@@ -2245,8 +2589,16 @@ var SubscriptionCheckoutModal = ({
       email: userEmail ?? "",
       idempotencyKey
     });
-    assertCheckoutSuccess(response.status, response.message);
-    notifySuccess();
+    handleCheckoutResponse(response);
+  };
+  const handleCcbillPayment = async ({ billing }) => {
+    const response = await subscribeWithCard({
+      billing,
+      idempotencyKey,
+      processor: "ccbill",
+      priceId: ensurePrice()
+    });
+    handleCheckoutResponse(response);
   };
   const solanaSuccess = (result) => {
     notifySuccess(result);
@@ -2262,11 +2614,11 @@ var SubscriptionCheckoutModal = ({
       {
         className: "z-[100] max-w-xl max-h-[90vh] overflow-y-auto border border-white/20 p-6 backdrop-blur-xl bg-background-regular rounded-md [&::-webkit-scrollbar]:hidden",
         children: [
-          /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { className: "flex items-center gap-2 text-foreground", children: "Checkout" }) }),
+          /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { className: "flex items-center gap-2 text-foreground", children: t.title }) }),
           /* @__PURE__ */ jsx("div", { className: "space-y-4", children: !priceId ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-center px-3 py-2 text-sm text-destructive", children: [
             /* @__PURE__ */ jsx(AlertCircle, { className: "h-4 w-4" }),
             " ",
-            /* @__PURE__ */ jsx("span", { children: "Select a subscription plan to continue." })
+            /* @__PURE__ */ jsx("span", { children: t.selectPlanMessage })
           ] }) : /* @__PURE__ */ jsx(
             PaymentExperience,
             {
@@ -2279,7 +2631,9 @@ var SubscriptionCheckoutModal = ({
               enableStoredMethods: Boolean(priceId),
               enableSolanaPay: enableSolanaPay && Boolean(priceId),
               onNewCardPayment: priceId ? handleNewCardPayment : void 0,
-              onSavedMethodPayment: priceId ? handleSavedMethodPayment : void 0
+              onSavedMethodPayment: priceId ? handleSavedMethodPayment : void 0,
+              onCcbillPayment: priceId ? handleCcbillPayment : void 0,
+              translations: t
             }
           ) })
         ]
@@ -2289,7 +2643,9 @@ var SubscriptionCheckoutModal = ({
       SubscriptionSuccessDialog,
       {
         open: showSuccess,
-        onClose: () => setShowSuccess(false),
+        onClose: () => {
+          setShowSuccess(false);
+        },
         planName,
         amountLabel: amountLabel ?? `$${usdAmount.toFixed(2)}`,
         billingPeriodLabel
@@ -2524,7 +2880,7 @@ var SolanaPaymentSelector = ({
 }) => {
   return /* @__PURE__ */ jsx(Dialog, { open: isOpen, onOpenChange: (value) => value ? void 0 : onClose(), children: /* @__PURE__ */ jsx(DialogContent, { className: "w-full max-w-2xl max-h-[90vh] overflow-y-auto rounded-md border bg-background/95 p-0 shadow-2xl [&::-webkit-scrollbar]:hidden", children: /* @__PURE__ */ jsx(SolanaPaymentView, { ...props, onClose }) }) });
 };
-var Table = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ jsx(
+var Table = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ jsx(
   "table",
   {
     ref,
@@ -2533,9 +2889,9 @@ var Table = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
   }
 ) }));
 Table.displayName = "Table";
-var TableHeader = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("thead", { ref, className: cn("[&_tr]:border-b", className), ...props }));
+var TableHeader = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("thead", { ref, className: cn("[&_tr]:border-b", className), ...props }));
 TableHeader.displayName = "TableHeader";
-var TableBody = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TableBody = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "tbody",
   {
     ref,
@@ -2544,7 +2900,7 @@ var TableBody = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 TableBody.displayName = "TableBody";
-var TableFooter = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TableFooter = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "tfoot",
   {
     ref,
@@ -2556,7 +2912,7 @@ var TableFooter = React15.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 TableFooter.displayName = "TableFooter";
-var TableRow = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TableRow = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "tr",
   {
     ref,
@@ -2568,7 +2924,7 @@ var TableRow = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   }
 ));
 TableRow.displayName = "TableRow";
-var TableHead = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TableHead = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "th",
   {
     ref,
@@ -2580,7 +2936,7 @@ var TableHead = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 TableHead.displayName = "TableHead";
-var TableCell = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TableCell = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "td",
   {
     ref,
@@ -2589,7 +2945,7 @@ var TableCell = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 TableCell.displayName = "TableCell";
-var TableCaption = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TableCaption = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "caption",
   {
     ref,
@@ -2601,7 +2957,7 @@ TableCaption.displayName = "TableCaption";
 var AlertDialog = AlertDialogPrimitive.Root;
 var AlertDialogTrigger = AlertDialogPrimitive.Trigger;
 var AlertDialogPortal = AlertDialogPrimitive.Portal;
-var AlertDialogOverlay = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var AlertDialogOverlay = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   AlertDialogPrimitive.Overlay,
   {
     className: cn(
@@ -2613,7 +2969,7 @@ var AlertDialogOverlay = React15.forwardRef(({ className, ...props }, ref) => /*
   }
 ));
 AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
-var AlertDialogContent = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [
+var AlertDialogContent = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [
   /* @__PURE__ */ jsx(AlertDialogOverlay, {}),
   /* @__PURE__ */ jsx(
     AlertDialogPrimitive.Content,
@@ -2656,7 +3012,7 @@ var AlertDialogFooter = ({
   }
 );
 AlertDialogFooter.displayName = "AlertDialogFooter";
-var AlertDialogTitle = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var AlertDialogTitle = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   AlertDialogPrimitive.Title,
   {
     ref,
@@ -2665,7 +3021,7 @@ var AlertDialogTitle = React15.forwardRef(({ className, ...props }, ref) => /* @
   }
 ));
 AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
-var AlertDialogDescription = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var AlertDialogDescription = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   AlertDialogPrimitive.Description,
   {
     ref,
@@ -2674,7 +3030,7 @@ var AlertDialogDescription = React15.forwardRef(({ className, ...props }, ref) =
   }
 ));
 AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
-var AlertDialogAction = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var AlertDialogAction = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   AlertDialogPrimitive.Action,
   {
     ref,
@@ -2683,7 +3039,7 @@ var AlertDialogAction = React15.forwardRef(({ className, ...props }, ref) => /*
   }
 ));
 AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
-var AlertDialogCancel = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var AlertDialogCancel = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   AlertDialogPrimitive.Cancel,
   {
     ref,
@@ -2696,7 +3052,7 @@ var AlertDialogCancel = React15.forwardRef(({ className, ...props }, ref) => /*
   }
 ));
 AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
-var Textarea = React15.forwardRef(({ className, ...props }, ref) => {
+var Textarea = React4.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsx(
     "textarea",
     {
@@ -2714,7 +3070,7 @@ var notifyDefault = (payload) => {
   const level = payload.status === "destructive" ? "error" : "info";
   console[level === "error" ? "error" : "log"]("[payments-ui] cancellation", payload);
 };
-var defaultTranslations = {
+var defaultTranslations3 = {
   buttonLabel: "Cancel Membership",
   title: "Confirm Membership Cancellation",
   description: "You are about to cancel your membership. Please review the consequences:",
@@ -2736,23 +3092,33 @@ var CancelMembershipDialog = ({
   minReasonLength = 15,
   onCancelled,
   onNotify,
-  translations: customTranslations
+  translations: customTranslations,
+  open,
+  onOpenChange
 }) => {
   const { client } = usePaymentContext();
   const notify = onNotify ?? notifyDefault;
-  const t = { ...defaultTranslations, ...customTranslations };
+  const t = { ...defaultTranslations3, ...customTranslations };
   const [cancelReason, setCancelReason] = useState("");
-  const [isOpen, setIsOpen] = useState(false);
+  const [internalOpen, setInternalOpen] = useState(false);
   const [isReasonValid, setIsReasonValid] = useState(false);
   const [hasInteracted, setHasInteracted] = useState(false);
   const [isSubmitting, setIsSubmitting] = useState(false);
+  const isControlled = typeof open === "boolean";
+  const isOpen = isControlled ? open : internalOpen;
+  const setOpen = (next) => {
+    if (!isControlled) {
+      setInternalOpen(next);
+    }
+    onOpenChange?.(next);
+  };
   useEffect(() => {
     const trimmed = cancelReason.trim();
     setIsReasonValid(trimmed.length >= minReasonLength);
   }, [cancelReason, minReasonLength]);
-  const handleOpenChange = (open) => {
-    setIsOpen(open);
-    if (!open) {
+  const handleOpenChange = (open2) => {
+    setOpen(open2);
+    if (!open2) {
       setCancelReason("");
       setIsReasonValid(false);
       setHasInteracted(false);
@@ -2789,7 +3155,7 @@ var CancelMembershipDialog = ({
   };
   const showError = hasInteracted && !isReasonValid;
   return /* @__PURE__ */ jsxs(AlertDialog, { open: isOpen, onOpenChange: handleOpenChange, children: [
-    /* @__PURE__ */ jsx(AlertDialogTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "outline", className: "border-destructive/50 text-destructive", children: [
+    /* @__PURE__ */ jsx(AlertDialogTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { className: "bg-destructive text-destructive-foreground border-destructive/50 hover:bg-destructive/90", children: [
       /* @__PURE__ */ jsx(Ban, { className: "mr-2 h-4 w-4" }),
       " ",
       t.buttonLabel
@@ -2856,7 +3222,7 @@ var notifyDefault2 = (payload) => {
   const level = payload.status === "destructive" ? "error" : "info";
   console[level === "error" ? "error" : "log"]("[payments-ui] billing", payload);
 };
-var defaultTranslations2 = {
+var defaultTranslations4 = {
   title: "Transaction History",
   description: "Record of billing history",
   reviewActivity: "Review your account activity below",
@@ -2878,7 +3244,7 @@ var BillingHistory = ({
 }) => {
   const { client } = usePaymentContext();
   const notify = onNotify ?? notifyDefault2;
-  const t = { ...defaultTranslations2, ...customTranslations };
+  const t = { ...defaultTranslations4, ...customTranslations };
   const [isExpanded, setIsExpanded] = useState(false);
   const observerRef = useRef(null);
   const loadMoreRef = useRef(null);
@@ -2987,15 +3353,21 @@ var BillingHistory = ({
   ] }) });
 };
 var formatCardLabel2 = (method) => {
-  const brand = method.card_type ? method.card_type.toUpperCase() : "CARD";
-  const lastFour = method.last_four ? `\u2022\u2022\u2022\u2022 ${method.last_four}` : "";
+  if (method.card) {
+    const brand2 = method.card.brand ? method.card.brand.toUpperCase() : "CARD";
+    const lastFour2 = method.card.last4 ? `\u2022\u2022\u2022\u2022 ${method.card.last4}` : "";
+    const exp = method.card.exp_month && method.card.exp_year ? ` \u2022 ${String(method.card.exp_month).padStart(2, "0")}/${String(method.card.exp_year).slice(-2)}` : "";
+    return `${brand2} ${lastFour2}${exp}`.trim();
+  }
+  const brand = "CARD";
+  const lastFour = "";
   return `${brand} ${lastFour}`.trim();
 };
 var notifyDefault3 = (payload) => {
   const level = payload.status === "destructive" ? "error" : "info";
   console[level === "error" ? "error" : "log"]("[payments-ui] notification", payload);
 };
-var defaultTranslations3 = {
+var defaultTranslations5 = {
   title: "Payment Methods",
   description: "Manage your saved billing cards",
   addCard: "Add card",
@@ -3016,7 +3388,11 @@ var defaultTranslations3 = {
   cardUpdated: "Card updated",
   unableToRemoveCard: "Unable to remove card",
   defaultPaymentMethodUpdated: "Default payment method updated",
-  unableToSetDefault: "Unable to set default payment method"
+  unableToSetDefault: "Unable to set default payment method",
+  errors: {},
+  activeSubscriptions: "Active subscriptions",
+  showSubscriptions: "Show",
+  hideSubscriptions: "Hide"
 };
 var PaymentMethodsSection = ({
   isAuthenticated = true,
@@ -3027,8 +3403,7 @@ var PaymentMethodsSection = ({
   onNotify,
   translations: customTranslations
 }) => {
-  const { client } = usePaymentContext();
-  const queryClient = useQueryClient();
+  const { client, queryClient } = usePaymentContext();
   const paymentMethods = {
     list: (params) => client.listPaymentMethods({ limit: params.pageSize }),
     create: (payload) => client.createPaymentMethod(payload),
@@ -3038,13 +3413,15 @@ var PaymentMethodsSection = ({
   };
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [deletingId, setDeletingId] = useState(null);
+  const [createErrorMessage, setCreateErrorMessage] = useState(null);
+  const [expandedSubscriptions, setExpandedSubscriptions] = useState({});
   const notify = onNotify ?? notifyDefault3;
-  const t = { ...defaultTranslations3, ...customTranslations };
+  const t = { ...defaultTranslations5, ...customTranslations };
   const queryKey = ["payments-ui", "payment-methods"];
   const paymentQuery = useQuery({
     queryKey,
     queryFn: () => paymentMethods.list({ pageSize: 50 }),
-    enabled: isAuthenticated,
+    enabled: isAuthenticated && !!client,
     staleTime: 3e4
   });
   const createMutation = useMutation({
@@ -3053,11 +3430,14 @@ var PaymentMethodsSection = ({
       notify({ title: t.cardAddedSuccess, status: "success" });
       setIsModalOpen(false);
       void queryClient.invalidateQueries({ queryKey });
+      setCreateErrorMessage(null);
     },
     onError: (error) => {
+      const message = resolveErrorMessageByCode(error, t.errors, error.message);
+      setCreateErrorMessage(message);
       notify({
         title: t.unableToAddCard,
-        description: error.message,
+        description: message,
         status: "destructive"
       });
     }
@@ -3068,6 +3448,9 @@ var PaymentMethodsSection = ({
     onSuccess: () => {
       notify({ title: t.cardRemoved, status: "success" });
       void queryClient.invalidateQueries({ queryKey });
+      if (paymentQuery.refetch) {
+        paymentQuery.refetch();
+      }
     },
     onError: (error) => {
       notify({
@@ -3078,7 +3461,7 @@ var PaymentMethodsSection = ({
     },
     onSettled: () => setDeletingId(null)
   });
-  const activateMutation = useMutation({
+  useMutation({
     mutationFn: (id) => paymentMethods.activate(id),
     onSuccess: () => {
       notify({ title: t.defaultPaymentMethodUpdated, status: "success" });
@@ -3095,8 +3478,14 @@ var PaymentMethodsSection = ({
   useEffect(() => {
     if (!isModalOpen) {
       createMutation.reset();
+      setCreateErrorMessage(null);
+    }
+  }, [isModalOpen]);
+  useEffect(() => {
+    if (!isModalOpen && paymentQuery.refetch) {
+      paymentQuery.refetch();
     }
-  }, [createMutation, isModalOpen]);
+  }, [isModalOpen]);
   const payments = useMemo(() => paymentQuery.data?.data ?? [], [paymentQuery.data]);
   const loading = paymentQuery.isLoading || paymentQuery.isFetching;
   const buildPayload = (token, billing) => ({
@@ -3110,9 +3499,13 @@ var PaymentMethodsSection = ({
     zip: billing.postalCode,
     country: billing.country,
     email: billing.email,
-    provider: billing.provider
+    provider: billing.provider,
+    last_four: billing.last_four,
+    card_type: billing.card_type,
+    expiry_date: billing.expiry_date
   });
   const handleCardTokenize = (token, billing) => {
+    setCreateErrorMessage(null);
     createMutation.mutate(buildPayload(token, billing));
   };
   return /* @__PURE__ */ jsxs(Card, { className: "border-0 bg-black/30 shadow-2xl backdrop-blur-xl", children: [
@@ -3131,32 +3524,19 @@ var PaymentMethodsSection = ({
       /* @__PURE__ */ jsx(Loader2, { className: "mr-2 h-5 w-5 animate-spin" }),
       " ",
       t.loadingCards
-    ] }) : payments.length === 0 ? /* @__PURE__ */ jsx("div", { className: "p-6 text-sm text-center", children: t.noPaymentMethods }) : /* @__PURE__ */ jsx("div", { className: "space-y-3", children: payments.map((method) => /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: "rounded-lg border bg-white/5 p-4 shadow-sm",
-        children: [
-          /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
-              /* @__PURE__ */ jsx("div", { className: "text-base font-medium text-white", children: formatCardLabel2(method) }),
-              /* @__PURE__ */ jsx(Badge, { variant: method.is_active ? "default" : "secondary", children: method.is_active ? t.active : t.inactive })
+    ] }) : payments.length === 0 ? /* @__PURE__ */ jsx("div", { className: "p-6 text-sm text-center", children: t.noPaymentMethods }) : /* @__PURE__ */ jsx("div", { className: "space-y-3", children: payments.map((method) => {
+      (method.subscriptions?.length ?? 0) > 0;
+      expandedSubscriptions[method.id] ?? false;
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "rounded-lg border bg-white/5 p-4 shadow-sm",
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+              /* @__PURE__ */ jsx("div", { className: "flex justify-between", children: /* @__PURE__ */ jsx("div", { className: "text-base font-medium text-white", children: formatCardLabel2(method) }) }),
+              /* @__PURE__ */ jsx("div", { children: method.failure_reason && /* @__PURE__ */ jsx(Badge, { variant: "destructive", children: method.failure_reason }) })
             ] }),
-            /* @__PURE__ */ jsx("div", { children: method.failure_reason && /* @__PURE__ */ jsx(Badge, { variant: "destructive", children: method.failure_reason }) })
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "mt-3 flex flex-wrap gap-2", children: [
-            /* @__PURE__ */ jsxs(
-              Button,
-              {
-                variant: "outline",
-                disabled: method.is_active || activateMutation.isPending,
-                onClick: () => activateMutation.mutate(method.id),
-                children: [
-                  activateMutation.isPending ? /* @__PURE__ */ jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }) : null,
-                  method.is_active ? t.defaultMethod : t.makeDefault
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsxs(
+            /* @__PURE__ */ jsx("div", { className: "mt-3 flex flex-wrap gap-2", children: /* @__PURE__ */ jsxs(
               Button,
               {
                 variant: "ghost",
@@ -3168,12 +3548,12 @@ var PaymentMethodsSection = ({
                   t.remove
                 ]
               }
-            )
-          ] })
-        ]
-      },
-      method.id
-    )) }) }),
+            ) })
+          ]
+        },
+        method.id
+      );
+    }) }) }),
     /* @__PURE__ */ jsx(Dialog, { open: isModalOpen, onOpenChange: setIsModalOpen, children: /* @__PURE__ */ jsxs(
       DialogContent,
       {
@@ -3191,12 +3571,13 @@ var PaymentMethodsSection = ({
               collectPrefix,
               onTokenize: handleCardTokenize,
               submitting: createMutation.isPending,
+              translations: t,
               defaultValues: {
                 provider,
                 email: userEmail ?? "",
                 country: defaultCountry
               },
-              externalError: createMutation.error?.message ?? null
+              externalError: createErrorMessage
             }
           )
         ]
@@ -3204,7 +3585,388 @@ var PaymentMethodsSection = ({
     ) })
   ] });
 };
-var Checkbox = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var notifyDefault4 = (payload) => {
+  const level = payload.status === "destructive" ? "error" : "info";
+  console[level === "error" ? "error" : "log"]("[payments-ui] notification", payload);
+};
+var defaultTranslations6 = {
+  title: "Subscriptions",
+  description: "Manage your active and recent subscriptions.",
+  loading: "Loading subscriptions...",
+  noSubscriptions: "No subscriptions found.",
+  status: "Status",
+  active: "Active",
+  cancelled: "Cancelled",
+  pastDue: "Past due",
+  pending: "Pending",
+  paymentMethodLabel: "Payment method",
+  changePaymentMethod: "Change payment method",
+  paymentMethodUpdated: "Payment method updated",
+  paymentMethodUpdateFailed: "Unable to update payment method",
+  resume: "Resume subscription",
+  changePlan: "Change plan",
+  changePlanPlaceholder: "Enter a new price ID",
+  planChanged: "Subscription updated",
+  planChangeFailed: "Unable to update subscription",
+  planChangeUnavailable: "Plan changes are unavailable for this subscription.",
+  resumeSuccess: "Resume requested",
+  resumeFailed: "Unable to resume subscription",
+  update: "Update",
+  product: "Product",
+  price: "Price",
+  currentPeriod: "Current period",
+  refresh: "Refresh",
+  manage: "Manage",
+  close: "Close",
+  paymentMethodTab: "Payment method",
+  changePlanTab: "Change plan",
+  statusTab: "Details",
+  cancelTab: "Cancel/Resume"
+};
+var formatCardLabel3 = (method) => {
+  if (method.card) {
+    const brand2 = method.card.brand ? method.card.brand.toUpperCase() : "CARD";
+    const lastFour2 = method.card.last4 ? `\u2022\u2022\u2022\u2022 ${method.card.last4}` : "";
+    const exp = method.card.exp_month && method.card.exp_year ? ` \u2022 ${String(method.card.exp_month).padStart(2, "0")}/${String(method.card.exp_year).slice(-2)}` : "";
+    return `${brand2} ${lastFour2}${exp}`.trim();
+  }
+  const brand = "CARD";
+  const lastFour = "";
+  return `${brand} ${lastFour}`.trim();
+};
+var SubscriptionsSection = ({
+  isAuthenticated = true,
+  translations: customTranslations,
+  onNotify,
+  statusFilter,
+  cancelDialogTranslations,
+  onCancelled
+}) => {
+  const { client, queryClient } = usePaymentContext();
+  const notify = onNotify ?? notifyDefault4;
+  const t = { ...defaultTranslations6, ...customTranslations };
+  const cancelTranslations = cancelDialogTranslations ?? defaultTranslations3;
+  const [paymentSelections, setPaymentSelections] = useState({});
+  const [priceInputs, setPriceInputs] = useState({});
+  const [activeSubId, setActiveSubId] = useState(null);
+  const [cancelDialogOpen, setCancelDialogOpen] = useState(false);
+  const [sectionsOpen, setSectionsOpen] = useState({
+    status: true,
+    payment: false,
+    plan: false,
+    cancel: false
+  });
+  const normalizedStatusFilter = statusFilter ?? "all";
+  const subscriptionsQueryKey = ["payments-ui", "subscriptions", normalizedStatusFilter];
+  const paymentMethodsQueryKey = ["payments-ui", "payment-methods"];
+  const subscriptionsQuery = useQuery({
+    queryKey: subscriptionsQueryKey,
+    queryFn: () => client.listSubscriptions({
+      status: normalizedStatusFilter,
+      limit: 50
+    }),
+    enabled: isAuthenticated && !!client,
+    staleTime: 3e4
+  });
+  const paymentMethodsQuery = useQuery({
+    queryKey: paymentMethodsQueryKey,
+    queryFn: () => client.listPaymentMethods({ limit: 50 }),
+    enabled: isAuthenticated && !!client,
+    staleTime: 3e4
+  });
+  const subscriptions = useMemo(() => subscriptionsQuery.data?.data ?? [], [subscriptionsQuery.data]);
+  const paymentMethods = useMemo(() => paymentMethodsQuery.data?.data ?? [], [paymentMethodsQuery.data]);
+  const activeSubscription = useMemo(
+    () => subscriptions.find((sub) => sub.id === activeSubId),
+    [subscriptions, activeSubId]
+  );
+  useEffect(() => {
+    setPaymentSelections((prev) => {
+      const next = {};
+      subscriptions.forEach((sub) => {
+        next[sub.id] = prev[sub.id] ?? "";
+      });
+      return next;
+    });
+  }, [subscriptions]);
+  useEffect(() => {
+    setCancelDialogOpen(false);
+  }, [activeSubId]);
+  const updatePaymentMethodMutation = useMutation({
+    mutationFn: (payload) => client.updateSubscriptionPaymentMethod({
+      subscription_id: payload.subscriptionId,
+      payment_method_id: payload.paymentMethodId
+    }),
+    onSuccess: () => {
+      notify({ title: t.paymentMethodUpdated, status: "success" });
+      void queryClient.invalidateQueries({ queryKey: subscriptionsQueryKey });
+    },
+    onError: (error) => {
+      notify({
+        title: t.paymentMethodUpdateFailed,
+        description: resolveErrorMessageByCode(error, {}, error.message),
+        status: "destructive"
+      });
+    }
+  });
+  const resumeSubscriptionMutation = useMutation({
+    mutationFn: () => client.resumeSubscription(),
+    onSuccess: () => {
+      notify({ title: t.resumeSuccess, status: "success" });
+      void queryClient.invalidateQueries({ queryKey: subscriptionsQueryKey });
+    },
+    onError: (error) => {
+      notify({
+        title: t.resumeFailed,
+        description: resolveErrorMessageByCode(error, {}, error.message),
+        status: "destructive"
+      });
+    }
+  });
+  useMutation({
+    mutationFn: (payload) => client.changeSubscription({ price_id: payload.priceId }),
+    onSuccess: () => {
+      notify({ title: t.planChanged, status: "success" });
+      void queryClient.invalidateQueries({ queryKey: subscriptionsQueryKey });
+    },
+    onError: (error) => {
+      notify({
+        title: t.planChangeFailed,
+        description: resolveErrorMessageByCode(error, {}, error.message),
+        status: "destructive"
+      });
+    }
+  });
+  const isLoading = subscriptionsQuery.isLoading || subscriptionsQuery.isFetching;
+  const isError = subscriptionsQuery.isError;
+  const errorMessage = subscriptionsQuery.error instanceof Error ? subscriptionsQuery.error.message : void 0;
+  useEffect(() => {
+    if (subscriptionsQuery.refetch) {
+      void subscriptionsQuery.refetch();
+    }
+  }, []);
+  const formatPrice = (sub) => {
+    const price = sub.price;
+    if (!price) return t.price;
+    const amount = (price.amount / 100).toFixed(2);
+    const currency = price.currency ? price.currency?.toUpperCase() : "";
+    return `${price.display_name ?? t.price} \u2014 ${currency} ${amount}`;
+  };
+  const renderStatusBadge = (status) => {
+    const normalized = status.toLowerCase();
+    const label = normalized === "active" ? t.active : normalized === "past_due" ? t.pastDue : normalized === "pending" ? t.pending : t.cancelled;
+    const variant = normalized === "active" ? "default" : normalized === "past_due" ? "destructive" : normalized === "pending" ? "outline" : "secondary";
+    return /* @__PURE__ */ jsx(Badge, { variant, children: label });
+  };
+  const handleUpdatePaymentMethod = (subscriptionId) => {
+    const paymentMethodId = paymentSelections[subscriptionId];
+    const currentPaymentMethodId = "pm_" + subscriptions.find((s) => s.id === subscriptionId)?.payment_method_id;
+    if (!paymentMethodId) return;
+    if (currentPaymentMethodId && paymentMethodId === currentPaymentMethodId) {
+      notify({
+        title: t.paymentMethodUpdateFailed,
+        description: t.paymentMethodUpdateFailed,
+        status: "destructive"
+      });
+      return;
+    }
+    updatePaymentMethodMutation.mutate({ subscriptionId, paymentMethodId });
+  };
+  const toggleSection = (key) => {
+    setSectionsOpen((prev) => ({
+      ...prev,
+      [key]: !prev[key]
+    }));
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(Card, { className: "border-0 bg-black/30 shadow-2xl backdrop-blur-xl", children: [
+      /* @__PURE__ */ jsxs(CardHeader, { className: "flex flex-col gap-4 md:flex-row md:items-center md:justify-between", children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsxs(CardTitle, { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(WalletCards, { className: "h-5 w-5" }),
+            t.title
+          ] }),
+          /* @__PURE__ */ jsx(CardDescription, { children: t.description })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            variant: "ghost",
+            size: "sm",
+            onClick: () => subscriptionsQuery.refetch?.(),
+            disabled: subscriptionsQuery.isFetching,
+            children: [
+              /* @__PURE__ */ jsx(RefreshCw, { className: "mr-2 h-4 w-4" }),
+              " ",
+              subscriptionsQuery.isFetching ? t.loading : t.refresh
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(CardContent, { className: "space-y-4", children: isLoading ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center py-10 text-white/60", children: [
+        /* @__PURE__ */ jsx(Loader2, { className: "mr-2 h-5 w-5 animate-spin" }),
+        " ",
+        t.loading
+      ] }) : isError ? /* @__PURE__ */ jsx("div", { className: "rounded-md border border-red-500/30 bg-red-500/10 p-4 text-sm text-red-100", children: errorMessage ?? "Unable to load subscriptions." }) : subscriptions.length === 0 ? /* @__PURE__ */ jsx("div", { className: "p-6 text-sm text-center", children: t.noSubscriptions }) : /* @__PURE__ */ jsx("div", { className: "space-y-3", children: subscriptions.map((subscription) => {
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "rounded-lg border bg-white/5 p-4 shadow-sm",
+            children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4", children: [
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("div", { className: "text-base font-semibold text-white", children: subscription.product?.display_name ?? t.product }),
+                /* @__PURE__ */ jsx("div", { className: "text-sm text-white/80", children: formatPrice(subscription) })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                renderStatusBadge(subscription.status),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "default",
+                    size: "sm",
+                    className: "rounded-full bg-foreground/10 text-muted-foreground hover:bg-foreground/20 hover:text-foreground",
+                    onClick: () => setActiveSubId(subscription.id),
+                    children: t.update
+                  }
+                )
+              ] })
+            ] })
+          },
+          subscription.id
+        );
+      }) }) })
+    ] }),
+    /* @__PURE__ */ jsx(Dialog, { open: !!activeSubscription, onOpenChange: (open) => setActiveSubId(open ? activeSubId : null), children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-w-2xl min-h-[300px] border border-white/20 bg-background-regular p-6 text-foreground", children: [
+      /* @__PURE__ */ jsxs(DialogHeader, { children: [
+        /* @__PURE__ */ jsx(DialogTitle, { className: "flex items-center gap-2", children: activeSubscription?.product?.display_name ?? t.product }),
+        /* @__PURE__ */ jsx(DialogDescription, { className: "text-white/70", children: activeSubscription ? formatPrice(activeSubscription) : null })
+      ] }),
+      activeSubscription && /* @__PURE__ */ jsxs("div", { className: "mt-4 space-y-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "overflow-hidden rounded-lg border border-white/15 bg-white/5", children: [
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              className: "flex w-full items-center justify-between px-4 py-3 text-left text-white hover:bg-white/10",
+              onClick: () => toggleSection("status"),
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold", children: t.statusTab }),
+                /* @__PURE__ */ jsx(
+                  ChevronDown,
+                  {
+                    className: `h-4 w-4 transition-transform ${sectionsOpen.status ? "rotate-180" : ""}`
+                  }
+                )
+              ]
+            }
+          ),
+          sectionsOpen.status ? /* @__PURE__ */ jsxs("div", { className: "space-y-3 border-t border-white/10 px-4 py-3", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between rounded-lg border border-white/10 bg-white/5 p-3", children: [
+              /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-white/80", children: t.status }),
+              renderStatusBadge(activeSubscription.status)
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "text-xs text-white/60", children: [
+              t.currentPeriod,
+              ": ",
+              activeSubscription.started_at ? new Date(activeSubscription.started_at).toLocaleDateString() : "\u2014",
+              " \u2192",
+              " ",
+              activeSubscription.current_period_ends_at ?? "\u2014"
+            ] }),
+            activeSubscription.status.toLowerCase() === "cancelled" ? /* @__PURE__ */ jsxs(
+              Button,
+              {
+                variant: "secondary",
+                onClick: () => resumeSubscriptionMutation.mutate(),
+                disabled: resumeSubscriptionMutation.isPending,
+                className: "rounded-full px-4",
+                children: [
+                  resumeSubscriptionMutation.isPending ? /* @__PURE__ */ jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }) : null,
+                  t.resume
+                ]
+              }
+            ) : null
+          ] }) : null
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "overflow-hidden rounded-lg border border-white/15 bg-white/5", children: [
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              className: "flex w-full items-center justify-between px-4 py-3 text-left text-white hover:bg-white/10",
+              onClick: () => toggleSection("payment"),
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold", children: t.paymentMethodTab }),
+                /* @__PURE__ */ jsx(
+                  ChevronDown,
+                  {
+                    className: `h-4 w-4 transition-transform ${sectionsOpen.payment ? "rotate-180" : ""}`
+                  }
+                )
+              ]
+            }
+          ),
+          sectionsOpen.payment ? /* @__PURE__ */ jsxs("div", { className: "space-y-2 border-t border-white/10 px-4 py-3", children: [
+            /* @__PURE__ */ jsx("div", { className: "text-xs uppercase tracking-wide text-white/60", children: t.paymentMethodLabel }),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 md:flex-row md:items-center md:gap-2", children: [
+              /* @__PURE__ */ jsxs(
+                Select,
+                {
+                  value: paymentSelections[activeSubscription.id] || "pm_" + activeSubscription.payment_method_id || "",
+                  onValueChange: (value) => setPaymentSelections((prev) => ({ ...prev, [activeSubscription.id]: value })),
+                  disabled: paymentMethodsQuery.isLoading || paymentMethods.length === 0,
+                  children: [
+                    /* @__PURE__ */ jsx(SelectTrigger, { className: "w-full md:w-64 text-white", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: paymentMethodsQuery.isLoading ? t.loading : "" }) }),
+                    /* @__PURE__ */ jsx(SelectContent, { children: paymentMethods.filter((method) => method.id !== activeSubscription.payment_method_id).map((method) => /* @__PURE__ */ jsx(SelectItem, { value: method.id, children: formatCardLabel3(method) }, method.id)) })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                Button,
+                {
+                  size: "sm",
+                  onClick: () => handleUpdatePaymentMethod(activeSubscription.id),
+                  disabled: updatePaymentMethodMutation.isPending || !paymentSelections[activeSubscription.id] || paymentSelections[activeSubscription.id] === activeSubscription.payment_method_id,
+                  className: "border-0 bg-green-bg text-white hover:bg-green-bg/80 disabled:opacity-50",
+                  children: [
+                    updatePaymentMethodMutation.isPending ? /* @__PURE__ */ jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }) : null,
+                    t.update
+                  ]
+                }
+              )
+            ] })
+          ] }) : null
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(DialogFooter, { className: "flex flex-wrap gap-2", children: [
+        /* @__PURE__ */ jsx(
+          CancelMembershipDialog,
+          {
+            translations: cancelTranslations,
+            onNotify,
+            open: cancelDialogOpen,
+            onOpenChange: (openState) => setCancelDialogOpen(openState),
+            onCancelled: () => {
+              void queryClient.invalidateQueries({ queryKey: subscriptionsQueryKey });
+              onCancelled?.();
+              setActiveSubId(null);
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "secondary",
+            onClick: () => setActiveSubId(null),
+            className: "border-white/20 bg-transparent text-foreground hover:bg-foreground/10 hover:text-foreground",
+            children: t.close
+          }
+        )
+      ] })
+    ] }) })
+  ] });
+};
+var Checkbox = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   CheckboxPrimitive.Root,
   {
     ref,
@@ -3719,6 +4481,6 @@ var usePaymentStatus = (options = {}) => {
   };
 };
 
-export { BillingHistory, CancelMembershipDialog, CardDetailsForm, ClientApiError, PaymentContext, PaymentExperience, PaymentMethodsSection, PaymentProvider, PaymentsDialogProvider, SolanaPaymentSelector, SolanaPaymentView, StoredPaymentMethods, SubscriptionCheckoutModal, SubscriptionSuccessDialog, WalletDialog, WalletModal, createClient, usePaymentContext, usePaymentDialogs, usePaymentMethods, usePaymentNotifications, usePaymentStatus, useSolanaQrPayment, useSubscriptionActions, useSupportedTokens, useTokenBalance };
+export { BillingHistory, CancelMembershipDialog, CardDetailsForm, ClientApiError, PaymentContext, PaymentExperience, PaymentMethodsSection, PaymentProvider, PaymentsDialogProvider, SolanaPaymentSelector, SolanaPaymentView, StoredPaymentMethods, SubscriptionCheckoutModal, SubscriptionSuccessDialog, SubscriptionsSection, WalletDialog, WalletModal, createClient, defaultCardDetailsFormTranslations, defaultPaymentExperienceTranslations, defaultTranslations3 as defaultTranslations, usePaymentContext, usePaymentDialogs, usePaymentMethods, usePaymentNotifications, usePaymentStatus, useSolanaQrPayment, useSubscriptionActions, useSupportedTokens, useTokenBalance };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map