@superlogic/spree-pay 0.1.21 → 0.1.23

package/build/index.cjs

@@ -62,7 +62,7 @@ var PaymentError = class extends Error {
 var PaymentType = /* @__PURE__ */ ((PaymentType2) => {
   PaymentType2["CREDIT_CARD"] = "CREDIT_CARD";
   PaymentType2["CRYPTO"] = "CRYPTO";
-  PaymentType2["SPLIT"] = "SPLIT";
+  PaymentType2["CREDIT_CARD_SPLIT"] = "SPLIT";
   PaymentType2["POINTS"] = "POINTS";
   return PaymentType2;
 })(PaymentType || {});
@@ -141,48 +141,36 @@ var CONFIG = {
     bookit: {
       slapiUrl: "https://slapi.dev.superlogic.com",
       keycloakUrl: "https://auth.dev.join.bookit.com",
-      keycloakClientId: "oneof-next",
-      pointsConversionRatio: 100,
-      pointsTitle: "AIR SP"
+      keycloakClientId: "oneof-next"
     },
     moca: {
       slapiUrl: "https://slapi.dev.air.shop",
       keycloakUrl: "https://login.dev.air.shop",
-      keycloakClientId: "oneof-next",
-      pointsConversionRatio: 100,
-      pointsTitle: "AIR SP"
+      keycloakClientId: "oneof-next"
     }
   },
   stg: {
     bookit: {
       slapiUrl: "https://slapi.stg.superlogic.com",
       keycloakUrl: "https://auth.stg.join.bookit.com",
-      keycloakClientId: "oneof-next",
-      pointsConversionRatio: 100,
-      pointsTitle: "AIR SP"
+      keycloakClientId: "oneof-next"
     },
     moca: {
       slapiUrl: "https://slapi.stg.air.shop",
       keycloakUrl: "https://login.stg.air.shop",
-      keycloakClientId: "oneof-next",
-      pointsConversionRatio: 100,
-      pointsTitle: "AIR SP"
+      keycloakClientId: "oneof-next"
     }
   },
   prod: {
     bookit: {
       slapiUrl: "https://slapi.superlogic.com",
       keycloakUrl: "https://auth.join.bookit.com",
-      keycloakClientId: "oneof-next",
-      pointsConversionRatio: 100,
-      pointsTitle: "AIR SP"
+      keycloakClientId: "oneof-next"
     },
     moca: {
       slapiUrl: "https://slapi.air.shop",
       keycloakUrl: "https://login.air.shop",
-      keycloakClientId: "oneof-next",
-      pointsConversionRatio: 100,
-      pointsTitle: "AIR SP"
+      keycloakClientId: "oneof-next"
     }
   }
 };
@@ -210,7 +198,20 @@ var useStaticConfig = () => {
 var import_swr = __toESM(require("swr"), 1);
 var useSpreePayConfig = () => {
   const { data, isLoading } = (0, import_swr.default)("/v1/tenants/configs/spree-pay");
-  return { spreePayConfig: data, configIsLoading: isLoading };
+  return {
+    spreePayConfig: data ? {
+      ...data,
+      rainbowProjectId: data.rainbowProjectId ?? "3fdcd5ff50cb84917cd05e40146975d8",
+      rainbowAppName: data.rainbowAppName ?? "AIR Shop",
+      pointsTitle: data.pointsTitle ?? "AIR SP",
+      pointsConversionRatio: data.pointsConversionRatio ?? 100,
+      crypto: {
+        ...data.crypto,
+        oneInchAggregationRouter: data.crypto?.oneInchAggregationRouter || "0x111111125421ca6dc452d289314280a0f8842a65"
+      }
+    } : null,
+    configIsLoading: isLoading
+  };
 };
 
 // src/lib/utils.ts
@@ -277,7 +278,7 @@ var formatUSD = (amount, currency = "USD") => {
   }).format(amount);
   return formattedAmount;
 };
