@superlogic/spree-pay 0.1.20 → 0.1.22

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 || {});
@@ -325,7 +325,8 @@ var CheckoutButton = ({ isLoggedIn }) => {
   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, 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,7 +334,6 @@ 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)}`;
       }
@@ -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");
@@ -747,7 +724,8 @@ async function createAndInit(opts) {
       chain: opts.mocaChain,
       account: address
     }) : null;
-    return { walletReady: true, address, walletClient, air, chain: opts.mocaChain };
+    const walletReady = Boolean(address && walletClient);
+    return { walletReady, address, walletClient, air, chain: opts.mocaChain };
   } catch (e) {
     const msg = e instanceof Error ? e.message : "Unknown error during AirWallet initialization";
     return { walletReady: false, address: null, walletClient: null, air: null, chain: null, error: msg };
@@ -755,6 +733,10 @@ async function createAndInit(opts) {
 }
 async function getAirWallet(options) {
   const key = optionsKey(options);
+  if (cachedKey === key && singletonState && !singletonState.walletReady) {
+    singletonState = null;
+    initPromise = null;
+  }
   if (singletonState && cachedKey === key) return singletonState;
   if (initPromise && cachedKey === key) return initPromise;
   cachedKey = key;
@@ -807,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) {
@@ -848,6 +831,51 @@ 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();
@@ -872,7 +900,7 @@ var useSplitCardPayments = () => {
       hash,
       capture,
       metadata,
-      type: "CREDIT_CARD" /* CREDIT_CARD */,
+      type: "SPLIT" /* CREDIT_CARD_SPLIT */,
       card: {
         cardId,
         transactionFee,
@@ -901,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,
@@ -911,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");
@@ -2282,7 +2321,7 @@ function Slider2({
 // src/components/CreditCardTab/Points/PointsSelector.tsx
 var import_jsx_runtime24 = require("react/jsx-runtime");
 var PointsSelector = (props) => {
-  const { isSelected, onSelect, children } = props;
+  const { isDisabled, isSelected, onSelect, children } = props;
   const { balance } = useSlapiBalance();
   const { selectedPaymentMethod, setSelectedPaymentMethod } = useSpreePaymentMethod();
   const { appProps, staticConfig } = useStaticConfig();
@@ -2290,16 +2329,18 @@ var PointsSelector = (props) => {
   const max = Math.min((appProps.amount ?? 0) * staticConfig.pointsConversionRatio, 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, staticConfig.pointsConversionRatio);
   const handleCommit = (value) => {
     setSelectedPaymentMethod({ ...selectedPaymentMethod, splitAmount: value });
   };
   return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
     "button",
     {
+      disabled: isDisabled,
       onClick: onSelect,
       className: cn("bg-primary/8 cursor-pointer overflow-hidden rounded-md border-1 border-transparent", {
-        "border-primary": isSelected
+        "border-primary": isSelected,
+        "cursor-not-allowed opacity-50": isDisabled
       }),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: cn("flex h-11 w-full", { "bg-black/4": isSelected }), children: [
@@ -2316,7 +2357,7 @@ 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" }),
             /* @__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)(
@@ -2335,7 +2376,7 @@ var PointsSelector = (props) => {
               Input,
               {
                 readOnly: true,
-                value: formatUSD(splitAmount + getTransactionFee(splitAmount, appProps.transactionFeePercentage)),
+                value: formatUSD(usdAmount + getTransactionFee(usdAmount, appProps.transactionFeePercentage)),
                 className: "bg-white text-center font-medium"
               }
             ),
@@ -2350,30 +2391,38 @@ var PointsSelector = (props) => {
 // src/components/CreditCardTab/Points/SplitBlock.tsx
 var import_jsx_runtime25 = require("react/jsx-runtime");
 var SplitBlock = (props) => {
-  const { isSelected, onSelect } = props;
+  const { onToggle, isSelected, onSelect } = props;
   const { balance, isBalanceLoading } = useSlapiBalance();
   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 initWallet = (0, import_react11.useCallback)(async (pointsChain) => {
-    if (!pointsChain) {
-      return;
-    }
-    try {
-      const res = await getAirWallet({
-        mocaChain: pointsChain.mocaChain,
-        partnerId: pointsChain.partnerId
-      });
-      setAddress(res.address ?? null);
-    } catch (e) {
-      console.error("Air Wallet init failed:", e);
-    }
-  }, []);
+  const initWallet = (0, import_react11.useCallback)(
+    async (pointsChain) => {
+      if (!pointsChain) return;
+      try {
+        const res = await getAirWallet({
+          mocaChain: pointsChain.mocaChain,
+          partnerId: pointsChain.partnerId
+        });
+        setAddress(res.address ?? null);
+        setWalletReady(res.walletReady);
+        if (!res.walletReady && res.error) {
+          onToggle(false);
+        }
+      } catch (e) {
+        console.error("Air Wallet init failed:", e);
+      }
+    },
+    [onToggle]
+  );
   (0, import_react11.useEffect)(() => {
+    setAddress(null);
+    setWalletReady(false);
     initWallet(spreePayConfig?.pointsChain);
-  }, [spreePayConfig, initWallet]);
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "flex flex-col gap-1", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(PointsSelector, { onSelect: () => onSelect("air"), isSelected, children: [
+  }, [spreePayConfig?.pointsChain, initWallet]);
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "flex flex-col gap-1", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(PointsSelector, { isDisabled: !walletReady, onSelect: () => onSelect("air"), isSelected, children: [
     /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "flex items-center gap-2", children: balance?.availablePoints ? /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("p", { className: "text-sm font-medium text-black", children: [
       /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "text-black/50", children: "Available" }),
       " ",
@@ -2402,7 +2451,14 @@ 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 }),
-    usePoints && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SplitBlock, { isSelected: selectedPointsType === "air", onSelect: setSelectedPointsType })
+    usePoints && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+      SplitBlock,
+      {
+        onToggle: handleTogglePoints,
+        isSelected: selectedPointsType === "air",
+        onSelect: setSelectedPointsType
+      }
+    )
   ] });
 };
 
@@ -2410,26 +2466,29 @@ var Points = () => {
 var import_jsx_runtime27 = require("react/jsx-runtime");
 var CreditCardTab = () => {
   const { selectedPaymentMethod, setSelectedPaymentMethod } = useSpreePaymentMethod();
+  const { staticConfig, appProps } = useStaticConfig();
   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, staticConfig.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);
+        }
+        if (["AUTHORIZED" /* AUTHORIZED */, "CAPTURED" /* CAPTURED */].includes(res.status)) {
+          return Promise.resolve(res);
         }
-        return Promise.reject(new PaymentError("Unsupported payment method", "FAILED" /* FAILED */));
+        return Promise.reject(new PaymentError("Card payment failed", res.status));
       } catch (_) {
         return Promise.reject(new PaymentError("Payment failed", "FAILED" /* FAILED */));
       } finally {
@@ -2437,7 +2496,16 @@ var CreditCardTab = () => {
         mutateCards();
       }
     },
-    [mutateCards, selectedPaymentMethod, setSelectedPaymentMethod, cardPayment, splitPayment]
+    [
+      mutateCards,
+      selectedPaymentMethod,
+      pointsPayment,
+      appProps.amount,
+      setSelectedPaymentMethod,
+      cardPayment,
+      splitPayment,
+      staticConfig.pointsConversionRatio
+    ]
   );
   (0, import_react13.useEffect)(() => {
     register(handlePay);
@@ -2512,7 +2580,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");
 
@@ -2553,7 +2621,7 @@ 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 = () => {
@@ -2603,7 +2671,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);

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 || {});
@@ -285,7 +285,8 @@ var CheckoutButton = ({ isLoggedIn }) => {
   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, 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,7 +294,6 @@ 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)}`;
       }
