@superlogic/spree-pay 0.1.21 → 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");
@@ -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,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();
@@ -877,7 +900,7 @@ var useSplitCardPayments = () => {
       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");
@@ -2295,7 +2329,7 @@ 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 });
   };
@@ -2323,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)(
@@ -2342,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"
               }
             ),
@@ -2432,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 {
@@ -2459,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);
@@ -2534,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");
 
@@ -2575,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 = () => {
@@ -2625,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";
@@ -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,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();
@@ -837,7 +860,7 @@ var useSplitCardPayments = () => {
       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";
@@ -2255,7 +2289,7 @@ 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 });
   };
@@ -2283,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(
@@ -2302,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"
               }
             ),
@@ -2392,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 {
@@ -2419,7 +2456,16 @@ var CreditCardTab = () => {
         mutateCards();
       }
     },
-    [mutateCards, selectedPaymentMethod, setSelectedPaymentMethod, cardPayment, splitPayment]
+    [
+      mutateCards,
+      selectedPaymentMethod,
+      pointsPayment,
+      appProps.amount,
+      setSelectedPaymentMethod,
+      cardPayment,
+      splitPayment,
+      staticConfig.pointsConversionRatio
+    ]
   );
   useEffect7(() => {
     register(handlePay);
@@ -2494,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";
 
@@ -2535,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 = () => {
@@ -2585,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.21",
+  "version": "0.1.22",
   "description": "Spree-pay React component and utilities",
   "private": false,
   "type": "module",