-var formatPoints = (amount, pointsTitle = "Pts") => {
+var formatPoints = (amount, pointsTitle = "") => {
   const formattedAmount = new Intl.NumberFormat("en-US", {
     notation: "compact",
     style: "decimal",
@@ -297,7 +298,7 @@ var formatCoin = (amount, currency = "USDC") => {
 
 // src/utils/split.ts
 var getSplitAmount = (amount, splitTokens, pointsConversionRatio) => {
-  if (!Number.isFinite(amount) || !Number.isFinite(splitTokens) || !Number.isFinite(pointsConversionRatio)) {
+  if (!Number.isFinite(amount) || !Number.isFinite(splitTokens) || !pointsConversionRatio || !Number.isFinite(pointsConversionRatio)) {
     return amount;
   }
   if (pointsConversionRatio <= 0) return amount;
@@ -319,13 +320,13 @@ var getTransactionFee = (amount = 0, transactionFeePercentage) => {
 // src/components/CheckoutButton.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var CheckoutButton = ({ isLoggedIn }) => {
-  const { staticConfig, appProps } = useStaticConfig();
+  const { appProps } = useStaticConfig();
   const { amount, onProcess, isProcessing, transactionFeePercentage } = appProps;
   const { spreePayConfig } = useSpreePayConfig();
-  const { pointsTitle, pointsConversionRatio } = staticConfig;
   const { selectedPaymentMethod, isInternalProcessing } = useSpreePaymentMethod();
   const { splitAmount, type, method } = selectedPaymentMethod;
-  const isDisabled = !amount || !method || !!isProcessing || isInternalProcessing || !isLoggedIn;
+  const usdAmount = getSplitAmount(amount ?? 0, splitAmount ?? 0, spreePayConfig?.pointsConversionRatio);
+  const isDisabled = !amount || !method && usdAmount !== 0 || !!isProcessing || isInternalProcessing || !isLoggedIn;
   const isCC = type === "CREDIT_CARD" /* CREDIT_CARD */;
   const isCrypto = type === "CRYPTO" /* CRYPTO */;
   const getCheckoutContent = () => {
@@ -333,15 +334,14 @@ var CheckoutButton = ({ isLoggedIn }) => {
       return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Spinner, { className: "inline", size: "sm" });
     }
     if (isCC && amount) {
-      const usdAmount = getSplitAmount(amount, splitAmount ?? 0, pointsConversionRatio);
       if (splitAmount && usdAmount) {
-        return `Pay ${formatUSD(usdAmount + getTransactionFee(usdAmount, transactionFeePercentage))} + ${formatPoints(splitAmount, pointsTitle)}`;
+        return `Pay ${formatUSD(usdAmount + getTransactionFee(usdAmount, transactionFeePercentage))} + ${formatPoints(splitAmount, spreePayConfig?.pointsTitle)}`;
       }
       if (usdAmount) {
         return `Pay ${formatUSD(usdAmount + getTransactionFee(usdAmount, transactionFeePercentage))}`;
       }
       if (splitAmount) {
-        return `Pay ${formatPoints(splitAmount, pointsTitle)}`;
+        return `Pay ${formatPoints(splitAmount, spreePayConfig?.pointsTitle)}`;
       }
       return "Checkout";
     }
@@ -394,7 +394,7 @@ var SpreeLegal = () => {
 // src/components/CreditCardTab/CreditCardTab.tsx
 var import_react13 = require("react");
 
-// src/hooks/useCardPayment.ts
+// src/hooks/payments/useCardPayment.ts
 var import_nice_modal_react2 = __toESM(require("@ebay/nice-modal-react"), 1);
 
 // src/modals/Iframe3ds.tsx
@@ -629,17 +629,8 @@ var registerApi = (config) => {
 
 // src/services/slapi.ts
 var SlapiPaymentService = {
-  createPayment: (params) => {
-    const { type, hash, metadata, capture = false } = params;
-    let reqParams;
-    if (type === "CRYPTO" /* CRYPTO */) {
-      reqParams = { type, hash, crypto: params.crypto };
-    } else if (type === "CREDIT_CARD" /* CREDIT_CARD */ && params.points && params.points.amount > 0) {
-      reqParams = { type: "SPLIT" /* SPLIT */, hash, card: params.card, points: params.points };
-    } else {
-      reqParams = { type, hash, card: params.card };
-    }
-    return slapiApi.post("/v1/payments", { ...reqParams, capture, metadata }).then((data) => ({ data }));
+  createPayment: ({ capture = false, ...rest }) => {
+    return slapiApi.post("/v1/payments", { ...rest, capture }).then((data) => ({ data }));
   },
   baseVerify: ({ id, txHash }) => {
     return slapiApi.post(`/v1/base-transactions/transactions/${id}/verify`, { txHash });
@@ -658,7 +649,7 @@ var SlapiPaymentService = {
   }
 };
 
-// src/hooks/useCardPayment.ts
+// src/hooks/payments/useCardPayment.ts
 var useCardPayment = () => {
   const { selectedPaymentMethod } = useSpreePaymentMethod();
   const { env } = useSpreePayEnv();
@@ -707,20 +698,6 @@ var useCardPayment = () => {
   return { cardPayment };
 };
 
-// src/hooks/useCards.ts
-var import_swr2 = __toESM(require("swr"), 1);
-var useCards = () => {
-  const { data, isLoading, mutate } = (0, import_swr2.default)(`/v1/payments/cards`);
-  return {
-    cards: data?.data.filter((c) => c.active) || [],
-    cardsIsLoading: isLoading,
-    mutateCards: mutate
-  };
-};
-
-// src/hooks/useSplitCardPayments.ts
-var import_nice_modal_react3 = __toESM(require("@ebay/nice-modal-react"), 1);
-
 // src/services/AirWalletService.ts
 var import_airkit = require("@mocanetwork/airkit");
 var import_viem = require("viem");
@@ -812,7 +789,8 @@ async function handleSendErc20(params) {
   }
 }
 
-// src/hooks/useSplitCardPayments.ts
+// src/hooks/payments/utils.ts
+var import_nice_modal_react3 = __toESM(require("@ebay/nice-modal-react"), 1);
 var REFRESH_INTERVAL = 3 * 1e3;
 var MAX_RETRIES = 10;
 async function longPollPoints(paymentId) {
@@ -853,10 +831,55 @@ async function longPollCardStatus(paymentId) {
   }
   throw new Error("Payment polling timed out");
 }
+
+// src/hooks/payments/usePointsPayment.ts
+var usePointsPayment = () => {
+  const { selectedPaymentMethod } = useSpreePaymentMethod();
+  const { spreePayConfig } = useSpreePayConfig();
+  const pointsPayment = async (params) => {
+    if (selectedPaymentMethod.type !== "CREDIT_CARD" /* CREDIT_CARD */) {
+      throw new Error("Unsupported payment method");
+    }
+    const { hash, capture, metadata } = params;
+    const { data: paymentResData } = await SlapiPaymentService.createPayment({
+      hash,
+      capture,
+      metadata,
+      type: "POINTS" /* POINTS */
+    });
+    const wallet = peekAirWallet();
+    if (!wallet || !spreePayConfig?.pointsChain) {
+      throw new Error("AirWallet not found");
+    }
+    const transaction = await handleSendErc20({
+      amount: params.points,
+      token: spreePayConfig.pointsChain.pointsCoin,
+      recipient: spreePayConfig.pointsChain.recipientAddress
+    });
+    if (!transaction) {
+      throw new Error("Points transaction failed");
+    }
+    await SlapiPaymentService.validatePoints({
+      paymentId: paymentResData.id,
+      txHash: transaction.txHash
+    });
+    const pointsStatus = await longPollPoints(paymentResData.id);
+    return {
+      status: pointsStatus,
+      txId: paymentResData.txId,
+      txHash: transaction.txHash,
+      paymentId: paymentResData.id,
+      paymentType: "POINTS" /* POINTS */
+    };
+  };
+  return { pointsPayment };
+};
+
+// src/hooks/payments/useSplitCardPayments.ts
 var useSplitCardPayments = () => {
   const { selectedPaymentMethod } = useSpreePaymentMethod();
   const { env } = useSpreePayEnv();
-  const { appProps, staticConfig } = useStaticConfig();
+  const { appProps } = useStaticConfig();
   const { spreePayConfig } = useSpreePayConfig();
   const splitPayment = async (params) => {
     if (selectedPaymentMethod.type !== "CREDIT_CARD" /* CREDIT_CARD */ || !selectedPaymentMethod.method || !params.points) {
@@ -871,13 +894,13 @@ var useSplitCardPayments = () => {
     } else {
       cardId = card.id;
     }
-    const usdAmount = getSplitAmount(appProps.amount ?? 0, points, staticConfig.pointsConversionRatio);
+    const usdAmount = getSplitAmount(appProps.amount ?? 0, points, spreePayConfig?.pointsConversionRatio);
     const transactionFee = getTransactionFee(usdAmount, appProps.transactionFeePercentage);
     const { data: paymentResData } = await SlapiPaymentService.createPayment({
       hash,
       capture,
       metadata,
-      type: "CREDIT_CARD" /* CREDIT_CARD */,
+      type: "SPLIT" /* CREDIT_CARD_SPLIT */,
       card: {
         cardId,
         transactionFee,
@@ -906,7 +929,7 @@ var useSplitCardPayments = () => {
     });
     const pointsStatus = await longPollPoints(paymentResData.id);
     return {
-      paymentType: "SPLIT" /* SPLIT */,
+      paymentType: "SPLIT" /* CREDIT_CARD_SPLIT */,
       status: pointsStatus,
       paymentId: paymentResData.id,
       txId: paymentResData.txId,
@@ -916,6 +939,17 @@ var useSplitCardPayments = () => {
   return { splitPayment };
 };
 
+// src/hooks/useCards.ts
+var import_swr2 = __toESM(require("swr"), 1);
+var useCards = () => {
+  const { data, isLoading, mutate } = (0, import_swr2.default)(`/v1/payments/cards`);
+  return {
+    cards: data?.data.filter((c) => c.active) || [],
+    cardsIsLoading: isLoading,
+    mutateCards: mutate
+  };
+};
+
 // src/components/CreditCardTab/CreditCard/CreditCard.tsx
 var import_react6 = require("react");
 var import_react_stripe_js2 = require("@stripe/react-stripe-js");
@@ -1269,24 +1303,35 @@ function Switch({ className, ...props }) {
 // src/components/common/PointsSwitch.tsx
 var import_jsx_runtime15 = require("react/jsx-runtime");
 var PointsSwitch = (props) => {
-  const { disabled = false, value, onChange } = props;
-  const { staticConfig } = useStaticConfig();
-  const { pointsConversionRatio, pointsTitle } = staticConfig;
+  const { disabled = false, value, onChange, message } = props;
+  const { spreePayConfig } = useSpreePayConfig();
   const { balance } = useSlapiBalance();
   const id = (0, import_react7.useId)();
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center justify-between gap-3", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center gap-3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Switch, { checked: value, onCheckedChange: onChange, disabled, id }),
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Label, { className: "text-md items-baseline leading-[1.3] font-semibold text-black md:text-xl", htmlFor: id, children: [
-        "Use Points ",
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-xs font-medium", children: "Optional" })
-      ] })
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex flex-col gap-6", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center justify-between gap-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Switch, { checked: value, onCheckedChange: onChange, disabled, id }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Label, { className: "text-md items-baseline leading-[1.3] font-semibold text-black md:text-xl", htmlFor: id, children: [
+          "Use Points ",
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-xs font-medium", children: "Optional" })
+        ] })
+      ] }),
+      balance?.availablePoints ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("p", { className: "flex-1 text-right text-sm font-medium text-black", children: [
+        formatPoints(balance.availablePoints, spreePayConfig?.pointsTitle),
+        " ",
+        !!spreePayConfig?.pointsConversionRatio && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-black/50", children: formatUSD(balance.availablePoints / spreePayConfig.pointsConversionRatio) })
+      ] }) : null
     ] }),
-    balance?.availablePoints ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("p", { className: "flex-1 text-right text-sm font-medium text-black", children: [
-      formatPoints(balance.availablePoints, pointsTitle),
-      " ",
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-black/50", children: formatUSD(balance.availablePoints / pointsConversionRatio) })
-    ] }) : null
+    message && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-start gap-1 rounded-sm border-1 border-[#006FD533] bg-[#006FD50D] p-1.5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("svg", { className: "size-5 shrink-0", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        "path",
+        {
+          fill: "#000",
+          d: "M9.6 13.8h.8V9.2h-.8zM10 8q.2 0 .4-.2l.1-.3-.1-.4L10 7l-.4.1-.1.4.1.3zm0 9.5a7 7 0 0 1-5.3-2.2 8 8 0 0 1-1.6-8.2 8 8 0 0 1 4-4q1.4-.6 2.9-.6a7 7 0 0 1 5.3 2.2 8 8 0 0 1 1.6 8.2 8 8 0 0 1-4 4q-1.4.6-2.9.6m0-.8q2.8 0 4.7-2 2-1.9 2-4.7t-2-4.7a6 6 0 0 0-4.7-2q-2.8 0-4.7 2a6 6 0 0 0-2 4.7q0 2.8 2 4.7 1.9 2 4.7 2"
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "text-xs font-medium text-black", children: message })
+    ] })
   ] });
 };
 
@@ -2290,12 +2335,14 @@ var PointsSelector = (props) => {
   const { isDisabled, isSelected, onSelect, children } = props;
   const { balance } = useSlapiBalance();
   const { selectedPaymentMethod, setSelectedPaymentMethod } = useSpreePaymentMethod();
-  const { appProps, staticConfig } = useStaticConfig();
+  const { appProps } = useStaticConfig();
+  const { spreePayConfig } = useSpreePayConfig();
+  const { pointsConversionRatio } = spreePayConfig || {};
   const min = 0;
-  const max = Math.min((appProps.amount ?? 0) * staticConfig.pointsConversionRatio, balance?.availablePoints ?? 0);
+  const max = Math.min((appProps.amount ?? 0) * (pointsConversionRatio ?? 0), balance?.availablePoints ?? 0);
   const step = 10;
   const [splitTokens, setSplitTokens] = (0, import_react10.useState)(0);
-  const splitAmount = getSplitAmount(appProps.amount ?? 0, splitTokens, staticConfig.pointsConversionRatio);
+  const usdAmount = getSplitAmount(appProps.amount ?? 0, splitTokens, pointsConversionRatio);
   const handleCommit = (value) => {
     setSelectedPaymentMethod({ ...selectedPaymentMethod, splitAmount: value });
   };
@@ -2323,7 +2370,15 @@ var PointsSelector = (props) => {
         ] }),
         isSelected && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "px-3 pt-6 pb-2 md:px-4", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex justify-between gap-3", children: [
           /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex max-w-[100px] flex-col gap-1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Input, { readOnly: true, value: splitTokens, className: "bg-white text-center font-medium" }),
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+              Input,
+              {
+                readOnly: true,
+                value: Math.round(splitTokens),
+                className: "bg-white text-center font-medium",
+                onClick: (e) => e.stopPropagation()
+              }
+            ),
             /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "text-left text-xs leading-[20px] text-black/45", children: "Points" })
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex w-full items-center pb-6", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
@@ -2332,6 +2387,7 @@ var PointsSelector = (props) => {
               value: [splitTokens],
               onValueCommit: ([v]) => handleCommit(v),
               onValueChange: ([v]) => setSplitTokens(v),
+              onPointerDown: (e) => e.stopPropagation(),
               min,
               max,
               step
@@ -2342,8 +2398,9 @@ var PointsSelector = (props) => {
               Input,
               {
                 readOnly: true,
-                value: formatUSD(splitAmount + getTransactionFee(splitAmount, appProps.transactionFeePercentage)),
-                className: "bg-white text-center font-medium"
+                value: formatUSD(usdAmount + getTransactionFee(usdAmount, appProps.transactionFeePercentage)),
+                className: "bg-white text-center font-medium",
+                onClick: (e) => e.stopPropagation()
               }
             ),
             /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "text-left text-xs leading-[20px] text-black/45", children: "Card" })
