@superlogic/spree-pay 0.1.30 → 0.1.34

package/build/index.cjs

@@ -44,7 +44,7 @@ var import_nice_modal_react7 = __toESM(require("@ebay/nice-modal-react"), 1);
 var import_swr5 = require("swr");
 
 // package.json
-var version = "0.1.30";
+var version = "0.1.34";
 
 // src/context/SpreePayActionsContext.tsx
 var import_react = require("react");
@@ -96,7 +96,8 @@ var SpreePayProvider = ({ children, env }) => {
     }
   }, []);
   const value = {
-    env,
+    // Set default to true for web3 points to backward compatibility
+    env: { ...env, useWeb3Points: env.useWeb3Points ?? true },
     enabled: Boolean(selectedPaymentMethod.method),
     isInternalProcessing,
     process,
@@ -150,6 +151,11 @@ var CONFIG = {
       slapiUrl: "https://slapi.dev.air.shop",
       keycloakUrl: "https://login.dev.air.shop",
       keycloakClientId: "oneof-next"
+    },
+    qiibee: {
+      slapiUrl: "https://slapi.dev.superlogic.com",
+      keycloakUrl: "https://sso.dev.tickets.qiibeefoundation.org",
+      keycloakClientId: "oneof-next"
     }
   },
   stg: {
@@ -162,6 +168,11 @@ var CONFIG = {
       slapiUrl: "https://slapi.stg.air.shop",
       keycloakUrl: "https://login.stg.air.shop",
       keycloakClientId: "oneof-next"
+    },
+    qiibee: {
+      slapiUrl: "https://slapi.stg.tickets.qiibeefoundation.org",
+      keycloakUrl: "https://sso.stg.tickets.qiibeefoundation.org",
+      keycloakClientId: "oneof-next"
     }
   },
   prod: {
@@ -174,6 +185,11 @@ var CONFIG = {
       slapiUrl: "https://slapi.air.shop",
       keycloakUrl: "https://login.air.shop",
       keycloakClientId: "oneof-next"
+    },
+    qiibee: {
+      slapiUrl: "https://slapi.tickets.qiibeefoundation.org",
+      keycloakUrl: "https://sso.tickets.qiibeefoundation.org",
+      keycloakClientId: "oneof-next"
     }
   }
 };