@@ -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";
@@ -707,7 +684,8 @@ async function createAndInit(opts) {
       chain: opts.mocaChain,
       account: address
     }) : null;
-    return { walletReady: true, address, walletClient, air, chain: opts.mocaChain };
+    const walletReady = Boolean(address && walletClient);
+    return { walletReady, address, walletClient, air, chain: opts.mocaChain };
   } catch (e) {
     const msg = e instanceof Error ? e.message : "Unknown error during AirWallet initialization";
     return { walletReady: false, address: null, walletClient: null, air: null, chain: null, error: msg };
@@ -715,6 +693,10 @@ async function createAndInit(opts) {
 }
 async function getAirWallet(options) {
   const key = optionsKey(options);
+  if (cachedKey === key && singletonState && !singletonState.walletReady) {
+    singletonState = null;
+    initPromise = null;
+  }
   if (singletonState && cachedKey === key) return singletonState;
   if (initPromise && cachedKey === key) return initPromise;
   cachedKey = key;
@@ -767,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) {
@@ -808,6 +791,51 @@ 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();
@@ -832,7 +860,7 @@ var useSplitCardPayments = () => {
       hash,
       capture,
       metadata,
-      type: "CREDIT_CARD" /* CREDIT_CARD */,
+      type: "SPLIT" /* CREDIT_CARD_SPLIT */,
       card: {
         cardId,
         transactionFee,
@@ -861,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,
@@ -871,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";
@@ -2242,7 +2281,7 @@ function Slider2({
 // src/components/CreditCardTab/Points/PointsSelector.tsx
 import { jsx as jsx24, jsxs as jsxs12 } from "react/jsx-runtime";
 var PointsSelector = (props) => {
-  const { isSelected, onSelect, children } = props;
+  const { isDisabled, isSelected, onSelect, children } = props;
   const { balance } = useSlapiBalance();
   const { selectedPaymentMethod, setSelectedPaymentMethod } = useSpreePaymentMethod();
   const { appProps, staticConfig } = useStaticConfig();
@@ -2250,16 +2289,18 @@ var PointsSelector = (props) => {
   const max = Math.min((appProps.amount ?? 0) * staticConfig.pointsConversionRatio, 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, staticConfig.pointsConversionRatio);
   const handleCommit = (value) => {
     setSelectedPaymentMethod({ ...selectedPaymentMethod, splitAmount: value });
   };
   return /* @__PURE__ */ jsxs12(
     "button",
     {
+      disabled: isDisabled,
       onClick: onSelect,
       className: cn("bg-primary/8 cursor-pointer overflow-hidden rounded-md border-1 border-transparent", {
-        "border-primary": isSelected
+        "border-primary": isSelected,
+        "cursor-not-allowed opacity-50": isDisabled
       }),
       children: [
         /* @__PURE__ */ jsxs12("div", { className: cn("flex h-11 w-full", { "bg-black/4": isSelected }), children: [
@@ -2276,7 +2317,7 @@ 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" }),
             /* @__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(
@@ -2295,7 +2336,7 @@ var PointsSelector = (props) => {
               Input,
               {
                 readOnly: true,
-                value: formatUSD(splitAmount + getTransactionFee(splitAmount, appProps.transactionFeePercentage)),
+                value: formatUSD(usdAmount + getTransactionFee(usdAmount, appProps.transactionFeePercentage)),
                 className: "bg-white text-center font-medium"
               }
             ),
@@ -2310,30 +2351,38 @@ var PointsSelector = (props) => {
 // src/components/CreditCardTab/Points/SplitBlock.tsx
 import { jsx as jsx25, jsxs as jsxs13 } from "react/jsx-runtime";
 var SplitBlock = (props) => {
-  const { isSelected, onSelect } = props;
+  const { onToggle, isSelected, onSelect } = props;
   const { balance, isBalanceLoading } = useSlapiBalance();
   const { spreePayConfig } = useSpreePayConfig();
   const [address, setAddress] = useState9(null);
+  const [walletReady, setWalletReady] = useState9(false);
   const { staticConfig } = useStaticConfig();
   const { pointsConversionRatio, pointsTitle } = staticConfig;
-  const initWallet = useCallback4(async (pointsChain) => {
-    if (!pointsChain) {
-      return;
-    }
-    try {
-      const res = await getAirWallet({
-        mocaChain: pointsChain.mocaChain,
-        partnerId: pointsChain.partnerId
-      });
-      setAddress(res.address ?? null);
-    } catch (e) {
-      console.error("Air Wallet init failed:", e);
-    }
-  }, []);
+  const initWallet = useCallback4(
+    async (pointsChain) => {
+      if (!pointsChain) return;
+      try {
+        const res = await getAirWallet({
+          mocaChain: pointsChain.mocaChain,
+          partnerId: pointsChain.partnerId
+        });
+        setAddress(res.address ?? null);
+        setWalletReady(res.walletReady);
+        if (!res.walletReady && res.error) {
+          onToggle(false);
+        }
+      } catch (e) {
+        console.error("Air Wallet init failed:", e);
+      }
+    },
+    [onToggle]
+  );
   useEffect6(() => {
+    setAddress(null);
+    setWalletReady(false);
     initWallet(spreePayConfig?.pointsChain);
-  }, [spreePayConfig, initWallet]);
-  return /* @__PURE__ */ jsx25("div", { className: "flex flex-col gap-1", children: /* @__PURE__ */ jsxs13(PointsSelector, { onSelect: () => onSelect("air"), isSelected, children: [
+  }, [spreePayConfig?.pointsChain, initWallet]);
+  return /* @__PURE__ */ jsx25("div", { className: "flex flex-col gap-1", children: /* @__PURE__ */ jsxs13(PointsSelector, { isDisabled: !walletReady, onSelect: () => onSelect("air"), isSelected, children: [
     /* @__PURE__ */ jsx25("div", { className: "flex items-center gap-2", children: balance?.availablePoints ? /* @__PURE__ */ jsxs13("p", { className: "text-sm font-medium text-black", children: [
       /* @__PURE__ */ jsx25("span", { className: "text-black/50", children: "Available" }),
       " ",
@@ -2362,7 +2411,14 @@ var Points = () => {
   };
   return /* @__PURE__ */ jsxs14(Fragment3, { children: [
     /* @__PURE__ */ jsx26(PointsSwitch, { disabled: !spreePayConfig?.creditCard.enabled, value: usePoints, onChange: handleTogglePoints }),
-    usePoints && /* @__PURE__ */ jsx26(SplitBlock, { isSelected: selectedPointsType === "air", onSelect: setSelectedPointsType })
+    usePoints && /* @__PURE__ */ jsx26(
+      SplitBlock,
+      {
+        onToggle: handleTogglePoints,
+        isSelected: selectedPointsType === "air",
+        onSelect: setSelectedPointsType
+      }
+    )
   ] });
 };
 
@@ -2370,26 +2426,29 @@ var Points = () => {
 import { jsx as jsx27, jsxs as jsxs15 } from "react/jsx-runtime";
 var CreditCardTab = () => {
   const { selectedPaymentMethod, setSelectedPaymentMethod } = useSpreePaymentMethod();
+  const { staticConfig, appProps } = useStaticConfig();
   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, staticConfig.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);
+        }
+        if (["AUTHORIZED" /* AUTHORIZED */, "CAPTURED" /* CAPTURED */].includes(res.status)) {
+          return Promise.resolve(res);
         }
-        return Promise.reject(new PaymentError("Unsupported payment method", "FAILED" /* FAILED */));
+        return Promise.reject(new PaymentError("Card payment failed", res.status));
       } catch (_) {
         return Promise.reject(new PaymentError("Payment failed", "FAILED" /* FAILED */));
       } finally {
@@ -2397,7 +2456,16 @@ var CreditCardTab = () => {
         mutateCards();
       }
     },
-    [mutateCards, selectedPaymentMethod, setSelectedPaymentMethod, cardPayment, splitPayment]
+    [
+      mutateCards,
+      selectedPaymentMethod,
+      pointsPayment,
+      appProps.amount,
+      setSelectedPaymentMethod,
+      cardPayment,
+      splitPayment,
+      staticConfig.pointsConversionRatio
+    ]
   );
   useEffect7(() => {
     register(handlePay);
@@ -2472,7 +2540,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";
 
@@ -2513,7 +2581,7 @@ 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 = () => {
@@ -2563,7 +2631,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);

package/package.json

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