@superlogic/spree-pay 0.4.12 → 0.5.1

package/build/index.cjs

@@ -30,26 +30,8 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// src/types/errors.ts
-var PaymentError;
-var init_errors = __esm({
-  "src/types/errors.ts"() {
-    "use strict";
-    PaymentError = class extends Error {
-      status;
-      details;
-      constructor(message, status, details) {
-        super(message);
-        this.name = "PaymentError";
-        this.status = status;
-        this.details = details;
-      }
-    };
-  }
-});
-
 // src/types/payments.ts
-var isNewCard, PaymentType;
+var isNewCard, PaymentType, PaymentStatus;
 var init_payments = __esm({
   "src/types/payments.ts"() {
     "use strict";
@@ -62,6 +44,88 @@ var init_payments = __esm({
       PaymentType2["POINTS"] = "POINTS";
       return PaymentType2;
     })(PaymentType || {});
+    PaymentStatus = /* @__PURE__ */ ((PaymentStatus2) => {
+      PaymentStatus2["NOT_INITIALIZED"] = "NOT_INITIALIZED";
+      PaymentStatus2["PENDING"] = "PENDING";
+      PaymentStatus2["AUTHORIZED"] = "AUTHORIZED";
+      PaymentStatus2["FAILED"] = "FAILED";
+      PaymentStatus2["CAPTURED"] = "CAPTURED";
+      PaymentStatus2["VOIDED"] = "VOIDED";
+      PaymentStatus2["CAPTURE_FAILED"] = "CAPTURE_FAILED";
+      return PaymentStatus2;
+    })(PaymentStatus || {});
+  }
+});
+
+// src/types/errors.ts
+var SpreePayHttpError, PaymentErrorCode, PaymentError, isPaymentError, isDeclineStatus, isSuccessStatus, isProcessorRejection, backendCodeFromBody, toPaymentError, settlePaymentResult;
+var init_errors = __esm({
+  "src/types/errors.ts"() {
+    "use strict";
+    SpreePayHttpError = class extends Error {
+      constructor(status, body, url) {
+        const snippet = body.length > 200 ? `${body.slice(0, 200)}\u2026` : body;
+        super(snippet || `Request failed: ${status}`);
+        this.status = status;
+        this.body = body;
+        this.url = url;
+        this.name = "SpreePayHttpError";
+      }
+      status;
+      body;
+      url;
+    };
+    PaymentErrorCode = /* @__PURE__ */ ((PaymentErrorCode2) => {
+      PaymentErrorCode2["CARD_ERROR"] = "CARD_ERROR";
+      PaymentErrorCode2["PAYMENT_ERROR"] = "PAYMENT_ERROR";
+      return PaymentErrorCode2;
+    })(PaymentErrorCode || {});
+    PaymentError = class extends Error {
+      status;
+      code;
+      /**
+       * Optional stable code from the backend (e.g. `INSUFFICIENT_FUNDS`) for branching
+       * on specific cases without changing the `code` enum. Safe to expose (an
+       * identifier, not free-text); absent until the backend supplies one.
+       */
+      backendCode;
+      constructor(message, status, options) {
+        super(message, { cause: options?.cause });
+        this.name = "PaymentError";
+        this.status = status;
+        this.code = options?.code ?? "PAYMENT_ERROR" /* PAYMENT_ERROR */;
+        this.backendCode = options?.backendCode;
+      }
+    };
+    isPaymentError = (e) => e instanceof PaymentError;
+    isDeclineStatus = (status) => status === "FAILED" /* FAILED */ || status === "CAPTURE_FAILED" /* CAPTURE_FAILED */;
+    isSuccessStatus = (status) => status === "AUTHORIZED" /* AUTHORIZED */ || status === "CAPTURED" /* CAPTURED */;
+    isProcessorRejection = (e) => e instanceof SpreePayHttpError && e.status >= 400 && e.status < 500 && e.status !== 401 && e.status !== 403 && e.status !== 404;
+    backendCodeFromBody = (e) => {
+      try {
+        const parsed = JSON.parse(e.body);
+        const code = parsed?.code ?? parsed?.errorCode;
+        if (typeof code === "string" && code.trim()) return code;
+      } catch {
+      }
+      return void 0;
+    };
+    toPaymentError = (e, fallbackMessage = "Payment failed", declineCode = "PAYMENT_ERROR" /* PAYMENT_ERROR */) => {
+      if (e instanceof PaymentError) return e;
+      return new PaymentError(fallbackMessage, "FAILED" /* FAILED */, {
+        code: isProcessorRejection(e) ? declineCode : "PAYMENT_ERROR" /* PAYMENT_ERROR */,
+        backendCode: e instanceof SpreePayHttpError ? backendCodeFromBody(e) : void 0,
+        cause: e
+      });
+    };
+    settlePaymentResult = (res, fallbackMessage, failureCode = "PAYMENT_ERROR" /* PAYMENT_ERROR */) => {
+      if (isSuccessStatus(res.status)) {
+        return res;
+      }
+      throw new PaymentError(fallbackMessage, res.status, {
+        code: isDeclineStatus(res.status) ? failureCode : "PAYMENT_ERROR" /* PAYMENT_ERROR */
+      });
+    };
   }
 });
 