@@ -2362,8 +2419,7 @@ var SplitBlock = (props) => {
   const { spreePayConfig } = useSpreePayConfig();
   const [address, setAddress] = (0, import_react11.useState)(null);
   const [walletReady, setWalletReady] = (0, import_react11.useState)(false);
-  const { staticConfig } = useStaticConfig();
-  const { pointsConversionRatio, pointsTitle } = staticConfig;
+  const { pointsConversionRatio, pointsTitle } = spreePayConfig || {};
   const initWallet = (0, import_react11.useCallback)(
     async (pointsChain) => {
       if (!pointsChain) return;
@@ -2394,7 +2450,7 @@ var SplitBlock = (props) => {
       " ",
       formatPoints(balance.availablePoints, pointsTitle),
       " ",
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "text-black/50", children: formatUSD(balance.availablePoints / pointsConversionRatio) })
+      pointsConversionRatio && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "text-black/50", children: formatUSD(balance.availablePoints / pointsConversionRatio) })
     ] }) : null }),
     isBalanceLoading ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "h-4 w-6 animate-pulse bg-gray-200" }) : !balance?.availablePoints && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { className: "text-sm font-medium text-black", children: "No points available" }),
     address && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "text-sm font-medium text-black", children: address.length > 8 ? `${address.slice(0, 4)}...${address.slice(-4)}` : address })
@@ -2416,7 +2472,15 @@ var Points = () => {
     }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(PointsSwitch, { disabled: !spreePayConfig?.creditCard.enabled, value: usePoints, onChange: handleTogglePoints }),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+      PointsSwitch,
