@superlogic/spree-pay 0.5.4 → 0.5.6

package/build/{CryptoComTab-WXKBRJF3.js → CryptoComTab-R5HTG4SN.js}

@@ -1,6 +1,6 @@
 import {
   Iframe3ds
-} from "./chunk-QJCZPYQC.js";
+} from "./chunk-Z46HQDLM.js";
 import {
   InfoBanner,
   Legal,
@@ -15,7 +15,7 @@ import {
   useSpreePayRegister,
   useSpreePaymentMethod,
   useStaticConfig
-} from "./chunk-RZ43EXC2.js";
+} from "./chunk-AY2P6ERB.js";
 
 // src/components/CryptoComTab/CryptoComTab.tsx
 import { useCallback, useEffect } from "react";

package/build/{CryptoTab-G55XLBX2.js → CryptoTab-Z5PAQFCK.js}

@@ -2,7 +2,7 @@ import {
   CheckoutButton,
   PointsSwitch,
   cn as cn2
-} from "./chunk-H7S3CTS3.js";
+} from "./chunk-I43QASEW.js";
 import {
   Dialog,
   DialogContent,
@@ -20,7 +20,7 @@ import {
   useSpreePayConfig,
   useSpreePayRegister,
   useSpreePaymentMethod
-} from "./chunk-RZ43EXC2.js";
+} from "./chunk-AY2P6ERB.js";
 
 // src/components/CryptoTab/Crypto/CryptoWrapper.tsx
 import { useMemo as useMemo2 } from "react";
@@ -635,7 +635,7 @@ var CryptoSelectModal = esm_default.create(() => {
     ] }),
     /* @__PURE__ */ jsx8(Separator2, { className: "hidden md:block" }),
     /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-4 px-5 py-5 md:px-7", children: [
-      /* @__PURE__ */ jsx8("h3", { className: "text-md font-medium text-(--brand-primary)", children: "Tokens with wallet balance" }),
+      /* @__PURE__ */ jsx8("h3", { className: "text-base font-medium text-(--brand-primary)", children: "Tokens with wallet balance" }),
       (error || nativeError) && /* @__PURE__ */ jsx8("p", { className: "text-center text-sm text-(--negative)", children: "Something wrong" }),
       /* @__PURE__ */ jsxs4("div", { className: "flex w-full flex-col gap-1", children: [
         isLoadingNative && /* @__PURE__ */ jsx8("div", { className: "h-11 animate-pulse rounded-md bg-(--s-primary)" }),
@@ -678,7 +678,7 @@ var CryptoSelectModal = esm_default.create(() => {
           );
         })
       ] }),