@@ -69,7 +133,7 @@ var init_payments = __esm({
 var version;
 var init_package = __esm({
   "package.json"() {
-    version = "0.4.12";
+    version = "0.5.1";
   }
 });
 
@@ -228,12 +292,11 @@ var init_SpreePayActionsContext = __esm({
               hash: data.hash,
               paymentType: selectedPaymentMethod.type
             });
-            throw new PaymentError("Payment already in progress", "FAILED" /* FAILED */);
+            throw new Error("Payment already in progress");
           }
           processLogger.info("Payment process started", {
             hash: data.hash,
             capture: data.capture,
-            hasMetadata: Boolean(data.metadata),
             paymentType: selectedPaymentMethod.type
           });
           inFlightRef.current = true;
@@ -253,8 +316,7 @@ var init_SpreePayActionsContext = __esm({
               paymentType: selectedPaymentMethod.type,
               errorMessage: e instanceof Error ? e.message : String(e)
             });
-            if (e instanceof Error) throw e;
-            throw new PaymentError("Payment failed", "FAILED" /* FAILED */, e);
+            throw toPaymentError(e);
           } finally {
             inFlightRef.current = false;
             setInternalProcessing(false);
@@ -614,10 +676,11 @@ var init_Iframe3ds = __esm({
 });
 
 // src/fetcher/client.ts
-var cfg, buildUrl, request, slapiApi, registerApi;
+var cfg, buildUrl, parseResponse, publicGet, request, slapiApi, registerApi;
 var init_client = __esm({
   "src/fetcher/client.ts"() {
     "use strict";
+    init_errors();
     cfg = { baseUrl: void 0, accessToken: void 0, tenantId: void 0 };
     buildUrl = (key) => {
       if (!cfg.baseUrl) throw new Error("Missing SLAPI baseUrl. Call registerApi(...) first.");
@@ -631,6 +694,27 @@ var init_client = __esm({
       const qs = usp.toString();
       return cfg.baseUrl + url + (qs ? `?${qs}` : "");
     };
+    parseResponse = async (res) => {
+      if (!res.ok) {
+        const text = await res.text().catch(() => "");
+        throw new SpreePayHttpError(res.status, text, res.url);
+      }
+      const contentType = res.headers.get("content-type") || "";
+      if (!contentType.includes("application/json")) {
+        return await res.text();
+      }
+      return await res.json();
+    };
+    publicGet = async (baseUrl, tenantId, path) => {
+      const res = await fetch(`${baseUrl}${path}`, {
+        headers: {
+          Accept: "application/json",
+          ["X-Tenant-ID"]: tenantId
+        },
+        cache: "no-store"
+      });
+      return parseResponse(res);
+    };
     request = async (method, url, body) => {
       if (!cfg.accessToken) throw new Error("Missing SLAPI accessToken. Call registerApi(...) first.");
       if (!cfg.tenantId) throw new Error("Missing SLAPI tenantId. Call registerApi(...) first.");
@@ -656,15 +740,7 @@ var init_client = __esm({
         body: payload,
         cache: "no-store"
       });
-      if (!res.ok) {
-        const text = await res.text().catch(() => "");
-        throw new Error(text || `Request failed: ${res.status}`);
-      }
-      const contentType = res.headers.get("content-type") || "";
-      if (!contentType.includes("application/json")) {
-        return await res.text();
-      }
-      return await res.json();
+      return parseResponse(res);
     };
     slapiApi = {
       get: async () => {
@@ -887,10 +963,17 @@ var init_useSpreePayConfig = __esm({
     "use strict";
     import_swr = __toESM(require("swr"), 1);
     init_SpreePayActionsContext();
+    init_StaticConfigContext();
+    init_client();
     URL = "/v1/tenants/configs/spree-pay";
     useSpreePayConfig = () => {
-      const { origin } = useSpreePayEnv();
-      const { data, isLoading } = (0, import_swr.default)(origin ? `${URL}?origin=${origin}` : URL);
+      const { origin, tenantId } = useSpreePayEnv();
+      const { staticConfig } = useStaticConfig();
+      const key = origin ? `${URL}?origin=${origin}` : URL;
+      const { data, isLoading } = (0, import_swr.default)(
+        key,
+        (path) => publicGet(staticConfig.slapiUrl, tenantId, path)
+      );
       return { spreePayConfig: data ?? null, configIsLoading: isLoading };
     };
   }
@@ -926,13 +1009,27 @@ var init_useSlapiBalance = __esm({
   }
 });
 
+// src/context/LoginStatusContext.tsx
+var import_react6, import_jsx_runtime5, LoginStatusContext, LoginStatusProvider, useIsLoggedIn;
+var init_LoginStatusContext = __esm({
+  "src/context/LoginStatusContext.tsx"() {
+    "use strict";
+    "use client";
+    import_react6 = require("react");
+    import_jsx_runtime5 = require("react/jsx-runtime");
+    LoginStatusContext = (0, import_react6.createContext)(false);
+    LoginStatusProvider = ({ isLoggedIn, children }) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(LoginStatusContext.Provider, { value: isLoggedIn, children });
+    useIsLoggedIn = () => (0, import_react6.useContext)(LoginStatusContext);
+  }
+});
+
 // src/ui/spinner.tsx
-var import_jsx_runtime5, Spinner;
+var import_jsx_runtime6, Spinner;
 var init_spinner = __esm({
   "src/ui/spinner.tsx"() {
     "use strict";
     init_utils();
-    import_jsx_runtime5 = require("react/jsx-runtime");
+    import_jsx_runtime6 = require("react/jsx-runtime");
     Spinner = (props) => {
       const { size = "md", className } = props;
       const sizeClasses = {
@@ -942,7 +1039,7 @@ var init_spinner = __esm({
         lg: "size-12",
         xl: "size-16"
       };
-      return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
         "svg",
         {
           className: cn(`${sizeClasses[size]} animate-spin text-(--tertiary)`, className),
@@ -952,7 +1049,7 @@ var init_spinner = __esm({
           width: "24",
           height: "24",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
               "path",
               {
                 d: "M32 3C35.8083 3 39.5794 3.75011 43.0978 5.20749C46.6163 6.66488 49.8132 8.80101 52.5061 11.4939C55.199 14.1868 57.3351 17.3837 58.7925 20.9022C60.2499 24.4206 61 28.1917 61 32C61 35.8083 60.2499 39.5794 58.7925 43.0978C57.3351 46.6163 55.199 49.8132 52.5061 52.5061C49.8132 55.199 46.6163 57.3351 43.0978 58.7925C39.5794 60.2499 35.8083 61 32 61C28.1917 61 24.4206 60.2499 20.9022 58.7925C17.3837 57.3351 14.1868 55.199 11.4939 52.5061C8.801 49.8132 6.66487 46.6163 5.20749 43.0978C3.7501 39.5794 3 35.8083 3 32C3 28.1917 3.75011 24.4206 5.2075 20.9022C6.66489 17.3837 8.80101 14.1868 11.4939 11.4939C14.1868 8.80099 17.3838 6.66487 20.9022 5.20749C24.4206 3.7501 28.1917 3 32 3L32 3Z",
@@ -962,7 +1059,7 @@ var init_spinner = __esm({
                 strokeLinejoin: "round"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
               "path",
               {
                 d: "M32 3C36.5778 3 41.0906 4.08374 45.1692 6.16256C49.2477 8.24138 52.7762 11.2562 55.466 14.9605C58.1558 18.6647 59.9304 22.9531 60.6448 27.4748C61.3591 31.9965 60.9928 36.6232 59.5759 40.9762",
@@ -1016,7 +1113,7 @@ var init_format = __esm({
 
 // src/ui/label.tsx
 function Label({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     LabelPrimitive.Root,
     {
       "data-slot": "label",
@@ -1028,20 +1125,20 @@ function Label({ className, ...props }) {
     }
   );
 }
-var LabelPrimitive, import_jsx_runtime6;
+var LabelPrimitive, import_jsx_runtime7;
 var init_label = __esm({
   "src/ui/label.tsx"() {
     "use strict";
     "use client";
     LabelPrimitive = __toESM(require("@radix-ui/react-label"), 1);
     init_utils();
-    import_jsx_runtime6 = require("react/jsx-runtime");
+    import_jsx_runtime7 = require("react/jsx-runtime");
   }
 });
 
 // src/ui/switch.tsx
 function Switch({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     SwitchPrimitive.Root,
     {
       "data-slot": "switch",
@@ -1050,7 +1147,7 @@ function Switch({ className, ...props }) {
         className
       ),
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         SwitchPrimitive.Thumb,
         {
           "data-slot": "switch-thumb",
@@ -1060,29 +1157,29 @@ function Switch({ className, ...props }) {
     }
   );
 }
-var SwitchPrimitive, import_jsx_runtime7;
+var SwitchPrimitive, import_jsx_runtime8;
 var init_switch = __esm({
   "src/ui/switch.tsx"() {
     "use strict";
     "use client";
     SwitchPrimitive = __toESM(require("@radix-ui/react-switch"), 1);
     init_utils();
-    import_jsx_runtime7 = require("react/jsx-runtime");
+    import_jsx_runtime8 = require("react/jsx-runtime");
   }
 });
 
 // src/components/common/InfoBanner.tsx
-var import_xss, import_jsx_runtime8, InfoBanner;
+var import_xss, import_jsx_runtime9, InfoBanner;
 var init_InfoBanner = __esm({
   "src/components/common/InfoBanner.tsx"() {
     "use strict";
     import_xss = __toESM(require("xss"), 1);
     init_utils();
-    import_jsx_runtime8 = require("react/jsx-runtime");
+    import_jsx_runtime9 = require("react/jsx-runtime");
     InfoBanner = (props) => {
       const { type = "info", message } = props;
       if (!message) return null;
-      return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
         "div",
         {
           className: cn("flex w-full gap-1.5 rounded-md p-2", {
@@ -1090,14 +1187,14 @@ var init_InfoBanner = __esm({
             "bg-(--s-warning)/10": type === "warning"
           }),
           children: [
-            type === "info" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            type === "info" && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
               "svg",
               {
                 xmlns: "http://www.w3.org/2000/svg",
                 fill: "none",
                 viewBox: "0 0 20 20",
                 className: "size-5 shrink-0 text-(--positive)",
-                children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                   "path",
                   {
                     fill: "currentColor",
@@ -1106,14 +1203,14 @@ var init_InfoBanner = __esm({
                 )
               }
             ),
-            type === "warning" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            type === "warning" && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
               "svg",
               {
                 xmlns: "http://www.w3.org/2000/svg",
                 fill: "none",
                 viewBox: "0 0 20 20",
                 className: "size-5 shrink-0 text-(--warning)",
-                children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                   "path",
                   {
                     fill: "currentColor",
@@ -1122,7 +1219,7 @@ var init_InfoBanner = __esm({
                 )
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
               "p",
               {
                 className: "break-anywhere text-[14px] leading-5 text-(--primary) [&_a]:underline",
@@ -1137,11 +1234,11 @@ var init_InfoBanner = __esm({
 });
 
 // src/components/common/PointsSwitch.tsx
-var import_react6, import_jsx_runtime9, PointsSwitch;
+var import_react7, import_jsx_runtime10, PointsSwitch;
 var init_PointsSwitch = __esm({
   "src/components/common/PointsSwitch.tsx"() {
     "use strict";
-    import_react6 = require("react");
+    import_react7 = require("react");
     init_StaticConfigContext();
     init_useSlapiBalance();
     init_useSpreePayConfig();
@@ -1149,7 +1246,7 @@ var init_PointsSwitch = __esm({
     init_switch();
     init_format();
     init_InfoBanner();
-    import_jsx_runtime9 = require("react/jsx-runtime");
+    import_jsx_runtime10 = require("react/jsx-runtime");
     PointsSwitch = (props) => {
       const { disabled = false, value, onChange, message } = props;
       const { spreePayConfig } = useSpreePayConfig();
@@ -1158,29 +1255,29 @@ var init_PointsSwitch = __esm({
       const { balance } = useSlapiBalance();
       const hasForeignCurrency = !!(currencyCode && exchangeRate && foreignCurrencyAmount);
       const formatPointsValue = (usd) => hasForeignCurrency ? formatCurrency(usd / exchangeRate, currencyCode) : formatCurrency(usd);
-      const id = (0, import_react6.useId)();
-      return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex flex-col gap-6", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center justify-between gap-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-3", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Switch, { checked: value, onCheckedChange: onChange, disabled, id }),
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+      const id = (0, import_react7.useId)();
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col gap-6", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center justify-between gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Switch, { checked: value, onCheckedChange: onChange, disabled, id }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
               Label,
               {
                 htmlFor: id,
                 className: "text-md flex-col items-baseline gap-0 leading-[1.3] font-medium text-(--brand-primary) sm:flex-row sm:gap-2 md:text-[22px]",
                 children: [
                   "Use Points ",
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-xs font-medium text-(--tertiary)", children: "Optional" })
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-xs font-medium text-(--tertiary)", children: "Optional" })
                 ]
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-2.5", children: [
-            balance?.availablePoints ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("p", { className: "flex-1 text-right text-sm font-medium text-(--brand-primary)", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-2.5", children: [
+            balance?.availablePoints ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("p", { className: "flex-1 text-right text-sm font-medium text-(--brand-primary)", children: [
               formatPoints(balance.availablePoints, spreePayConfig?.pointsTitle),
-              !!spreePayConfig?.pointsConversionRatio && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-(--secondary)", children: ` \xB7 ${formatPointsValue(balance.availablePoints * spreePayConfig.pointsConversionRatio)}` })
+              !!spreePayConfig?.pointsConversionRatio && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-(--secondary)", children: ` \xB7 ${formatPointsValue(balance.availablePoints * spreePayConfig.pointsConversionRatio)}` })
             ] }) : null,
-            Boolean(topUpLink) && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            Boolean(topUpLink) && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
               "a",
               {
                 className: "cursor-pointer rounded-full bg-(--s-brand) px-2 py-1.5 text-xs font-medium text-(--inverse) hover:bg-(--s-brand-hover)",
@@ -1192,25 +1289,25 @@ var init_PointsSwitch = __esm({
             )
           ] })
         ] }),
-        message && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(InfoBanner, { type: "warning", message })
+        message && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(InfoBanner, { type: "warning", message })
       ] });
     };
   }
 });
 
 // src/components/common/Legal.tsx
-var import_jsx_runtime10, Legal;
+var import_jsx_runtime11, Legal;
 var init_Legal = __esm({
   "src/components/common/Legal.tsx"() {
     "use strict";
     init_useSpreePayConfig();
-    import_jsx_runtime10 = require("react/jsx-runtime");
+    import_jsx_runtime11 = require("react/jsx-runtime");
     Legal = () => {
       const { spreePayConfig } = useSpreePayConfig();
-      return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("p", { className: "text-xs leading-5 font-medium text-(--secondary)", children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("p", { className: "text-xs leading-5 font-medium text-(--secondary)", children: [
         "By clicking on the button below I acknowledge that I have read and accepted the",
         " ",
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
           "a",
           {
             className: "whitespace-nowrap underline",
@@ -1237,10 +1334,11 @@ var init_common = __esm({
 });
 
 // src/components/CheckoutButton.tsx
-var import_jsx_runtime11, CheckoutButton;
+var import_jsx_runtime12, CheckoutButton;
 var init_CheckoutButton = __esm({
   "src/components/CheckoutButton.tsx"() {
     "use strict";
+    init_LoginStatusContext();
     init_SpreePayActionsContext();
     init_StaticConfigContext();
     init_useSpreePayConfig();
@@ -1249,8 +1347,9 @@ var init_CheckoutButton = __esm({
     init_split();
     init_transactionFee();
     init_common();
-    import_jsx_runtime11 = require("react/jsx-runtime");
-    CheckoutButton = ({ isLoggedIn }) => {
+    import_jsx_runtime12 = require("react/jsx-runtime");
+    CheckoutButton = () => {
+      const isLoggedIn = useIsLoggedIn();
       const { appProps, staticConfig } = useStaticConfig();
       const {
         amount,
@@ -1280,7 +1379,7 @@ var init_CheckoutButton = __esm({
       };
       const getCheckoutContent = () => {
         if (!!isProcessing || isInternalProcessing) {
-          return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Spinner, { className: "inline", size: "sm" });
+          return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Spinner, { className: "inline", size: "sm" });
         }
         if (isCC && amount) {
           if (pointsAmount && usdAmount) {
@@ -1300,22 +1399,19 @@ var init_CheckoutButton = __esm({
         return "Checkout";
       };
       const checkoutClass = "text-(--inverse) h-14 leading-14 w-full cursor-pointer rounded-4xl bg-(--s-brand) hover:bg-(--s-brand-hover) px-4 text-center text-xl leading-6 font-medium disabled:cursor-not-allowed disabled:bg-(--s-disabled) disabled:text-(--disabled)";
-      return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex w-full flex-col gap-4 p-6 text-xs leading-5 font-medium text-(--secondary) md:px-7", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Legal, {}),
-        isLoggedIn ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_jsx_runtime11.Fragment, { children: onProcess && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", { disabled: isDisabled, onClick: onProcess, className: checkoutClass, children: getCheckoutContent() }) }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex w-full flex-col gap-4 p-6 text-xs leading-5 font-medium text-(--secondary) md:px-7", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Legal, {}),
+        isLoggedIn ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, { children: onProcess && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", { disabled: isDisabled, onClick: onProcess, className: checkoutClass, children: getCheckoutContent() }) }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           "a",
           {
             href: `${staticConfig.keycloakUrl}/realms/${tenantId}/protocol/openid-connect/auth?client_id=${keycloakClientId ?? "oneof-next"}&response_type=code&redirect_uri=${window.location.href}`,
             className: checkoutClass,
-            children: [
-              "Log in / Sign up",
-              tenantId === "moca" ? " for an AIR account" : ""
-            ]
+            children: spreePayConfig?.loginLabel || "Log in / Sign up"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("a", { href: "https://www.spree.finance/", className: "flex items-center justify-center gap-2 hover:underline", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { children: "Powered by" }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", className: "h-[30px]", viewBox: "0 0 66 30", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("a", { href: "https://www.spree.finance/", className: "flex items-center justify-center gap-2 hover:underline", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { children: "Powered by" }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", className: "h-[30px]", viewBox: "0 0 66 30", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
             "path",
             {
               fill: "currentColor",
@@ -1552,7 +1648,7 @@ var init_useCryptoPayment = __esm({
           });
           throw error;
         }
-        const { capture, hash, metadata } = params;
+        const { capture, hash } = params;
         const TOKEN = selectedPaymentMethod.method.symbol;
         cryptoPaymentLogger.info("Starting crypto payment", {
           hash,
@@ -1612,7 +1708,6 @@ var init_useCryptoPayment = __esm({
         const paymentRes = await SlapiPaymentService.createPayment({
           hash,
           capture,
-          metadata,
           type: "CRYPTO" /* CRYPTO */,
           crypto: {
             token: TOKEN,
@@ -1666,26 +1761,26 @@ var init_useCryptoPayment = __esm({
 });
 
 // src/components/CryptoTab/Crypto/ConnectButton.tsx
-var import_rainbowkit, import_jsx_runtime30, ConnectButton;
+var import_rainbowkit, import_jsx_runtime31, ConnectButton;
 var init_ConnectButton = __esm({
   "src/components/CryptoTab/Crypto/ConnectButton.tsx"() {
     "use strict";
     import_rainbowkit = require("@rainbow-me/rainbowkit");
     init_utils();
-    import_jsx_runtime30 = require("react/jsx-runtime");
+    import_jsx_runtime31 = require("react/jsx-runtime");
     ConnectButton = () => {
       const buttonCN = "h-9 rounded-full border border-(--b-brand) px-4 text-sm font-medium text-(--brand-primary)";
-      return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_rainbowkit.ConnectButton.Custom, { children: ({ mounted, chain, account, openAccountModal, openChainModal, openConnectModal }) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_rainbowkit.ConnectButton.Custom, { children: ({ mounted, chain, account, openAccountModal, openChainModal, openConnectModal }) => {
         if (!mounted) return null;
-        return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_jsx_runtime30.Fragment, { children: (() => {
+        return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_jsx_runtime31.Fragment, { children: (() => {
           if (!mounted || !account || !chain) {
-            return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("button", { className: buttonCN, onClick: openConnectModal, children: "Connect wallet" });
+            return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("button", { className: buttonCN, onClick: openConnectModal, children: "Connect wallet" });
           }
           if (chain.unsupported) {
-            return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("button", { className: buttonCN, onClick: openChainModal, children: "Select a Network" });
+            return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("button", { className: buttonCN, onClick: openChainModal, children: "Select a Network" });
           }
-          return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("button", { className: cn(buttonCN, "flex items-center gap-2 pl-1.5"), onClick: openAccountModal, children: [
-            chain.hasIcon && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "size-6 overflow-hidden rounded-full", style: { background: chain.iconBackground }, children: chain.iconUrl && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("img", { alt: chain.name ?? "Chain icon", src: chain.iconUrl }) }),
+          return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("button", { className: cn(buttonCN, "flex items-center gap-2 pl-1.5"), onClick: openAccountModal, children: [
+            chain.hasIcon && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "size-6 overflow-hidden rounded-full", style: { background: chain.iconBackground }, children: chain.iconUrl && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("img", { alt: chain.name ?? "Chain icon", src: chain.iconUrl }) }),
             account.displayName
           ] });
         })() });
@@ -1698,32 +1793,32 @@ var init_ConnectButton = __esm({
 function getSymbolLogo(symbol) {
   return symbolLogos[symbol] ?? null;
 }
-var import_jsx_runtime31, MOCA_SVG, USDC_SVG, USDT_SVG, WETH_SVG, symbolLogos;
+var import_jsx_runtime32, MOCA_SVG, USDC_SVG, USDT_SVG, WETH_SVG, symbolLogos;
 var init_symbolLogos = __esm({
   "src/config/symbolLogos.tsx"() {
     "use strict";
-    import_jsx_runtime31 = require("react/jsx-runtime");
-    MOCA_SVG = /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", className: "size-7", viewBox: "0 0 28 28", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("circle", { cx: "14", cy: "14", r: "13.5", fill: "#c15f97" }),
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    import_jsx_runtime32 = require("react/jsx-runtime");
+    MOCA_SVG = /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", className: "size-7", viewBox: "0 0 28 28", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("circle", { cx: "14", cy: "14", r: "13.5", fill: "#c15f97" }),
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
         "path",
         {
           fill: "#fff",
           d: "M16.06 6.65c.3 0 .59.16.74.43l6.06 10.5a.85.85 0 1 1-1.47.84L16.06 9.2l-1.51 2.62-.02.03-3.8 6.57a.85.85 0 0 1-1.47-.84l3.57-6.18-1.27-2.2-5.32 9.22a.85.85 0 0 1-1.48-.84l6.07-10.5.06-.1a.85.85 0 0 1 1.4.1l1.52 2.62 1.52-2.62.06-.1c.16-.2.4-.33.67-.33"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("circle", { cx: "16", cy: "14", r: "1.5", fill: "#fff" })
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("circle", { cx: "16", cy: "14", r: "1.5", fill: "#fff" })
     ] });
-    USDC_SVG = /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", className: "size-7", fill: "none", viewBox: "0 0 28 28", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("path", { fill: "#2775ca", d: "M14 28c7.76 0 14-6.24 14-14S21.76 0 14 0 0 6.24 0 14s6.24 14 14 14" }),
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    USDC_SVG = /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", className: "size-7", fill: "none", viewBox: "0 0 28 28", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("path", { fill: "#2775ca", d: "M14 28c7.76 0 14-6.24 14-14S21.76 0 14 0 0 6.24 0 14s6.24 14 14 14" }),
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
         "path",
         {
           fill: "#fff",
           d: "M17.85 16.22c0-2.04-1.23-2.74-3.68-3.04-1.75-.23-2.1-.7-2.1-1.51 0-.82.59-1.34 1.75-1.34 1.05 0 1.64.35 1.93 1.22.06.18.23.3.4.3h.94a.4.4 0 0 0 .41-.42v-.05a2.91 2.91 0 0 0-2.63-2.4v-1.4c0-.23-.17-.4-.46-.46h-.88c-.23 0-.4.17-.46.46v1.35c-1.75.23-2.86 1.4-2.86 2.85 0 1.93 1.16 2.69 3.61 2.98 1.64.29 2.16.64 2.16 1.57 0 .94-.81 1.58-1.92 1.58-1.52 0-2.04-.64-2.22-1.52-.06-.23-.23-.35-.4-.35h-1a.4.4 0 0 0-.4.41v.06c.23 1.46 1.16 2.5 3.08 2.8v1.4c0 .23.18.4.47.47h.88c.23 0 .4-.18.46-.47v-1.4c1.75-.3 2.92-1.52 2.92-3.1Z"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
         "path",
         {
           fill: "#fff",
@@ -1731,9 +1826,9 @@ var init_symbolLogos = __esm({
         }
       )
     ] });
-    USDT_SVG = /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", className: "size-7", fill: "none", viewBox: "0 0 28 28", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("path", { fill: "#26a17b", d: "M14 28a14 14 0 1 0 0-28 14 14 0 0 0 0 28" }),
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    USDT_SVG = /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", className: "size-7", fill: "none", viewBox: "0 0 28 28", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("path", { fill: "#26a17b", d: "M14 28a14 14 0 1 0 0-28 14 14 0 0 0 0 28" }),
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
         "path",
         {
           fill: "#fff",
@@ -1741,23 +1836,23 @@ var init_symbolLogos = __esm({
         }
       )
     ] });
-    WETH_SVG = /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", className: "size-7", viewBox: "0 0 24 24", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("g", { clipPath: "url(#clip0_528_9173)", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    WETH_SVG = /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", className: "size-7", viewBox: "0 0 24 24", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("g", { clipPath: "url(#clip0_528_9173)", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
           "path",
           {
             fill: "#000",
             d: "M17.14 20.57c0 .95-1.31 2.01-3.39 2.4h-2.59c-4.65 0-8.42-1.07-8.42-2.4 0-1.32 3.77-2.4 8.42-2.4s5.98 1.08 5.98 2.4Z"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
           "path",
           {
             fill: "#F61F7D",
             d: "M23.31 11c0 5.86-5.18 11.63-11.07 11.63-5.9 0-11.9-6.17-11.9-12.03C.34 4.75 5.12 0 11.01 0s12.3 5.15 12.3 11Z"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
           "path",
           {
             fill: "#000",
@@ -1766,8 +1861,8 @@ var init_symbolLogos = __esm({
             clipRule: "evenodd"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("path", { fill: "#fff", d: "M24 12.17a10.8 10.8 0 1 1-21.6 0 10.8 10.8 0 0 1 21.6 0Z" }),
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("path", { fill: "#fff", d: "M24 12.17a10.8 10.8 0 1 1-21.6 0 10.8 10.8 0 0 1 21.6 0Z" }),
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
           "path",
           {
             fill: "#000",
@@ -1776,8 +1871,8 @@ var init_symbolLogos = __esm({
             clipRule: "evenodd"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("path", { fill: "#000", fillRule: "evenodd", d: "M3.02 10.63.7 8.75l.74-.86 2.34 1.87-.75.87Z", clipRule: "evenodd" }),
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("path", { fill: "#000", fillRule: "evenodd", d: "M3.02 10.63.7 8.75l.74-.86 2.34 1.87-.75.87Z", clipRule: "evenodd" }),
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
           "path",
           {
             fill: "#000",
@@ -1785,7 +1880,7 @@ var init_symbolLogos = __esm({
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("clipPath", { id: "clip0_528_9173", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("path", { fill: "#fff", d: "M0 0h24v24H0z" }) }) })
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("clipPath", { id: "clip0_528_9173", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("path", { fill: "#fff", d: "M0 0h24v24H0z" }) }) })
     ] });
     symbolLogos = {
       MOCA: MOCA_SVG,
@@ -1797,18 +1892,18 @@ var init_symbolLogos = __esm({
 });
 
 // src/components/CryptoTab/Crypto/Logos.tsx
-var import_jsx_runtime32, Logos;
+var import_jsx_runtime33, Logos;
 var init_Logos = __esm({
   "src/components/CryptoTab/Crypto/Logos.tsx"() {
     "use strict";
     init_symbolLogos();
-    import_jsx_runtime32 = require("react/jsx-runtime");
+    import_jsx_runtime33 = require("react/jsx-runtime");
     Logos = () => {
-      return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "rounded-full border border-(--b-primary)", children: getSymbolLogo("MOCA") }),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "-ml-2.5 rounded-full border border-(--b-primary)", children: getSymbolLogo("USDC") }),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "-ml-2.5 rounded-full border border-(--b-primary)", children: getSymbolLogo("USDT") }),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "-ml-2.5 rounded-full border border-(--b-primary) bg-(--s-primary)", children: getSymbolLogo("WETH") })
+      return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "rounded-full border border-(--b-primary)", children: getSymbolLogo("MOCA") }),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "-ml-2.5 rounded-full border border-(--b-primary)", children: getSymbolLogo("USDC") }),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "-ml-2.5 rounded-full border border-(--b-primary)", children: getSymbolLogo("USDT") }),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "-ml-2.5 rounded-full border border-(--b-primary) bg-(--s-primary)", children: getSymbolLogo("WETH") })
       ] });
     };
   }
@@ -1816,7 +1911,7 @@ var init_Logos = __esm({
 
 // ../ui/src/components/input.tsx
 function Input2({ className, type, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
     "input",
     {
       type,
@@ -1831,24 +1926,24 @@ function Input2({ className, type, ...props }) {
     }
   );
 }
-var import_jsx_runtime33;
+var import_jsx_runtime34;
 var init_input = __esm({
   "../ui/src/components/input.tsx"() {
     "use strict";
     init_utils2();
-    import_jsx_runtime33 = require("react/jsx-runtime");
+    import_jsx_runtime34 = require("react/jsx-runtime");
   }
 });
 
 // ../../node_modules/@radix-ui/react-separator/node_modules/@radix-ui/react-primitive/dist/index.mjs
-var React13, ReactDOM2, import_react_slot5, import_jsx_runtime34, NODES2, Primitive2;
+var React13, ReactDOM2, import_react_slot5, import_jsx_runtime35, NODES2, Primitive2;
 var init_dist = __esm({
   "../../node_modules/@radix-ui/react-separator/node_modules/@radix-ui/react-primitive/dist/index.mjs"() {
     "use strict";
     React13 = __toESM(require("react"), 1);
     ReactDOM2 = __toESM(require("react-dom"), 1);
     import_react_slot5 = require("@radix-ui/react-slot");
-    import_jsx_runtime34 = require("react/jsx-runtime");
+    import_jsx_runtime35 = require("react/jsx-runtime");
     NODES2 = [
       "a",
       "button",
@@ -1876,7 +1971,7 @@ var init_dist = __esm({
         if (typeof window !== "undefined") {
           window[/* @__PURE__ */ Symbol.for("radix-ui")] = true;
         }
-        return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Comp, { ...primitiveProps, ref: forwardedRef });
+        return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Comp, { ...primitiveProps, ref: forwardedRef });
       });
       Node2.displayName = `Primitive.${node}`;
       return { ...primitive, [node]: Node2 };
@@ -1888,13 +1983,13 @@ var init_dist = __esm({
 function isValidOrientation(orientation) {
   return ORIENTATIONS.includes(orientation);
 }
-var React14, import_jsx_runtime35, NAME, DEFAULT_ORIENTATION, ORIENTATIONS, Separator, Root6;
+var React14, import_jsx_runtime36, NAME, DEFAULT_ORIENTATION, ORIENTATIONS, Separator, Root6;
 var init_dist2 = __esm({
   "../../node_modules/@radix-ui/react-separator/dist/index.mjs"() {
     "use strict";
     React14 = __toESM(require("react"), 1);
     init_dist();
-    import_jsx_runtime35 = require("react/jsx-runtime");
+    import_jsx_runtime36 = require("react/jsx-runtime");
     NAME = "Separator";
     DEFAULT_ORIENTATION = "horizontal";
     ORIENTATIONS = ["horizontal", "vertical"];
@@ -1903,7 +1998,7 @@ var init_dist2 = __esm({
       const orientation = isValidOrientation(orientationProp) ? orientationProp : DEFAULT_ORIENTATION;
       const ariaOrientation = orientation === "vertical" ? orientation : void 0;
       const semanticProps = decorative ? { role: "none" } : { "aria-orientation": ariaOrientation, role: "separator" };
-      return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
         Primitive2.div,
         {
           "data-orientation": orientation,
@@ -1925,7 +2020,7 @@ function Separator2({
   decorative = true,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
     Root6,
     {
       "data-slot": "separator",
@@ -1939,14 +2034,14 @@ function Separator2({
     }
   );
 }
-var import_jsx_runtime36;
+var import_jsx_runtime37;
 var init_separator = __esm({
   "../ui/src/components/separator.tsx"() {
     "use strict";
     "use client";
     init_dist2();
     init_utils2();
-    import_jsx_runtime36 = require("react/jsx-runtime");
+    import_jsx_runtime37 = require("react/jsx-runtime");
   }
 });
 
@@ -2062,11 +2157,11 @@ var init_useBaseTokens = __esm({
 });
 
 // src/modals/CryptoSelectModal.tsx
-var import_react16, import_nice_modal_react5, import_jsx_runtime37, CryptoSelectModal;
+var import_react17, import_nice_modal_react5, import_jsx_runtime38, CryptoSelectModal;
 var init_CryptoSelectModal = __esm({
   "src/modals/CryptoSelectModal.tsx"() {
     "use strict";
-    import_react16 = require("react");
+    import_react17 = require("react");
     import_nice_modal_react5 = __toESM(require("@ebay/nice-modal-react"), 1);
     init_input();
     init_separator();
@@ -2076,14 +2171,14 @@ var init_CryptoSelectModal = __esm({
     init_useBaseNativeToken();
     init_useBaseTokens();
     init_dialog();
-    import_jsx_runtime37 = require("react/jsx-runtime");
+    import_jsx_runtime38 = require("react/jsx-runtime");
     CryptoSelectModal = import_nice_modal_react5.default.create(() => {
       const modal = (0, import_nice_modal_react5.useModal)();
       const { isLoading, error, erc20Balances } = useBaseERC20Token();
       const { isLoadingNative, nativeError, nativeBalance } = useBaseNativeToken();
       const { tokens, tokensIsLoading } = useBaseTokens();
-      const [search, setSearch] = (0, import_react16.useState)("");
-      const filteredCoins = (0, import_react16.useMemo)(() => {
+      const [search, setSearch] = (0, import_react17.useState)("");
+      const filteredCoins = (0, import_react17.useMemo)(() => {
         return tokens.filter(
           (coin) => coin.name.toLowerCase().includes(search.toLowerCase()) || coin.symbol.toLowerCase().includes(search.toLowerCase())
         );
@@ -2094,13 +2189,13 @@ var init_CryptoSelectModal = __esm({
         setSelectedPaymentMethod({ type: "CRYPTO" /* CRYPTO */, method: coin });
       };
       const userCoins = [nativeBalance, ...erc20Balances].filter(Boolean);
-      return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Dialog, { open: modal.visible, onOpenChange: modal.remove, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(DialogContent, { showCloseButton: false, className: "max-h-[90vh] gap-0 p-0", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(DialogDescription, { className: "sr-only", children: "Crypto Select Modal" }),
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex flex-col gap-4 px-5 py-5 md:px-7", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex items-center justify-between gap-4", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("button", { className: "rounded-md hover:bg-(--s-primary-hover)", onClick: modal.remove, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", className: "size-6", viewBox: "0 0 24 25", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("path", { stroke: "currentColor", d: "m15 6.5-6 6 6 6" }) }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(DialogTitle, { className: "text-2xl font-medium text-(--brand-primary)", children: "Select a token" }),
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("button", { className: "rounded-md p-1 hover:bg-(--s-primary-hover)", onClick: modal.remove, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", className: "size-4", viewBox: "0 0 16 17", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Dialog, { open: modal.visible, onOpenChange: modal.remove, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(DialogContent, { showCloseButton: false, className: "max-h-[90vh] gap-0 p-0", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(DialogDescription, { className: "sr-only", children: "Crypto Select Modal" }),
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex flex-col gap-4 px-5 py-5 md:px-7", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex items-center justify-between gap-4", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("button", { className: "rounded-md hover:bg-(--s-primary-hover)", onClick: modal.remove, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", className: "size-6", viewBox: "0 0 24 25", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("path", { stroke: "currentColor", d: "m15 6.5-6 6 6 6" }) }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(DialogTitle, { className: "text-2xl font-medium text-(--brand-primary)", children: "Select a token" }),
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("button", { className: "rounded-md p-1 hover:bg-(--s-primary-hover)", onClick: modal.remove, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", className: "size-4", viewBox: "0 0 16 17", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
               "path",
               {
                 fill: "currentColor",
@@ -2108,71 +2203,71 @@ var init_CryptoSelectModal = __esm({
               }
             ) }) })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Input2, { onChange: (e) => setSearch(e.target.value), placeholder: "Search by token name", value: search })
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Input2, { onChange: (e) => setSearch(e.target.value), placeholder: "Search by token name", value: search })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Separator2, { className: "hidden md:block" }),
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex flex-col gap-4 px-5 py-5 md:px-7", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("h3", { className: "text-md font-medium text-(--brand-primary)", children: "Tokens with wallet balance" }),
-          (error || nativeError) && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "text-center text-sm text-(--negative)", children: "Something wrong" }),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex w-full flex-col gap-1", children: [
-            isLoadingNative && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-(--s-primary)" }),
-            nativeBalance && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Separator2, { className: "hidden md:block" }),
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex flex-col gap-4 px-5 py-5 md:px-7", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("h3", { className: "text-md font-medium text-(--brand-primary)", children: "Tokens with wallet balance" }),
+          (error || nativeError) && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: "text-center text-sm text-(--negative)", children: "Something wrong" }),
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex w-full flex-col gap-1", children: [
+            isLoadingNative && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-(--s-primary)" }),
+            nativeBalance && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
               "button",
               {
                 className: "flex h-11 w-full items-center justify-between gap-4 rounded-sm px-1.5 text-(--brand-primary) hover:bg-(--s-primary-hover)",
                 onClick: () => handleSelect(nativeBalance),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex items-center gap-2", children: [
-                    nativeBalance.logoURI && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("img", { className: "size-8 shrink-0", src: nativeBalance.logoURI, alt: `${nativeBalance.symbol} logo` }),
-                    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "text-sm font-medium", children: nativeBalance.symbol })
+                  /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex items-center gap-2", children: [
+                    nativeBalance.logoURI && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("img", { className: "size-8 shrink-0", src: nativeBalance.logoURI, alt: `${nativeBalance.symbol} logo` }),
+                    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: "text-sm font-medium", children: nativeBalance.symbol })
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "text-sm font-medium", children: nativeBalance.formatted })
+                  /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: "text-sm font-medium", children: nativeBalance.formatted })
                 ]
               },
               nativeBalance.symbol
             ),
-            isLoading && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-(--s-primary)" }),
-              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-(--s-primary)" }),
-              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-(--s-primary)" })
+            isLoading && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-(--s-primary)" }),
+              /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-(--s-primary)" }),
+              /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-(--s-primary)" })
             ] }),
             erc20Balances.map((coin) => {
               const Icon = getSymbolLogo(coin.symbol);
-              return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+              return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
                 "button",
                 {
                   className: "flex h-11 w-full items-center justify-between gap-4 rounded-sm px-1.5 text-(--brand-primary) hover:bg-(--s-primary-hover) disabled:cursor-not-allowed disabled:opacity-50",
                   onClick: () => handleSelect(coin),
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex items-center gap-2", children: [
                       Boolean(Icon) && Icon,
-                      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "text-sm font-medium", children: coin.symbol })
+                      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: "text-sm font-medium", children: coin.symbol })
                     ] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "text-sm font-medium", children: coin.formatted })
+                    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: "text-sm font-medium", children: coin.formatted })
                   ]
                 },
                 coin.symbol
               );
             })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("h3", { className: "text-md font-medium text-(--brand-primary)", children: "All Tokens" }),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex max-h-[40vh] w-full flex-col gap-1 overflow-y-auto", children: [
-            tokensIsLoading && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-(--s-primary)" }),
-              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-(--s-primary)" }),
-              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-(--s-primary)" })
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("h3", { className: "text-md font-medium text-(--brand-primary)", children: "All Tokens" }),
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex max-h-[40vh] w-full flex-col gap-1 overflow-y-auto", children: [
+            tokensIsLoading && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-(--s-primary)" }),
+              /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-(--s-primary)" }),
+              /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-(--s-primary)" })
             ] }),
             filteredCoins.map((token) => {
               const userCoin = userCoins.find((c) => c.symbol === token.symbol);
-              return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+              return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
                 "button",
                 {
                   disabled: !userCoin,
                   onClick: () => userCoin && handleSelect(userCoin),
                   className: "flex min-h-11 w-full items-center justify-between gap-4 rounded-sm px-1.5 text-(--brand-primary) hover:bg-(--s-primary-hover) disabled:cursor-not-allowed disabled:opacity-50",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex items-center gap-2", children: [
-                    token.logoURI ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("img", { className: "size-8 shrink-0", src: token.logoURI, alt: `${token.name} logo` }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "size-8 shrink-0 rounded-full bg-(--s-tertiary)" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "text-sm font-medium", children: token.symbol })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex items-center gap-2", children: [
+                    token.logoURI ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("img", { className: "size-8 shrink-0", src: token.logoURI, alt: `${token.name} logo` }) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "size-8 shrink-0 rounded-full bg-(--s-tertiary)" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: "text-sm font-medium", children: token.symbol })
                   ] })
                 },
                 token.symbol
@@ -2187,25 +2282,25 @@ var init_CryptoSelectModal = __esm({
 });
 
 // src/components/CryptoTab/Crypto/SelectCoinButton.tsx
-var import_nice_modal_react6, import_jsx_runtime38, SelectCoinButton;
+var import_nice_modal_react6, import_jsx_runtime39, SelectCoinButton;
 var init_SelectCoinButton = __esm({
   "src/components/CryptoTab/Crypto/SelectCoinButton.tsx"() {
     "use strict";
     import_nice_modal_react6 = __toESM(require("@ebay/nice-modal-react"), 1);
     init_CryptoSelectModal();
-    import_jsx_runtime38 = require("react/jsx-runtime");
+    import_jsx_runtime39 = require("react/jsx-runtime");
     SelectCoinButton = () => {
       const openModal = () => {
         import_nice_modal_react6.default.show(CryptoSelectModal);
       };
-      return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
         "button",
         {
           onClick: openModal,
           className: "flex h-11 w-full overflow-hidden rounded-md bg-(--s-primary) hover:bg-(--s-primary-hover)",
-          children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex h-full w-full items-center justify-between px-3", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: "font-medium text-(--secondary)", children: "Select a token" }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", className: "size-4", viewBox: "0 0 16 16", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("path", { stroke: "currentColor", d: "m6 12.43 4-4-4-4" }) })
+          children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex h-full w-full items-center justify-between px-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("p", { className: "font-medium text-(--secondary)", children: "Select a token" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", className: "size-4", viewBox: "0 0 16 16", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("path", { stroke: "currentColor", d: "m6 12.43 4-4-4-4" }) })
           ] })
         }
       );
@@ -2214,27 +2309,27 @@ var init_SelectCoinButton = __esm({
 });
 
 // src/components/CryptoTab/Crypto/SelectedCoin.tsx
-var import_jsx_runtime39, SelectedCoin;
+var import_jsx_runtime40, SelectedCoin;
 var init_SelectedCoin = __esm({
   "src/components/CryptoTab/Crypto/SelectedCoin.tsx"() {
     "use strict";
     init_symbolLogos();
-    import_jsx_runtime39 = require("react/jsx-runtime");
+    import_jsx_runtime40 = require("react/jsx-runtime");
     SelectedCoin = (props) => {
       const { coin, balance, logoURI } = props;
       const Icon = getSymbolLogo(coin);
-      return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex h-12 w-full overflow-hidden rounded-md border-2 border-(--b-brand) bg-(--s-primary)", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "flex h-full w-11 shrink-0 items-center justify-center border-r border-(--b-brand) bg-(--s-primary)", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "flex size-5 items-center justify-center rounded-full border-2 border-(--brand-primary)", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "size-2 rounded-full bg-(--brand-primary)" }) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex h-full w-full items-center justify-between rounded-r-md px-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex items-center gap-1", children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex h-12 w-full overflow-hidden rounded-md border-2 border-(--b-brand) bg-(--s-primary)", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "flex h-full w-11 shrink-0 items-center justify-center border-r border-(--b-brand) bg-(--s-primary)", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "flex size-5 items-center justify-center rounded-full border-2 border-(--brand-primary)", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "size-2 rounded-full bg-(--brand-primary)" }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex h-full w-full items-center justify-between rounded-r-md px-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex items-center gap-1", children: [
             Icon,
-            !Icon && logoURI && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("img", { className: "mr-1 size-8 shrink-0", src: logoURI, alt: `${coin} logo` }),
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("p", { className: "font-semibold text-(--brand-primary)", children: coin }),
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", className: "size-4", fill: "none", viewBox: "0 0 16 16", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("path", { stroke: "currentColor", d: "m6 12.434 4-4-4-4" }) })
+            !Icon && logoURI && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("img", { className: "mr-1 size-8 shrink-0", src: logoURI, alt: `${coin} logo` }),
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "font-semibold text-(--brand-primary)", children: coin }),
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", className: "size-4", fill: "none", viewBox: "0 0 16 16", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("path", { stroke: "currentColor", d: "m6 12.434 4-4-4-4" }) })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("p", { className: "text-xs font-medium text-(--secondary)", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("p", { className: "text-xs font-medium text-(--secondary)", children: [
             "Wallet balance ",
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "text-(--brand-primary)", children: balance })
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "text-(--brand-primary)", children: balance })
           ] })
         ] })
       ] });
@@ -2243,11 +2338,11 @@ var init_SelectedCoin = __esm({
 });
 
 // src/components/CryptoTab/Crypto/Crypto.tsx
-var import_react17, import_wagmi4, import_jsx_runtime40, Crypto;
+var import_react18, import_wagmi4, import_jsx_runtime41, Crypto;
 var init_Crypto = __esm({
   "src/components/CryptoTab/Crypto/Crypto.tsx"() {
     "use strict";
-    import_react17 = require("react");
+    import_react18 = require("react");
     import_wagmi4 = require("wagmi");
     init_SpreePayActionsContext();
     init_useCryptoPayment();
@@ -2258,7 +2353,7 @@ var init_Crypto = __esm({
     init_Logos();
     init_SelectCoinButton();
     init_SelectedCoin();
-    import_jsx_runtime40 = require("react/jsx-runtime");
+    import_jsx_runtime41 = require("react/jsx-runtime");
     Crypto = () => {
       const { address } = (0, import_wagmi4.useAccount)();
       const { selectedPaymentMethod } = useSpreePaymentMethod();
@@ -2266,31 +2361,28 @@ var init_Crypto = __esm({
       const { spreePayConfig } = useSpreePayConfig();
       const isWalletConnected = Boolean(address);
       const { register } = useSpreePayRegister();
-      const handlePay = (0, import_react17.useCallback)(
+      const handlePay = (0, import_react18.useCallback)(
         async (data) => {
           try {
             const res = await cryptoPayment(data);
-            if (["AUTHORIZED" /* AUTHORIZED */, "CAPTURED" /* CAPTURED */].includes(res.status)) {
-              return Promise.resolve(res);
-            }
-            return Promise.reject(new PaymentError("Crypto payment failed", res.status));
-          } catch (_) {
-            return Promise.reject(new PaymentError("Payment failed", "FAILED" /* FAILED */));
+            return settlePaymentResult(res, "Crypto payment failed");
+          } catch (e) {
+            return Promise.reject(toPaymentError(e, "Crypto payment failed"));
           }
         },
         [cryptoPayment]
       );
-      (0, import_react17.useEffect)(() => {
+      (0, import_react18.useEffect)(() => {
         register(handlePay);
       }, [register, handlePay]);
-      return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex flex-col items-baseline gap-4", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex w-full items-center justify-between gap-4", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("h3", { className: "text-lg leading-7 font-medium text-(--brand-primary) md:text-[22px]", children: "Pay with Crypto" }),
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ConnectButton, {})
+      return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex flex-col items-baseline gap-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex w-full items-center justify-between gap-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("h3", { className: "text-lg leading-7 font-medium text-(--brand-primary) md:text-[22px]", children: "Pay with Crypto" }),
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ConnectButton, {})
         ] }),
-        !isWalletConnected && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Logos, {}),
-        isWalletConnected && /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex w-full flex-col gap-4", children: [
-          selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && selectedPaymentMethod.method && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+        !isWalletConnected && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Logos, {}),
+        isWalletConnected && /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex w-full flex-col gap-4", children: [
+          selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && selectedPaymentMethod.method && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
             SelectedCoin,
             {
               coin: selectedPaymentMethod.method.symbol,
@@ -2298,9 +2390,9 @@ var init_Crypto = __esm({
               logoURI: selectedPaymentMethod.method.logoURI
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(SelectCoinButton, {})
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(SelectCoinButton, {})
         ] }),
-        spreePayConfig?.crypto.infoMessage && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(InfoBanner, { message: spreePayConfig.crypto.infoMessage })
+        spreePayConfig?.crypto.infoMessage && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(InfoBanner, { message: spreePayConfig.crypto.infoMessage })
       ] });
     };
   }
@@ -2316,31 +2408,33 @@ function getCachedWagmiConfig(projectId, appName) {
   }
   return cfg2;
 }
-var import_react18, import_react_query, import_nice_modal_react7, import_rainbowkit2, import_styles, import_wagmi5, import_chains, import_jsx_runtime41, queryClient, CHAINS, wagmiConfigCache, CryptoWrapper;
+var import_react19, import_react_query, import_nice_modal_react7, import_rainbowkit2, import_styles, import_wagmi5, import_chains, import_jsx_runtime42, queryClient, CHAINS, wagmiConfigCache, CryptoWrapper;
 var init_CryptoWrapper = __esm({
   "src/components/CryptoTab/Crypto/CryptoWrapper.tsx"() {
     "use strict";
-    import_react18 = require("react");
+    import_react19 = require("react");
     import_react_query = require("@tanstack/react-query");
     import_nice_modal_react7 = __toESM(require("@ebay/nice-modal-react"), 1);
     import_rainbowkit2 = require("@rainbow-me/rainbowkit");
     import_styles = require("@rainbow-me/rainbowkit/styles.css");
     import_wagmi5 = require("wagmi");
     import_chains = require("wagmi/chains");
+    init_LoginStatusContext();
     init_useSpreePayConfig();
     init_Crypto();
-    import_jsx_runtime41 = require("react/jsx-runtime");
+    import_jsx_runtime42 = require("react/jsx-runtime");
     queryClient = new import_react_query.QueryClient();
     CHAINS = [import_chains.base];
     wagmiConfigCache = /* @__PURE__ */ new Map();
     CryptoWrapper = () => {
+      const isLoggedIn = useIsLoggedIn();
       const { spreePayConfig, configIsLoading } = useSpreePayConfig();
-      const wagmiConfig = (0, import_react18.useMemo)(() => {
+      const wagmiConfig = (0, import_react19.useMemo)(() => {
         if (!spreePayConfig) return null;
         return getCachedWagmiConfig(spreePayConfig.rainbowProjectId, spreePayConfig.rainbowAppName);
       }, [spreePayConfig]);
-      if (configIsLoading || !wagmiConfig) return null;
-      return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_wagmi5.WagmiProvider, { config: wagmiConfig, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_react_query.QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_rainbowkit2.RainbowKitProvider, { theme: (0, import_rainbowkit2.lightTheme)({ borderRadius: "large" }), children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_nice_modal_react7.default.Provider, { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Crypto, {}) }) }) }) });
+      if (!isLoggedIn || configIsLoading || !wagmiConfig) return null;
+      return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_wagmi5.WagmiProvider, { config: wagmiConfig, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_react_query.QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_rainbowkit2.RainbowKitProvider, { theme: (0, import_rainbowkit2.lightTheme)({ borderRadius: "large" }), children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_nice_modal_react7.default.Provider, { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Crypto, {}) }) }) }) });
     };
   }
 });
@@ -2354,7 +2448,7 @@ var init_Crypto2 = __esm({
 });
 
 // src/components/CryptoTab/CryptoTab.tsx
-var import_jsx_runtime42, CryptoTab;
+var import_jsx_runtime43, CryptoTab;
 var init_CryptoTab = __esm({
   "src/components/CryptoTab/CryptoTab.tsx"() {
     "use strict";
@@ -2362,13 +2456,13 @@ var init_CryptoTab = __esm({
     init_CheckoutButton();
     init_common();
     init_Crypto2();
-    import_jsx_runtime42 = require("react/jsx-runtime");
-    CryptoTab = ({ isLoggedIn }) => {
+    import_jsx_runtime43 = require("react/jsx-runtime");
+    CryptoTab = () => {
       const { spreePayConfig } = useSpreePayConfig();
-      return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "border-b border-(--border-component-specific-card) px-5 py-5 md:px-7 md:py-6", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(CryptoWrapper, {}) }),
-        !spreePayConfig?.crypto.hidePoints && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "border-b border-(--border-component-specific-card) px-5 py-5 md:px-7 md:py-6", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(PointsSwitch, { disabled: true, message: spreePayConfig?.crypto.pointsInfoMessage }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(CheckoutButton, { isLoggedIn })
+      return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "border-b border-(--border-component-specific-card) px-5 py-5 md:px-7 md:py-6", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(CryptoWrapper, {}) }),
+        !spreePayConfig?.crypto.hidePoints && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "border-b border-(--border-component-specific-card) px-5 py-5 md:px-7 md:py-6", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(PointsSwitch, { disabled: true, message: spreePayConfig?.crypto.pointsInfoMessage }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(CheckoutButton, {})
       ] });
     };
   }
@@ -2404,11 +2498,10 @@ var init_useCryptoComPayment = __esm({
         if (selectedPaymentMethod.type !== "CDC" /* CDC */) {
           throw new Error("Unsupported payment method");
         }
-        const { hash, metadata } = params;
+        const { hash } = params;
         cryptoComLogger.info("Starting Crypto.com Pay payment", { hash });
         const { data: paymentResData } = await SlapiPaymentService.createPayment({
           hash,
-          metadata,
           type: "CDC" /* CDC */,
           cdc: {
             returnUrl: `${typeof window !== "undefined" ? window.location.origin : ""}${redirect3dsURI}?payment_intent=success`,
@@ -2454,24 +2547,26 @@ var init_useCryptoComPayment = __esm({
 });
 
 // src/components/CryptoComTab/Checkout.tsx
-var import_jsx_runtime43, Checkout;
+var import_jsx_runtime44, Checkout;
 var init_Checkout = __esm({
   "src/components/CryptoComTab/Checkout.tsx"() {
     "use strict";
+    init_LoginStatusContext();
     init_SpreePayActionsContext();
     init_StaticConfigContext();
-    import_jsx_runtime43 = require("react/jsx-runtime");
+    import_jsx_runtime44 = require("react/jsx-runtime");
     Checkout = () => {
+      const isLoggedIn = useIsLoggedIn();
       const { appProps } = useStaticConfig();
       const { isInternalProcessing } = useSpreePaymentMethod();
-      return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
         "button",
         {
           onClick: appProps.onProcess,
-          disabled: !!appProps.isProcessing || isInternalProcessing,
+          disabled: !isLoggedIn || !!appProps.isProcessing || isInternalProcessing,
           className: "flex flex-col items-center rounded-md bg-(--crypto-pay-bg) p-2 text-(--brand-primary) hover:bg-(--crypto-pay-bg-hover) disabled:cursor-not-allowed disabled:bg-(--crypto-pay-bg-hover) disabled:text-(--disabled)",
-          children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-7 w-[76px]", fill: "none", viewBox: "0 0 76 28", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-7 w-[76px]", fill: "none", viewBox: "0 0 76 28", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
               "path",
               {
                 fill: "currentColor",
@@ -2480,7 +2575,7 @@ var init_Checkout = __esm({
                 clipRule: "evenodd"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
               "path",
               {
                 fill: "currentColor",
@@ -2489,7 +2584,7 @@ var init_Checkout = __esm({
                 clipRule: "evenodd"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
               "path",
               {
                 fill: "currentColor",
@@ -2498,7 +2593,7 @@ var init_Checkout = __esm({
                 clipRule: "evenodd"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
               "path",
               {
                 fill: "currentColor",
@@ -2507,7 +2602,7 @@ var init_Checkout = __esm({
                 clipRule: "evenodd"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
               "path",
               {
                 fill: "currentColor",
@@ -2524,43 +2619,40 @@ var init_Checkout = __esm({
 });
 
 // src/components/CryptoComTab/CryptoComTab.tsx
-var import_react19, import_jsx_runtime44, CryptoComTab;
+var import_react20, import_jsx_runtime45, CryptoComTab;
 var init_CryptoComTab = __esm({
   "src/components/CryptoComTab/CryptoComTab.tsx"() {
     "use strict";
-    import_react19 = require("react");
+    import_react20 = require("react");
     init_SpreePayActionsContext();
     init_useCryptoComPayment();
     init_useSpreePayConfig();
     init_errors();
     init_common();
     init_Checkout();
-    import_jsx_runtime44 = require("react/jsx-runtime");
+    import_jsx_runtime45 = require("react/jsx-runtime");
     CryptoComTab = () => {
       const { register } = useSpreePayRegister();
       const { cryptoComPayment } = useCryptoComPayment();
       const { spreePayConfig } = useSpreePayConfig();
-      const handlePay = (0, import_react19.useCallback)(
+      const handlePay = (0, import_react20.useCallback)(
         async (data) => {
           try {
             const res = await cryptoComPayment(data);
-            if (["AUTHORIZED" /* AUTHORIZED */, "CAPTURED" /* CAPTURED */].includes(res.status)) {
-              return Promise.resolve(res);
-            }
-            return Promise.reject(new PaymentError("Crypto payment failed", res.status));
-          } catch (_) {
-            return Promise.reject(new PaymentError("Payment failed", "FAILED" /* FAILED */));
+            return settlePaymentResult(res, "Crypto payment failed");
+          } catch (e) {
+            return Promise.reject(toPaymentError(e, "Crypto payment failed"));
           }
         },
         [cryptoComPayment]
       );
-      (0, import_react19.useEffect)(() => {
+      (0, import_react20.useEffect)(() => {
         register(handlePay);
       }, [register, handlePay]);
-      return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex w-full flex-col gap-4 border-b border-b-(--border-component-specific-card) px-5 py-5 md:px-7 md:py-6", children: [
-        spreePayConfig?.cryptoCom.infoMessage && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(InfoBanner, { message: spreePayConfig.cryptoCom.infoMessage }),
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Legal, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Checkout, {})
+      return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "flex w-full flex-col gap-4 border-b border-b-(--border-component-specific-card) px-5 py-5 md:px-7 md:py-6", children: [
+        spreePayConfig?.cryptoCom.infoMessage && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(InfoBanner, { message: spreePayConfig.cryptoCom.infoMessage }),
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Legal, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Checkout, {})
       ] });
     };
   }
@@ -2582,10 +2674,15 @@ var init_CryptoComTab2 = __esm({
 var index_exports = {};
 __export(index_exports, {
   LogLevel: () => LogLevel,
+  PaymentError: () => PaymentError,
+  PaymentErrorCode: () => PaymentErrorCode,
+  PaymentStatus: () => PaymentStatus,
   PaymentType: () => PaymentType,
   SpreePay: () => SpreePay,
+  SpreePayHttpError: () => SpreePayHttpError,
   SpreePayProvider: () => SpreePayProvider,
   configureLogger: () => configureLogger,
+  isPaymentError: () => isPaymentError,
   logger: () => logger,
   useCapture3DS: () => useCapture3DS,
   useSpreePay: () => useSpreePay
@@ -2593,15 +2690,15 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/SpreePay.tsx
-var import_react23 = require("react");
+var import_react24 = require("react");
 var import_nice_modal_react9 = __toESM(require("@ebay/nice-modal-react"), 1);
 var import_swr5 = require("swr");
 
 // src/SpreePayContent.tsx
-var import_react20 = require("react");
+var import_react21 = require("react");
 
 // src/components/CreditCardTab/CreditCardTab.tsx
-var import_react15 = require("react");
+var import_react16 = require("react");
 init_SpreePayActionsContext();
 init_StaticConfigContext();
 
@@ -2627,12 +2724,8 @@ var useCardPayment = () => {
       });
       throw error;
     }
-    const { hash, capture, metadata } = params;
-    cardPaymentLogger.info("Starting card payment", {
-      hash,
-      capture,
-      hasMetadata: Boolean(metadata)
-    });
+    const { hash, capture } = params;
+    cardPaymentLogger.info("Starting card payment", { hash, capture });
     const card = selectedPaymentMethod.method;
     let cardId;
     if ("token" in card) {
@@ -2663,7 +2756,6 @@ var useCardPayment = () => {
     const { data: paymentResData } = await SlapiPaymentService.createPayment({
       hash,
       capture,
-      metadata,
       type: "CREDIT_CARD" /* CREDIT_CARD */,
       card: {
         cardId,
@@ -2831,16 +2923,20 @@ init_useSpreePayConfig();
 var import_nice_modal_react3 = __toESM(require("@ebay/nice-modal-react"), 1);
 init_Iframe3ds();
 init_slapi();
+init_errors();
 var REFRESH_INTERVAL = 3 * 1e3;
 var MAX_RETRIES = 10;
 async function longPollPoints(paymentId) {
   let retries = 0;
   while (retries < MAX_RETRIES) {
     const { detail } = await SlapiPaymentService.getStatus(paymentId);
-    if (detail.status === "FAILED" /* FAILED */) {
-      throw new Error("Something went wrong with the payment");
+    if (isDeclineStatus(detail.status)) {
+      throw new PaymentError("Something went wrong with the points payment.", detail.status, {
+        code: "PAYMENT_ERROR" /* PAYMENT_ERROR */,
+        backendCode: detail.errorCode ?? void 0
+      });
     }
-    if (["AUTHORIZED" /* AUTHORIZED */, "CAPTURED" /* CAPTURED */].includes(detail.status)) {
+    if (isSuccessStatus(detail.status)) {
       return detail.status;
     }
     await new Promise((res) => setTimeout(res, REFRESH_INTERVAL));
@@ -2853,13 +2949,21 @@ async function longPollCardStatus(paymentId) {
   let shown3ds = false;
   while (retries < MAX_RETRIES) {
     const { detail } = await SlapiPaymentService.getStatus(paymentId);
-    if (detail.status === "FAILED" /* FAILED */) {
-      throw new Error(`Something went wrong with the ${detail.validationType} payment`);
+    if (isDeclineStatus(detail.status)) {
+      const isPointsLeg = detail.validationType === "POINTS";
+      throw new PaymentError(
+        isPointsLeg ? "Something went wrong with the points payment." : "Your card payment could not be completed.",
+        detail.status,
+        {
+          code: isPointsLeg ? "PAYMENT_ERROR" /* PAYMENT_ERROR */ : "CARD_ERROR" /* CARD_ERROR */,
+          backendCode: detail.errorCode ?? void 0
+        }
+      );
     }
     if (
       // Process to points payment
       detail.validationType === "POINTS" || // early card payment completion
-      ["AUTHORIZED" /* AUTHORIZED */, "CAPTURED" /* CAPTURED */].includes(detail.status)
+      isSuccessStatus(detail.status)
     ) {
       return detail.status;
     }
@@ -2889,7 +2993,7 @@ var usePointsPayment = (mode = "web2") => {
       });
       throw error;
     }
-    const { hash, capture, metadata } = params;
+    const { hash, capture } = params;
     pointsPaymentLogger.info("Starting points payment", {
       hash,
       capture,
@@ -2904,7 +3008,6 @@ var usePointsPayment = (mode = "web2") => {
       hash,
       // capture should be always true for web2 points payments
       capture: mode === "web2" ? true : capture,
-      metadata,
       type: "POINTS" /* POINTS */
     });
     pointsPaymentLogger.info("Points payment created", {
@@ -3005,7 +3108,7 @@ var useSplitCardPayments = (mode = "web2") => {
     if (selectedPaymentMethod.type !== "CREDIT_CARD" /* CREDIT_CARD */ || !selectedPaymentMethod.method || !params.points) {
       throw new Error("Unsupported payment method");
     }
-    const { hash, capture, metadata, points } = params;
+    const { hash, capture, points } = params;
     splitPaymentLogger.info("Starting split card+points payment", { hash, mode, points, capture });
     const card = selectedPaymentMethod.method;
     let cardId;
@@ -3033,7 +3136,6 @@ var useSplitCardPayments = (mode = "web2") => {
     const { data: paymentResData } = await SlapiPaymentService.createPayment({
       hash,
       capture,
-      metadata,
       type: "SPLIT" /* CREDIT_CARD_SPLIT */,
       card: {
         cardId,
@@ -3150,21 +3252,22 @@ init_split();
 init_CheckoutButton();
 
 // src/components/CreditCardTab/CreditCard/CreditCard.tsx
-var import_react9 = require("react");
+var import_react10 = require("react");
 var import_react_stripe_js2 = require("@stripe/react-stripe-js");
 var import_stripe_js = require("@stripe/stripe-js");
+init_LoginStatusContext();
 init_SpreePayActionsContext();
 init_useSpreePayConfig();
 init_InfoBanner();
 
 // src/components/CreditCardTab/CreditCard/CardsList.tsx
-var import_react7 = require("react");
+var import_react8 = require("react");
 init_utils();
 init_slapi();
 init_payments();
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var CardListItem = ({ card, isSelected, onSelect, onRemove }) => {
-  const [isRemoving, setIsRemoving] = (0, import_react7.useState)(false);
+  const [isRemoving, setIsRemoving] = (0, import_react8.useState)(false);
   const removeDisabled = isSelected || isRemoving;
   const handleRemove = async (e) => {
     e.stopPropagation();
@@ -3175,7 +3278,7 @@ var CardListItem = ({ card, isSelected, onSelect, onRemove }) => {
       setIsRemoving(false);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
     "div",
     {
       role: "button",
@@ -3187,36 +3290,36 @@ var CardListItem = ({ card, isSelected, onSelect, onRemove }) => {
         { "border-(--b-brand)": isSelected }
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
           "div",
           {
             className: cn("flex h-full w-11 shrink-0 items-center justify-center border-r border-(--b-inverse)", {
               "border-(--b-brand)": isSelected
             }),
-            children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex size-5 items-center justify-center rounded-full border-2 border-(--brand-primary)", children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "size-2 rounded-full bg-(--brand-primary)" }) })
+            children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "flex size-5 items-center justify-center rounded-full border-2 border-(--brand-primary)", children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "size-2 rounded-full bg-(--brand-primary)" }) })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
           "div",
           {
             className: cn("flex h-full w-full items-center justify-between rounded-r-sm pr-2 pl-3", {
               "border-(--primary)": isSelected
             }),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-sm font-medium text-(--brand-primary)", children: card.schema }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("p", { className: "text-sm font-medium text-(--secondary)", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "text-sm font-medium text-(--brand-primary)", children: card.schema }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("p", { className: "text-sm font-medium text-(--secondary)", children: [
                   "Ending in ",
-                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "text-(--brand-primary)", children: card.lastFourNumbers })
+                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "text-(--brand-primary)", children: card.lastFourNumbers })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                   "button",
                   {
                     type: "button",
                     onClick: handleRemove,
                     disabled: removeDisabled,
                     className: "text-tertiary rounded-md p-1 transition-all hover:bg-(--s-secondary) disabled:cursor-not-allowed disabled:opacity-50",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", className: "size-5", viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M6.35 16.17q-.57 0-.96-.4a1.3 1.3 0 0 1-.39-.95V4.5h-.83v-.83H7.5v-.64h5v.64h3.33v.83H15v10.32q0 .58-.39.96a1.3 1.3 0 0 1-.96.39zM14.17 4.5H5.83v10.32q0 .23.15.37.15.15.37.15h7.3q.2 0 .36-.16.15-.17.16-.36zm-6 9.17h.84v-7.5h-.84zm2.82 0h.84v-7.5h-.84z" }) })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", className: "size-5", viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { d: "M6.35 16.17q-.57 0-.96-.4a1.3 1.3 0 0 1-.39-.95V4.5h-.83v-.83H7.5v-.64h5v.64h3.33v.83H15v10.32q0 .58-.39.96a1.3 1.3 0 0 1-.96.39zM14.17 4.5H5.83v10.32q0 .23.15.37.15.15.37.15h7.3q.2 0 .36-.16.15-.17.16-.36zm-6 9.17h.84v-7.5h-.84zm2.82 0h.84v-7.5h-.84z" }) })
                   }
                 )
               ] })
@@ -3229,7 +3332,7 @@ var CardListItem = ({ card, isSelected, onSelect, onRemove }) => {
 };
 var CardsList = ({ selectedCard, setCard, newCards, onRemoveNewCard }) => {
   const { cards, cardsIsLoading, mutateCards } = useCards();
-  const allCards = (0, import_react7.useMemo)(() => [...cards, ...newCards], [cards, newCards]);
+  const allCards = (0, import_react8.useMemo)(() => [...cards, ...newCards], [cards, newCards]);
   const handleRemove = async (card) => {
     if (isNewCard(card)) {
       onRemoveNewCard(card);
@@ -3239,10 +3342,10 @@ var CardsList = ({ selectedCard, setCard, newCards, onRemoveNewCard }) => {
     }
   };
   if (cardsIsLoading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex w-full flex-col", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "h-11 animate-pulse rounded-sm bg-(--s-primary)" }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "flex w-full flex-col", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "h-11 animate-pulse rounded-sm bg-(--s-primary)" }) });
   }
   if (allCards.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex w-full flex-col gap-4", children: allCards.map((card) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "flex w-full flex-col gap-4", children: allCards.map((card) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     CardListItem,
     {
       isSelected: selectedCard?.id === card.id,
@@ -3255,14 +3358,14 @@ var CardsList = ({ selectedCard, setCard, newCards, onRemoveNewCard }) => {
 };
 
 // src/components/CreditCardTab/CreditCard/CreditCardForm.tsx
-var import_react8 = require("react");
+var import_react9 = require("react");
 var import_react_stripe_js = require("@stripe/react-stripe-js");
 
 // src/ui/button.tsx
 var import_react_slot = require("@radix-ui/react-slot");
 var import_class_variance_authority = require("class-variance-authority");
 init_utils();
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var buttonVariants = (0, import_class_variance_authority.cva)(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-full text-sm transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
   {
@@ -3297,16 +3400,16 @@ function Button({
   ...props
 }) {
   const Comp = asChild ? import_react_slot.Slot : "button";
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Comp, { "data-slot": "button", className: cn(buttonVariants({ variant, size, className })), ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Comp, { "data-slot": "button", className: cn(buttonVariants({ variant, size, className })), ...props });
 }
 
 // src/ui/checkbox.tsx
 var CheckboxPrimitive = __toESM(require("@radix-ui/react-checkbox"), 1);
 var import_lucide_react2 = require("lucide-react");
 init_utils();
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 function Checkbox({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     CheckboxPrimitive.Root,
     {
       "data-slot": "checkbox",
@@ -3315,12 +3418,12 @@ function Checkbox({ className, ...props }) {
         className
       ),
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
         CheckboxPrimitive.Indicator,
         {
           "data-slot": "checkbox-indicator",
           className: "flex items-center justify-center text-current transition-none",
-          children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react2.CheckIcon, { className: "size-3.5 text-(--inverse)" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react2.CheckIcon, { className: "size-3.5 text-(--inverse)" })
         }
       )
     }
@@ -3330,7 +3433,7 @@ function Checkbox({ className, ...props }) {
 // src/components/CreditCardTab/CreditCard/CreditCardForm.tsx
 init_label();
 init_logger();
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var cardFormLogger = logger.child("card-form");
 var stripeElementClasses = {
   base: "w-full rounded-[12px] bg-(--s-primary) px-5 py-4 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50",
@@ -3338,14 +3441,14 @@ var stripeElementClasses = {
   focus: "border-ring ring-ring/50 ring-2"
 };
 var CreditCardForm = ({ cancel, saveCard }) => {
-  const [cardError, setCardError] = (0, import_react8.useState)(void 0);
-  const [stripeStyles, setStripeStyles] = (0, import_react8.useState)({});
-  const [shouldSaveCard, setShouldSaveCard] = (0, import_react8.useState)(true);
-  const [isSubmitting, setIsSubmitting] = (0, import_react8.useState)(false);
+  const [cardError, setCardError] = (0, import_react9.useState)(void 0);
+  const [stripeStyles, setStripeStyles] = (0, import_react9.useState)({});
+  const [shouldSaveCard, setShouldSaveCard] = (0, import_react9.useState)(true);
+  const [isSubmitting, setIsSubmitting] = (0, import_react9.useState)(false);
   const elements = (0, import_react_stripe_js.useElements)();
   const stripe = (0, import_react_stripe_js.useStripe)();
-  const [id] = (0, import_react8.useState)(() => crypto.randomUUID());
-  const formRef = (0, import_react8.useCallback)((node) => {
+  const [id] = (0, import_react9.useState)(() => crypto.randomUUID());
+  const formRef = (0, import_react9.useCallback)((node) => {
     if (!node) return;
     const container = node.closest(".sl-spreepay");
     if (!container) return;
@@ -3403,9 +3506,9 @@ var CreditCardForm = ({ cancel, saveCard }) => {
       setIsSubmitting(false);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { ref: formRef, className: "flex w-full flex-col gap-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { ref: formRef, className: "flex w-full flex-col gap-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         import_react_stripe_js.CardNumberElement,
         {
           options: {
@@ -3415,8 +3518,8 @@ var CreditCardForm = ({ cancel, saveCard }) => {
           }
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex w-full gap-4", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex w-full gap-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
           import_react_stripe_js.CardExpiryElement,
           {
             options: {
@@ -3426,7 +3529,7 @@ var CreditCardForm = ({ cancel, saveCard }) => {
             }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
           import_react_stripe_js.CardCvcElement,
           {
             options: {
@@ -3437,14 +3540,14 @@ var CreditCardForm = ({ cancel, saveCard }) => {
           }
         )
       ] }),
-      cardError && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "text-destructive mt-1 text-sm", children: cardError })
+      cardError && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "text-destructive mt-1 text-sm", children: cardError })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Checkbox, { checked: shouldSaveCard, onCheckedChange: (v) => setShouldSaveCard(v === true), id: "saveCard" }),
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Label, { className: "text-sm font-medium", htmlFor: "saveCard", children: "Save card for future purchases" })
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Checkbox, { checked: shouldSaveCard, onCheckedChange: (v) => setShouldSaveCard(v === true), id: "saveCard" }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Label, { className: "text-sm font-medium", htmlFor: "saveCard", children: "Save card for future purchases" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex w-full justify-end gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex w-full justify-end gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         Button,
         {
           variant: "outline",
@@ -3454,7 +3557,7 @@ var CreditCardForm = ({ cancel, saveCard }) => {
           children: "Cancel"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         Button,
         {
           className: "bg-(--s-brand) font-medium text-(--inverse) hover:bg-(--s-brand-hover)",
@@ -3468,13 +3571,14 @@ var CreditCardForm = ({ cancel, saveCard }) => {
 };
 
 // src/components/CreditCardTab/CreditCard/CreditCard.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var StripeWrapper = ({ onCancel, saveNewCard, publicKey }) => {
-  const stripePromise = (0, import_react9.useMemo)(() => (0, import_stripe_js.loadStripe)(publicKey), [publicKey]);
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_stripe_js2.Elements, { stripe: stripePromise, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CreditCardForm, { cancel: onCancel, saveCard: saveNewCard }) });
+  const stripePromise = (0, import_react10.useMemo)(() => (0, import_stripe_js.loadStripe)(publicKey), [publicKey]);
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_stripe_js2.Elements, { stripe: stripePromise, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(CreditCardForm, { cancel: onCancel, saveCard: saveNewCard }) });
 };
 var CreditCard = ({ newCards, setNewCards }) => {
-  const [showForm, setShowForm] = (0, import_react9.useState)(false);
+  const [showForm, setShowForm] = (0, import_react10.useState)(false);
+  const isLoggedIn = useIsLoggedIn();
   const { selectedPaymentMethod, setSelectedPaymentMethod } = useSpreePaymentMethod();
   const { spreePayConfig } = useSpreePayConfig();
   const setCard = (card) => {
@@ -3490,19 +3594,27 @@ var CreditCard = ({ newCards, setNewCards }) => {
     setCard(newCard);
     setShowForm(false);
   };
-  const removeNewCard = (0, import_react9.useCallback)(
+  const removeNewCard = (0, import_react10.useCallback)(
     (card) => {
       setNewCards((prev) => prev.filter((c) => c.id !== card.id));
     },
     [setNewCards]
   );
+  const handleAddNewCard = () => {
+    setSelectedPaymentMethod({
+      ...selectedPaymentMethod,
+      type: "CREDIT_CARD" /* CREDIT_CARD */,
+      method: null
+    });
+    setShowForm(true);
+  };
   const handleCancel = () => {
     setShowForm(false);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex flex-col items-baseline gap-4", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h3", { className: "text-[22px] leading-9 font-medium text-(--brand-primary)", children: "Your Cards" }),
-    !showForm && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex flex-col items-baseline gap-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("h3", { className: "text-[22px] leading-9 font-medium text-(--brand-primary)", children: "Your Cards" }),
+    !showForm && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
         CardsList,
         {
           selectedCard: selectedPaymentMethod?.type === "CREDIT_CARD" /* CREDIT_CARD */ ? selectedPaymentMethod.method : null,
@@ -3511,30 +3623,31 @@ var CreditCard = ({ newCards, setNewCards }) => {
           onRemoveNewCard: removeNewCard
         }
       ),
-      spreePayConfig?.creditCard.infoMessage && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(InfoBanner, { message: spreePayConfig.creditCard.infoMessage }),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      spreePayConfig?.creditCard.infoMessage && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(InfoBanner, { message: spreePayConfig.creditCard.infoMessage }),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
         "button",
         {
-          onClick: () => setShowForm(true),
-          disabled: !spreePayConfig?.stripePublicKey,
+          onClick: handleAddNewCard,
+          disabled: !isLoggedIn || !spreePayConfig?.stripePublicKey,
           className: "text-md text-(--brand-primary) hover:underline disabled:cursor-not-allowed disabled:no-underline disabled:opacity-50",
           children: "Add new card"
         }
       )
     ] }),
-    spreePayConfig?.stripePublicKey && showForm && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(StripeWrapper, { onCancel: handleCancel, saveNewCard, publicKey: spreePayConfig.stripePublicKey })
+    isLoggedIn && spreePayConfig?.stripePublicKey && showForm && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(StripeWrapper, { onCancel: handleCancel, saveNewCard, publicKey: spreePayConfig.stripePublicKey })
   ] });
 };
 
 // src/components/CreditCardTab/Points/Points.tsx
-var import_react14 = require("react");
+var import_react15 = require("react");
+init_LoginStatusContext();
 init_SpreePayActionsContext();
 init_StaticConfigContext();
 init_useSpreePayConfig();
 init_common();
 
 // src/components/CreditCardTab/Points/SplitBlock.tsx
-var import_react13 = require("react");
+var import_react14 = require("react");
 var import_airkit2 = require("@mocanetwork/airkit");
 init_SpreePayActionsContext();
 init_StaticConfigContext();
@@ -3544,7 +3657,7 @@ init_format();
 init_logger();
 
 // src/components/CreditCardTab/Points/PointsSelector.tsx
-var import_react12 = require("react");
+var import_react13 = require("react");
 init_SpreePayActionsContext();
 init_StaticConfigContext();
 init_useSlapiBalance();
@@ -3553,9 +3666,9 @@ init_utils();
 
 // src/ui/input.tsx
 init_utils();
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 function Input({ className, type, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     "input",
     {
       type,
@@ -3632,7 +3745,7 @@ function useComposedRefs(...refs) {
 
 // ../../node_modules/@radix-ui/react-context/dist/index.mjs
 var React3 = __toESM(require("react"), 1);
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function createContextScope(scopeName, createContextScopeDeps = []) {
   let defaultContexts = [];
   function createContext32(rootComponentName, defaultContext) {
@@ -3643,7 +3756,7 @@ function createContextScope(scopeName, createContextScopeDeps = []) {
       const { scope, children, ...context } = props;
       const Context = scope?.[scopeName]?.[index] || BaseContext;
       const value = React3.useMemo(() => context, Object.values(context));
-      return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Context.Provider, { value, children });
+      return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Context.Provider, { value, children });
     };
     Provider.displayName = rootComponentName + "Provider";
     function useContext22(consumerName, scope) {
@@ -3768,7 +3881,7 @@ function isFunction(value) {
 
 // ../../node_modules/@radix-ui/react-direction/dist/index.mjs
 var React6 = __toESM(require("react"), 1);
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var DirectionContext = React6.createContext(void 0);
 function useDirection(localDir) {
   const globalDir = React6.useContext(DirectionContext);
@@ -3829,7 +3942,7 @@ function useSize(element) {
 var React9 = __toESM(require("react"), 1);
 var ReactDOM = __toESM(require("react-dom"), 1);
 var import_react_slot2 = require("@radix-ui/react-slot");
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var NODES = [
   "a",
   "button",
@@ -3857,19 +3970,19 @@ var Primitive = NODES.reduce((primitive, node) => {
     if (typeof window !== "undefined") {
       window[/* @__PURE__ */ Symbol.for("radix-ui")] = true;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Comp, { ...primitiveProps, ref: forwardedRef });
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Comp, { ...primitiveProps, ref: forwardedRef });
   });
   Node2.displayName = `Primitive.${node}`;
   return { ...primitive, [node]: Node2 };
 }, {});
 
 // ../../node_modules/@radix-ui/react-collection/dist/index.mjs
-var import_react10 = __toESM(require("react"), 1);
-var import_react_slot3 = require("@radix-ui/react-slot");
-var import_jsx_runtime21 = require("react/jsx-runtime");
 var import_react11 = __toESM(require("react"), 1);
-var import_react_slot4 = require("@radix-ui/react-slot");
+var import_react_slot3 = require("@radix-ui/react-slot");
 var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_react12 = __toESM(require("react"), 1);
+var import_react_slot4 = require("@radix-ui/react-slot");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 function createCollection(name) {
   const PROVIDER_NAME = name + "CollectionProvider";
   const [createCollectionContext, createCollectionScope2] = createContextScope(PROVIDER_NAME);
@@ -3879,42 +3992,42 @@ function createCollection(name) {
   );
   const CollectionProvider = (props) => {
     const { scope, children } = props;
-    const ref = import_react10.default.useRef(null);
-    const itemMap = import_react10.default.useRef(/* @__PURE__ */ new Map()).current;
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CollectionProviderImpl, { scope, itemMap, collectionRef: ref, children });
+    const ref = import_react11.default.useRef(null);
+    const itemMap = import_react11.default.useRef(/* @__PURE__ */ new Map()).current;
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(CollectionProviderImpl, { scope, itemMap, collectionRef: ref, children });
   };
   CollectionProvider.displayName = PROVIDER_NAME;
   const COLLECTION_SLOT_NAME = name + "CollectionSlot";
   const CollectionSlotImpl = (0, import_react_slot3.createSlot)(COLLECTION_SLOT_NAME);
-  const CollectionSlot = import_react10.default.forwardRef(
+  const CollectionSlot = import_react11.default.forwardRef(
     (props, forwardedRef) => {
       const { scope, children } = props;
       const context = useCollectionContext(COLLECTION_SLOT_NAME, scope);
       const composedRefs = useComposedRefs(forwardedRef, context.collectionRef);
-      return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CollectionSlotImpl, { ref: composedRefs, children });
+      return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(CollectionSlotImpl, { ref: composedRefs, children });
     }
   );
   CollectionSlot.displayName = COLLECTION_SLOT_NAME;
   const ITEM_SLOT_NAME = name + "CollectionItemSlot";
   const ITEM_DATA_ATTR = "data-radix-collection-item";
   const CollectionItemSlotImpl = (0, import_react_slot3.createSlot)(ITEM_SLOT_NAME);
-  const CollectionItemSlot = import_react10.default.forwardRef(
+  const CollectionItemSlot = import_react11.default.forwardRef(
     (props, forwardedRef) => {
       const { scope, children, ...itemData } = props;
-      const ref = import_react10.default.useRef(null);
+      const ref = import_react11.default.useRef(null);
       const composedRefs = useComposedRefs(forwardedRef, ref);
       const context = useCollectionContext(ITEM_SLOT_NAME, scope);
-      import_react10.default.useEffect(() => {
+      import_react11.default.useEffect(() => {
         context.itemMap.set(ref, { ref, ...itemData });
         return () => void context.itemMap.delete(ref);
       });
-      return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CollectionItemSlotImpl, { ...{ [ITEM_DATA_ATTR]: "" }, ref: composedRefs, children });
+      return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(CollectionItemSlotImpl, { ...{ [ITEM_DATA_ATTR]: "" }, ref: composedRefs, children });
     }
   );
   CollectionItemSlot.displayName = ITEM_SLOT_NAME;
   function useCollection2(scope) {
     const context = useCollectionContext(name + "CollectionConsumer", scope);
-    const getItems = import_react10.default.useCallback(() => {
+    const getItems = import_react11.default.useCallback(() => {
       const collectionNode = context.collectionRef.current;
       if (!collectionNode) return [];
       const orderedNodes = Array.from(collectionNode.querySelectorAll(`[${ITEM_DATA_ATTR}]`));
@@ -3934,7 +4047,7 @@ function createCollection(name) {
 }
 
 // ../../node_modules/@radix-ui/react-slider/dist/index.mjs
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var PAGE_KEYS = ["PageUp", "PageDown"];
 var ARROW_KEYS = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"];
 var BACK_KEYS = {
@@ -4012,7 +4125,7 @@ var Slider = React11.forwardRef(
         }
       });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       SliderProvider,
       {
         scope: props.__scopeSlider,
@@ -4025,7 +4138,7 @@ var Slider = React11.forwardRef(
         values,
         orientation,
         form,
-        children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Collection.Provider, { scope: props.__scopeSlider, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Collection.Slot, { scope: props.__scopeSlider, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Collection.Provider, { scope: props.__scopeSlider, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Collection.Slot, { scope: props.__scopeSlider, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           SliderOrientation,
           {
             "aria-disabled": disabled,
@@ -4094,7 +4207,7 @@ var SliderHorizontal = React11.forwardRef(
       rectRef.current = rect;
       return value(pointerPosition - rect.left);
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       SliderOrientationProvider,
       {
         scope: props.__scopeSlider,
@@ -4102,7 +4215,7 @@ var SliderHorizontal = React11.forwardRef(
         endEdge: isSlidingFromLeft ? "right" : "left",
         direction: isSlidingFromLeft ? 1 : -1,
         size: "width",
-        children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           SliderImpl,
           {
             dir: direction,
@@ -4160,7 +4273,7 @@ var SliderVertical = React11.forwardRef(
       rectRef.current = rect;
       return value(pointerPosition - rect.top);
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       SliderOrientationProvider,
       {
         scope: props.__scopeSlider,
@@ -4168,7 +4281,7 @@ var SliderVertical = React11.forwardRef(
         endEdge: isSlidingFromBottom ? "top" : "bottom",
         size: "height",
         direction: isSlidingFromBottom ? 1 : -1,
-        children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           SliderImpl,
           {
             "data-orientation": "vertical",
@@ -4214,7 +4327,7 @@ var SliderImpl = React11.forwardRef(
       ...sliderProps
     } = props;
     const context = useSliderContext(SLIDER_NAME, __scopeSlider);
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       Primitive.span,
       {
         ...sliderProps,
@@ -4261,7 +4374,7 @@ var SliderTrack = React11.forwardRef(
   (props, forwardedRef) => {
     const { __scopeSlider, ...trackProps } = props;
     const context = useSliderContext(TRACK_NAME, __scopeSlider);
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       Primitive.span,
       {
         "data-disabled": context.disabled ? "" : void 0,
@@ -4287,7 +4400,7 @@ var SliderRange = React11.forwardRef(
     );
     const offsetStart = valuesCount > 1 ? Math.min(...percentages) : 0;
     const offsetEnd = 100 - Math.max(...percentages);
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       Primitive.span,
       {
         "data-orientation": context.orientation,
@@ -4314,7 +4427,7 @@ var SliderThumb = React11.forwardRef(
       () => thumb ? getItems().findIndex((item) => item.ref.current === thumb) : -1,
       [getItems, thumb]
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(SliderThumbImpl, { ...props, ref: composedRefs, index });
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(SliderThumbImpl, { ...props, ref: composedRefs, index });
   }
 );
 var SliderThumbImpl = React11.forwardRef(
@@ -4339,7 +4452,7 @@ var SliderThumbImpl = React11.forwardRef(
         };
       }
     }, [thumb, context.thumbs]);
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
       "span",
       {
         style: {
@@ -4348,7 +4461,7 @@ var SliderThumbImpl = React11.forwardRef(
           [orientation.startEdge]: `calc(${percent}% + ${thumbInBoundsOffset}px)`
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Collection.ItemSlot, { scope: props.__scopeSlider, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Collection.ItemSlot, { scope: props.__scopeSlider, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
             Primitive.span,
             {
               role: "slider",
@@ -4368,7 +4481,7 @@ var SliderThumbImpl = React11.forwardRef(
               })
             }
           ) }),
-          isFormControl && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          isFormControl && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
             SliderBubbleInput,
             {
               name: name ?? (context.name ? context.name + (context.values.length > 1 ? "[]" : "") : void 0),
@@ -4401,7 +4514,7 @@ var SliderBubbleInput = React11.forwardRef(
         input.dispatchEvent(event);
       }
     }, [prevValue, value]);
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       Primitive.input,
       {
         style: { display: "none" },
@@ -4477,14 +4590,14 @@ var Thumb2 = SliderThumb;
 
 // src/ui/slider.tsx
 init_utils2();
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 function Slider2(props) {
   const { className, defaultValue, value, min = 0, max = 100, ...rest } = props;
   const _values = React12.useMemo(
     () => Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max],
     [value, defaultValue, min, max]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
     Root5,
     {
       "data-slot": "slider",
@@ -4498,14 +4611,14 @@ function Slider2(props) {
       ),
       ...rest,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           Track,
           {
             "data-slot": "slider-track",
             className: cn2(
               "relative grow overflow-hidden rounded-full bg-(--primary)/15 data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
             ),
-            children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
               Range,
               {
                 "data-slot": "slider-range",
@@ -4516,7 +4629,7 @@ function Slider2(props) {
             )
           }
         ),
-        Array.from({ length: _values.length }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        Array.from({ length: _values.length }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           Thumb2,
           {
             "data-slot": "slider-thumb",
@@ -4533,7 +4646,7 @@ function Slider2(props) {
 init_format();
 init_split();
 init_transactionFee();
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 var PointsSelector = (props) => {
   const { isDisabled, isSelected, onSelect, children } = props;
   const { balance } = useSlapiBalance();
@@ -4547,7 +4660,7 @@ var PointsSelector = (props) => {
   const maxByAmount = pointsConversionRatio && pointsConversionRatio > 0 ? (amount ?? 0) / pointsConversionRatio : 0;
   const max = Math.min(maxByAmount, balance?.availablePoints ?? 0);
   const step = 10;
-  const [splitTokens, setSplitTokens] = (0, import_react12.useState)(0);
+  const [splitTokens, setSplitTokens] = (0, import_react13.useState)(0);
   const usdAmount = getSplitAmount(amount ?? 0, splitTokens, pointsConversionRatio);
   const pointsValue = String(Math.round(splitTokens));
   const usdWithFee = usdAmount + getTransactionFee(usdAmount, transactionFeePercentage);
@@ -4562,7 +4675,7 @@ var PointsSelector = (props) => {
       foreignCurrencyAmount: hasForeignCurrency ? parseFloat((committedUsdWithFee / exchangeRate).toFixed(2)) : void 0
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
     "button",
     {
       disabled: isDisabled,
@@ -4574,8 +4687,8 @@ var PointsSelector = (props) => {
         }
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex h-11 w-full bg-(--s-primary) hover:bg-(--s-primary-hover)", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex h-11 w-full bg-(--s-primary) hover:bg-(--s-primary-hover)", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
             "div",
             {
               className: cn(
@@ -4584,14 +4697,14 @@ var PointsSelector = (props) => {
                   "border-(--b-brand)": isSelected
                 }
               ),
-              children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "flex size-5 items-center justify-center rounded-full border-2 border-(--brand-primary)", children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "size-2 rounded-full bg-(--brand-primary)" }) })
+              children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "flex size-5 items-center justify-center rounded-full border-2 border-(--brand-primary)", children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "size-2 rounded-full bg-(--brand-primary)" }) })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "flex h-full w-full items-center justify-between gap-2 px-2 sm:gap-3 sm:px-3", children })
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "flex h-full w-full items-center justify-between gap-2 px-2 sm:gap-3 sm:px-3", children })
         ] }),
-        isSelected && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "px-2 pt-5 pb-2 sm:px-3 md:px-4", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex justify-between gap-2 sm:gap-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex flex-col gap-1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        isSelected && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "px-2 pt-5 pb-2 sm:px-3 md:px-4", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex justify-between gap-2 sm:gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex flex-col gap-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
               Input,
               {
                 readOnly: true,
@@ -4602,9 +4715,9 @@ var PointsSelector = (props) => {
                 onClick: (e) => e.stopPropagation()
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { className: "text-left text-xs leading-5 text-(--tertiary)", children: "Points" })
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "text-left text-xs leading-5 text-(--tertiary)", children: "Points" })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "flex w-full items-center pb-6", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "flex w-full items-center pb-6", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
             Slider2,
             {
               value: [splitTokens],
@@ -4616,8 +4729,8 @@ var PointsSelector = (props) => {
               step
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex flex-col gap-1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex flex-col gap-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
               Input,
               {
                 readOnly: true,
@@ -4628,7 +4741,7 @@ var PointsSelector = (props) => {
                 onClick: (e) => e.stopPropagation()
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { className: "text-left text-xs leading-5 text-(--tertiary)", children: "Card" })
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "text-left text-xs leading-5 text-(--tertiary)", children: "Card" })
           ] })
         ] }) })
       ]
@@ -4637,7 +4750,7 @@ var PointsSelector = (props) => {
 };
 
 // src/components/CreditCardTab/Points/SplitBlock.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 var splitBlockLogger = logger.child("split-block");
 var SplitBlock = (props) => {
   const { onToggle, isSelected, onSelect } = props;
@@ -4645,14 +4758,14 @@ var SplitBlock = (props) => {
   const { spreePayConfig } = useSpreePayConfig();
   const { appProps } = useStaticConfig();
   const { currencyCode, exchangeRate, foreignCurrencyAmount } = appProps;
-  const [address, setAddress] = (0, import_react13.useState)(null);
-  const [walletReady, setWalletReady] = (0, import_react13.useState)(false);
+  const [address, setAddress] = (0, import_react14.useState)(null);
+  const [walletReady, setWalletReady] = (0, import_react14.useState)(false);
   const { pointsConversionRatio, pointsTitle } = spreePayConfig || {};
   const { useWeb3Points, environment } = useSpreePayEnv();
   const hasForeignCurrency = !!(currencyCode && exchangeRate && foreignCurrencyAmount);
   const formatPointsValue = (usd) => hasForeignCurrency ? formatCurrency(usd / exchangeRate, currencyCode) : formatCurrency(usd);
-  const prevPointsChainRef = (0, import_react13.useRef)(spreePayConfig?.pointsChain);
-  const initWallet = (0, import_react13.useCallback)(
+  const prevPointsChainRef = (0, import_react14.useRef)(spreePayConfig?.pointsChain);
+  const initWallet = (0, import_react14.useCallback)(
     async (pointsChain) => {
       if (!pointsChain) return;
       try {
@@ -4675,7 +4788,7 @@ var SplitBlock = (props) => {
     },
     [onToggle, environment]
   );
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     if (!useWeb3Points) return;
     const pointsChainChanged = prevPointsChainRef.current !== spreePayConfig?.pointsChain;
     prevPointsChainRef.current = spreePayConfig?.pointsChain;
@@ -4689,24 +4802,25 @@ var SplitBlock = (props) => {
     doInit();
   }, [spreePayConfig?.pointsChain, initWallet, useWeb3Points]);
   const isPointsSelectorDisabled = useWeb3Points ? !walletReady : false;
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "flex flex-col gap-1", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(PointsSelector, { isDisabled: isPointsSelectorDisabled, onSelect: () => onSelect("air"), isSelected, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "flex items-center gap-2", children: balance?.availablePoints ? /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("p", { className: "text-left text-xs font-medium text-(--brand-primary) sm:text-sm", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "text-(--secondary)", children: "Available" }),
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "flex flex-col gap-1", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(PointsSelector, { isDisabled: isPointsSelectorDisabled, onSelect: () => onSelect("air"), isSelected, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "flex items-center gap-2", children: balance?.availablePoints ? /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("p", { className: "text-left text-xs font-medium text-(--brand-primary) sm:text-sm", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "text-(--secondary)", children: "Available" }),
       " ",
       formatPoints(balance.availablePoints, pointsTitle),
       " ",
-      pointsConversionRatio && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "text-(--secondary)", children: formatPointsValue(balance.availablePoints * pointsConversionRatio) })
+      pointsConversionRatio && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "text-(--secondary)", children: formatPointsValue(balance.availablePoints * pointsConversionRatio) })
     ] }) : null }),
-    isBalanceLoading ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "h-4 w-6 animate-pulse bg-(--s-secondary)" }) : !balance?.availablePoints && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "text-sm font-medium text-(--brand-primary)", children: "No points available" }),
-    address && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "text-sm font-medium text-(--brand-primary)", children: address.length > 8 ? `${address.slice(0, 4)}...${address.slice(-4)}` : address })
+    isBalanceLoading ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "h-4 w-6 animate-pulse bg-(--s-secondary)" }) : !balance?.availablePoints && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("p", { className: "text-sm font-medium text-(--brand-primary)", children: "No points available" }),
+    address && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "text-sm font-medium text-(--brand-primary)", children: address.length > 8 ? `${address.slice(0, 4)}...${address.slice(-4)}` : address })
   ] }) });
 };
 
 // src/components/CreditCardTab/Points/Points.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 var Points = () => {
-  const [usePoints, setUsePoints] = (0, import_react14.useState)(false);
-  const [selectedPointsType, setSelectedPointsType] = (0, import_react14.useState)(null);
+  const isLoggedIn = useIsLoggedIn();
+  const [usePoints, setUsePoints] = (0, import_react15.useState)(false);
+  const [selectedPointsType, setSelectedPointsType] = (0, import_react15.useState)(null);
   const { setSelectedPaymentMethod, selectedPaymentMethod } = useSpreePaymentMethod();
   const { spreePayConfig } = useSpreePayConfig();
   const { appProps } = useStaticConfig();
@@ -4717,17 +4831,17 @@ var Points = () => {
       setSelectedPaymentMethod({ ...selectedPaymentMethod, pointsAmount: void 0 });
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       PointsSwitch,
       {
         value: usePoints,
         onChange: handleTogglePoints,
         message: spreePayConfig?.creditCard.pointsInfoMessage,
-        disabled: !spreePayConfig?.creditCard.enabled || !spreePayConfig?.creditCard.points || appProps.disabledPoints
+        disabled: !isLoggedIn || !spreePayConfig?.creditCard.enabled || !spreePayConfig?.creditCard.points || appProps.disabledPoints
       }
     ),
-    usePoints && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    usePoints && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       SplitBlock,
       {
         onToggle: handleTogglePoints,
@@ -4739,8 +4853,8 @@ var Points = () => {
 };
 
 // src/components/CreditCardTab/CreditCardTab.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
-var CreditCardTab = ({ isLoggedIn }) => {
+var import_jsx_runtime29 = require("react/jsx-runtime");
+var CreditCardTab = () => {
   const { selectedPaymentMethod, setSelectedPaymentMethod } = useSpreePaymentMethod();
   const { useWeb3Points } = useSpreePayEnv();
   const { appProps } = useStaticConfig();
@@ -4748,30 +4862,30 @@ var CreditCardTab = ({ isLoggedIn }) => {
   const { register } = useSpreePayRegister();
   const { cards, mutateCards } = useCards();
   const { mutateBalance } = useSlapiBalance();
-  const [newCards, setNewCards] = (0, import_react15.useState)([]);
+  const [newCards, setNewCards] = (0, import_react16.useState)([]);
   const isWeb3Enabled = Boolean(useWeb3Points);
   const { cardPayment } = useCardPayment();
   const { splitPayment } = useSplitCardPayments(isWeb3Enabled ? "web3" : "web2");
   const { pointsPayment } = usePointsPayment(isWeb3Enabled ? "web3" : "web2");
-  const handlePay = (0, import_react15.useCallback)(
+  const handlePay = (0, import_react16.useCallback)(
     async (data) => {
+      const pointsAmount = selectedPaymentMethod.pointsAmount ?? 0;
+      const usdAmount = getSplitAmount(appProps.amount ?? 0, pointsAmount, spreePayConfig?.pointsConversionRatio);
+      const isPurePoints = !usdAmount && pointsAmount > 0;
+      const failureMessage = isPurePoints ? "Points payment failed" : "Card payment failed";
+      const failureCode = isPurePoints ? "PAYMENT_ERROR" /* PAYMENT_ERROR */ : "CARD_ERROR" /* CARD_ERROR */;
       try {
-        let res = null;
-        const pointsAmount = selectedPaymentMethod.pointsAmount ?? 0;
-        const usdAmount = getSplitAmount(appProps.amount ?? 0, pointsAmount, spreePayConfig?.pointsConversionRatio);
+        let res;
         if (usdAmount && pointsAmount) {
           res = await splitPayment({ ...data, points: pointsAmount });
-        } else if (!usdAmount && pointsAmount) {
+        } else if (isPurePoints) {
           res = await pointsPayment({ ...data, points: pointsAmount });
         } else {
           res = await cardPayment(data);
         }
-        if (["AUTHORIZED" /* AUTHORIZED */, "CAPTURED" /* CAPTURED */].includes(res.status)) {
-          return Promise.resolve(res);
-        }
-        return Promise.reject(new PaymentError("Card payment failed", res.status));
-      } catch (_) {
-        return Promise.reject(new PaymentError("Payment failed", "FAILED" /* FAILED */));
+        return settlePaymentResult(res, failureMessage, failureCode);
+      } catch (e) {
+        return Promise.reject(toPaymentError(e, failureMessage, failureCode));
       } finally {
         mutateBalance();
         if (selectedPaymentMethod.type === "CREDIT_CARD" /* CREDIT_CARD */ && selectedPaymentMethod.method && isNewCard(selectedPaymentMethod.method)) {
@@ -4802,22 +4916,22 @@ var CreditCardTab = ({ isLoggedIn }) => {
       mutateBalance
     ]
   );
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     register(handlePay);
   }, [register, handlePay]);
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "border-b border-b-(--border-component-specific-card) px-5 py-5 md:px-7 md:py-6", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(CreditCard, { newCards, setNewCards }) }),
-    !spreePayConfig?.creditCard.hidePoints && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "flex flex-col gap-4 border-b border-b-(--border-component-specific-card) px-5 pt-5 pb-5 md:px-7 md:pt-6 md:pb-7", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Points, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(CheckoutButton, { isLoggedIn })
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "border-b border-b-(--border-component-specific-card) px-5 py-5 md:px-7 md:py-6", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(CreditCard, { newCards, setNewCards }) }),
+    !spreePayConfig?.creditCard.hidePoints && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "flex flex-col gap-4 border-b border-b-(--border-component-specific-card) px-5 pt-5 pb-5 md:px-7 md:pt-6 md:pb-7", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Points, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(CheckoutButton, {})
   ] });
 };
 
 // src/components/TabButtons.tsx
 init_useSpreePayConfig();
 init_utils();
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 var TabButton = ({ isDisabled = false, isActive, children, onClick }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     "button",
     {
       disabled: isDisabled,
@@ -4840,38 +4954,38 @@ var TabButtons = (props) => {
       onChange({ type, method: null });
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex w-full gap-4 overflow-x-auto px-5 py-2 md:px-7", children: [
-    configIsLoading && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "h-[74px] w-[180px] animate-pulse rounded-md bg-(--s-primary)" }),
-    spreePayConfig?.creditCard.enabled && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(TabButton, { onClick: handleChange("CREDIT_CARD" /* CREDIT_CARD */), isActive: value === "CREDIT_CARD" /* CREDIT_CARD */, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", className: "size-8", viewBox: "0 0 32 32", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex w-full gap-4 overflow-x-auto px-5 py-2 md:px-7", children: [
+    configIsLoading && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "h-[74px] w-[180px] animate-pulse rounded-md bg-(--s-primary)" }),
+    spreePayConfig?.creditCard.enabled && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(TabButton, { onClick: handleChange("CREDIT_CARD" /* CREDIT_CARD */), isActive: value === "CREDIT_CARD" /* CREDIT_CARD */, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", className: "size-8", viewBox: "0 0 32 32", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
         "path",
         {
           fill: "currentColor",
           d: "M28 8.82v14.36q0 .92-.62 1.54-.6.6-1.53.61H6.15q-.91 0-1.53-.61A2 2 0 0 1 4 23.18V8.82q0-.92.62-1.54.6-.6 1.53-.61h19.7q.91 0 1.53.61.62.62.62 1.54M5.33 11.74h21.34V8.82q0-.31-.26-.56a.8.8 0 0 0-.56-.26H6.15q-.3 0-.56.26a.8.8 0 0 0-.26.56zm0 3.18v8.26q0 .31.26.56t.56.26h19.7q.3 0 .56-.26a.8.8 0 0 0 .26-.56v-8.26z"
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "md:text-md text-sm font-medium", children: "Card" })
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "md:text-md text-sm font-medium", children: "Card" })
     ] }),
-    spreePayConfig?.crypto.enabled && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(TabButton, { onClick: handleChange("CRYPTO" /* CRYPTO */), isActive: value === "CRYPTO" /* CRYPTO */, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", className: "size-8", viewBox: "0 0 32 32", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    spreePayConfig?.crypto.enabled && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(TabButton, { onClick: handleChange("CRYPTO" /* CRYPTO */), isActive: value === "CRYPTO" /* CRYPTO */, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", className: "size-8", viewBox: "0 0 32 32", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
         "path",
         {
           fill: "currentColor",
           d: "M21 9.86a8 8 0 0 1 3 5.43l-2.85-.71a5.4 5.4 0 0 0-3.86-3.67 5.3 5.3 0 0 0-6.46 3.8 5.3 5.3 0 0 0 3.91 6.4 5.4 5.4 0 0 0 5.14-1.43l2.85.7a8 8 0 0 1-5.2 3.39L16.72 27l-2.6-.65.64-2.57a8 8 0 0 1-1.3-.32l-.64 2.57-2.6-.65.82-3.24a7.9 7.9 0 0 1-2.8-8.08 7.9 7.9 0 0 1 6.27-5.82L15.32 5l2.6.64-.65 2.58q.67.1 1.3.32l.65-2.57 2.6.64z"
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "md:text-md text-sm font-medium", children: "Crypto" })
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "md:text-md text-sm font-medium", children: "Crypto" })
     ] }),
-    spreePayConfig?.cryptoCom.enabled && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(TabButton, { onClick: handleChange("CDC" /* CDC */), isActive: value === "CDC" /* CDC */, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", className: "h-8 w-11", viewBox: "0 0 44 32", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    spreePayConfig?.cryptoCom.enabled && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(TabButton, { onClick: handleChange("CDC" /* CDC */), isActive: value === "CDC" /* CDC */, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", className: "h-8 w-11", viewBox: "0 0 44 32", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
           "path",
           {
             fill: "currentColor",
             d: "M17.6 11v10l-8.8 5L0 21V11l8.8-5zM2.2 16.69l3.15 5.42h1.26l1.5-1.37v-.7L6.56 18.6v-2.32L4.51 15zm8.87-.42v2.32l-1.55 1.46v.69l1.5 1.35h1.24l3.15-5.4-2.32-1.72zm-4.5-1.95.75 1.95-.23 2.17H8.8l1.72-.01-.21-2.17.74-1.94zm-1.25-4-.8 3.48h8.56l-.83-3.47z"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
           "path",
           {
             fill: "#009fff",
@@ -4879,43 +4993,50 @@ var TabButtons = (props) => {
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "md:text-md text-sm font-medium", children: "Crypto.com Pay" })
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "md:text-md text-sm font-medium", children: "Crypto.com Pay" })
     ] })
   ] });
 };
 
 // src/SpreePayContent.tsx
+init_LoginStatusContext();
 init_SpreePayActionsContext();
-var import_jsx_runtime45 = require("react/jsx-runtime");
-var CryptoTab2 = (0, import_react20.lazy)(() => Promise.resolve().then(() => (init_CryptoTab2(), CryptoTab_exports)).then((module2) => ({ default: module2.CryptoTab })));
-var CryptoComTab2 = (0, import_react20.lazy)(
+var import_jsx_runtime46 = require("react/jsx-runtime");
+var CryptoTab2 = (0, import_react21.lazy)(() => Promise.resolve().then(() => (init_CryptoTab2(), CryptoTab_exports)).then((module2) => ({ default: module2.CryptoTab })));
+var CryptoComTab2 = (0, import_react21.lazy)(
   () => Promise.resolve().then(() => (init_CryptoComTab2(), CryptoComTab_exports)).then((module2) => ({ default: module2.CryptoComTab }))
 );
-var TabLoadingFallback = () => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "flex items-center justify-center px-5 py-8 md:px-7", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "flex flex-col items-center gap-3", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "h-8 w-8 animate-spin rounded-full border-4 border-(--border-component-specific-card) border-t-(--brand-primary)" }),
-  /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { className: "text-sm text-(--text-tertiary)", children: "Loading payment method..." })
+var TabLoadingFallback = () => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "flex items-center justify-center px-5 py-8 md:px-7", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "flex flex-col items-center gap-3", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "h-8 w-8 animate-spin rounded-full border-4 border-(--border-component-specific-card) border-t-(--brand-primary)" }),
+  /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("p", { className: "text-sm text-(--text-tertiary)", children: "Loading payment method..." })
 ] }) });
-var SpreePayContent = ({ isLoggedIn }) => {
+var SpreePayContent = () => {
+  const isLoggedIn = useIsLoggedIn();
   const { selectedPaymentMethod, setSelectedPaymentMethod } = useSpreePaymentMethod();
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "w-full overflow-hidden rounded-3xl border border-(--border-component-specific-card) bg-(--surface-component-specific-card-default-card) shadow-[0_6.25px_25px_0_var(--shadow-component-specific-card)]", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "flex w-full flex-col gap-2 border-b border-b-(--border-component-specific-card) pt-5 pb-3 md:pt-6 md:pb-5", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("h2", { className: "px-5 text-[28px] leading-8 font-medium text-(--brand-primary) md:px-7", children: "Choose a payment method" }),
-      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(TabButtons, { value: selectedPaymentMethod.type, onChange: setSelectedPaymentMethod })
+  (0, import_react21.useEffect)(() => {
+    if (!isLoggedIn) {
+      setSelectedPaymentMethod({ type: "CREDIT_CARD" /* CREDIT_CARD */, method: null });
+    }
+  }, [isLoggedIn, setSelectedPaymentMethod]);
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "w-full overflow-hidden rounded-3xl border border-(--border-component-specific-card) bg-(--surface-component-specific-card-default-card) shadow-[0_6.25px_25px_0_var(--shadow-component-specific-card)]", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "flex w-full flex-col gap-2 border-b border-b-(--border-component-specific-card) pt-5 pb-3 md:pt-6 md:pb-5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("h2", { className: "px-5 text-[28px] leading-8 font-medium text-(--brand-primary) md:px-7", children: "Choose a payment method" }),
+      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(TabButtons, { value: selectedPaymentMethod.type, onChange: setSelectedPaymentMethod })
     ] }),
-    selectedPaymentMethod.type === "CREDIT_CARD" /* CREDIT_CARD */ && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(CreditCardTab, { isLoggedIn }),
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_react20.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(TabLoadingFallback, {}), children: [
-      selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(CryptoTab2, { isLoggedIn }),
-      selectedPaymentMethod.type === "CDC" /* CDC */ && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(CryptoComTab2, {})
+    selectedPaymentMethod.type === "CREDIT_CARD" /* CREDIT_CARD */ && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(CreditCardTab, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_react21.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(TabLoadingFallback, {}), children: [
+      selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(CryptoTab2, {}),
+      selectedPaymentMethod.type === "CDC" /* CDC */ && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(CryptoComTab2, {})
     ] })
   ] });
 };
 
 // src/components/ErrorBoundary.tsx
-var import_react21 = require("react");
+var import_react22 = require("react");
 init_utils();
 init_logger();
-var import_jsx_runtime46 = require("react/jsx-runtime");
-var ErrorBoundary = class extends import_react21.Component {
+var import_jsx_runtime47 = require("react/jsx-runtime");
+var ErrorBoundary = class extends import_react22.Component {
   constructor(props) {
     super(props);
     this.state = { hasError: false, error: null };
@@ -4933,8 +5054,8 @@ var ErrorBoundary = class extends import_react21.Component {
       if (this.props.fallback) {
         return this.props.fallback;
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: cn("sl-spreepay", this.props.className), children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "flex w-full flex-col items-center justify-center rounded-3xl border border-(--border-component-specific-card) bg-(--surface-component-specific-card-default-card) p-8 shadow-[0_6.25px_25px_0_var(--shadow-component-specific-card)]", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "mb-4 flex size-12 items-center justify-center rounded-full bg-(--s-warning-subtle)", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: cn("sl-spreepay", this.props.className), children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex w-full flex-col items-center justify-center rounded-3xl border border-(--border-component-specific-card) bg-(--surface-component-specific-card-default-card) p-8 shadow-[0_6.25px_25px_0_var(--shadow-component-specific-card)]", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "mb-4 flex size-12 items-center justify-center rounded-full bg-(--s-warning-subtle)", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
           "svg",
           {
             xmlns: "http://www.w3.org/2000/svg",
@@ -4946,14 +5067,14 @@ var ErrorBoundary = class extends import_react21.Component {
             strokeLinejoin: "round",
             className: "size-10 text-(--warning)",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
-              /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
-              /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })
+              /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
+              /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
+              /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })
             ]
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("h3", { className: "mb-2 text-lg font-semibold text-(--brand-primary)", children: "Payment Widget Error" }),
-        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("p", { className: "text-center text-sm text-(--text-tertiary)", children: "Something went wrong loading the payment widget. Please refresh the page and try again." })
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("h3", { className: "mb-2 text-lg font-semibold text-(--brand-primary)", children: "Payment Widget Error" }),
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("p", { className: "text-center text-sm text-(--text-tertiary)", children: "Something went wrong loading the payment widget. Please refresh the page and try again." })
       ] }) });
     }
     return this.props.children;
@@ -4961,27 +5082,28 @@ var ErrorBoundary = class extends import_react21.Component {
 };
 
 // src/SpreePay.tsx
+init_LoginStatusContext();
 init_SpreePayActionsContext();
 init_StaticConfigContext();
 init_client();
 
 // src/hooks/useKeycloakSSO.ts
-var import_react22 = require("react");
+var import_react23 = require("react");
 var import_keycloak_js = __toESM(require("keycloak-js"), 1);
 init_logger();
 var refreshAheadSeconds = 60;
 var keycloakLogger = logger.child("keycloak");
 function useKeycloakSSO(config2) {
   const { url, realm, clientId, ssoPageURI, enabled } = config2;
-  const initRef = (0, import_react22.useRef)(false);
-  const kcRef = (0, import_react22.useRef)(null);
-  const refreshTimerRef = (0, import_react22.useRef)(null);
-  const scheduleRefreshRef = (0, import_react22.useRef)(() => {
+  const initRef = (0, import_react23.useRef)(false);
+  const kcRef = (0, import_react23.useRef)(null);
+  const refreshTimerRef = (0, import_react23.useRef)(null);
+  const scheduleRefreshRef = (0, import_react23.useRef)(() => {
   });
-  const [error, setError] = (0, import_react22.useState)(null);
-  const [isChecking, setIsChecking] = (0, import_react22.useState)(enabled);
-  const [accessToken, setAccessToken] = (0, import_react22.useState)(null);
-  const scheduleRefresh = (0, import_react22.useCallback)(() => {
+  const [error, setError] = (0, import_react23.useState)(null);
+  const [isChecking, setIsChecking] = (0, import_react23.useState)(enabled);
+  const [accessToken, setAccessToken] = (0, import_react23.useState)(null);
+  const scheduleRefresh = (0, import_react23.useCallback)(() => {
     const kc = kcRef.current;
     if (!kc || !kc.tokenParsed || !kc.tokenParsed.exp) {
       return;
@@ -5005,10 +5127,10 @@ function useKeycloakSSO(config2) {
       });
     }, delayMs);
   }, []);
-  (0, import_react22.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     scheduleRefreshRef.current = scheduleRefresh;
   }, [scheduleRefresh]);
-  (0, import_react22.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     if (initRef.current || !enabled) return;
     initRef.current = true;
     const kc = new import_keycloak_js.default({ url, realm, clientId });
@@ -5058,16 +5180,17 @@ var isTokenExpired = (token) => {
 };
 
 // src/SpreePay.tsx
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_jsx_runtime48 = require("react/jsx-runtime");
+var unauthenticatedFetcher = () => Promise.resolve(null);
 var SpreePayInner = () => {
-  const [portalEl, setPortalEl] = (0, import_react23.useState)(null);
-  const rootRef = (0, import_react23.useCallback)((node) => {
+  const [portalEl, setPortalEl] = (0, import_react24.useState)(null);
+  const rootRef = (0, import_react24.useCallback)((node) => {
     if (!node) return;
     const el = node.querySelector(":scope > .sl-spreepay__portal");
     setPortalEl(el ?? null);
   }, []);
   const { environment, tenantId, keycloakClientId, accessToken: envAccessToken, ssoPageURI } = useSpreePayEnv();
-  (0, import_react23.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     configureLogger({ environment });
     logger.logVersion();
   }, [environment]);
@@ -5081,8 +5204,7 @@ var SpreePayInner = () => {
     enabled: !envTokenValid
   });
   const _accessToken = envTokenValid ? envAccessToken : accessToken;
-  const unauthenticatedFetcher = (0, import_react23.useCallback)(() => Promise.resolve(null), []);
-  const slapiFetcher = (0, import_react23.useMemo)(() => {
+  const slapiFetcher = (0, import_react24.useMemo)(() => {
     if (_accessToken) {
       return registerApi({
         accessToken: _accessToken,
@@ -5091,15 +5213,15 @@ var SpreePayInner = () => {
       });
     }
     return unauthenticatedFetcher;
-  }, [_accessToken, staticConfig, tenantId, unauthenticatedFetcher]);
+  }, [_accessToken, staticConfig, tenantId]);
   const getContent = () => {
     if (isChecking) {
-      return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex w-full flex-col", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "mb-4 h-[315px] animate-pulse rounded-3xl bg-(--s-primary)" }),
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "h-[135px] animate-pulse rounded-3xl bg-(--s-primary)" })
+      return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex w-full flex-col", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "mb-4 h-[315px] animate-pulse rounded-3xl bg-(--s-primary)" }),
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "h-[135px] animate-pulse rounded-3xl bg-(--s-primary)" })
       ] });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
       import_swr5.SWRConfig,
       {
         value: {
@@ -5108,40 +5230,46 @@ var SpreePayInner = () => {
           revalidateOnFocus: false,
           revalidateIfStale: false
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(PortalContainerProvider, { container: portalEl, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_nice_modal_react9.default.Provider, { children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(SpreePayContent, { isLoggedIn: Boolean(_accessToken) }) }) })
+        children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(PortalContainerProvider, { container: portalEl, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_nice_modal_react9.default.Provider, { children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(LoginStatusProvider, { isLoggedIn: Boolean(_accessToken), children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(SpreePayContent, {}) }) }) })
       }
     );
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { ref: rootRef, className: cn("sl-spreepay", appProps.className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "sl-spreepay__portal" }),
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { ref: rootRef, className: cn("sl-spreepay", appProps.className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "sl-spreepay__portal" }),
     getContent()
   ] });
 };
 var SpreePay = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ErrorBoundary, { className: props.className, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(StaticConfigProvider, { props, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(SpreePayInner, {}) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ErrorBoundary, { className: props.className, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(StaticConfigProvider, { props, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(SpreePayInner, {}) }) });
 };
 
 // src/hooks/useCapture3DS.ts
-var import_react24 = require("react");
-var useCapture3DS = (searchParams) => {
-  (0, import_react24.useEffect)(() => {
-    if (typeof window !== "undefined" && window.parent && searchParams?.paymentIntent) {
-      window.parent.SP_EVENT_BUS?.emit("paymentIntent", { paymentIntent: searchParams.paymentIntent });
+var import_react25 = require("react");
+var useCapture3DS = ({ paymentIntent }) => {
+  (0, import_react25.useEffect)(() => {
+    if (typeof window !== "undefined" && window.parent && paymentIntent) {
+      window.parent.SP_EVENT_BUS?.emit("paymentIntent", { paymentIntent });
     }
-  }, [searchParams]);
+  }, [paymentIntent]);
 };
 
 // src/index.ts
 init_SpreePayActionsContext();
 init_payments();
+init_errors();
 init_logger();
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   LogLevel,
+  PaymentError,
+  PaymentErrorCode,
+  PaymentStatus,
   PaymentType,
   SpreePay,
+  SpreePayHttpError,
   SpreePayProvider,
   configureLogger,
+  isPaymentError,
   logger,
   useCapture3DS,
   useSpreePay