@@ -827,7 +843,11 @@ async function longPollCardStatus(paymentId) {
     if (detail.status === "FAILED" /* FAILED */) {
       throw new Error(`Something went wrong with the ${detail.validationType} payment`);
     }
-    if (detail.validationType === "POINTS") {
+    if (
+      // Process to points payment
+      detail.validationType === "POINTS" || // early card payment completion
+      ["AUTHORIZED" /* AUTHORIZED */, "CAPTURED" /* CAPTURED */].includes(detail.status)
+    ) {
       return detail.status;
     }
     if (!shown3ds && detail.card?.redirectUrl) {
@@ -844,7 +864,7 @@ async function longPollCardStatus(paymentId) {
 }
 
 // src/hooks/payments/usePointsPayment.ts
-var usePointsPayment = () => {
+var usePointsPayment = (mode = "web2") => {
   const { selectedPaymentMethod } = useSpreePaymentMethod();
   const { spreePayConfig } = useSpreePayConfig();
   const pointsPayment = async (params) => {
@@ -854,31 +874,42 @@ var usePointsPayment = () => {
     const { hash, capture, metadata } = params;
     const { data: paymentResData } = await SlapiPaymentService.createPayment({
       hash,
-      capture,
+      // capture should be always true for web2 points payments
+      capture: mode === "web2" ? true : 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");
+    if (mode === "web3") {
+      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 pointsStatus2 = await longPollPoints(paymentResData.id);
+      return {
+        status: pointsStatus2,
+        txId: paymentResData.txId,
+        txHash: transaction.txHash,
+        paymentId: paymentResData.id,
+        paymentType: "POINTS" /* POINTS */
+      };
     }
-    await SlapiPaymentService.validatePoints({
-      paymentId: paymentResData.id,
-      txHash: transaction.txHash
-    });
     const pointsStatus = await longPollPoints(paymentResData.id);
     return {
       status: pointsStatus,
       txId: paymentResData.txId,
-      txHash: transaction.txHash,
+      txHash: null,
       paymentId: paymentResData.id,
       paymentType: "POINTS" /* POINTS */
     };
@@ -887,7 +918,7 @@ var usePointsPayment = () => {
 };
 
 // src/hooks/payments/useSplitCardPayments.ts
-var useSplitCardPayments = () => {
+var useSplitCardPayments = (mode = "web2") => {
   const { selectedPaymentMethod } = useSpreePaymentMethod();
   const { env } = useSpreePayEnv();
   const { appProps } = useStaticConfig();
@@ -921,30 +952,39 @@ var useSplitCardPayments = () => {
         amount: points
       }
     });
-    await longPollCardStatus(paymentResData.id);
-    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");
+    const cardStatus = await longPollCardStatus(paymentResData.id);
+    if (mode === "web3") {
+      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 {
+        paymentType: "SPLIT" /* CREDIT_CARD_SPLIT */,
+        status: pointsStatus,
+        paymentId: paymentResData.id,
+        txId: paymentResData.txId,
+        txHash: transaction.txHash
+      };
     }
-    await SlapiPaymentService.validatePoints({
-      paymentId: paymentResData.id,
-      txHash: transaction.txHash
-    });
-    const pointsStatus = await longPollPoints(paymentResData.id);
     return {
       paymentType: "SPLIT" /* CREDIT_CARD_SPLIT */,
-      status: pointsStatus,
+      status: cardStatus,
       paymentId: paymentResData.id,
       txId: paymentResData.txId,
-      txHash: transaction.txHash
+      txHash: null
     };
   };
   return { splitPayment };
@@ -961,6 +1001,13 @@ var useCards = () => {
   };
 };
 
+// src/hooks/useSlapiBalance.ts
+var import_swr3 = __toESM(require("swr"), 1);
+var useSlapiBalance = () => {
+  const { data, isLoading, mutate } = (0, import_swr3.default)(`/v1/loyalty/accounts`);
+  return { balance: data?.detail, isBalanceLoading: isLoading, mutateBalance: mutate };
+};
+
 // src/components/CreditCardTab/CreditCard/CreditCard.tsx
 var import_react6 = require("react");
 var import_react_stripe_js2 = require("@stripe/react-stripe-js");
@@ -977,7 +1024,7 @@ var CardListItem = ({ card, isSelected, onSelect }) => {
     e.stopPropagation();
     if (isSelected || isRemoveDisabled) return;
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("button", { type: "button", onClick: handleSelect, className: "bg-primary/8 flex h-11 w-full overflow-hidden rounded-md", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("button", { type: "button", onClick: handleSelect, className: "bg-primary/8 flex h-11 w-full overflow-hidden rounded-sm", children: [
     /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "div",
       {
@@ -990,12 +1037,9 @@ var CardListItem = ({ card, isSelected, onSelect }) => {
     /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
       "div",
       {
-        className: cn(
-          "flex h-full w-full items-center justify-between rounded-r-md border-1 !border-l-0 border-transparent px-3",
-          {
-            "border-primary": isSelected
-          }
-        ),
+        className: cn("flex h-full w-full items-center justify-between border-1 !border-l-0 border-transparent px-3", {
+          "border-primary": isSelected
+        }),
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-sm font-medium text-black", children: card.schema }) }),
           /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center gap-2", children: [
@@ -1034,8 +1078,8 @@ var CardsList = ({ selectedCard, setCard }) => {
   const { cards, cardsIsLoading } = useCards();
   if (cardsIsLoading) {
     return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex w-full flex-col gap-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "bg-primary/8 h-11 animate-pulse rounded-md" }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "bg-primary/8 h-11 animate-pulse rounded-md" })
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "bg-primary/8 h-11 animate-pulse rounded-sm" }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "bg-primary/8 h-11 animate-pulse rounded-sm" })
     ] });
   }
   if (cards.length === 0) return null;
@@ -1280,13 +1324,6 @@ var import_react12 = require("react");
 // src/components/common/PointsSwitch.tsx
 var import_react7 = require("react");
 
-// src/hooks/useSlapiBalance.ts
-var import_swr3 = __toESM(require("swr"), 1);
-var useSlapiBalance = () => {
-  const { data, isLoading, mutate } = (0, import_swr3.default)(`/v1/loyalty/accounts`);
-  return { balance: data?.detail, isBalanceLoading: isLoading, mutateBalance: mutate };
-};
-
 // src/ui/switch.tsx
 var SwitchPrimitive = __toESM(require("@radix-ui/react-switch"), 1);
 var import_jsx_runtime14 = require("react/jsx-runtime");
@@ -2305,14 +2342,8 @@ function cn2(...inputs) {
 
 // src/ui/slider.tsx
 var import_jsx_runtime23 = require("react/jsx-runtime");
-function Slider2({
-  className,
-  defaultValue,
-  value,
-  min = 0,
-  max = 100,
-  ...props
-}) {
+function Slider2(props) {
+  const { className, defaultValue, value, min = 0, max = 100, ...rest } = props;
   const _values = React12.useMemo(
     () => Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max],
     [value, defaultValue, min, max]
@@ -2329,20 +2360,20 @@ function Slider2({
         "relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
         className
       ),
-      ...props,
+      ...rest,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
           Track,
           {
             "data-slot": "slider-track",
             className: cn2(
-              "bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
+              "relative grow overflow-hidden rounded-full bg-black/15 data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
             ),
             children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
               Range,
               {
                 "data-slot": "slider-range",
-                className: cn2("bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full")
+                className: cn2("absolute bg-black data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full")
               }
             )
           }
@@ -2351,7 +2382,7 @@ function Slider2({
           Thumb2,
           {
             "data-slot": "slider-thumb",
-            className: "border-primary bg-background ring-ring/50 block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
+            className: "ring-ring/50 block size-5 shrink-0 rounded-full border-1 border-white bg-black shadow-sm shadow-[#00000033] transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
           },
           index
         ))
@@ -2385,7 +2416,7 @@ var PointsSelector = (props) => {
     {
       disabled: isDisabled,
       onClick: onSelect,
-      className: cn("bg-primary/8 cursor-pointer overflow-hidden rounded-md border-1 border-transparent", {
+      className: cn("bg-primary/8 cursor-pointer overflow-hidden rounded-sm border-1 border-transparent", {
         "border-primary": isSelected,
         "cursor-not-allowed opacity-50": isDisabled
       }),
@@ -2480,11 +2511,14 @@ var SplitBlock = (props) => {
     [onToggle, env.environment]
   );
   (0, import_react11.useEffect)(() => {
-    setAddress(null);
-    setWalletReady(false);
-    initWallet(spreePayConfig?.pointsChain);
-  }, [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: [
+    if (env.useWeb3Points) {
+      setAddress(null);
+      setWalletReady(false);
+      initWallet(spreePayConfig?.pointsChain);
+    }
+  }, [spreePayConfig?.pointsChain, initWallet, env.useWeb3Points]);
+  const isPointsSelectorDisabled = env.useWeb3Points ? !walletReady : false;
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "flex flex-col gap-1", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(PointsSelector, { isDisabled: isPointsSelectorDisabled, 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-left text-xs font-medium text-black sm:text-sm", children: [
       /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "text-black/50", children: "Available" }),
       " ",
@@ -2537,13 +2571,16 @@ var Points = () => {
 var import_jsx_runtime27 = require("react/jsx-runtime");
 var CreditCardTab = () => {
   const { selectedPaymentMethod, setSelectedPaymentMethod } = useSpreePaymentMethod();
+  const { env } = useSpreePayEnv();
   const { appProps } = useStaticConfig();
   const { spreePayConfig } = useSpreePayConfig();
   const { register } = useSpreePayRegister();
   const { mutateCards } = useCards();
+  const { mutateBalance } = useSlapiBalance();
+  const isWeb3Enabled = Boolean(env.useWeb3Points);
   const { cardPayment } = useCardPayment();
-  const { splitPayment } = useSplitCardPayments();
-  const { pointsPayment } = usePointsPayment();
+  const { splitPayment } = useSplitCardPayments(isWeb3Enabled ? "web3" : "web2");
+  const { pointsPayment } = usePointsPayment(isWeb3Enabled ? "web3" : "web2");
   const handlePay = (0, import_react13.useCallback)(
     async (data) => {
       try {
@@ -2564,8 +2601,11 @@ var CreditCardTab = () => {
       } catch (_) {
         return Promise.reject(new PaymentError("Payment failed", "FAILED" /* FAILED */));
       } finally {
-        setSelectedPaymentMethod({ ...selectedPaymentMethod, type: "CREDIT_CARD" /* CREDIT_CARD */, method: null });
+        if ("token" in (selectedPaymentMethod.method || {})) {
+          setSelectedPaymentMethod({ ...selectedPaymentMethod, type: "CREDIT_CARD" /* CREDIT_CARD */, method: null });
+        }
         mutateCards();
+        mutateBalance();
       }
     },
     [
@@ -2576,7 +2616,8 @@ var CreditCardTab = () => {
       setSelectedPaymentMethod,
       cardPayment,
       splitPayment,
-      spreePayConfig
+      spreePayConfig,
+      mutateBalance
     ]
   );
   (0, import_react13.useEffect)(() => {

package/build/index.css

@@ -640,6 +640,9 @@
 .sl-spreepay .border-transparent {
   border-color: transparent;
 }
+.sl-spreepay .border-white {
+  border-color: var(--color-white);
+}
 .sl-spreepay .bg-\[\#006FD50D\] {
   background-color: #006FD50D;
 }
@@ -649,6 +652,9 @@
 .sl-spreepay .bg-background {
   background-color: var(--background);
 }
+.sl-spreepay .bg-black {
+  background-color: var(--color-black);
+}
 .sl-spreepay .bg-black\/4 {
   background-color: color-mix(in srgb, #000 4%, transparent);
   @supports (color: color-mix(in lab, red, red)) {
@@ -661,6 +667,12 @@
     background-color: color-mix(in oklab, var(--color-black) 10%, transparent);
   }
 }
+.sl-spreepay .bg-black\/15 {
+  background-color: color-mix(in srgb, #000 15%, transparent);
+  @supports (color: color-mix(in lab, red, red)) {
+    background-color: color-mix(in oklab, var(--color-black) 15%, transparent);
+  }
+}
 .sl-spreepay .bg-black\/50 {
   background-color: color-mix(in srgb, #000 50%, transparent);
   @supports (color: color-mix(in lab, red, red)) {
@@ -679,9 +691,6 @@
 .sl-spreepay .bg-gray-400 {
   background-color: var(--color-gray-400);
 }
-.sl-spreepay .bg-muted {
-  background-color: var(--muted);
-}
 .sl-spreepay .bg-primary {
   background-color: var(--primary);
 }
@@ -945,6 +954,12 @@
     var(--tw-ring-shadow),
     var(--tw-shadow);
 }
+.sl-spreepay .shadow-\[\#00000033\] {
+  --tw-shadow-color: #00000033;
+  @supports (color: color-mix(in lab, red, red)) {
+    --tw-shadow-color: color-mix(in oklab, #00000033 var(--tw-shadow-alpha), transparent);
+  }
+}
 .sl-spreepay .ring-ring\/50 {
   --tw-ring-color: var(--ring);
   @supports (color: color-mix(in lab, red, red)) {

package/build/index.d.cts

@@ -20,6 +20,7 @@ type ENV = {
     tenantId: string;
     redirect3dsURI: string;
     accessToken?: string;
+    useWeb3Points?: boolean;
 };
 
 declare enum BASE_SYMBOLS {

package/build/index.d.ts

@@ -20,6 +20,7 @@ type ENV = {
     tenantId: string;
     redirect3dsURI: string;
     accessToken?: string;
+    useWeb3Points?: boolean;
 };
 
 declare enum BASE_SYMBOLS {

package/build/index.js

@@ -4,7 +4,7 @@ import NiceModal7 from "@ebay/nice-modal-react";
 import { SWRConfig } from "swr";
 
 // package.json
-var version = "0.1.30";
+var version = "0.1.34";
 
 // src/context/SpreePayActionsContext.tsx
 import { createContext, useCallback, useContext, useRef, useState } from "react";
@@ -56,7 +56,8 @@ var SpreePayProvider = ({ children, env }) => {
     }
   }, []);
   const value = {
-    env,
+    // Set default to true for web3 points to backward compatibility
+    env: { ...env, useWeb3Points: env.useWeb3Points ?? true },
     enabled: Boolean(selectedPaymentMethod.method),
     isInternalProcessing,
     process,
@@ -110,6 +111,11 @@ var CONFIG = {
       slapiUrl: "https://slapi.dev.air.shop",
       keycloakUrl: "https://login.dev.air.shop",
       keycloakClientId: "oneof-next"
+    },
+    qiibee: {
+      slapiUrl: "https://slapi.dev.superlogic.com",
+      keycloakUrl: "https://sso.dev.tickets.qiibeefoundation.org",
+      keycloakClientId: "oneof-next"
     }
   },
   stg: {
@@ -122,6 +128,11 @@ var CONFIG = {
       slapiUrl: "https://slapi.stg.air.shop",
       keycloakUrl: "https://login.stg.air.shop",
       keycloakClientId: "oneof-next"
+    },
+    qiibee: {
+      slapiUrl: "https://slapi.stg.tickets.qiibeefoundation.org",
+      keycloakUrl: "https://sso.stg.tickets.qiibeefoundation.org",
+      keycloakClientId: "oneof-next"
     }
   },
   prod: {
@@ -134,6 +145,11 @@ var CONFIG = {
       slapiUrl: "https://slapi.air.shop",
       keycloakUrl: "https://login.air.shop",
       keycloakClientId: "oneof-next"
+    },
+    qiibee: {
+      slapiUrl: "https://slapi.tickets.qiibeefoundation.org",
+      keycloakUrl: "https://sso.tickets.qiibeefoundation.org",
+      keycloakClientId: "oneof-next"
     }
   }
 };
@@ -787,7 +803,11 @@ async function longPollCardStatus(paymentId) {
     if (detail.status === "FAILED" /* FAILED */) {
       throw new Error(`Something went wrong with the ${detail.validationType} payment`);
     }
-    if (detail.validationType === "POINTS") {
+    if (
+      // Process to points payment
+      detail.validationType === "POINTS" || // early card payment completion
+      ["AUTHORIZED" /* AUTHORIZED */, "CAPTURED" /* CAPTURED */].includes(detail.status)
+    ) {
       return detail.status;
     }
     if (!shown3ds && detail.card?.redirectUrl) {
@@ -804,7 +824,7 @@ async function longPollCardStatus(paymentId) {
 }
 
 // src/hooks/payments/usePointsPayment.ts
-var usePointsPayment = () => {
+var usePointsPayment = (mode = "web2") => {
   const { selectedPaymentMethod } = useSpreePaymentMethod();
   const { spreePayConfig } = useSpreePayConfig();
   const pointsPayment = async (params) => {
@@ -814,31 +834,42 @@ var usePointsPayment = () => {
     const { hash, capture, metadata } = params;
     const { data: paymentResData } = await SlapiPaymentService.createPayment({
       hash,
-      capture,
+      // capture should be always true for web2 points payments
+      capture: mode === "web2" ? true : 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");
+    if (mode === "web3") {
+      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 pointsStatus2 = await longPollPoints(paymentResData.id);
+      return {
+        status: pointsStatus2,
+        txId: paymentResData.txId,
+        txHash: transaction.txHash,
+        paymentId: paymentResData.id,
+        paymentType: "POINTS" /* POINTS */
+      };
     }
-    await SlapiPaymentService.validatePoints({
-      paymentId: paymentResData.id,
-      txHash: transaction.txHash
-    });
     const pointsStatus = await longPollPoints(paymentResData.id);
     return {
       status: pointsStatus,
       txId: paymentResData.txId,
-      txHash: transaction.txHash,
+      txHash: null,
       paymentId: paymentResData.id,
       paymentType: "POINTS" /* POINTS */
     };
@@ -847,7 +878,7 @@ var usePointsPayment = () => {
 };
 
 // src/hooks/payments/useSplitCardPayments.ts
-var useSplitCardPayments = () => {
+var useSplitCardPayments = (mode = "web2") => {
   const { selectedPaymentMethod } = useSpreePaymentMethod();
   const { env } = useSpreePayEnv();
   const { appProps } = useStaticConfig();
@@ -881,30 +912,39 @@ var useSplitCardPayments = () => {
         amount: points
       }
     });
-    await longPollCardStatus(paymentResData.id);
-    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");
+    const cardStatus = await longPollCardStatus(paymentResData.id);
+    if (mode === "web3") {
+      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 {
+        paymentType: "SPLIT" /* CREDIT_CARD_SPLIT */,
+        status: pointsStatus,
+        paymentId: paymentResData.id,
+        txId: paymentResData.txId,
+        txHash: transaction.txHash
+      };
     }
-    await SlapiPaymentService.validatePoints({
-      paymentId: paymentResData.id,
-      txHash: transaction.txHash
-    });
-    const pointsStatus = await longPollPoints(paymentResData.id);
     return {
       paymentType: "SPLIT" /* CREDIT_CARD_SPLIT */,
-      status: pointsStatus,
+      status: cardStatus,
       paymentId: paymentResData.id,
       txId: paymentResData.txId,
-      txHash: transaction.txHash
+      txHash: null
     };
   };
   return { splitPayment };
@@ -921,6 +961,13 @@ var useCards = () => {
   };
 };
 
+// src/hooks/useSlapiBalance.ts
+import useSWR3 from "swr";
+var useSlapiBalance = () => {
+  const { data, isLoading, mutate } = useSWR3(`/v1/loyalty/accounts`);
+  return { balance: data?.detail, isBalanceLoading: isLoading, mutateBalance: mutate };
+};
+
 // src/components/CreditCardTab/CreditCard/CreditCard.tsx
 import { useMemo as useMemo2, useState as useState4 } from "react";
 import { Elements } from "@stripe/react-stripe-js";
@@ -937,7 +984,7 @@ var CardListItem = ({ card, isSelected, onSelect }) => {
     e.stopPropagation();
     if (isSelected || isRemoveDisabled) return;
   };
-  return /* @__PURE__ */ jsxs6("button", { type: "button", onClick: handleSelect, className: "bg-primary/8 flex h-11 w-full overflow-hidden rounded-md", children: [
+  return /* @__PURE__ */ jsxs6("button", { type: "button", onClick: handleSelect, className: "bg-primary/8 flex h-11 w-full overflow-hidden rounded-sm", children: [
     /* @__PURE__ */ jsx8(
       "div",
       {
@@ -950,12 +997,9 @@ var CardListItem = ({ card, isSelected, onSelect }) => {
     /* @__PURE__ */ jsxs6(
       "div",
       {
-        className: cn(
-          "flex h-full w-full items-center justify-between rounded-r-md border-1 !border-l-0 border-transparent px-3",
-          {
-            "border-primary": isSelected
-          }
-        ),
+        className: cn("flex h-full w-full items-center justify-between border-1 !border-l-0 border-transparent px-3", {
+          "border-primary": isSelected
+        }),
         children: [
           /* @__PURE__ */ jsx8("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx8("p", { className: "text-sm font-medium text-black", children: card.schema }) }),
           /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2", children: [
@@ -994,8 +1038,8 @@ var CardsList = ({ selectedCard, setCard }) => {
   const { cards, cardsIsLoading } = useCards();
   if (cardsIsLoading) {
     return /* @__PURE__ */ jsxs6("div", { className: "flex w-full flex-col gap-1", children: [
-      /* @__PURE__ */ jsx8("div", { className: "bg-primary/8 h-11 animate-pulse rounded-md" }),
-      /* @__PURE__ */ jsx8("div", { className: "bg-primary/8 h-11 animate-pulse rounded-md" })
+      /* @__PURE__ */ jsx8("div", { className: "bg-primary/8 h-11 animate-pulse rounded-sm" }),
+      /* @__PURE__ */ jsx8("div", { className: "bg-primary/8 h-11 animate-pulse rounded-sm" })
     ] });
   }
   if (cards.length === 0) return null;
@@ -1240,13 +1284,6 @@ import { useState as useState10 } from "react";
 // src/components/common/PointsSwitch.tsx
 import { useId as useId2 } from "react";
 
-// src/hooks/useSlapiBalance.ts
-import useSWR3 from "swr";
-var useSlapiBalance = () => {
-  const { data, isLoading, mutate } = useSWR3(`/v1/loyalty/accounts`);
-  return { balance: data?.detail, isBalanceLoading: isLoading, mutateBalance: mutate };
-};
-
 // src/ui/switch.tsx
 import * as SwitchPrimitive from "@radix-ui/react-switch";
 import { jsx as jsx14 } from "react/jsx-runtime";
@@ -2265,14 +2302,8 @@ function cn2(...inputs) {
 
 // src/ui/slider.tsx
 import { jsx as jsx23, jsxs as jsxs11 } from "react/jsx-runtime";
-function Slider2({
-  className,
-  defaultValue,
-  value,
-  min = 0,
-  max = 100,
-  ...props
-}) {
+function Slider2(props) {
+  const { className, defaultValue, value, min = 0, max = 100, ...rest } = props;
   const _values = React12.useMemo(
     () => Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max],
     [value, defaultValue, min, max]
@@ -2289,20 +2320,20 @@ function Slider2({
         "relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
         className
       ),
-      ...props,
+      ...rest,
       children: [
         /* @__PURE__ */ jsx23(
           Track,
           {
             "data-slot": "slider-track",
             className: cn2(
-              "bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
+              "relative grow overflow-hidden rounded-full bg-black/15 data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
             ),
             children: /* @__PURE__ */ jsx23(
               Range,
               {
                 "data-slot": "slider-range",
-                className: cn2("bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full")
+                className: cn2("absolute bg-black data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full")
               }
             )
           }
@@ -2311,7 +2342,7 @@ function Slider2({
           Thumb2,
           {
             "data-slot": "slider-thumb",
-            className: "border-primary bg-background ring-ring/50 block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
+            className: "ring-ring/50 block size-5 shrink-0 rounded-full border-1 border-white bg-black shadow-sm shadow-[#00000033] transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
           },
           index
         ))
@@ -2345,7 +2376,7 @@ var PointsSelector = (props) => {
     {
       disabled: isDisabled,
       onClick: onSelect,
-      className: cn("bg-primary/8 cursor-pointer overflow-hidden rounded-md border-1 border-transparent", {
+      className: cn("bg-primary/8 cursor-pointer overflow-hidden rounded-sm border-1 border-transparent", {
         "border-primary": isSelected,
         "cursor-not-allowed opacity-50": isDisabled
       }),
@@ -2440,11 +2471,14 @@ var SplitBlock = (props) => {
     [onToggle, env.environment]
   );
   useEffect6(() => {
-    setAddress(null);
-    setWalletReady(false);
-    initWallet(spreePayConfig?.pointsChain);
-  }, [spreePayConfig?.pointsChain, initWallet]);
-  return /* @__PURE__ */ jsx25("div", { className: "flex flex-col gap-1", children: /* @__PURE__ */ jsxs13(PointsSelector, { isDisabled: !walletReady, onSelect: () => onSelect("air"), isSelected, children: [
+    if (env.useWeb3Points) {
+      setAddress(null);
+      setWalletReady(false);
+      initWallet(spreePayConfig?.pointsChain);
+    }
+  }, [spreePayConfig?.pointsChain, initWallet, env.useWeb3Points]);
+  const isPointsSelectorDisabled = env.useWeb3Points ? !walletReady : false;
+  return /* @__PURE__ */ jsx25("div", { className: "flex flex-col gap-1", children: /* @__PURE__ */ jsxs13(PointsSelector, { isDisabled: isPointsSelectorDisabled, onSelect: () => onSelect("air"), isSelected, children: [
     /* @__PURE__ */ jsx25("div", { className: "flex items-center gap-2", children: balance?.availablePoints ? /* @__PURE__ */ jsxs13("p", { className: "text-left text-xs font-medium text-black sm:text-sm", children: [
       /* @__PURE__ */ jsx25("span", { className: "text-black/50", children: "Available" }),
       " ",
@@ -2497,13 +2531,16 @@ var Points = () => {
 import { jsx as jsx27, jsxs as jsxs15 } from "react/jsx-runtime";
 var CreditCardTab = () => {
   const { selectedPaymentMethod, setSelectedPaymentMethod } = useSpreePaymentMethod();
+  const { env } = useSpreePayEnv();
   const { appProps } = useStaticConfig();
   const { spreePayConfig } = useSpreePayConfig();
   const { register } = useSpreePayRegister();
   const { mutateCards } = useCards();
+  const { mutateBalance } = useSlapiBalance();
+  const isWeb3Enabled = Boolean(env.useWeb3Points);
   const { cardPayment } = useCardPayment();
-  const { splitPayment } = useSplitCardPayments();
-  const { pointsPayment } = usePointsPayment();
+  const { splitPayment } = useSplitCardPayments(isWeb3Enabled ? "web3" : "web2");
+  const { pointsPayment } = usePointsPayment(isWeb3Enabled ? "web3" : "web2");
   const handlePay = useCallback5(
     async (data) => {
       try {
@@ -2524,8 +2561,11 @@ var CreditCardTab = () => {
       } catch (_) {
         return Promise.reject(new PaymentError("Payment failed", "FAILED" /* FAILED */));
       } finally {
-        setSelectedPaymentMethod({ ...selectedPaymentMethod, type: "CREDIT_CARD" /* CREDIT_CARD */, method: null });
+        if ("token" in (selectedPaymentMethod.method || {})) {
+          setSelectedPaymentMethod({ ...selectedPaymentMethod, type: "CREDIT_CARD" /* CREDIT_CARD */, method: null });
+        }
         mutateCards();
+        mutateBalance();
       }
     },
     [
@@ -2536,7 +2576,8 @@ var CreditCardTab = () => {
       setSelectedPaymentMethod,
       cardPayment,
       splitPayment,
-      spreePayConfig
+      spreePayConfig,
+      mutateBalance
     ]
   );
   useEffect7(() => {

package/package.json

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