+      {
+        value: usePoints,
+        onChange: handleTogglePoints,
+        message: spreePayConfig?.creditCard.pointsInfoMessage,
+        disabled: !spreePayConfig?.creditCard.enabled || !spreePayConfig?.creditCard.points
+      }
+    ),
     usePoints && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       SplitBlock,
       {
@@ -2432,26 +2496,30 @@ var Points = () => {
 var import_jsx_runtime27 = require("react/jsx-runtime");
 var CreditCardTab = () => {
   const { selectedPaymentMethod, setSelectedPaymentMethod } = useSpreePaymentMethod();
+  const { appProps } = useStaticConfig();
+  const { spreePayConfig } = useSpreePayConfig();
   const { register } = useSpreePayRegister();
   const { mutateCards } = useCards();
   const { cardPayment } = useCardPayment();
   const { splitPayment } = useSplitCardPayments();
+  const { pointsPayment } = usePointsPayment();
   const handlePay = (0, import_react13.useCallback)(
     async (data) => {
       try {
-        if (selectedPaymentMethod.type === "CREDIT_CARD" /* CREDIT_CARD */ && selectedPaymentMethod.method) {
-          let res = null;
-          if (selectedPaymentMethod.splitAmount && selectedPaymentMethod.splitAmount > 0) {
-            res = await splitPayment({ ...data, points: selectedPaymentMethod.splitAmount });
-          } 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));
+        let res = null;
+        const pointsAmount = selectedPaymentMethod.splitAmount ?? 0;
+        const usdAmount = getSplitAmount(appProps.amount ?? 0, pointsAmount, spreePayConfig?.pointsConversionRatio);
+        if (usdAmount && pointsAmount) {
+          res = await splitPayment({ ...data, points: pointsAmount });
+        } else if (!usdAmount && pointsAmount) {
+          res = await pointsPayment({ ...data, points: pointsAmount });
+        } else {
+          res = await cardPayment(data);
         }
-        return Promise.reject(new PaymentError("Unsupported payment method", "FAILED" /* FAILED */));
+        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 */));
       } finally {
@@ -2459,7 +2527,16 @@ var CreditCardTab = () => {
         mutateCards();
       }
     },
-    [mutateCards, selectedPaymentMethod, setSelectedPaymentMethod, cardPayment, splitPayment]
+    [
+      mutateCards,
+      selectedPaymentMethod,
+      pointsPayment,
+      appProps.amount,
+      setSelectedPaymentMethod,
+      cardPayment,
+      splitPayment,
+      spreePayConfig
+    ]
   );
   (0, import_react13.useEffect)(() => {
     register(handlePay);
@@ -2534,7 +2611,7 @@ async function waitForTransactionReceipt(config, parameters) {
 // ../../node_modules/@wagmi/core/dist/esm/exports/index.js
 var import_viem3 = require("viem");
 
-// src/hooks/useCryptoPayment.ts
+// src/hooks/payments/useCryptoPayment.ts
 var import_viem4 = require("viem");
 var import_wagmi = require("wagmi");
 
@@ -2575,17 +2652,20 @@ var BASE_TOKENS = [
   }
 ];
 
-// src/hooks/useCryptoPayment.ts
+// src/hooks/payments/useCryptoPayment.ts
 var MAX_UINT256 = BigInt(2) ** BigInt(256) - BigInt(1);
-var ONE_INCH_AGGREGATION_ROUTER_V6 = "0x111111125421ca6dc452d289314280a0f8842a65";
 var useCryptoPayment = () => {
   const { data: walletClient } = (0, import_wagmi.useWalletClient)();
+  const { spreePayConfig } = useSpreePayConfig();
   const config = (0, import_wagmi.useConfig)();
   const { selectedPaymentMethod } = useSpreePaymentMethod();
   const cryptoPayment = async (params) => {
     if (!walletClient) {
       throw new Error("Wallet not connected");
     }
+    if (!spreePayConfig) {
+      throw new Error("Spree Pay config not loaded");
+    }
     if (selectedPaymentMethod.type !== "CRYPTO" /* CRYPTO */ || !selectedPaymentMethod.method?.symbol) {
       throw new Error("Unsupported payment method");
     }
@@ -2600,14 +2680,14 @@ var useCryptoPayment = () => {
         address: tokenAddress,
         abi: import_viem4.erc20Abi,
         functionName: "allowance",
-        args: [walletClient.account.address, ONE_INCH_AGGREGATION_ROUTER_V6]
+        args: [walletClient.account.address, spreePayConfig.crypto.oneInchAggregationRouter]
       });
       if (allowance <= 0n) {
         const result = await walletClient.writeContract({
           address: tokenAddress,
           abi: import_viem4.erc20Abi,
           functionName: "approve",
-          args: [ONE_INCH_AGGREGATION_ROUTER_V6, MAX_UINT256]
+          args: [spreePayConfig.crypto.oneInchAggregationRouter, MAX_UINT256]
         });
         await waitForTransactionReceipt(config, {
           hash: result,
@@ -2625,7 +2705,7 @@ var useCryptoPayment = () => {
         token: TOKEN,
         publicKey: walletClient.account.address,
         slippageType: "fixed",
-        slippageBps: 0.5 * 100
+        slippageBps: Math.round(0.5 * 100)
       }
     });
     const parsedTX = JSON.parse(paymentRes.data.encodedTx);
@@ -3172,8 +3252,8 @@ var CryptoWrapper = () => {
   const config = (0, import_react16.useMemo)(() => {
     if (!spreePayConfig) return null;
     return (0, import_rainbowkit2.getDefaultConfig)({
-      appName: spreePayConfig.rainbowAppName || "AIR Shop",
-      projectId: spreePayConfig.rainbowProjectId || "3fdcd5ff50cb84917cd05e40146975d8",
+      appName: spreePayConfig.rainbowAppName,
+      projectId: spreePayConfig.rainbowProjectId,
       chains: [import_chains.base],
       ssr: true
     });
@@ -3185,9 +3265,10 @@ var CryptoWrapper = () => {
 // src/components/CryptoTab/CryptoTab.tsx
 var import_jsx_runtime39 = require("react/jsx-runtime");
 var CryptoTab = () => {
+  const { spreePayConfig } = useSpreePayConfig();
   return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { children: [
     /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "border-b-1 border-black/7 px-5 py-5 md:px-7 md:py-5", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(CryptoWrapper, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "px-5 py-5 md:px-7 md:py-6", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(PointsSwitch, { disabled: true }) })
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "px-5 py-5 md:px-7 md:py-6", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(PointsSwitch, { disabled: true, message: spreePayConfig?.crypto.pointsInfoMessage }) })
   ] });
 };
 
@@ -3239,7 +3320,7 @@ var TabButtons = (props) => {
     /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
       TabButton,
       {
-        isDisabled: !spreePayConfig?.creditCard.enabled,
+        isDisabled: !spreePayConfig?.crypto.enabled,
         onClick: handleChange("CRYPTO" /* CRYPTO */),
         isActive: value === "CRYPTO" /* CRYPTO */,
         children: [

package/build/index.css

@@ -344,6 +344,10 @@
   width: calc(var(--spacing) * 4);
   height: calc(var(--spacing) * 4);
 }
+.sl-spreepay .size-5 {
+  width: calc(var(--spacing) * 5);
+  height: calc(var(--spacing) * 5);
+}
 .sl-spreepay .size-6 {
   width: calc(var(--spacing) * 6);
   height: calc(var(--spacing) * 6);
@@ -507,6 +511,9 @@
 .sl-spreepay .items-center {
   align-items: center;
 }
+.sl-spreepay .items-start {
+  align-items: flex-start;
+}
 .sl-spreepay .justify-between {
   justify-content: space-between;
 }
@@ -591,6 +598,9 @@
   border-left-style: var(--tw-border-style) !important;
   border-left-width: 0px !important;
 }
+.sl-spreepay .border-\[\#006FD533\] {
+  border-color: #006FD533;
+}
 .sl-spreepay .border-\[\#F5F7FA\] {
   border-color: #F5F7FA;
 }
@@ -630,6 +640,9 @@
 .sl-spreepay .border-transparent {
   border-color: transparent;
 }
+.sl-spreepay .bg-\[\#006FD50D\] {
+  background-color: #006FD50D;
+}
 .sl-spreepay .bg-\[\#F5F7FA\] {
   background-color: #F5F7FA;
 }
@@ -699,6 +712,9 @@
 .sl-spreepay .p-1 {
   padding: calc(var(--spacing) * 1);
 }
+.sl-spreepay .p-1\.5 {
+  padding: calc(var(--spacing) * 1.5);
+}
 .sl-spreepay .p-6 {
   padding: calc(var(--spacing) * 6);
 }

package/build/index.d.cts

@@ -50,7 +50,7 @@ type Card = {
     active: boolean;
     addressZipCheck: string;
     cardId: string;
-    createdAt: Date;
+    createdAt: string | Date;
     default: boolean;
     expireMonth: string;
     expireYear: string;
@@ -62,7 +62,7 @@ type Card = {
     name: string;
     paymentProvider: string;
     schema: string | undefined;
-    updatedAt: Date;
+    updatedAt: string | Date;
     userId: string;
     zipCode: string;
 };
@@ -84,10 +84,10 @@ type SelectedPaymentMethod = CardPaymentMethod | CryptoPaymentMethod;
 declare enum PaymentType {
     CREDIT_CARD = "CREDIT_CARD",
     CRYPTO = "CRYPTO",
-    SPLIT = "SPLIT",
+    CREDIT_CARD_SPLIT = "SPLIT",
     POINTS = "POINTS"
 }
-declare const enum SlapiPaymentStatus {
+declare enum SlapiPaymentStatus {
     NOT_INITIALIZED = "NOT_INITIALIZED",// back-end only
     PENDING = "PENDING",// back-end only
     AUTHORIZED = "AUTHORIZED",// success

package/build/index.d.ts

@@ -50,7 +50,7 @@ type Card = {
     active: boolean;
     addressZipCheck: string;
     cardId: string;
-    createdAt: Date;
+    createdAt: string | Date;
     default: boolean;
     expireMonth: string;
     expireYear: string;
@@ -62,7 +62,7 @@ type Card = {
     name: string;
     paymentProvider: string;
     schema: string | undefined;
-    updatedAt: Date;
+    updatedAt: string | Date;
     userId: string;
     zipCode: string;
 };
@@ -84,10 +84,10 @@ type SelectedPaymentMethod = CardPaymentMethod | CryptoPaymentMethod;
 declare enum PaymentType {
     CREDIT_CARD = "CREDIT_CARD",
     CRYPTO = "CRYPTO",
-    SPLIT = "SPLIT",
+    CREDIT_CARD_SPLIT = "SPLIT",
     POINTS = "POINTS"
 }
-declare const enum SlapiPaymentStatus {
+declare enum SlapiPaymentStatus {
     NOT_INITIALIZED = "NOT_INITIALIZED",// back-end only
     PENDING = "PENDING",// back-end only
     AUTHORIZED = "AUTHORIZED",// success

package/build/index.js

@@ -22,7 +22,7 @@ var PaymentError = class extends Error {
 var PaymentType = /* @__PURE__ */ ((PaymentType2) => {
   PaymentType2["CREDIT_CARD"] = "CREDIT_CARD";
   PaymentType2["CRYPTO"] = "CRYPTO";
-  PaymentType2["SPLIT"] = "SPLIT";
+  PaymentType2["CREDIT_CARD_SPLIT"] = "SPLIT";
   PaymentType2["POINTS"] = "POINTS";
   return PaymentType2;
 })(PaymentType || {});
@@ -101,48 +101,36 @@ var CONFIG = {
     bookit: {
       slapiUrl: "https://slapi.dev.superlogic.com",
       keycloakUrl: "https://auth.dev.join.bookit.com",
-      keycloakClientId: "oneof-next",
-      pointsConversionRatio: 100,
-      pointsTitle: "AIR SP"
+      keycloakClientId: "oneof-next"
     },
     moca: {
       slapiUrl: "https://slapi.dev.air.shop",
       keycloakUrl: "https://login.dev.air.shop",
-      keycloakClientId: "oneof-next",
-      pointsConversionRatio: 100,
-      pointsTitle: "AIR SP"
+      keycloakClientId: "oneof-next"
     }
   },
   stg: {
     bookit: {
       slapiUrl: "https://slapi.stg.superlogic.com",
       keycloakUrl: "https://auth.stg.join.bookit.com",
-      keycloakClientId: "oneof-next",
-      pointsConversionRatio: 100,
-      pointsTitle: "AIR SP"
+      keycloakClientId: "oneof-next"
     },
     moca: {
       slapiUrl: "https://slapi.stg.air.shop",
       keycloakUrl: "https://login.stg.air.shop",
-      keycloakClientId: "oneof-next",
-      pointsConversionRatio: 100,
-      pointsTitle: "AIR SP"
+      keycloakClientId: "oneof-next"
     }
   },
   prod: {
     bookit: {
       slapiUrl: "https://slapi.superlogic.com",
       keycloakUrl: "https://auth.join.bookit.com",
-      keycloakClientId: "oneof-next",
-      pointsConversionRatio: 100,
-      pointsTitle: "AIR SP"
+      keycloakClientId: "oneof-next"
     },
     moca: {
       slapiUrl: "https://slapi.air.shop",
       keycloakUrl: "https://login.air.shop",
-      keycloakClientId: "oneof-next",
-      pointsConversionRatio: 100,
-      pointsTitle: "AIR SP"
+      keycloakClientId: "oneof-next"
     }
   }
 };
@@ -170,7 +158,20 @@ var useStaticConfig = () => {
 import useSWR from "swr";
 var useSpreePayConfig = () => {
   const { data, isLoading } = useSWR("/v1/tenants/configs/spree-pay");
-  return { spreePayConfig: data, configIsLoading: isLoading };
+  return {
+    spreePayConfig: data ? {
+      ...data,
+      rainbowProjectId: data.rainbowProjectId ?? "3fdcd5ff50cb84917cd05e40146975d8",
+      rainbowAppName: data.rainbowAppName ?? "AIR Shop",
+      pointsTitle: data.pointsTitle ?? "AIR SP",
+      pointsConversionRatio: data.pointsConversionRatio ?? 100,
+      crypto: {
+        ...data.crypto,
+        oneInchAggregationRouter: data.crypto?.oneInchAggregationRouter || "0x111111125421ca6dc452d289314280a0f8842a65"
+      }
+    } : null,
+    configIsLoading: isLoading
+  };
 };
 
 // src/lib/utils.ts
@@ -237,7 +238,7 @@ var formatUSD = (amount, currency = "USD") => {
   }).format(amount);
   return formattedAmount;
 };
-var formatPoints = (amount, pointsTitle = "Pts") => {
+var formatPoints = (amount, pointsTitle = "") => {
   const formattedAmount = new Intl.NumberFormat("en-US", {
     notation: "compact",
     style: "decimal",
@@ -257,7 +258,7 @@ var formatCoin = (amount, currency = "USDC") => {
 
 // src/utils/split.ts
 var getSplitAmount = (amount, splitTokens, pointsConversionRatio) => {
-  if (!Number.isFinite(amount) || !Number.isFinite(splitTokens) || !Number.isFinite(pointsConversionRatio)) {
+  if (!Number.isFinite(amount) || !Number.isFinite(splitTokens) || !pointsConversionRatio || !Number.isFinite(pointsConversionRatio)) {
     return amount;
   }
   if (pointsConversionRatio <= 0) return amount;
@@ -279,13 +280,13 @@ var getTransactionFee = (amount = 0, transactionFeePercentage) => {
 // src/components/CheckoutButton.tsx
 import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 var CheckoutButton = ({ isLoggedIn }) => {
-  const { staticConfig, appProps } = useStaticConfig();
+  const { appProps } = useStaticConfig();
   const { amount, onProcess, isProcessing, transactionFeePercentage } = appProps;
   const { spreePayConfig } = useSpreePayConfig();
-  const { pointsTitle, pointsConversionRatio } = staticConfig;
   const { selectedPaymentMethod, isInternalProcessing } = useSpreePaymentMethod();
   const { splitAmount, type, method } = selectedPaymentMethod;
-  const isDisabled = !amount || !method || !!isProcessing || isInternalProcessing || !isLoggedIn;
+  const usdAmount = getSplitAmount(amount ?? 0, splitAmount ?? 0, spreePayConfig?.pointsConversionRatio);
+  const isDisabled = !amount || !method && usdAmount !== 0 || !!isProcessing || isInternalProcessing || !isLoggedIn;
   const isCC = type === "CREDIT_CARD" /* CREDIT_CARD */;
   const isCrypto = type === "CRYPTO" /* CRYPTO */;
   const getCheckoutContent = () => {
@@ -293,15 +294,14 @@ var CheckoutButton = ({ isLoggedIn }) => {
       return /* @__PURE__ */ jsx4(Spinner, { className: "inline", size: "sm" });
     }
     if (isCC && amount) {
-      const usdAmount = getSplitAmount(amount, splitAmount ?? 0, pointsConversionRatio);
       if (splitAmount && usdAmount) {
-        return `Pay ${formatUSD(usdAmount + getTransactionFee(usdAmount, transactionFeePercentage))} + ${formatPoints(splitAmount, pointsTitle)}`;
+        return `Pay ${formatUSD(usdAmount + getTransactionFee(usdAmount, transactionFeePercentage))} + ${formatPoints(splitAmount, spreePayConfig?.pointsTitle)}`;
       }
       if (usdAmount) {
         return `Pay ${formatUSD(usdAmount + getTransactionFee(usdAmount, transactionFeePercentage))}`;
       }
       if (splitAmount) {
-        return `Pay ${formatPoints(splitAmount, pointsTitle)}`;
+        return `Pay ${formatPoints(splitAmount, spreePayConfig?.pointsTitle)}`;
       }
       return "Checkout";
     }
@@ -354,7 +354,7 @@ var SpreeLegal = () => {
 // src/components/CreditCardTab/CreditCardTab.tsx
 import { useCallback as useCallback5, useEffect as useEffect7 } from "react";
 
-// src/hooks/useCardPayment.ts
+// src/hooks/payments/useCardPayment.ts
 import NiceModal2 from "@ebay/nice-modal-react";
 
 // src/modals/Iframe3ds.tsx
@@ -589,17 +589,8 @@ var registerApi = (config) => {
 
 // src/services/slapi.ts
 var SlapiPaymentService = {
-  createPayment: (params) => {
-    const { type, hash, metadata, capture = false } = params;
-    let reqParams;
-    if (type === "CRYPTO" /* CRYPTO */) {
-      reqParams = { type, hash, crypto: params.crypto };
-    } else if (type === "CREDIT_CARD" /* CREDIT_CARD */ && params.points && params.points.amount > 0) {
-      reqParams = { type: "SPLIT" /* SPLIT */, hash, card: params.card, points: params.points };
-    } else {
-      reqParams = { type, hash, card: params.card };
-    }
-    return slapiApi.post("/v1/payments", { ...reqParams, capture, metadata }).then((data) => ({ data }));
+  createPayment: ({ capture = false, ...rest }) => {
+    return slapiApi.post("/v1/payments", { ...rest, capture }).then((data) => ({ data }));
   },
   baseVerify: ({ id, txHash }) => {
     return slapiApi.post(`/v1/base-transactions/transactions/${id}/verify`, { txHash });
@@ -618,7 +609,7 @@ var SlapiPaymentService = {
   }
 };
 
-// src/hooks/useCardPayment.ts
+// src/hooks/payments/useCardPayment.ts
 var useCardPayment = () => {
   const { selectedPaymentMethod } = useSpreePaymentMethod();
   const { env } = useSpreePayEnv();
@@ -667,20 +658,6 @@ var useCardPayment = () => {
   return { cardPayment };
 };
 
-// src/hooks/useCards.ts
-import useSWR2 from "swr";
-var useCards = () => {
-  const { data, isLoading, mutate } = useSWR2(`/v1/payments/cards`);
-  return {
-    cards: data?.data.filter((c) => c.active) || [],
-    cardsIsLoading: isLoading,
-    mutateCards: mutate
-  };
-};
-
-// src/hooks/useSplitCardPayments.ts
-import NiceModal3 from "@ebay/nice-modal-react";
-
 // src/services/AirWalletService.ts
 import { AirService, BUILD_ENV } from "@mocanetwork/airkit";
 import { createWalletClient, custom, encodeFunctionData, erc20Abi, parseUnits } from "viem";
@@ -772,7 +749,8 @@ async function handleSendErc20(params) {
   }
 }
 
-// src/hooks/useSplitCardPayments.ts
+// src/hooks/payments/utils.ts
+import NiceModal3 from "@ebay/nice-modal-react";
 var REFRESH_INTERVAL = 3 * 1e3;
 var MAX_RETRIES = 10;
 async function longPollPoints(paymentId) {
@@ -813,10 +791,55 @@ async function longPollCardStatus(paymentId) {
   }
   throw new Error("Payment polling timed out");
 }
+
+// src/hooks/payments/usePointsPayment.ts
+var usePointsPayment = () => {
+  const { selectedPaymentMethod } = useSpreePaymentMethod();
+  const { spreePayConfig } = useSpreePayConfig();
+  const pointsPayment = async (params) => {
+    if (selectedPaymentMethod.type !== "CREDIT_CARD" /* CREDIT_CARD */) {
+      throw new Error("Unsupported payment method");
+    }
+    const { hash, capture, metadata } = params;
+    const { data: paymentResData } = await SlapiPaymentService.createPayment({
+      hash,
+      capture,
+      metadata,
+      type: "POINTS" /* POINTS */
+    });
+    const wallet = peekAirWallet();
+    if (!wallet || !spreePayConfig?.pointsChain) {
+      throw new Error("AirWallet not found");
+    }
+    const transaction = await handleSendErc20({
+      amount: params.points,
+      token: spreePayConfig.pointsChain.pointsCoin,
+      recipient: spreePayConfig.pointsChain.recipientAddress
+    });
+    if (!transaction) {
+      throw new Error("Points transaction failed");
+    }
+    await SlapiPaymentService.validatePoints({
+      paymentId: paymentResData.id,
+      txHash: transaction.txHash
+    });
+    const pointsStatus = await longPollPoints(paymentResData.id);
+    return {
+      status: pointsStatus,
+      txId: paymentResData.txId,
+      txHash: transaction.txHash,
+      paymentId: paymentResData.id,
+      paymentType: "POINTS" /* POINTS */
+    };
+  };
+  return { pointsPayment };
+};
+
+// src/hooks/payments/useSplitCardPayments.ts
 var useSplitCardPayments = () => {
   const { selectedPaymentMethod } = useSpreePaymentMethod();
   const { env } = useSpreePayEnv();
-  const { appProps, staticConfig } = useStaticConfig();
+  const { appProps } = useStaticConfig();
   const { spreePayConfig } = useSpreePayConfig();
   const splitPayment = async (params) => {
     if (selectedPaymentMethod.type !== "CREDIT_CARD" /* CREDIT_CARD */ || !selectedPaymentMethod.method || !params.points) {
@@ -831,13 +854,13 @@ var useSplitCardPayments = () => {
     } else {
       cardId = card.id;
     }
-    const usdAmount = getSplitAmount(appProps.amount ?? 0, points, staticConfig.pointsConversionRatio);
+    const usdAmount = getSplitAmount(appProps.amount ?? 0, points, spreePayConfig?.pointsConversionRatio);
     const transactionFee = getTransactionFee(usdAmount, appProps.transactionFeePercentage);
     const { data: paymentResData } = await SlapiPaymentService.createPayment({
       hash,
       capture,
       metadata,
-      type: "CREDIT_CARD" /* CREDIT_CARD */,
+      type: "SPLIT" /* CREDIT_CARD_SPLIT */,
       card: {
         cardId,
         transactionFee,
@@ -866,7 +889,7 @@ var useSplitCardPayments = () => {
     });
     const pointsStatus = await longPollPoints(paymentResData.id);
     return {
-      paymentType: "SPLIT" /* SPLIT */,
+      paymentType: "SPLIT" /* CREDIT_CARD_SPLIT */,
       status: pointsStatus,
       paymentId: paymentResData.id,
       txId: paymentResData.txId,
@@ -876,6 +899,17 @@ var useSplitCardPayments = () => {
   return { splitPayment };
 };
 
+// src/hooks/useCards.ts
+import useSWR2 from "swr";
+var useCards = () => {
+  const { data, isLoading, mutate } = useSWR2(`/v1/payments/cards`);
+  return {
+    cards: data?.data.filter((c) => c.active) || [],
+    cardsIsLoading: isLoading,
+    mutateCards: mutate
+  };
+};
+
 // src/components/CreditCardTab/CreditCard/CreditCard.tsx
 import { useMemo as useMemo2, useState as useState4 } from "react";
 import { Elements } from "@stripe/react-stripe-js";
@@ -1229,24 +1263,35 @@ function Switch({ className, ...props }) {
 // src/components/common/PointsSwitch.tsx
 import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
 var PointsSwitch = (props) => {
-  const { disabled = false, value, onChange } = props;
-  const { staticConfig } = useStaticConfig();
-  const { pointsConversionRatio, pointsTitle } = staticConfig;
+  const { disabled = false, value, onChange, message } = props;
+  const { spreePayConfig } = useSpreePayConfig();
   const { balance } = useSlapiBalance();
   const id = useId2();
-  return /* @__PURE__ */ jsxs9("div", { className: "flex items-center justify-between gap-3", children: [
-    /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-3", children: [
-      /* @__PURE__ */ jsx15(Switch, { checked: value, onCheckedChange: onChange, disabled, id }),
-      /* @__PURE__ */ jsxs9(Label, { className: "text-md items-baseline leading-[1.3] font-semibold text-black md:text-xl", htmlFor: id, children: [
-        "Use Points ",
-        /* @__PURE__ */ jsx15("span", { className: "text-xs font-medium", children: "Optional" })
-      ] })
+  return /* @__PURE__ */ jsxs9("div", { className: "flex flex-col gap-6", children: [
+    /* @__PURE__ */ jsxs9("div", { className: "flex items-center justify-between gap-3", children: [
+      /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsx15(Switch, { checked: value, onCheckedChange: onChange, disabled, id }),
+        /* @__PURE__ */ jsxs9(Label, { className: "text-md items-baseline leading-[1.3] font-semibold text-black md:text-xl", htmlFor: id, children: [
+          "Use Points ",
+          /* @__PURE__ */ jsx15("span", { className: "text-xs font-medium", children: "Optional" })
+        ] })
+      ] }),
+      balance?.availablePoints ? /* @__PURE__ */ jsxs9("p", { className: "flex-1 text-right text-sm font-medium text-black", children: [
+        formatPoints(balance.availablePoints, spreePayConfig?.pointsTitle),
+        " ",
+        !!spreePayConfig?.pointsConversionRatio && /* @__PURE__ */ jsx15("span", { className: "text-black/50", children: formatUSD(balance.availablePoints / spreePayConfig.pointsConversionRatio) })
+      ] }) : null
     ] }),
-    balance?.availablePoints ? /* @__PURE__ */ jsxs9("p", { className: "flex-1 text-right text-sm font-medium text-black", children: [
-      formatPoints(balance.availablePoints, pointsTitle),
-      " ",
-      /* @__PURE__ */ jsx15("span", { className: "text-black/50", children: formatUSD(balance.availablePoints / pointsConversionRatio) })
-    ] }) : null
+    message && /* @__PURE__ */ jsxs9("div", { className: "flex items-start gap-1 rounded-sm border-1 border-[#006FD533] bg-[#006FD50D] p-1.5", children: [
+      /* @__PURE__ */ jsx15("svg", { className: "size-5 shrink-0", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx15(
+        "path",
+        {
+          fill: "#000",
+          d: "M9.6 13.8h.8V9.2h-.8zM10 8q.2 0 .4-.2l.1-.3-.1-.4L10 7l-.4.1-.1.4.1.3zm0 9.5a7 7 0 0 1-5.3-2.2 8 8 0 0 1-1.6-8.2 8 8 0 0 1 4-4q1.4-.6 2.9-.6a7 7 0 0 1 5.3 2.2 8 8 0 0 1 1.6 8.2 8 8 0 0 1-4 4q-1.4.6-2.9.6m0-.8q2.8 0 4.7-2 2-1.9 2-4.7t-2-4.7a6 6 0 0 0-4.7-2q-2.8 0-4.7 2a6 6 0 0 0-2 4.7q0 2.8 2 4.7 1.9 2 4.7 2"
+        }
+      ) }),
+      /* @__PURE__ */ jsx15("p", { className: "text-xs font-medium text-black", children: message })
+    ] })
   ] });
 };
 
@@ -2250,12 +2295,14 @@ var PointsSelector = (props) => {
   const { isDisabled, isSelected, onSelect, children } = props;
   const { balance } = useSlapiBalance();
   const { selectedPaymentMethod, setSelectedPaymentMethod } = useSpreePaymentMethod();
-  const { appProps, staticConfig } = useStaticConfig();
+  const { appProps } = useStaticConfig();
+  const { spreePayConfig } = useSpreePayConfig();
+  const { pointsConversionRatio } = spreePayConfig || {};
   const min = 0;
-  const max = Math.min((appProps.amount ?? 0) * staticConfig.pointsConversionRatio, balance?.availablePoints ?? 0);
+  const max = Math.min((appProps.amount ?? 0) * (pointsConversionRatio ?? 0), balance?.availablePoints ?? 0);
   const step = 10;
   const [splitTokens, setSplitTokens] = useState8(0);
-  const splitAmount = getSplitAmount(appProps.amount ?? 0, splitTokens, staticConfig.pointsConversionRatio);
+  const usdAmount = getSplitAmount(appProps.amount ?? 0, splitTokens, pointsConversionRatio);
   const handleCommit = (value) => {
     setSelectedPaymentMethod({ ...selectedPaymentMethod, splitAmount: value });
   };
@@ -2283,7 +2330,15 @@ var PointsSelector = (props) => {
         ] }),
         isSelected && /* @__PURE__ */ jsx24("div", { className: "px-3 pt-6 pb-2 md:px-4", children: /* @__PURE__ */ jsxs12("div", { className: "flex justify-between gap-3", children: [
           /* @__PURE__ */ jsxs12("div", { className: "flex max-w-[100px] flex-col gap-1", children: [
-            /* @__PURE__ */ jsx24(Input, { readOnly: true, value: splitTokens, className: "bg-white text-center font-medium" }),
+            /* @__PURE__ */ jsx24(
+              Input,
+              {
+                readOnly: true,
+                value: Math.round(splitTokens),
+                className: "bg-white text-center font-medium",
+                onClick: (e) => e.stopPropagation()
+              }
+            ),
             /* @__PURE__ */ jsx24("p", { className: "text-left text-xs leading-[20px] text-black/45", children: "Points" })
           ] }),
           /* @__PURE__ */ jsx24("div", { className: "flex w-full items-center pb-6", children: /* @__PURE__ */ jsx24(
@@ -2292,6 +2347,7 @@ var PointsSelector = (props) => {
               value: [splitTokens],
               onValueCommit: ([v]) => handleCommit(v),
               onValueChange: ([v]) => setSplitTokens(v),
+              onPointerDown: (e) => e.stopPropagation(),
               min,
               max,
               step
@@ -2302,8 +2358,9 @@ var PointsSelector = (props) => {
               Input,
               {
                 readOnly: true,
-                value: formatUSD(splitAmount + getTransactionFee(splitAmount, appProps.transactionFeePercentage)),
-                className: "bg-white text-center font-medium"
+                value: formatUSD(usdAmount + getTransactionFee(usdAmount, appProps.transactionFeePercentage)),
+                className: "bg-white text-center font-medium",
+                onClick: (e) => e.stopPropagation()
               }
             ),
             /* @__PURE__ */ jsx24("p", { className: "text-left text-xs leading-[20px] text-black/45", children: "Card" })
@@ -2322,8 +2379,7 @@ var SplitBlock = (props) => {
   const { spreePayConfig } = useSpreePayConfig();
   const [address, setAddress] = useState9(null);
   const [walletReady, setWalletReady] = useState9(false);
-  const { staticConfig } = useStaticConfig();
-  const { pointsConversionRatio, pointsTitle } = staticConfig;
+  const { pointsConversionRatio, pointsTitle } = spreePayConfig || {};
   const initWallet = useCallback4(
     async (pointsChain) => {
       if (!pointsChain) return;
@@ -2354,7 +2410,7 @@ var SplitBlock = (props) => {
       " ",
       formatPoints(balance.availablePoints, pointsTitle),
       " ",
-      /* @__PURE__ */ jsx25("span", { className: "text-black/50", children: formatUSD(balance.availablePoints / pointsConversionRatio) })
+      pointsConversionRatio && /* @__PURE__ */ jsx25("span", { className: "text-black/50", children: formatUSD(balance.availablePoints / pointsConversionRatio) })
     ] }) : null }),
     isBalanceLoading ? /* @__PURE__ */ jsx25("div", { className: "h-4 w-6 animate-pulse bg-gray-200" }) : !balance?.availablePoints && /* @__PURE__ */ jsx25("p", { className: "text-sm font-medium text-black", children: "No points available" }),
     address && /* @__PURE__ */ jsx25("div", { className: "text-sm font-medium text-black", children: address.length > 8 ? `${address.slice(0, 4)}...${address.slice(-4)}` : address })
@@ -2376,7 +2432,15 @@ var Points = () => {
     }
   };
   return /* @__PURE__ */ jsxs14(Fragment3, { children: [
-    /* @__PURE__ */ jsx26(PointsSwitch, { disabled: !spreePayConfig?.creditCard.enabled, value: usePoints, onChange: handleTogglePoints }),
+    /* @__PURE__ */ jsx26(
+      PointsSwitch,
+      {
+        value: usePoints,
+        onChange: handleTogglePoints,
+        message: spreePayConfig?.creditCard.pointsInfoMessage,
+        disabled: !spreePayConfig?.creditCard.enabled || !spreePayConfig?.creditCard.points
+      }
+    ),
     usePoints && /* @__PURE__ */ jsx26(
       SplitBlock,
       {
@@ -2392,26 +2456,30 @@ var Points = () => {
 import { jsx as jsx27, jsxs as jsxs15 } from "react/jsx-runtime";
 var CreditCardTab = () => {
   const { selectedPaymentMethod, setSelectedPaymentMethod } = useSpreePaymentMethod();
+  const { appProps } = useStaticConfig();
+  const { spreePayConfig } = useSpreePayConfig();
   const { register } = useSpreePayRegister();
   const { mutateCards } = useCards();
   const { cardPayment } = useCardPayment();
   const { splitPayment } = useSplitCardPayments();
+  const { pointsPayment } = usePointsPayment();
   const handlePay = useCallback5(
     async (data) => {
       try {
-        if (selectedPaymentMethod.type === "CREDIT_CARD" /* CREDIT_CARD */ && selectedPaymentMethod.method) {
-          let res = null;
-          if (selectedPaymentMethod.splitAmount && selectedPaymentMethod.splitAmount > 0) {
-            res = await splitPayment({ ...data, points: selectedPaymentMethod.splitAmount });
-          } 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));
+        let res = null;
+        const pointsAmount = selectedPaymentMethod.splitAmount ?? 0;
+        const usdAmount = getSplitAmount(appProps.amount ?? 0, pointsAmount, spreePayConfig?.pointsConversionRatio);
+        if (usdAmount && pointsAmount) {
+          res = await splitPayment({ ...data, points: pointsAmount });
+        } else if (!usdAmount && pointsAmount) {
+          res = await pointsPayment({ ...data, points: pointsAmount });
+        } else {
+          res = await cardPayment(data);
         }
-        return Promise.reject(new PaymentError("Unsupported payment method", "FAILED" /* FAILED */));
+        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 */));
       } finally {
@@ -2419,7 +2487,16 @@ var CreditCardTab = () => {
         mutateCards();
       }
     },
-    [mutateCards, selectedPaymentMethod, setSelectedPaymentMethod, cardPayment, splitPayment]
+    [
+      mutateCards,
+      selectedPaymentMethod,
+      pointsPayment,
+      appProps.amount,
+      setSelectedPaymentMethod,
+      cardPayment,
+      splitPayment,
+      spreePayConfig
+    ]
   );
   useEffect7(() => {
     register(handlePay);
@@ -2494,7 +2571,7 @@ async function waitForTransactionReceipt(config, parameters) {
 // ../../node_modules/@wagmi/core/dist/esm/exports/index.js
 import { custom as custom2, http, webSocket } from "viem";
 
-// src/hooks/useCryptoPayment.ts
+// src/hooks/payments/useCryptoPayment.ts
 import { erc20Abi as erc20Abi2 } from "viem";
 import { useConfig, useWalletClient } from "wagmi";
 
@@ -2535,17 +2612,20 @@ var BASE_TOKENS = [
   }
 ];
 
-// src/hooks/useCryptoPayment.ts
+// src/hooks/payments/useCryptoPayment.ts
 var MAX_UINT256 = BigInt(2) ** BigInt(256) - BigInt(1);
-var ONE_INCH_AGGREGATION_ROUTER_V6 = "0x111111125421ca6dc452d289314280a0f8842a65";
 var useCryptoPayment = () => {
   const { data: walletClient } = useWalletClient();
+  const { spreePayConfig } = useSpreePayConfig();
   const config = useConfig();
   const { selectedPaymentMethod } = useSpreePaymentMethod();
   const cryptoPayment = async (params) => {
     if (!walletClient) {
       throw new Error("Wallet not connected");
     }
+    if (!spreePayConfig) {
+      throw new Error("Spree Pay config not loaded");
+    }
     if (selectedPaymentMethod.type !== "CRYPTO" /* CRYPTO */ || !selectedPaymentMethod.method?.symbol) {
       throw new Error("Unsupported payment method");
     }
@@ -2560,14 +2640,14 @@ var useCryptoPayment = () => {
         address: tokenAddress,
         abi: erc20Abi2,
         functionName: "allowance",
-        args: [walletClient.account.address, ONE_INCH_AGGREGATION_ROUTER_V6]
+        args: [walletClient.account.address, spreePayConfig.crypto.oneInchAggregationRouter]
       });
       if (allowance <= 0n) {
         const result = await walletClient.writeContract({
           address: tokenAddress,
           abi: erc20Abi2,
           functionName: "approve",
-          args: [ONE_INCH_AGGREGATION_ROUTER_V6, MAX_UINT256]
+          args: [spreePayConfig.crypto.oneInchAggregationRouter, MAX_UINT256]
         });
         await waitForTransactionReceipt(config, {
           hash: result,
@@ -2585,7 +2665,7 @@ var useCryptoPayment = () => {
         token: TOKEN,
         publicKey: walletClient.account.address,
         slippageType: "fixed",
-        slippageBps: 0.5 * 100
+        slippageBps: Math.round(0.5 * 100)
       }
     });
     const parsedTX = JSON.parse(paymentRes.data.encodedTx);
@@ -3132,8 +3212,8 @@ var CryptoWrapper = () => {
   const config = useMemo9(() => {
     if (!spreePayConfig) return null;
     return getDefaultConfig({
-      appName: spreePayConfig.rainbowAppName || "AIR Shop",
-      projectId: spreePayConfig.rainbowProjectId || "3fdcd5ff50cb84917cd05e40146975d8",
+      appName: spreePayConfig.rainbowAppName,
+      projectId: spreePayConfig.rainbowProjectId,
       chains: [base],
       ssr: true
     });
@@ -3145,9 +3225,10 @@ var CryptoWrapper = () => {
 // src/components/CryptoTab/CryptoTab.tsx
 import { jsx as jsx39, jsxs as jsxs23 } from "react/jsx-runtime";
 var CryptoTab = () => {
+  const { spreePayConfig } = useSpreePayConfig();
   return /* @__PURE__ */ jsxs23("div", { children: [
     /* @__PURE__ */ jsx39("div", { className: "border-b-1 border-black/7 px-5 py-5 md:px-7 md:py-5", children: /* @__PURE__ */ jsx39(CryptoWrapper, {}) }),
-    /* @__PURE__ */ jsx39("div", { className: "px-5 py-5 md:px-7 md:py-6", children: /* @__PURE__ */ jsx39(PointsSwitch, { disabled: true }) })
+    /* @__PURE__ */ jsx39("div", { className: "px-5 py-5 md:px-7 md:py-6", children: /* @__PURE__ */ jsx39(PointsSwitch, { disabled: true, message: spreePayConfig?.crypto.pointsInfoMessage }) })
   ] });
 };
 
@@ -3199,7 +3280,7 @@ var TabButtons = (props) => {
     /* @__PURE__ */ jsxs24(
       TabButton,
       {
-        isDisabled: !spreePayConfig?.creditCard.enabled,
+        isDisabled: !spreePayConfig?.crypto.enabled,
         onClick: handleChange("CRYPTO" /* CRYPTO */),
         isActive: value === "CRYPTO" /* CRYPTO */,
         children: [

package/package.json

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