-      /* @__PURE__ */ jsx8("h3", { className: "text-md font-medium text-(--brand-primary)", children: "All Tokens" }),
+      /* @__PURE__ */ jsx8("h3", { className: "text-base font-medium text-(--brand-primary)", children: "All Tokens" }),
       /* @__PURE__ */ jsxs4("div", { className: "flex max-h-[40vh] w-full flex-col gap-1 overflow-y-auto", children: [
         tokensIsLoading && /* @__PURE__ */ jsxs4(Fragment2, { children: [
           /* @__PURE__ */ jsx8("div", { className: "h-11 animate-pulse rounded-md bg-(--s-primary)" }),

package/build/{chunk-RZ43EXC2.js → chunk-AY2P6ERB.js}

@@ -86,7 +86,7 @@ var settlePaymentResult = (res, fallbackMessage, failureCode = "PAYMENT_ERROR" /
 };
 
 // package.json
-var version = "0.5.4";
+var version = "0.5.6";
 
 // src/utils/logger.ts
 var LogLevel = /* @__PURE__ */ ((LogLevel2) => {
@@ -986,11 +986,11 @@ var useSpreePayConfig = () => {
   const { origin, tenantId } = useSpreePayEnv();
   const { staticConfig } = useStaticConfig();
   const key = origin ? `${URL}?origin=${origin}` : URL;
-  const { data, isLoading } = useSWR(
+  const { data, isLoading, error } = useSWR(
     key,
     (path) => publicGet(staticConfig.slapiUrl, tenantId, path)
   );
-  return { spreePayConfig: data ?? null, configIsLoading: isLoading };
+  return { spreePayConfig: data ?? null, configIsLoading: isLoading, configError: error };
 };
 
 // src/context/LoginStatusContext.tsx

package/build/{chunk-H7S3CTS3.js → chunk-I43QASEW.js}

@@ -7,7 +7,7 @@ import {
   useSpreePayEnv,
   useSpreePaymentMethod,
   useStaticConfig
-} from "./chunk-RZ43EXC2.js";
+} from "./chunk-AY2P6ERB.js";
 
 // src/components/common/PointsSwitch.tsx
 import { useId } from "react";
@@ -107,7 +107,7 @@ var PointsSwitch = (props) => {
           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]",
+            className: "flex-col items-baseline gap-0 text-base leading-[1.3] font-medium text-(--brand-primary) sm:flex-row sm:gap-2 md:text-[22px]",
             children: [
               "Use Points ",
               /* @__PURE__ */ jsx3("span", { className: "text-xs font-medium text-(--tertiary)", children: "Optional" })
@@ -256,8 +256,8 @@ var CheckoutButton = () => {
     }
     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__ */ jsxs3("div", { className: "flex w-full flex-col gap-4 p-6 text-xs leading-5 font-medium text-(--secondary) md:px-7", children: [
+  const checkoutClass = "text-(--inverse) py-4 w-full cursor-pointer rounded-4xl bg-(--s-brand) hover:bg-(--s-brand-hover) px-3 text-center text-base md:text-xl leading-6 font-medium disabled:cursor-not-allowed disabled:bg-(--s-disabled) disabled:text-(--disabled)";
+  return /* @__PURE__ */ jsxs3("div", { className: "flex w-full flex-col gap-4 p-5 leading-5 font-medium text-(--secondary) md:px-7", children: [
     /* @__PURE__ */ jsx5(Legal, {}),
     isLoggedIn ? /* @__PURE__ */ jsx5(Fragment, { children: onProcess && /* @__PURE__ */ jsx5("button", { disabled: isDisabled, onClick: onProcess, className: checkoutClass, children: getCheckoutContent() }) }) : /* @__PURE__ */ jsx5(
       "a",
@@ -268,7 +268,7 @@ var CheckoutButton = () => {
       }
     ),
     /* @__PURE__ */ jsxs3("a", { href: "https://www.spree.finance/", className: "flex items-center justify-center gap-2 hover:underline", children: [
-      /* @__PURE__ */ jsx5("p", { children: "Powered by" }),
+      /* @__PURE__ */ jsx5("p", { className: "text-xs", children: "Powered by" }),
       /* @__PURE__ */ jsx5("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", className: "h-[30px]", viewBox: "0 0 66 30", children: /* @__PURE__ */ jsx5(
         "path",
         {

package/build/{chunk-QJCZPYQC.js → chunk-Z46HQDLM.js}

@@ -5,7 +5,7 @@ import {
   DialogTitle,
   esm_default,
   useModal
-} from "./chunk-RZ43EXC2.js";
+} from "./chunk-AY2P6ERB.js";
 
 // src/modals/Iframe3ds.tsx
 import { useEffect } from "react";

package/build/index.cjs

@@ -575,7 +575,7 @@ var init_errors = __esm({
 var version;
 var init_package = __esm({
   "package.json"() {
-    version = "0.5.4";
+    version = "0.5.6";
   }
 });
 
@@ -1412,11 +1412,11 @@ var init_useSpreePayConfig = __esm({
       const { origin, tenantId } = useSpreePayEnv();
       const { staticConfig } = useStaticConfig();
       const key = origin ? `${URL}?origin=${origin}` : URL;
-      const { data, isLoading } = (0, import_swr.default)(
+      const { data, isLoading, error } = (0, import_swr.default)(
         key,
         (path) => publicGet(staticConfig.slapiUrl, tenantId, path)
       );
-      return { spreePayConfig: data ?? null, configIsLoading: isLoading };
+      return { spreePayConfig: data ?? null, configIsLoading: isLoading, configError: error };
     };
   }
 });
@@ -1706,7 +1706,7 @@ var init_PointsSwitch = __esm({
               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]",
+                className: "flex-col items-baseline gap-0 text-base leading-[1.3] font-medium text-(--brand-primary) sm:flex-row sm:gap-2 md:text-[22px]",
                 children: [
                   "Use Points ",
                   /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-xs font-medium text-(--tertiary)", children: "Optional" })
@@ -1840,8 +1840,8 @@ 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_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: [
+      const checkoutClass = "text-(--inverse) py-4 w-full cursor-pointer rounded-4xl bg-(--s-brand) hover:bg-(--s-brand-hover) px-3 text-center text-base md:text-xl leading-6 font-medium disabled:cursor-not-allowed disabled:bg-(--s-disabled) disabled:text-(--disabled)";
+      return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex w-full flex-col gap-4 p-5 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",
@@ -1852,7 +1852,7 @@ var init_CheckoutButton = __esm({
           }
         ),
         /* @__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)("p", { className: "text-xs", 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",
             {
@@ -2649,7 +2649,7 @@ var init_CryptoSelectModal = __esm({
         ] }),
         /* @__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" }),
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("h3", { className: "text-base 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)" }),
@@ -2692,7 +2692,7 @@ var init_CryptoSelectModal = __esm({
               );
             })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("h3", { className: "text-md font-medium text-(--brand-primary)", children: "All Tokens" }),
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("h3", { className: "text-base 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)" }),
@@ -3882,7 +3882,7 @@ var stripeElementClasses = {
   invalid: "focus-visible:ring-(--negative)",
   focus: "border-(--b-tertiary) ring-(--b-tertiary)/50 ring-2"
 };
-var CreditCardForm = ({ cancel, saveCard }) => {
+var CreditCardForm = ({ cancel, saveCard, showCancel }) => {
   const [cardError, setCardError] = (0, import_react10.useState)(void 0);
   const [stripeStyles, setStripeStyles] = (0, import_react10.useState)({});
   const [shouldSaveCard, setShouldSaveCard] = (0, import_react10.useState)(true);
@@ -3989,7 +3989,7 @@ var CreditCardForm = ({ cancel, 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_runtime16.jsxs)("div", { className: "flex w-full justify-end gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      showCancel && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         Button,
         {
           variant: "outline",
@@ -4014,15 +4014,32 @@ var CreditCardForm = ({ cancel, saveCard }) => {
 
 // src/components/CreditCardTab/CreditCard/CreditCard.tsx
 var import_jsx_runtime17 = require("react/jsx-runtime");
-var StripeWrapper = ({ onCancel, saveNewCard, publicKey }) => {
+var StripeWrapper = ({ onCancel, saveNewCard, publicKey, showCancel }) => {
   const stripePromise = (0, import_react11.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 }) });
+  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, showCancel }) });
 };
 var CreditCard = ({ newCards, setNewCards }) => {
   const [showForm, setShowForm] = (0, import_react11.useState)(false);
   const isLoggedIn = useIsLoggedIn();
   const { selectedPaymentMethod, setSelectedPaymentMethod } = useSpreePaymentMethod();
   const { spreePayConfig } = useSpreePayConfig();
+  const { cards, cardsIsLoading } = useCards();
+  const canUseForm = isLoggedIn && Boolean(spreePayConfig?.stripePublicKey);
+  const hasCards = cards.length + newCards.length > 0;
+  const formVisible = canUseForm && (showForm || !hasCards && !cardsIsLoading);
+  const didAutoSelect = (0, import_react11.useRef)(false);
+  (0, import_react11.useEffect)(() => {
+    if (!isLoggedIn) {
+      didAutoSelect.current = false;
+      return;
+    }
+    if (didAutoSelect.current || cardsIsLoading) return;
+    didAutoSelect.current = true;
+    const alreadySelected = selectedPaymentMethod.type === "CREDIT_CARD" /* CREDIT_CARD */ && Boolean(selectedPaymentMethod.method);
+    if (!alreadySelected && cards.length > 0) {
+      setSelectedPaymentMethod({ ...selectedPaymentMethod, type: "CREDIT_CARD" /* CREDIT_CARD */, method: cards[0] });
+    }
+  }, [isLoggedIn, cardsIsLoading, cards, selectedPaymentMethod, setSelectedPaymentMethod]);
   const setCard = (card) => {
     const isAlreadySelected = selectedPaymentMethod?.type === "CREDIT_CARD" /* CREDIT_CARD */ && selectedPaymentMethod.method?.id === card.id;
     setSelectedPaymentMethod({
@@ -4055,7 +4072,7 @@ var CreditCard = ({ newCards, setNewCards }) => {
   };
   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: [
+    !formVisible && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
         CardsList,
         {
@@ -4070,13 +4087,21 @@ var CreditCard = ({ newCards, setNewCards }) => {
         "button",
         {
           onClick: handleAddNewCard,
-          disabled: !isLoggedIn || !spreePayConfig?.stripePublicKey,
-          className: "text-md text-(--brand-primary) hover:underline disabled:cursor-not-allowed disabled:no-underline disabled:opacity-50",
+          disabled: !canUseForm,
+          className: "text-base text-(--brand-primary) hover:underline disabled:cursor-not-allowed disabled:no-underline disabled:opacity-50",
           children: "Add new card"
         }
       )
     ] }),
-    isLoggedIn && spreePayConfig?.stripePublicKey && showForm && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(StripeWrapper, { onCancel: handleCancel, saveNewCard, publicKey: spreePayConfig.stripePublicKey })
+    formVisible && spreePayConfig?.stripePublicKey && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      StripeWrapper,
+      {
+        onCancel: handleCancel,
+        saveNewCard,
+        publicKey: spreePayConfig.stripePublicKey,
+        showCancel: hasCards
+      }
+    )
   ] });
 };
 
@@ -4085,6 +4110,7 @@ var import_react16 = require("react");
 init_LoginStatusContext();
 init_SpreePayActionsContext();
 init_StaticConfigContext();
+init_useSlapiBalance();
 init_useSpreePayConfig();
 init_common();
 
@@ -5152,7 +5178,7 @@ var PointsSelector = (props) => {
                 readOnly: true,
                 name: "points amount",
                 value: pointsValue,
-                className: "sm:text-md min-w-[50px] bg-(--s-default) px-1 text-center text-xs font-medium sm:min-w-[100px] sm:px-2",
+                className: "min-w-[50px] bg-(--s-default) px-1 text-center text-xs font-medium sm:min-w-[100px] sm:px-2 sm:text-base",
                 style: { width: `${pointsValue.length}ch` },
                 onClick: (e) => e.stopPropagation()
               }
@@ -5163,8 +5189,10 @@ var PointsSelector = (props) => {
             Slider2,
             {
               value: [splitTokens],
-              onValueCommit: ([v]) => handleCommit(v),
-              onValueChange: ([v]) => setSplitTokens(v),
+              onValueChange: ([v]) => {
+                setSplitTokens(v);
+                handleCommit(v);
+              },
               onPointerDown: (e) => e.stopPropagation(),
               min,
               max,
@@ -5178,7 +5206,7 @@ var PointsSelector = (props) => {
                 readOnly: true,
                 name: "card amount",
                 value: cashDisplayValue,
-                className: "sm:text-md min-w-[50px] bg-(--s-default) px-1 text-center text-xs font-medium sm:min-w-[100px] sm:px-2",
+                className: "min-w-[50px] bg-(--s-default) px-1 text-center text-xs font-medium sm:min-w-[100px] sm:px-2 sm:text-base",
                 style: { width: `${cashDisplayValue.length}ch` },
                 onClick: (e) => e.stopPropagation()
               }
@@ -5264,8 +5292,21 @@ var Points = () => {
   const [usePoints, setUsePoints] = (0, import_react16.useState)(false);
   const [selectedPointsType, setSelectedPointsType] = (0, import_react16.useState)(null);
   const { setSelectedPaymentMethod, selectedPaymentMethod } = useSpreePaymentMethod();
-  const { spreePayConfig } = useSpreePayConfig();
+  const { spreePayConfig, configIsLoading } = useSpreePayConfig();
   const { appProps } = useStaticConfig();
+  const { balance } = useSlapiBalance();
+  const { useWeb3Points } = useSpreePayEnv();
+  const pointsDisabled = !isLoggedIn || !spreePayConfig?.creditCard.enabled || !spreePayConfig?.creditCard.points || appProps.disabledPoints;
+  const [didInit, setDidInit] = (0, import_react16.useState)(false);
+  if (!isLoggedIn) {
+    if (didInit) setDidInit(false);
+  } else if (!didInit && balance !== void 0 && !configIsLoading) {
+    setDidInit(true);
+    if (!useWeb3Points && !pointsDisabled && balance.availablePoints > 0) {
+      setUsePoints(true);
+      setSelectedPointsType("air");
+    }
+  }
   const handleTogglePoints = (enabled) => {
     setUsePoints(enabled);
     if (!enabled) {
@@ -5280,7 +5321,7 @@ var Points = () => {
         value: usePoints,
         onChange: handleTogglePoints,
         message: spreePayConfig?.creditCard.pointsInfoMessage,
-        disabled: !isLoggedIn || !spreePayConfig?.creditCard.enabled || !spreePayConfig?.creditCard.points || appProps.disabledPoints
+        disabled: pointsDisabled
       }
     ),
     usePoints && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
@@ -5390,12 +5431,13 @@ var TabButton = ({ isDisabled = false, isActive, children, onClick }) => {
 };
 var TabButtons = (props) => {
   const { value, onChange } = props;
-  const { spreePayConfig, configIsLoading } = useSpreePayConfig();
+  const { spreePayConfig, configIsLoading, configError } = useSpreePayConfig();
   const handleChange = (type) => () => {
     if (value !== type) {
       onChange({ type, method: null });
     }
   };
+  if (configError) return null;
   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: [
@@ -5406,7 +5448,7 @@ var TabButtons = (props) => {
           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_runtime30.jsx)("p", { className: "md:text-md text-sm font-medium", children: "Card" })
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "text-sm font-medium md:text-base", children: "Card" })
     ] }),
     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)(
@@ -5416,7 +5458,7 @@ var TabButtons = (props) => {
           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_runtime30.jsx)("p", { className: "md:text-md text-sm font-medium", children: "Crypto" })
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "text-sm font-medium md:text-base", children: "Crypto" })
     ] }),
     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: [
@@ -5435,7 +5477,7 @@ var TabButtons = (props) => {
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "md:text-md text-sm font-medium", children: "Crypto.com Pay" })
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "text-sm font-medium md:text-base", children: "Crypto.com Pay" })
     ] })
   ] });
 };
@@ -5443,6 +5485,8 @@ var TabButtons = (props) => {
 // src/SpreePayContent.tsx
 init_LoginStatusContext();
 init_SpreePayActionsContext();
+init_useSpreePayConfig();
+init_utils();
 var import_jsx_runtime46 = require("react/jsx-runtime");
 var CryptoTab2 = (0, import_react22.lazy)(() => Promise.resolve().then(() => (init_CryptoTab2(), CryptoTab_exports)).then((module2) => ({ default: module2.CryptoTab })));
 var CryptoComTab2 = (0, import_react22.lazy)(
@@ -5455,22 +5499,36 @@ var TabLoadingFallback = () => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("di
 var SpreePayContent = () => {
   const isLoggedIn = useIsLoggedIn();
   const { selectedPaymentMethod, setSelectedPaymentMethod } = useSpreePaymentMethod();
+  const { configError } = useSpreePayConfig();
   (0, import_react22.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_runtime46.jsx)(CreditCardTab, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_react22.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, {})
-    ] })
-  ] });
+  return (
+    // Config failed: inert disables the whole widget and drops it from tab order + a11y.
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+      "div",
+      {
+        inert: !!configError,
+        className: cn(
+          "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)]",
+          configError && "opacity-75"
+        ),
+        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_runtime46.jsx)(CreditCardTab, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_react22.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

package/build/index.css

@@ -403,9 +403,6 @@
 .sl-spreepay .h-12 {
   height: calc(var(--spacing) * 12);
 }
-.sl-spreepay .h-14 {
-  height: calc(var(--spacing) * 14);
-}
 .sl-spreepay .h-15 {
   height: calc(var(--spacing) * 15);
 }
@@ -727,6 +724,9 @@
 .sl-spreepay .p-2 {
   padding: calc(var(--spacing) * 2);
 }
+.sl-spreepay .p-5 {
+  padding: calc(var(--spacing) * 5);
+}
 .sl-spreepay .p-6 {
   padding: calc(var(--spacing) * 6);
 }
@@ -926,6 +926,9 @@
 .sl-spreepay .opacity-70 {
   opacity: 70%;
 }
+.sl-spreepay .opacity-75 {
+  opacity: 75%;
+}
 .sl-spreepay .shadow-\(--primary\)\/20 {
   --tw-shadow-alpha: 20%;
   --tw-shadow: var(--primary);
@@ -1619,6 +1622,12 @@
     text-align: left;
   }
 }
+.sl-spreepay .sm\:text-base {
+  @media (width >= 40rem) {
+    font-size: var(--text-base);
+    line-height: var(--tw-leading, var(--text-base--line-height));
+  }
+}
 .sl-spreepay .sm\:text-sm {
   @media (width >= 40rem) {
     font-size: var(--text-sm);
@@ -1660,12 +1669,24 @@
     padding-bottom: calc(var(--spacing) * 7);
   }
 }
+.sl-spreepay .md\:text-base {
+  @media (width >= 48rem) {
+    font-size: var(--text-base);
+    line-height: var(--tw-leading, var(--text-base--line-height));
+  }
+}
 .sl-spreepay .md\:text-sm {
   @media (width >= 48rem) {
     font-size: var(--text-sm);
     line-height: var(--tw-leading, var(--text-sm--line-height));
   }
 }
+.sl-spreepay .md\:text-xl {
+  @media (width >= 48rem) {
+    font-size: var(--text-xl);
+    line-height: var(--tw-leading, var(--text-xl--line-height));
+  }
+}
 .sl-spreepay .md\:text-\[22px\] {
   @media (width >= 48rem) {
     font-size: 22px;

package/build/index.js

@@ -8,10 +8,10 @@ import {
   getSplitAmount,
   getTransactionFee,
   useSlapiBalance
-} from "./chunk-H7S3CTS3.js";
+} from "./chunk-I43QASEW.js";
 import {
   Iframe3ds
-} from "./chunk-QJCZPYQC.js";
+} from "./chunk-Z46HQDLM.js";
 import {
   InfoBanner,
   LogLevel,
@@ -43,17 +43,17 @@ import {
   useSpreePayRegister,
   useSpreePaymentMethod,
   useStaticConfig
-} from "./chunk-RZ43EXC2.js";
+} from "./chunk-AY2P6ERB.js";
 
 // src/SpreePay.tsx
-import { useCallback as useCallback8, useEffect as useEffect8, useMemo as useMemo9, useState as useState12 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect9, useMemo as useMemo9, useState as useState12 } from "react";
 import { SWRConfig } from "swr";
 
 // src/SpreePayContent.tsx
-import { Suspense, lazy, useEffect as useEffect6 } from "react";
+import { Suspense, lazy, useEffect as useEffect7 } from "react";
 
 // src/components/CreditCardTab/CreditCardTab.tsx
-import { useCallback as useCallback6, useEffect as useEffect5, useState as useState10 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect6, useState as useState10 } from "react";
 
 // src/hooks/payments/useCardPayment.ts
 var cardPaymentLogger = logger.child("card-payment");
@@ -567,7 +567,7 @@ var useCards = () => {
 };
 
 // src/components/CreditCardTab/CreditCard/CreditCard.tsx
-import { useCallback as useCallback2, useMemo as useMemo3, useState as useState3 } from "react";
+import { useCallback as useCallback2, useEffect, useMemo as useMemo3, useRef, useState as useState3 } from "react";
 import { Elements } from "@stripe/react-stripe-js";
 import { loadStripe } from "@stripe/stripe-js";
 
@@ -744,7 +744,7 @@ var stripeElementClasses = {
   invalid: "focus-visible:ring-(--negative)",
   focus: "border-(--b-tertiary) ring-(--b-tertiary)/50 ring-2"
 };
-var CreditCardForm = ({ cancel, saveCard }) => {
+var CreditCardForm = ({ cancel, saveCard, showCancel }) => {
   const [cardError, setCardError] = useState2(void 0);
   const [stripeStyles, setStripeStyles] = useState2({});
   const [shouldSaveCard, setShouldSaveCard] = useState2(true);
@@ -851,7 +851,7 @@ var CreditCardForm = ({ cancel, saveCard }) => {
       /* @__PURE__ */ jsx4(Label, { className: "text-sm font-medium", htmlFor: "saveCard", children: "Save card for future purchases" })
     ] }),
     /* @__PURE__ */ jsxs2("div", { className: "flex w-full justify-end gap-2", children: [
-      /* @__PURE__ */ jsx4(
+      showCancel && /* @__PURE__ */ jsx4(
         Button,
         {
           variant: "outline",
@@ -876,15 +876,32 @@ var CreditCardForm = ({ cancel, saveCard }) => {
 
 // src/components/CreditCardTab/CreditCard/CreditCard.tsx
 import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
-var StripeWrapper = ({ onCancel, saveNewCard, publicKey }) => {
+var StripeWrapper = ({ onCancel, saveNewCard, publicKey, showCancel }) => {
   const stripePromise = useMemo3(() => loadStripe(publicKey), [publicKey]);
-  return /* @__PURE__ */ jsx5(Elements, { stripe: stripePromise, children: /* @__PURE__ */ jsx5(CreditCardForm, { cancel: onCancel, saveCard: saveNewCard }) });
+  return /* @__PURE__ */ jsx5(Elements, { stripe: stripePromise, children: /* @__PURE__ */ jsx5(CreditCardForm, { cancel: onCancel, saveCard: saveNewCard, showCancel }) });
 };
 var CreditCard = ({ newCards, setNewCards }) => {
   const [showForm, setShowForm] = useState3(false);
   const isLoggedIn = useIsLoggedIn();
   const { selectedPaymentMethod, setSelectedPaymentMethod } = useSpreePaymentMethod();
   const { spreePayConfig } = useSpreePayConfig();
+  const { cards, cardsIsLoading } = useCards();
+  const canUseForm = isLoggedIn && Boolean(spreePayConfig?.stripePublicKey);
+  const hasCards = cards.length + newCards.length > 0;
+  const formVisible = canUseForm && (showForm || !hasCards && !cardsIsLoading);
+  const didAutoSelect = useRef(false);
+  useEffect(() => {
+    if (!isLoggedIn) {
+      didAutoSelect.current = false;
+      return;
+    }
+    if (didAutoSelect.current || cardsIsLoading) return;
+    didAutoSelect.current = true;
+    const alreadySelected = selectedPaymentMethod.type === "CREDIT_CARD" /* CREDIT_CARD */ && Boolean(selectedPaymentMethod.method);
+    if (!alreadySelected && cards.length > 0) {
+      setSelectedPaymentMethod({ ...selectedPaymentMethod, type: "CREDIT_CARD" /* CREDIT_CARD */, method: cards[0] });
+    }
+  }, [isLoggedIn, cardsIsLoading, cards, selectedPaymentMethod, setSelectedPaymentMethod]);
   const setCard = (card) => {
     const isAlreadySelected = selectedPaymentMethod?.type === "CREDIT_CARD" /* CREDIT_CARD */ && selectedPaymentMethod.method?.id === card.id;
     setSelectedPaymentMethod({
@@ -917,7 +934,7 @@ var CreditCard = ({ newCards, setNewCards }) => {
   };
   return /* @__PURE__ */ jsxs3("div", { className: "flex flex-col items-baseline gap-4", children: [
     /* @__PURE__ */ jsx5("h3", { className: "text-[22px] leading-9 font-medium text-(--brand-primary)", children: "Your Cards" }),
-    !showForm && /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    !formVisible && /* @__PURE__ */ jsxs3(Fragment2, { children: [
       /* @__PURE__ */ jsx5(
         CardsList,
         {
@@ -932,13 +949,21 @@ var CreditCard = ({ newCards, setNewCards }) => {
         "button",
         {
           onClick: handleAddNewCard,
-          disabled: !isLoggedIn || !spreePayConfig?.stripePublicKey,
-          className: "text-md text-(--brand-primary) hover:underline disabled:cursor-not-allowed disabled:no-underline disabled:opacity-50",
+          disabled: !canUseForm,
+          className: "text-base text-(--brand-primary) hover:underline disabled:cursor-not-allowed disabled:no-underline disabled:opacity-50",
           children: "Add new card"
         }
       )
     ] }),
-    isLoggedIn && spreePayConfig?.stripePublicKey && showForm && /* @__PURE__ */ jsx5(StripeWrapper, { onCancel: handleCancel, saveNewCard, publicKey: spreePayConfig.stripePublicKey })
+    formVisible && spreePayConfig?.stripePublicKey && /* @__PURE__ */ jsx5(
+      StripeWrapper,
+      {
+        onCancel: handleCancel,
+        saveNewCard,
+        publicKey: spreePayConfig.stripePublicKey,
+        showCancel: hasCards
+      }
+    )
   ] });
 };
 
@@ -946,7 +971,7 @@ var CreditCard = ({ newCards, setNewCards }) => {
 import { useState as useState9 } from "react";
 
 // src/components/CreditCardTab/Points/SplitBlock.tsx
-import { useCallback as useCallback5, useEffect as useEffect4, useRef as useRef5, useState as useState8 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect5, useRef as useRef6, useState as useState8 } from "react";
 import { BUILD_ENV as BUILD_ENV2 } from "@mocanetwork/airkit";
 
 // src/components/CreditCardTab/Points/PointsSelector.tsx
@@ -1993,7 +2018,7 @@ var PointsSelector = (props) => {
                 readOnly: true,
                 name: "points amount",
                 value: pointsValue,
-                className: "sm:text-md min-w-[50px] bg-(--s-default) px-1 text-center text-xs font-medium sm:min-w-[100px] sm:px-2",
+                className: "min-w-[50px] bg-(--s-default) px-1 text-center text-xs font-medium sm:min-w-[100px] sm:px-2 sm:text-base",
                 style: { width: `${pointsValue.length}ch` },
                 onClick: (e) => e.stopPropagation()
               }
@@ -2004,8 +2029,10 @@ var PointsSelector = (props) => {
             Slider2,
             {
               value: [splitTokens],
-              onValueCommit: ([v]) => handleCommit(v),
-              onValueChange: ([v]) => setSplitTokens(v),
+              onValueChange: ([v]) => {
+                setSplitTokens(v);
+                handleCommit(v);
+              },
               onPointerDown: (e) => e.stopPropagation(),
               min,
               max,
@@ -2019,7 +2046,7 @@ var PointsSelector = (props) => {
                 readOnly: true,
                 name: "card amount",
                 value: cashDisplayValue,
-                className: "sm:text-md min-w-[50px] bg-(--s-default) px-1 text-center text-xs font-medium sm:min-w-[100px] sm:px-2",
+                className: "min-w-[50px] bg-(--s-default) px-1 text-center text-xs font-medium sm:min-w-[100px] sm:px-2 sm:text-base",
                 style: { width: `${cashDisplayValue.length}ch` },
                 onClick: (e) => e.stopPropagation()
               }
@@ -2047,7 +2074,7 @@ var SplitBlock = (props) => {
   const { useWeb3Points, environment } = useSpreePayEnv();
   const hasForeignCurrency = !!(currencyCode && exchangeRate && foreignCurrencyAmount);
   const formatPointsValue = (usd) => hasForeignCurrency ? formatCurrency(usd / exchangeRate, currencyCode) : formatCurrency(usd);
-  const prevPointsChainRef = useRef5(spreePayConfig?.pointsChain);
+  const prevPointsChainRef = useRef6(spreePayConfig?.pointsChain);
   const initWallet = useCallback5(
     async (pointsChain) => {
       if (!pointsChain) return;
@@ -2071,7 +2098,7 @@ var SplitBlock = (props) => {
     },
     [onToggle, environment]
   );
-  useEffect4(() => {
+  useEffect5(() => {
     if (!useWeb3Points) return;
     const pointsChainChanged = prevPointsChainRef.current !== spreePayConfig?.pointsChain;
     prevPointsChainRef.current = spreePayConfig?.pointsChain;
@@ -2105,8 +2132,21 @@ var Points = () => {
   const [usePoints, setUsePoints] = useState9(false);
   const [selectedPointsType, setSelectedPointsType] = useState9(null);
   const { setSelectedPaymentMethod, selectedPaymentMethod } = useSpreePaymentMethod();
-  const { spreePayConfig } = useSpreePayConfig();
+  const { spreePayConfig, configIsLoading } = useSpreePayConfig();
   const { appProps } = useStaticConfig();
+  const { balance } = useSlapiBalance();
+  const { useWeb3Points } = useSpreePayEnv();
+  const pointsDisabled = !isLoggedIn || !spreePayConfig?.creditCard.enabled || !spreePayConfig?.creditCard.points || appProps.disabledPoints;
+  const [didInit, setDidInit] = useState9(false);
+  if (!isLoggedIn) {
+    if (didInit) setDidInit(false);
+  } else if (!didInit && balance !== void 0 && !configIsLoading) {
+    setDidInit(true);
+    if (!useWeb3Points && !pointsDisabled && balance.availablePoints > 0) {
+      setUsePoints(true);
+      setSelectedPointsType("air");
+    }
+  }
   const handleTogglePoints = (enabled) => {
     setUsePoints(enabled);
     if (!enabled) {
@@ -2121,7 +2161,7 @@ var Points = () => {
         value: usePoints,
         onChange: handleTogglePoints,
         message: spreePayConfig?.creditCard.pointsInfoMessage,
-        disabled: !isLoggedIn || !spreePayConfig?.creditCard.enabled || !spreePayConfig?.creditCard.points || appProps.disabledPoints
+        disabled: pointsDisabled
       }
     ),
     usePoints && /* @__PURE__ */ jsx15(
@@ -2199,7 +2239,7 @@ var CreditCardTab = () => {
       mutateBalance
     ]
   );
-  useEffect5(() => {
+  useEffect6(() => {
     register(handlePay);
   }, [register, handlePay]);
   return /* @__PURE__ */ jsxs9("div", { children: [
@@ -2229,12 +2269,13 @@ var TabButton = ({ isDisabled = false, isActive, children, onClick }) => {
 };
 var TabButtons = (props) => {
   const { value, onChange } = props;
-  const { spreePayConfig, configIsLoading } = useSpreePayConfig();
+  const { spreePayConfig, configIsLoading, configError } = useSpreePayConfig();
   const handleChange = (type) => () => {
     if (value !== type) {
       onChange({ type, method: null });
     }
   };
+  if (configError) return null;
   return /* @__PURE__ */ jsxs10("div", { className: "flex w-full gap-4 overflow-x-auto px-5 py-2 md:px-7", children: [
     configIsLoading && /* @__PURE__ */ jsx17("div", { className: "h-[74px] w-[180px] animate-pulse rounded-md bg-(--s-primary)" }),
     spreePayConfig?.creditCard.enabled && /* @__PURE__ */ jsxs10(TabButton, { onClick: handleChange("CREDIT_CARD" /* CREDIT_CARD */), isActive: value === "CREDIT_CARD" /* CREDIT_CARD */, children: [
@@ -2245,7 +2286,7 @@ var TabButtons = (props) => {
           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__ */ jsx17("p", { className: "md:text-md text-sm font-medium", children: "Card" })
+      /* @__PURE__ */ jsx17("p", { className: "text-sm font-medium md:text-base", children: "Card" })
     ] }),
     spreePayConfig?.crypto.enabled && /* @__PURE__ */ jsxs10(TabButton, { onClick: handleChange("CRYPTO" /* CRYPTO */), isActive: value === "CRYPTO" /* CRYPTO */, children: [
       /* @__PURE__ */ jsx17("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", className: "size-8", viewBox: "0 0 32 32", children: /* @__PURE__ */ jsx17(
@@ -2255,7 +2296,7 @@ var TabButtons = (props) => {
           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__ */ jsx17("p", { className: "md:text-md text-sm font-medium", children: "Crypto" })
+      /* @__PURE__ */ jsx17("p", { className: "text-sm font-medium md:text-base", children: "Crypto" })
     ] }),
     spreePayConfig?.cryptoCom.enabled && /* @__PURE__ */ jsxs10(TabButton, { onClick: handleChange("CDC" /* CDC */), isActive: value === "CDC" /* CDC */, children: [
       /* @__PURE__ */ jsxs10("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", className: "h-8 w-11", viewBox: "0 0 44 32", children: [
@@ -2274,16 +2315,16 @@ var TabButtons = (props) => {
           }
         )
       ] }),
-      /* @__PURE__ */ jsx17("p", { className: "md:text-md text-sm font-medium", children: "Crypto.com Pay" })
+      /* @__PURE__ */ jsx17("p", { className: "text-sm font-medium md:text-base", children: "Crypto.com Pay" })
     ] })
   ] });
 };
 
 // src/SpreePayContent.tsx
 import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
-var CryptoTab = lazy(() => import("./CryptoTab-G55XLBX2.js").then((module) => ({ default: module.CryptoTab })));
+var CryptoTab = lazy(() => import("./CryptoTab-Z5PAQFCK.js").then((module) => ({ default: module.CryptoTab })));
 var CryptoComTab = lazy(
-  () => import("./CryptoComTab-WXKBRJF3.js").then((module) => ({ default: module.CryptoComTab }))
+  () => import("./CryptoComTab-R5HTG4SN.js").then((module) => ({ default: module.CryptoComTab }))
 );
 var TabLoadingFallback = () => /* @__PURE__ */ jsx18("div", { className: "flex items-center justify-center px-5 py-8 md:px-7", children: /* @__PURE__ */ jsxs11("div", { className: "flex flex-col items-center gap-3", children: [
   /* @__PURE__ */ jsx18("div", { className: "h-8 w-8 animate-spin rounded-full border-4 border-(--border-component-specific-card) border-t-(--brand-primary)" }),
@@ -2292,22 +2333,36 @@ var TabLoadingFallback = () => /* @__PURE__ */ jsx18("div", { className: "flex i
 var SpreePayContent = () => {
   const isLoggedIn = useIsLoggedIn();
   const { selectedPaymentMethod, setSelectedPaymentMethod } = useSpreePaymentMethod();
-  useEffect6(() => {
+  const { configError } = useSpreePayConfig();
+  useEffect7(() => {
     if (!isLoggedIn) {
       setSelectedPaymentMethod({ type: "CREDIT_CARD" /* CREDIT_CARD */, method: null });
     }
   }, [isLoggedIn, setSelectedPaymentMethod]);
-  return /* @__PURE__ */ jsxs11("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__ */ jsxs11("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__ */ jsx18("h2", { className: "px-5 text-[28px] leading-8 font-medium text-(--brand-primary) md:px-7", children: "Choose a payment method" }),
-      /* @__PURE__ */ jsx18(TabButtons, { value: selectedPaymentMethod.type, onChange: setSelectedPaymentMethod })
-    ] }),
-    selectedPaymentMethod.type === "CREDIT_CARD" /* CREDIT_CARD */ && /* @__PURE__ */ jsx18(CreditCardTab, {}),
-    /* @__PURE__ */ jsxs11(Suspense, { fallback: /* @__PURE__ */ jsx18(TabLoadingFallback, {}), children: [
-      selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && /* @__PURE__ */ jsx18(CryptoTab, {}),
-      selectedPaymentMethod.type === "CDC" /* CDC */ && /* @__PURE__ */ jsx18(CryptoComTab, {})
-    ] })
-  ] });
+  return (
+    // Config failed: inert disables the whole widget and drops it from tab order + a11y.
+    /* @__PURE__ */ jsxs11(
+      "div",
+      {
+        inert: !!configError,
+        className: cn(
+          "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)]",
+          configError && "opacity-75"
+        ),
+        children: [
+          /* @__PURE__ */ jsxs11("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__ */ jsx18("h2", { className: "px-5 text-[28px] leading-8 font-medium text-(--brand-primary) md:px-7", children: "Choose a payment method" }),
+            /* @__PURE__ */ jsx18(TabButtons, { value: selectedPaymentMethod.type, onChange: setSelectedPaymentMethod })
+          ] }),
+          selectedPaymentMethod.type === "CREDIT_CARD" /* CREDIT_CARD */ && /* @__PURE__ */ jsx18(CreditCardTab, {}),
+          /* @__PURE__ */ jsxs11(Suspense, { fallback: /* @__PURE__ */ jsx18(TabLoadingFallback, {}), children: [
+            selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && /* @__PURE__ */ jsx18(CryptoTab, {}),
+            selectedPaymentMethod.type === "CDC" /* CDC */ && /* @__PURE__ */ jsx18(CryptoComTab, {})
+          ] })
+        ]
+      }
+    )
+  );
 };
 
 // src/components/ErrorBoundary.tsx
@@ -2359,16 +2414,16 @@ var ErrorBoundary = class extends Component {
 };
 
 // src/hooks/useKeycloakSSO.ts
-import { useCallback as useCallback7, useEffect as useEffect7, useRef as useRef6, useState as useState11 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect8, useRef as useRef7, useState as useState11 } from "react";
 import Keycloak from "keycloak-js";
 var refreshAheadSeconds = 60;
 var keycloakLogger = logger.child("keycloak");
 function useKeycloakSSO(config) {
   const { url, realm, clientId, ssoPageURI, enabled } = config;
-  const initRef = useRef6(false);
-  const kcRef = useRef6(null);
-  const refreshTimerRef = useRef6(null);
-  const scheduleRefreshRef = useRef6(() => {
+  const initRef = useRef7(false);
+  const kcRef = useRef7(null);
+  const refreshTimerRef = useRef7(null);
+  const scheduleRefreshRef = useRef7(() => {
   });
   const [error, setError] = useState11(null);
   const [isChecking, setIsChecking] = useState11(enabled);
@@ -2397,10 +2452,10 @@ function useKeycloakSSO(config) {
       });
     }, delayMs);
   }, []);
-  useEffect7(() => {
+  useEffect8(() => {
     scheduleRefreshRef.current = scheduleRefresh;
   }, [scheduleRefresh]);
-  useEffect7(() => {
+  useEffect8(() => {
     if (initRef.current || !enabled) return;
     initRef.current = true;
     const kc = new Keycloak({ url, realm, clientId });
@@ -2455,7 +2510,7 @@ var SpreePayInner = () => {
     setPortalEl(el ?? null);
   }, []);
   const { environment, tenantId, keycloakClientId, accessToken: envAccessToken, ssoPageURI } = useSpreePayEnv();
-  useEffect8(() => {
+  useEffect9(() => {
     configureLogger({ environment });
     logger.logVersion();
   }, [environment]);
@@ -2509,9 +2564,9 @@ var SpreePay = (props) => {
 };
 
 // src/hooks/useCapture3DS.ts
-import { useEffect as useEffect9 } from "react";
+import { useEffect as useEffect10 } from "react";
 var useCapture3DS = ({ paymentIntent }) => {
-  useEffect9(() => {
+  useEffect10(() => {
     if (typeof window !== "undefined" && window.parent && paymentIntent) {
       window.parent.SP_EVENT_BUS?.emit("paymentIntent", { paymentIntent });
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@superlogic/spree-pay",
-  "version": "0.5.4",
+  "version": "0.5.6",
   "description": "Spree-pay React component and utilities",
   "private": false,
   "type": "module",