npm - @superlogic/spree-pay - Versions diffs - 0.1.4 → 0.1.5 - Mend

@superlogic/spree-pay 0.1.4 → 0.1.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/README.md CHANGED Viewed

@@ -18,8 +18,8 @@ import { SpreePay, SpreePayProvider, useSpreePay } from '@superlogic/spree-pay';
 const spreeEnv = {
   tenantId: 'moca' // Keep moca for crypto payments on BASE network
   environment: 'dev',
-  accessToken: 'eyJhbGciOiJSUzI1NiIs...', // Use user JWT token
   redirect3dsURI: '/3ds' // Any valid URI in your app that captures 3ds redirect
+  ssoPageURI: '/silent-check-sso.html' // Any valid URI in your app that will handle keyklock SSO (example below)
 };
 function Checkout() {
@@ -70,3 +70,18 @@ export default function ThreeDSRedirectPage() {
 }
 ```
+## Keyklock SSO page example (/silent-check-sso.html)
+```html
+<!doctype html>
+<html>
+  <body>
+    <script>
+      try {
+        parent.postMessage(location.href, location.origin);
+      } catch (e) {}
+    </script>
+  </body>
+</html>
+```

package/build/index.cjs CHANGED Viewed

@@ -38,7 +38,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 // src/SpreePay.tsx
-var import_react11 = require("react");
+var import_react12 = require("react");
 var import_nice_modal_react6 = __toESM(require("@ebay/nice-modal-react"), 1);
 var import_swr4 = require("swr");
@@ -5648,7 +5648,8 @@ var cardPayment = async ({ card, hash, redirect3dsURI }) => {
     }
   }
   return {
-    status: paymentResData.status
+    status: paymentResData.status,
+    paymentId: paymentResData.id
   };
 };
@@ -6643,31 +6644,170 @@ var import_react_query = require("@tanstack/react-query");
 var import_nice_modal_react5 = __toESM(require("@ebay/nice-modal-react"), 1);
 var import_rainbowkit2 = require("@rainbow-me/rainbowkit");
 var import_styles = require("@rainbow-me/rainbowkit/styles.css");
-var import_wagmi4 = require("wagmi");
+var import_wagmi5 = require("wagmi");
 var import_chains = require("wagmi/chains");
 // src/components/CryptoTab/Crypto/Crypto.tsx
 var import_react10 = require("react");
-var import_wagmi3 = require("wagmi");
+var import_wagmi4 = require("wagmi");
-// src/services/cryptoPayment.ts
-var cryptoPayment = async (params) => {
-  const { publicKey, coinSymbol, hash, sendTransaction } = params;
-  const paymentRes = await SlapiPaymentService.createPayment({
-    type: "CRYPTO" /* CRYPTO */,
-    hash,
-    crypto: {
-      token: coinSymbol,
-      publicKey,
-      slippageType: "fixed",
-      slippageBps: 0.5 * 100
+// ../../node_modules/@wagmi/core/dist/esm/utils/getAction.js
+function getAction(client, actionFn, name) {
+  const action_implicit = client[actionFn.name];
+  if (typeof action_implicit === "function")
+    return action_implicit;
+  const action_explicit = client[name];
+  if (typeof action_explicit === "function")
+    return action_explicit;
+  return (params) => actionFn(client, params);
+}
+// ../../node_modules/@wagmi/core/dist/esm/actions/readContract.js
+var import_actions = require("viem/actions");
+function readContract(config2, parameters) {
+  const { chainId, ...rest } = parameters;
+  const client = config2.getClient({ chainId });
+  const action = getAction(client, import_actions.readContract, "readContract");
+  return action(rest);
+}
+// ../../node_modules/@wagmi/core/dist/esm/actions/waitForTransactionReceipt.js
+var import_viem = require("viem");
+var import_actions2 = require("viem/actions");
+async function waitForTransactionReceipt(config2, parameters) {
+  const { chainId, timeout = 0, ...rest } = parameters;
+  const client = config2.getClient({ chainId });
+  const action = getAction(client, import_actions2.waitForTransactionReceipt, "waitForTransactionReceipt");
+  const receipt = await action({ ...rest, timeout });
+  if (receipt.status === "reverted") {
+    const action_getTransaction = getAction(client, import_actions2.getTransaction, "getTransaction");
+    const txn = await action_getTransaction({ hash: receipt.transactionHash });
+    const action_call = getAction(client, import_actions2.call, "call");
+    const code = await action_call({
+      ...txn,
+      data: txn.input,
+      gasPrice: txn.type !== "eip1559" ? txn.gasPrice : void 0,
+      maxFeePerGas: txn.type === "eip1559" ? txn.maxFeePerGas : void 0,
+      maxPriorityFeePerGas: txn.type === "eip1559" ? txn.maxPriorityFeePerGas : void 0
+    });
+    const reason = code?.data ? (0, import_viem.hexToString)(`0x${code.data.substring(138)}`) : "unknown reason";
+    throw new Error(reason);
+  }
+  return {
+    ...receipt,
+    chainId: client.chain.id
+  };
+}
+// ../../node_modules/@wagmi/core/dist/esm/exports/index.js
+var import_viem2 = require("viem");
+// src/hooks/useCryptoPayment.ts
+var import_viem3 = require("viem");
+var import_wagmi = require("wagmi");
+// src/config/baseTokens.ts
+var BASE_CHAIN_ID = 8453;
+var BASE_TOKENS = [
+  {
+    address: "0x2b11834ed1feaed4b4b3a86a6f571315e25a884d",
+    chainId: BASE_CHAIN_ID,
+    decimals: 18,
+    symbol: "MOCA" /* MOCA */,
+    name: "Moca",
+    logoURI: "https://assets.coingecko.com/coins/images/30046/standard/moca.png"
+  },
+  {
+    address: "0x833589fCD6eDb6E08f4c7C32D4f71b54bDA02913",
+    chainId: BASE_CHAIN_ID,
+    decimals: 6,
+    symbol: "USDC" /* USDC */,
+    name: "USD Coin",
+    logoURI: "https://cryptologos.cc/logos/usd-coin-usdc-logo.png"
+  },
+  {
+    address: "0x4200000000000000000000000000000000000006",
+    chainId: BASE_CHAIN_ID,
+    decimals: 18,
+    symbol: "WETH" /* WETH */,
+    name: "Wrapped Ether",
+    logoURI: "https://static.cdnlogo.com/logos/e/84/ethereum-eth_thumb.png"
+  },
+  {
+    address: "0xfde4c96c8593536e31f229ea8f37b2ada2699bb2",
+    chainId: BASE_CHAIN_ID,
+    decimals: 6,
+    symbol: "USDT" /* USDT */,
+    name: "Tether USD",
+    logoURI: "https://cryptologos.cc/logos/tether-usdt-logo.png"
+  }
+];
+// src/hooks/useCryptoPayment.ts
+var MAX_UINT256 = BigInt(2) ** BigInt(256) - BigInt(1);
+var ONE_INCH_AGGREGATION_ROUTER_V6 = "0x111111125421ca6dc452d289314280a0f8842a65";
+var useCryptoPayment = () => {
+  const { data: walletClient } = (0, import_wagmi.useWalletClient)();
+  const config2 = (0, import_wagmi.useConfig)();
+  const { selectedPaymentMethod } = useSpreePaymentMethod();
+  const cryptoPayment = async ({ hash }) => {
+    if (!walletClient) {
+      throw new Error("Wallet not connected");
     }
-  });
-  const encodedTX = paymentRes.data.encodedTx;
-  const parsedTX = JSON.parse(encodedTX);
-  const txHash = await sendTransaction(parsedTX);
-  const res = await SlapiPaymentService.baseVerify({ id: paymentRes.data.txId, txHash });
-  return { status: res.verified ? "AUTHORIZED" /* AUTHORIZED */ : "FAILED" /* FAILED */ };
+    if (selectedPaymentMethod.type !== "CRYPTO" /* CRYPTO */ || !selectedPaymentMethod.method?.symbol) {
+      throw new Error("Unsupported payment method");
+    }
+    const TOKEN = selectedPaymentMethod.method.symbol;
+    if (["MOCA" /* MOCA */, "WETH" /* WETH */, "USDC" /* USDC */, "USDT" /* USDT */].includes(TOKEN)) {
+      const tokenAddress = selectedPaymentMethod.method.address;
+      if (!tokenAddress) {
+        throw new Error("Token address not found");
+      }
+      const allowance = await readContract(config2, {
+        address: tokenAddress,
+        abi: import_viem3.erc20Abi,
+        functionName: "allowance",
+        args: [walletClient.account.address, ONE_INCH_AGGREGATION_ROUTER_V6]
+      });
+      if (allowance <= 0n) {
+        const result = await walletClient.writeContract({
+          address: tokenAddress,
+          abi: import_viem3.erc20Abi,
+          functionName: "approve",
+          args: [ONE_INCH_AGGREGATION_ROUTER_V6, MAX_UINT256]
+        });
+        await waitForTransactionReceipt(config2, {
+          hash: result,
+          confirmations: 1
+          // You can change the number of block confirmations as per your requirement
+        });
+      }
+    }
+    const paymentRes = await SlapiPaymentService.createPayment({
+      type: "CRYPTO" /* CRYPTO */,
+      hash,
+      crypto: {
+        token: TOKEN,
+        publicKey: walletClient.account.address,
+        slippageType: "fixed",
+        slippageBps: 0.5 * 100
+      }
+    });
+    const parsedTX = JSON.parse(paymentRes.data.encodedTx);
+    const txHash = await walletClient.sendTransaction({
+      account: walletClient.account.address,
+      to: parsedTX.to,
+      data: parsedTX.data,
+      value: parsedTX.value
+    });
+    const res = await SlapiPaymentService.baseVerify({ id: paymentRes.data.txId, txHash });
+    return {
+      txHash,
+      paymentId: paymentRes.data.txId,
+      status: res.verified ? "AUTHORIZED" /* AUTHORIZED */ : "FAILED" /* FAILED */
+    };
+  };
+  return { cryptoPayment };
 };
 // src/components/CryptoTab/Crypto/ConnectButton.tsx
@@ -6830,50 +6970,12 @@ var import_nice_modal_react3 = __toESM(require("@ebay/nice-modal-react"), 1);
 // src/hooks/useBaseERC20Token.ts
 var React30 = __toESM(require("react"), 1);
-var import_viem = require("viem");
-var import_wagmi = require("wagmi");
-// src/config/baseTokens.ts
-var BASE_TOKENS = [
-  {
-    address: "0x2b11834ed1feaed4b4b3a86a6f571315e25a884d",
-    chainId: 8453,
-    decimals: 18,
-    symbol: "MOCA",
-    name: "Moca",
-    logoURI: "https://assets.coingecko.com/coins/images/30046/standard/moca.png"
-  },
-  {
-    address: "0x833589fCD6eDb6E08f4c7C32D4f71b54bDA02913",
-    chainId: 8453,
-    decimals: 6,
-    symbol: "USDC",
-    name: "USD Coin",
-    logoURI: "https://cryptologos.cc/logos/usd-coin-usdc-logo.png"
-  },
-  {
-    address: "0x4200000000000000000000000000000000000006",
-    chainId: 8453,
-    decimals: 18,
-    symbol: "WETH",
-    name: "Wrapped Ether",
-    logoURI: "https://static.cdnlogo.com/logos/e/84/ethereum-eth_thumb.png"
-  },
-  {
-    address: "0xfde4c96c8593536e31f229ea8f37b2ada2699bb2",
-    chainId: 8453,
-    decimals: 6,
-    symbol: "USDT",
-    name: "Tether USD",
-    logoURI: "https://cryptologos.cc/logos/tether-usdt-logo.png"
-  }
-];
-// src/hooks/useBaseERC20Token.ts
+var import_viem4 = require("viem");
+var import_wagmi2 = require("wagmi");
 function useBaseERC20Token() {
-  const { address } = (0, import_wagmi.useAccount)();
-  const baseClient = (0, import_wagmi.usePublicClient)({ chainId: 8453 });
-  const defaultClient = (0, import_wagmi.usePublicClient)();
+  const { address } = (0, import_wagmi2.useAccount)();
+  const baseClient = (0, import_wagmi2.usePublicClient)({ chainId: BASE_CHAIN_ID });
+  const defaultClient = (0, import_wagmi2.usePublicClient)();
   const [rows, setRows] = React30.useState([]);
   const [isLoading, setLoading] = React30.useState(false);
   const [error, setError] = React30.useState(null);
@@ -6890,7 +6992,7 @@ function useBaseERC20Token() {
         const normalizedTokens = [];
         for (const t of BASE_TOKENS) {
           try {
-            const addr = (0, import_viem.getAddress)(t.address);
+            const addr = (0, import_viem4.getAddress)(t.address);
             normalizedTokens.push({ ...t, address: addr });
           } catch {
           }
@@ -6899,7 +7001,7 @@ function useBaseERC20Token() {
           allowFailure: true,
           contracts: normalizedTokens.map((t) => ({
             address: t.address,
-            abi: import_viem.erc20Abi,
+            abi: import_viem4.erc20Abi,
             functionName: "balanceOf",
             args: [address]
           }))
@@ -6910,14 +7012,16 @@ function useBaseERC20Token() {
           const t = normalizedTokens[idx];
           if (r2.status === "success") {
             const raw = r2.result;
-            if (raw > 0n) acc.push({ ...t, raw, formatted: (0, import_viem.formatUnits)(raw, t.decimals) });
+            if (raw > 0n) acc.push({ ...t, raw, formatted: (0, import_viem4.formatUnits)(raw, t.decimals) });
           }
         }
         if (!cancelled) setRows(acc);
       } catch (e) {
         if (!cancelled) {
           const msg = e instanceof Error ? e.message : "Multicall failed";
-          setError(baseClient ? msg : "Base client unavailable. Ensure Base (8453) is configured in Wagmi.");
+          setError(
+            baseClient ? msg : `Base client unavailable. Ensure Base (${BASE_CHAIN_ID}) is configured in Wagmi.`
+          );
         }
       } finally {
         if (!cancelled) setLoading(false);
@@ -6932,16 +7036,15 @@ function useBaseERC20Token() {
 }
 // src/hooks/useBaseNativeToken.ts
-var import_wagmi2 = require("wagmi");
+var import_wagmi3 = require("wagmi");
 function useBaseNativeToken() {
-  const { address } = (0, import_wagmi2.useAccount)();
-  const { data, isLoading, error } = (0, import_wagmi2.useBalance)({
+  const { address } = (0, import_wagmi3.useAccount)();
+  const { data, isLoading, error } = (0, import_wagmi3.useBalance)({
     address,
-    chainId: 8453,
-    // Base
+    chainId: BASE_CHAIN_ID,
     query: { enabled: !!address }
   });
-  const nativeBalance = data ? { ...data, logoURI: "https://static.cdnlogo.com/logos/e/84/ethereum-eth_thumb.png" } : void 0;
+  const nativeBalance = data ? { ...data, symbol: "ETH" /* ETH */, logoURI: "https://static.cdnlogo.com/logos/e/84/ethereum-eth_thumb.png" } : void 0;
   return {
     isLoadingNative: isLoading,
     nativeError: error?.message ?? null,
@@ -7009,7 +7112,6 @@ var CryptoSelectModal = import_nice_modal_react3.default.create(() => {
           return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
             "button",
             {
-              disabled: true,
               className: "flex h-11 w-full items-center justify-between gap-4 rounded-sm px-1.5 hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-50",
               onClick: () => handleSelect(coin),
               children: [
@@ -7069,41 +7171,24 @@ var SelectedCoin = (props) => {
 // src/components/CryptoTab/Crypto/Crypto.tsx
 var import_jsx_runtime31 = require("react/jsx-runtime");
 var Crypto = () => {
-  const { address } = (0, import_wagmi3.useAccount)();
-  const { data: walletClient } = (0, import_wagmi3.useWalletClient)();
+  const { address } = (0, import_wagmi4.useAccount)();
   const { selectedPaymentMethod } = useSpreePaymentMethod();
+  const { cryptoPayment } = useCryptoPayment();
   const isWalletConnected = Boolean(address);
   const { register } = useSpreePayRegister();
   const handlePay = (0, import_react10.useCallback)(
     async (data) => {
       try {
-        if (selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && selectedPaymentMethod.method) {
-          if (!walletClient || !address) throw new Error("Wallet not connected");
-          const sendTransaction = (encodedTx) => {
-            return walletClient.sendTransaction({
-              account: address,
-              to: encodedTx.to,
-              data: encodedTx.data,
-              value: encodedTx.value
-            });
-          };
-          const res = await cryptoPayment({
-            hash: data.hash,
-            coinSymbol: selectedPaymentMethod.method.symbol,
-            publicKey: address,
-            sendTransaction
-          });
-          if (["AUTHORIZED" /* AUTHORIZED */, "CAPTURED" /* CAPTURED */].includes(res.status)) {
-            return Promise.resolve(res);
-          }
-          return Promise.reject(new PaymentError("Crypto payment failed", res.status));
+        const res = await cryptoPayment({ hash: data.hash });
+        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("Crypto payment failed", res.status));
       } catch (_) {
         return Promise.reject(new PaymentError("Payment failed", "FAILED" /* FAILED */));
       }
     },
-    [selectedPaymentMethod, address, walletClient]
+    [cryptoPayment]
   );
   (0, import_react10.useEffect)(() => {
     register(handlePay);
@@ -7138,7 +7223,7 @@ var config = (0, import_rainbowkit2.getDefaultConfig)({
   ssr: true
 });
 var CryptoWrapper = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_wagmi4.WagmiProvider, { config, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react_query.QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_rainbowkit2.RainbowKitProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_nice_modal_react5.default.Provider, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Crypto, {}) }) }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_wagmi5.WagmiProvider, { config, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react_query.QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_rainbowkit2.RainbowKitProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_nice_modal_react5.default.Provider, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Crypto, {}) }) }) }) });
 };
 // src/components/CryptoTab/CryptoTab.tsx
@@ -7213,7 +7298,7 @@ var Tabs = () => {
   const { selectedPaymentMethod, setSelectedPaymentMethod } = useSpreePaymentMethod();
   return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "mb-4 rounded-2xl border border-black/25 bg-white", children: [
     /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex w-full flex-col gap-4 border-b-1 border-black/7 px-7 py-6", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("h2", { className: "text-primary text-2xl font-semibold", children: "Choose a 123Payment Method" }),
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("h2", { className: "text-primary text-2xl font-semibold", children: "Choose a Payment Method" }),
       /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TabButtons, { value: selectedPaymentMethod.type, onChange: setSelectedPaymentMethod })
     ] }),
     selectedPaymentMethod.type === "CREDIT_CARD" /* CREDIT_CARD */ && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(CreditCardTab, {}),
@@ -7224,32 +7309,150 @@ var Tabs = () => {
 // src/SpreePayContent.tsx
 var import_jsx_runtime36 = require("react/jsx-runtime");
 var SpreePayContent = (props) => {
-  const { className, amount, onProcess } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: cn("sl-spreepay", className), children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "w-full", children: [
+  const { amount, onProcess } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "w-full", children: [
     /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Tabs, {}),
     /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(CheckoutButton, { onCheckout: onProcess, amount }),
     /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(SpreeLegal, {})
-  ] }) });
+  ] });
 };
+// src/hooks/useKeycloakSSO.ts
+var import_react11 = require("react");
+var import_keycloak_js = __toESM(require("keycloak-js"), 1);
+var refreshAheadSeconds = 60;
+function useKeycloakSSO(config2) {
+  const { url, realm, clientId, ssoPageURI } = config2;
+  const initRef = (0, import_react11.useRef)(false);
+  const kcRef = (0, import_react11.useRef)(null);
+  const refreshTimerRef = (0, import_react11.useRef)(null);
+  const [error, setError] = (0, import_react11.useState)(null);
+  const [isChecking, setIsChecking] = (0, import_react11.useState)(false);
+  const [accessToken, setAccessToken] = (0, import_react11.useState)(null);
+  const scheduleRefresh = (0, import_react11.useCallback)(() => {
+    const kc = kcRef.current;
+    if (!kc || !kc.tokenParsed || !kc.tokenParsed.exp) {
+      return;
+    }
+    const expSeconds = kc.tokenParsed.exp;
+    const nowSeconds = Math.floor(Date.now() / 1e3);
+    const delaySeconds = Math.max(expSeconds - nowSeconds - refreshAheadSeconds, 5);
+    const delayMs = delaySeconds * 1e3;
+    if (refreshTimerRef.current) clearTimeout(refreshTimerRef.current);
+    refreshTimerRef.current = setTimeout(() => {
+      kc.updateToken(refreshAheadSeconds).then((refreshed) => {
+        if (refreshed) {
+          setAccessToken(kc.token ?? null);
+          scheduleRefresh();
+        }
+      }).catch((_) => {
+        kc.login().catch(console.error);
+      });
+    }, delayMs);
+  }, []);
+  (0, import_react11.useEffect)(() => {
+    if (initRef.current) return;
+    initRef.current = true;
+    setIsChecking(true);
+    const kc = new import_keycloak_js.default({ url, realm, clientId });
+    kcRef.current = kc;
+    kc.onTokenExpired = () => {
+      kc.updateToken(refreshAheadSeconds).then((refreshed) => {
+        if (refreshed) {
+          setAccessToken(kc.token ?? null);
+          scheduleRefresh();
+        }
+      }).catch((err) => {
+        console.error("[Keycloak] onTokenExpired refresh failed", err);
+      });
+    };
+    kc.init({
+      onLoad: "check-sso",
+      silentCheckSsoRedirectUri: `${window.location.origin}${ssoPageURI}`,
+      silentCheckSsoFallback: true
+    }).then((auth) => {
+      console.log("[Keycloak] init success, authenticated=", auth);
+      setAccessToken(kc.token ?? null);
+      if (auth) scheduleRefresh();
+    }).catch((err) => {
+      setError(err);
+    }).finally(() => setIsChecking(false));
+    return () => {
+      if (refreshTimerRef.current) clearTimeout(refreshTimerRef.current);
+    };
+  }, [ssoPageURI, scheduleRefresh, clientId, url, realm]);
+  return { isChecking, accessToken, error };
+}
 // src/SpreePay.tsx
 var import_jsx_runtime37 = require("react/jsx-runtime");
 var envConfig = {
-  dev: { slapiUrl: "https://slapi.dev.superlogic.com" },
-  stg: { slapiUrl: "https://slapi.dev.superlogic.com" },
-  prod: { slapiUrl: "https://slapi.dev.superlogic.com" }
+  dev: {
+    bookit: {
+      slapiUrl: "https://slapi.dev.superlogic.com",
+      keyklockUrl: "https://auth.dev.join.bookit.com",
+      keyklockClientId: "oneof-next"
+    },
+    moca: {
+      slapiUrl: "https://slapi.dev.air.shop",
+      keyklockUrl: "https://login.dev.air.shop",
+      keyklockClientId: "oneof-next"
+    }
+  },
+  stg: {
+    bookit: {
+      slapiUrl: "https://slapi.stg.superlogic.com",
+      keyklockUrl: "https://auth.stg.join.bookit.com",
+      keyklockClientId: "oneof-next"
+    },
+    moca: {
+      slapiUrl: "https://slapi.stg.superlogic.com",
+      keyklockUrl: "https://login.stg.air.shop",
+      keyklockClientId: "oneof-next"
+    }
+  },
+  prod: {
+    bookit: {
+      slapiUrl: "https://slapi.superlogic.com",
+      keyklockUrl: "https://auth.join.bookit.com",
+      keyklockClientId: "oneof-next"
+    },
+    moca: {
+      slapiUrl: "https://slapi.superlogic.com",
+      keyklockUrl: "https://login.air.shop",
+      keyklockClientId: "oneof-next"
+    }
+  }
 };
-var SpreePay = (props) => {
+var SpreePay = ({ className, ...rest }) => {
   const { env } = useSpreePayEnv();
-  const slapiFetcher = (0, import_react11.useMemo)(
-    () => registerApi({
-      tenantId: env.tenantId,
-      accessToken: env.accessToken,
-      baseUrl: envConfig[env.environment].slapiUrl
-    }),
-    [env]
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+  const environment = env?.environment || "dev";
+  const tenantId = env?.tenantId || "bookit";
+  const { isChecking, accessToken, error } = useKeycloakSSO({
+    realm: env.tenantId,
+    url: envConfig[environment][tenantId].keyklockUrl,
+    clientId: envConfig[environment][tenantId].keyklockClientId,
+    ssoPageURI: env.ssoPageURI
+  });
+  const slapiFetcher = (0, import_react12.useMemo)(() => {
+    if (accessToken) {
+      return registerApi({
+        accessToken,
+        tenantId,
+        baseUrl: envConfig[environment][tenantId].slapiUrl
+      });
+    }
+  }, [environment, tenantId, accessToken]);
+  if (isChecking) {
+    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: cn("sl-spreepay", className), children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "w-full text-center text-sm", children: "Loading..." }) });
+  }
+  if (error) {
+    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: cn("sl-spreepay", className), children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("p", { className: "w-full text-center text-sm", children: [
+      "Error: ",
+      error.message
+    ] }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: cn("sl-spreepay", className), children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
     import_swr4.SWRConfig,
     {
       value: {
@@ -7258,15 +7461,15 @@ var SpreePay = (props) => {
         revalidateIfStale: false,
         revalidateOnReconnect: false
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_nice_modal_react6.default.Provider, { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(SpreePayContent, { ...props }) })
+      children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_nice_modal_react6.default.Provider, { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(SpreePayContent, { ...rest }) })
     }
-  );
+  ) });
 };
 // src/hooks/useCapture3DS.ts
-var import_react12 = require("react");
+var import_react13 = require("react");
 var useCapture3DS = (searchParams) => {
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     if (window?.parent && searchParams?.paymentIntent) {
       window.parent.SP_EVENT_BUS?.emit("paymentIntent", { paymentIntent: searchParams.paymentIntent });
     }

package/build/index.d.cts CHANGED Viewed

@@ -12,11 +12,19 @@ declare const useCapture3DS: (searchParams: Record<string, string | null>) => vo
 type ENV = {
     environment: 'dev' | 'stg' | 'prod';
-    accessToken: string;
+    ssoPageURI: string;
     tenantId: string;
     redirect3dsURI: string;
 };
+declare enum BASE_SYMBOLS {
+    MOCA = "MOCA",
+    USDC = "USDC",
+    WETH = "WETH",
+    USDT = "USDT",
+    ETH = "ETH"
+}
 type Coin = {
     address: `0x${string}`;
     chainId: number;
@@ -25,13 +33,13 @@ type Coin = {
     logoURI?: string;
     name: string;
     raw?: bigint;
-    symbol: string;
+    symbol: BASE_SYMBOLS;
 };
 type NativeCoin = {
     decimals: number;
     formatted: string;
     logoURI: string;
-    symbol: string;
+    symbol: BASE_SYMBOLS;
     value: bigint;
 };
@@ -72,6 +80,20 @@ declare enum PaymentType {
     CREDIT_CARD = "CREDIT_CARD",
     CRYPTO = "CRYPTO"
 }
+declare const enum SlapiPaymentStatus {
+    NOT_INITIALIZED = "NOT_INITIALIZED",// back-end only
+    PENDING = "PENDING",// back-end only
+    AUTHORIZED = "AUTHORIZED",// success
+    FAILED = "FAILED",// failed
+    CAPTURED = "CAPTURED",// success
+    VOIDED = "VOIDED",// back-end only
+    CAPTURE_FAILED = "CAPTURE_FAILED"
+}
+type PaymentMethodResult = {
+    status: SlapiPaymentStatus;
+    txHash?: string;
+    paymentId?: string;
+};
 type SpreePayProviderProps = {
     children: ReactNode;
@@ -81,9 +103,7 @@ declare const SpreePayProvider: FC<SpreePayProviderProps>;
 declare const useSpreePay: () => {
     process: (data: {
         hash: string;
-    }) => Promise<{
-        status: string;
-    }>;
+    }) => Promise<PaymentMethodResult>;
     enabled: boolean;
     selectedPaymentMethod: SelectedPaymentMethod;
 };

package/build/index.d.ts CHANGED Viewed

@@ -12,11 +12,19 @@ declare const useCapture3DS: (searchParams: Record<string, string | null>) => vo
 type ENV = {
     environment: 'dev' | 'stg' | 'prod';
-    accessToken: string;
+    ssoPageURI: string;
     tenantId: string;
     redirect3dsURI: string;
 };
+declare enum BASE_SYMBOLS {
+    MOCA = "MOCA",
+    USDC = "USDC",
+    WETH = "WETH",
+    USDT = "USDT",
+    ETH = "ETH"
+}
 type Coin = {
     address: `0x${string}`;
     chainId: number;
@@ -25,13 +33,13 @@ type Coin = {
     logoURI?: string;
     name: string;
     raw?: bigint;
-    symbol: string;
+    symbol: BASE_SYMBOLS;
 };
 type NativeCoin = {
     decimals: number;
     formatted: string;
     logoURI: string;
-    symbol: string;
+    symbol: BASE_SYMBOLS;
     value: bigint;
 };
@@ -72,6 +80,20 @@ declare enum PaymentType {
     CREDIT_CARD = "CREDIT_CARD",
     CRYPTO = "CRYPTO"
 }
+declare const enum SlapiPaymentStatus {
+    NOT_INITIALIZED = "NOT_INITIALIZED",// back-end only
+    PENDING = "PENDING",// back-end only
+    AUTHORIZED = "AUTHORIZED",// success
+    FAILED = "FAILED",// failed
+    CAPTURED = "CAPTURED",// success
+    VOIDED = "VOIDED",// back-end only
+    CAPTURE_FAILED = "CAPTURE_FAILED"
+}
+type PaymentMethodResult = {
+    status: SlapiPaymentStatus;
+    txHash?: string;
+    paymentId?: string;
+};
 type SpreePayProviderProps = {
     children: ReactNode;
@@ -81,9 +103,7 @@ declare const SpreePayProvider: FC<SpreePayProviderProps>;
 declare const useSpreePay: () => {
     process: (data: {
         hash: string;
-    }) => Promise<{
-        status: string;
-    }>;
+    }) => Promise<PaymentMethodResult>;
     enabled: boolean;
     selectedPaymentMethod: SelectedPaymentMethod;
 };

package/build/index.js CHANGED Viewed

@@ -5609,7 +5609,8 @@ var cardPayment = async ({ card, hash, redirect3dsURI }) => {
     }
   }
   return {
-    status: paymentResData.status
+    status: paymentResData.status,
+    paymentId: paymentResData.id
   };
 };
@@ -6609,26 +6610,165 @@ import { base } from "wagmi/chains";
 // src/components/CryptoTab/Crypto/Crypto.tsx
 import { useCallback as useCallback9, useEffect as useEffect19 } from "react";
-import { useAccount as useAccount3, useWalletClient } from "wagmi";
+import { useAccount as useAccount3 } from "wagmi";
-// src/services/cryptoPayment.ts
-var cryptoPayment = async (params) => {
-  const { publicKey, coinSymbol, hash, sendTransaction } = params;
-  const paymentRes = await SlapiPaymentService.createPayment({
-    type: "CRYPTO" /* CRYPTO */,
-    hash,
-    crypto: {
-      token: coinSymbol,
-      publicKey,
-      slippageType: "fixed",
-      slippageBps: 0.5 * 100
+// ../../node_modules/@wagmi/core/dist/esm/utils/getAction.js
+function getAction(client, actionFn, name) {
+  const action_implicit = client[actionFn.name];
+  if (typeof action_implicit === "function")
+    return action_implicit;
+  const action_explicit = client[name];
+  if (typeof action_explicit === "function")
+    return action_explicit;
+  return (params) => actionFn(client, params);
+}
+// ../../node_modules/@wagmi/core/dist/esm/actions/readContract.js
+import { readContract as viem_readContract } from "viem/actions";
+function readContract(config2, parameters) {
+  const { chainId, ...rest } = parameters;
+  const client = config2.getClient({ chainId });
+  const action = getAction(client, viem_readContract, "readContract");
+  return action(rest);
+}
+// ../../node_modules/@wagmi/core/dist/esm/actions/waitForTransactionReceipt.js
+import { hexToString } from "viem";
+import { call, getTransaction, waitForTransactionReceipt as viem_waitForTransactionReceipt } from "viem/actions";
+async function waitForTransactionReceipt(config2, parameters) {
+  const { chainId, timeout = 0, ...rest } = parameters;
+  const client = config2.getClient({ chainId });
+  const action = getAction(client, viem_waitForTransactionReceipt, "waitForTransactionReceipt");
+  const receipt = await action({ ...rest, timeout });
+  if (receipt.status === "reverted") {
+    const action_getTransaction = getAction(client, getTransaction, "getTransaction");
+    const txn = await action_getTransaction({ hash: receipt.transactionHash });
+    const action_call = getAction(client, call, "call");
+    const code = await action_call({
+      ...txn,
+      data: txn.input,
+      gasPrice: txn.type !== "eip1559" ? txn.gasPrice : void 0,
+      maxFeePerGas: txn.type === "eip1559" ? txn.maxFeePerGas : void 0,
+      maxPriorityFeePerGas: txn.type === "eip1559" ? txn.maxPriorityFeePerGas : void 0
+    });
+    const reason = code?.data ? hexToString(`0x${code.data.substring(138)}`) : "unknown reason";
+    throw new Error(reason);
+  }
+  return {
+    ...receipt,
+    chainId: client.chain.id
+  };
+}
+// ../../node_modules/@wagmi/core/dist/esm/exports/index.js
+import { custom, http, webSocket } from "viem";
+// src/hooks/useCryptoPayment.ts
+import { erc20Abi } from "viem";
+import { useConfig as useConfig2, useWalletClient } from "wagmi";
+// src/config/baseTokens.ts
+var BASE_CHAIN_ID = 8453;
+var BASE_TOKENS = [
+  {
+    address: "0x2b11834ed1feaed4b4b3a86a6f571315e25a884d",
+    chainId: BASE_CHAIN_ID,
+    decimals: 18,
+    symbol: "MOCA" /* MOCA */,
+    name: "Moca",
+    logoURI: "https://assets.coingecko.com/coins/images/30046/standard/moca.png"
+  },
+  {
+    address: "0x833589fCD6eDb6E08f4c7C32D4f71b54bDA02913",
+    chainId: BASE_CHAIN_ID,
+    decimals: 6,
+    symbol: "USDC" /* USDC */,
+    name: "USD Coin",
+    logoURI: "https://cryptologos.cc/logos/usd-coin-usdc-logo.png"
+  },
+  {
+    address: "0x4200000000000000000000000000000000000006",
+    chainId: BASE_CHAIN_ID,
+    decimals: 18,
+    symbol: "WETH" /* WETH */,
+    name: "Wrapped Ether",
+    logoURI: "https://static.cdnlogo.com/logos/e/84/ethereum-eth_thumb.png"
+  },
+  {
+    address: "0xfde4c96c8593536e31f229ea8f37b2ada2699bb2",
+    chainId: BASE_CHAIN_ID,
+    decimals: 6,
+    symbol: "USDT" /* USDT */,
+    name: "Tether USD",
+    logoURI: "https://cryptologos.cc/logos/tether-usdt-logo.png"
+  }
+];
+// src/hooks/useCryptoPayment.ts
+var MAX_UINT256 = BigInt(2) ** BigInt(256) - BigInt(1);
+var ONE_INCH_AGGREGATION_ROUTER_V6 = "0x111111125421ca6dc452d289314280a0f8842a65";
+var useCryptoPayment = () => {
+  const { data: walletClient } = useWalletClient();
+  const config2 = useConfig2();
+  const { selectedPaymentMethod } = useSpreePaymentMethod();
+  const cryptoPayment = async ({ hash }) => {
+    if (!walletClient) {
+      throw new Error("Wallet not connected");
     }
-  });
-  const encodedTX = paymentRes.data.encodedTx;
-  const parsedTX = JSON.parse(encodedTX);
-  const txHash = await sendTransaction(parsedTX);
-  const res = await SlapiPaymentService.baseVerify({ id: paymentRes.data.txId, txHash });
-  return { status: res.verified ? "AUTHORIZED" /* AUTHORIZED */ : "FAILED" /* FAILED */ };
+    if (selectedPaymentMethod.type !== "CRYPTO" /* CRYPTO */ || !selectedPaymentMethod.method?.symbol) {
+      throw new Error("Unsupported payment method");
+    }
+    const TOKEN = selectedPaymentMethod.method.symbol;
+    if (["MOCA" /* MOCA */, "WETH" /* WETH */, "USDC" /* USDC */, "USDT" /* USDT */].includes(TOKEN)) {
+      const tokenAddress = selectedPaymentMethod.method.address;
+      if (!tokenAddress) {
+        throw new Error("Token address not found");
+      }
+      const allowance = await readContract(config2, {
+        address: tokenAddress,
+        abi: erc20Abi,
+        functionName: "allowance",
+        args: [walletClient.account.address, ONE_INCH_AGGREGATION_ROUTER_V6]
+      });
+      if (allowance <= 0n) {
+        const result = await walletClient.writeContract({
+          address: tokenAddress,
+          abi: erc20Abi,
+          functionName: "approve",
+          args: [ONE_INCH_AGGREGATION_ROUTER_V6, MAX_UINT256]
+        });
+        await waitForTransactionReceipt(config2, {
+          hash: result,
+          confirmations: 1
+          // You can change the number of block confirmations as per your requirement
+        });
+      }
+    }
+    const paymentRes = await SlapiPaymentService.createPayment({
+      type: "CRYPTO" /* CRYPTO */,
+      hash,
+      crypto: {
+        token: TOKEN,
+        publicKey: walletClient.account.address,
+        slippageType: "fixed",
+        slippageBps: 0.5 * 100
+      }
+    });
+    const parsedTX = JSON.parse(paymentRes.data.encodedTx);
+    const txHash = await walletClient.sendTransaction({
+      account: walletClient.account.address,
+      to: parsedTX.to,
+      data: parsedTX.data,
+      value: parsedTX.value
+    });
+    const res = await SlapiPaymentService.baseVerify({ id: paymentRes.data.txId, txHash });
+    return {
+      txHash,
+      paymentId: paymentRes.data.txId,
+      status: res.verified ? "AUTHORIZED" /* AUTHORIZED */ : "FAILED" /* FAILED */
+    };
+  };
+  return { cryptoPayment };
 };
 // src/components/CryptoTab/Crypto/ConnectButton.tsx
@@ -6791,49 +6931,11 @@ import NiceModal3, { useModal as useModal2 } from "@ebay/nice-modal-react";
 // src/hooks/useBaseERC20Token.ts
 import * as React30 from "react";
-import { erc20Abi, formatUnits, getAddress } from "viem";
+import { erc20Abi as erc20Abi2, formatUnits, getAddress } from "viem";
 import { useAccount, usePublicClient } from "wagmi";
-// src/config/baseTokens.ts
-var BASE_TOKENS = [
-  {
-    address: "0x2b11834ed1feaed4b4b3a86a6f571315e25a884d",
-    chainId: 8453,
-    decimals: 18,
-    symbol: "MOCA",
-    name: "Moca",
-    logoURI: "https://assets.coingecko.com/coins/images/30046/standard/moca.png"
-  },
-  {
-    address: "0x833589fCD6eDb6E08f4c7C32D4f71b54bDA02913",
-    chainId: 8453,
-    decimals: 6,
-    symbol: "USDC",
-    name: "USD Coin",
-    logoURI: "https://cryptologos.cc/logos/usd-coin-usdc-logo.png"
-  },
-  {
-    address: "0x4200000000000000000000000000000000000006",
-    chainId: 8453,
-    decimals: 18,
-    symbol: "WETH",
-    name: "Wrapped Ether",
-    logoURI: "https://static.cdnlogo.com/logos/e/84/ethereum-eth_thumb.png"
-  },
-  {
-    address: "0xfde4c96c8593536e31f229ea8f37b2ada2699bb2",
-    chainId: 8453,
-    decimals: 6,
-    symbol: "USDT",
-    name: "Tether USD",
-    logoURI: "https://cryptologos.cc/logos/tether-usdt-logo.png"
-  }
-];
-// src/hooks/useBaseERC20Token.ts
 function useBaseERC20Token() {
   const { address } = useAccount();
-  const baseClient = usePublicClient({ chainId: 8453 });
+  const baseClient = usePublicClient({ chainId: BASE_CHAIN_ID });
   const defaultClient = usePublicClient();
   const [rows, setRows] = React30.useState([]);
   const [isLoading, setLoading] = React30.useState(false);
@@ -6860,7 +6962,7 @@ function useBaseERC20Token() {
           allowFailure: true,
           contracts: normalizedTokens.map((t) => ({
             address: t.address,
-            abi: erc20Abi,
+            abi: erc20Abi2,
             functionName: "balanceOf",
             args: [address]
           }))
@@ -6878,7 +6980,9 @@ function useBaseERC20Token() {
       } catch (e) {
         if (!cancelled) {
           const msg = e instanceof Error ? e.message : "Multicall failed";
-          setError(baseClient ? msg : "Base client unavailable. Ensure Base (8453) is configured in Wagmi.");
+          setError(
+            baseClient ? msg : `Base client unavailable. Ensure Base (${BASE_CHAIN_ID}) is configured in Wagmi.`
+          );
         }
       } finally {
         if (!cancelled) setLoading(false);
@@ -6898,11 +7002,10 @@ function useBaseNativeToken() {
   const { address } = useAccount2();
   const { data, isLoading, error } = useBalance({
     address,
-    chainId: 8453,
-    // Base
+    chainId: BASE_CHAIN_ID,
     query: { enabled: !!address }
   });
-  const nativeBalance = data ? { ...data, logoURI: "https://static.cdnlogo.com/logos/e/84/ethereum-eth_thumb.png" } : void 0;
+  const nativeBalance = data ? { ...data, symbol: "ETH" /* ETH */, logoURI: "https://static.cdnlogo.com/logos/e/84/ethereum-eth_thumb.png" } : void 0;
   return {
     isLoadingNative: isLoading,
     nativeError: error?.message ?? null,
@@ -6970,7 +7073,6 @@ var CryptoSelectModal = NiceModal3.create(() => {
           return /* @__PURE__ */ jsxs16(
             "button",
             {
-              disabled: true,
               className: "flex h-11 w-full items-center justify-between gap-4 rounded-sm px-1.5 hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-50",
               onClick: () => handleSelect(coin),
               children: [
@@ -7031,40 +7133,23 @@ var SelectedCoin = (props) => {
 import { jsx as jsx31, jsxs as jsxs19 } from "react/jsx-runtime";
 var Crypto = () => {
   const { address } = useAccount3();
-  const { data: walletClient } = useWalletClient();
   const { selectedPaymentMethod } = useSpreePaymentMethod();
+  const { cryptoPayment } = useCryptoPayment();
   const isWalletConnected = Boolean(address);
   const { register } = useSpreePayRegister();
   const handlePay = useCallback9(
     async (data) => {
       try {
-        if (selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && selectedPaymentMethod.method) {
-          if (!walletClient || !address) throw new Error("Wallet not connected");
-          const sendTransaction = (encodedTx) => {
-            return walletClient.sendTransaction({
-              account: address,
-              to: encodedTx.to,
-              data: encodedTx.data,
-              value: encodedTx.value
-            });
-          };
-          const res = await cryptoPayment({
-            hash: data.hash,
-            coinSymbol: selectedPaymentMethod.method.symbol,
-            publicKey: address,
-            sendTransaction
-          });
-          if (["AUTHORIZED" /* AUTHORIZED */, "CAPTURED" /* CAPTURED */].includes(res.status)) {
-            return Promise.resolve(res);
-          }
-          return Promise.reject(new PaymentError("Crypto payment failed", res.status));
+        const res = await cryptoPayment({ hash: data.hash });
+        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("Crypto payment failed", res.status));
       } catch (_) {
         return Promise.reject(new PaymentError("Payment failed", "FAILED" /* FAILED */));
       }
     },
-    [selectedPaymentMethod, address, walletClient]
+    [cryptoPayment]
   );
   useEffect19(() => {
     register(handlePay);
@@ -7174,7 +7259,7 @@ var Tabs = () => {
   const { selectedPaymentMethod, setSelectedPaymentMethod } = useSpreePaymentMethod();
   return /* @__PURE__ */ jsxs22("div", { className: "mb-4 rounded-2xl border border-black/25 bg-white", children: [
     /* @__PURE__ */ jsxs22("div", { className: "flex w-full flex-col gap-4 border-b-1 border-black/7 px-7 py-6", children: [
-      /* @__PURE__ */ jsx35("h2", { className: "text-primary text-2xl font-semibold", children: "Choose a 123Payment Method" }),
+      /* @__PURE__ */ jsx35("h2", { className: "text-primary text-2xl font-semibold", children: "Choose a Payment Method" }),
       /* @__PURE__ */ jsx35(TabButtons, { value: selectedPaymentMethod.type, onChange: setSelectedPaymentMethod })
     ] }),
     selectedPaymentMethod.type === "CREDIT_CARD" /* CREDIT_CARD */ && /* @__PURE__ */ jsx35(CreditCardTab, {}),
@@ -7185,32 +7270,150 @@ var Tabs = () => {
 // src/SpreePayContent.tsx
 import { jsx as jsx36, jsxs as jsxs23 } from "react/jsx-runtime";
 var SpreePayContent = (props) => {
-  const { className, amount, onProcess } = props;
-  return /* @__PURE__ */ jsx36("div", { className: cn("sl-spreepay", className), children: /* @__PURE__ */ jsxs23("div", { className: "w-full", children: [
+  const { amount, onProcess } = props;
+  return /* @__PURE__ */ jsxs23("div", { className: "w-full", children: [
     /* @__PURE__ */ jsx36(Tabs, {}),
     /* @__PURE__ */ jsx36(CheckoutButton, { onCheckout: onProcess, amount }),
     /* @__PURE__ */ jsx36(SpreeLegal, {})
-  ] }) });
+  ] });
 };
+// src/hooks/useKeycloakSSO.ts
+import { useCallback as useCallback10, useEffect as useEffect20, useRef as useRef14, useState as useState18 } from "react";
+import Keycloak from "keycloak-js";
+var refreshAheadSeconds = 60;
+function useKeycloakSSO(config2) {
+  const { url, realm, clientId, ssoPageURI } = config2;
+  const initRef = useRef14(false);
+  const kcRef = useRef14(null);
+  const refreshTimerRef = useRef14(null);
+  const [error, setError] = useState18(null);
+  const [isChecking, setIsChecking] = useState18(false);
+  const [accessToken, setAccessToken] = useState18(null);
+  const scheduleRefresh = useCallback10(() => {
+    const kc = kcRef.current;
+    if (!kc || !kc.tokenParsed || !kc.tokenParsed.exp) {
+      return;
+    }
+    const expSeconds = kc.tokenParsed.exp;
+    const nowSeconds = Math.floor(Date.now() / 1e3);
+    const delaySeconds = Math.max(expSeconds - nowSeconds - refreshAheadSeconds, 5);
+    const delayMs = delaySeconds * 1e3;
+    if (refreshTimerRef.current) clearTimeout(refreshTimerRef.current);
+    refreshTimerRef.current = setTimeout(() => {
+      kc.updateToken(refreshAheadSeconds).then((refreshed) => {
+        if (refreshed) {
+          setAccessToken(kc.token ?? null);
+          scheduleRefresh();
+        }
+      }).catch((_) => {
+        kc.login().catch(console.error);
+      });
+    }, delayMs);
+  }, []);
+  useEffect20(() => {
+    if (initRef.current) return;
+    initRef.current = true;
+    setIsChecking(true);
+    const kc = new Keycloak({ url, realm, clientId });
+    kcRef.current = kc;
+    kc.onTokenExpired = () => {
+      kc.updateToken(refreshAheadSeconds).then((refreshed) => {
+        if (refreshed) {
+          setAccessToken(kc.token ?? null);
+          scheduleRefresh();
+        }
+      }).catch((err) => {
+        console.error("[Keycloak] onTokenExpired refresh failed", err);
+      });
+    };
+    kc.init({
+      onLoad: "check-sso",
+      silentCheckSsoRedirectUri: `${window.location.origin}${ssoPageURI}`,
+      silentCheckSsoFallback: true
+    }).then((auth) => {
+      console.log("[Keycloak] init success, authenticated=", auth);
+      setAccessToken(kc.token ?? null);
+      if (auth) scheduleRefresh();
+    }).catch((err) => {
+      setError(err);
+    }).finally(() => setIsChecking(false));
+    return () => {
+      if (refreshTimerRef.current) clearTimeout(refreshTimerRef.current);
+    };
+  }, [ssoPageURI, scheduleRefresh, clientId, url, realm]);
+  return { isChecking, accessToken, error };
+}
 // src/SpreePay.tsx
-import { jsx as jsx37 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs24 } from "react/jsx-runtime";
 var envConfig = {
-  dev: { slapiUrl: "https://slapi.dev.superlogic.com" },
-  stg: { slapiUrl: "https://slapi.dev.superlogic.com" },
-  prod: { slapiUrl: "https://slapi.dev.superlogic.com" }
+  dev: {
+    bookit: {
+      slapiUrl: "https://slapi.dev.superlogic.com",
+      keyklockUrl: "https://auth.dev.join.bookit.com",
+      keyklockClientId: "oneof-next"
+    },
+    moca: {
+      slapiUrl: "https://slapi.dev.air.shop",
+      keyklockUrl: "https://login.dev.air.shop",
+      keyklockClientId: "oneof-next"
+    }
+  },
+  stg: {
+    bookit: {
+      slapiUrl: "https://slapi.stg.superlogic.com",
+      keyklockUrl: "https://auth.stg.join.bookit.com",
+      keyklockClientId: "oneof-next"
+    },
+    moca: {
+      slapiUrl: "https://slapi.stg.superlogic.com",
+      keyklockUrl: "https://login.stg.air.shop",
+      keyklockClientId: "oneof-next"
+    }
+  },
+  prod: {
+    bookit: {
+      slapiUrl: "https://slapi.superlogic.com",
+      keyklockUrl: "https://auth.join.bookit.com",
+      keyklockClientId: "oneof-next"
+    },
+    moca: {
+      slapiUrl: "https://slapi.superlogic.com",
+      keyklockUrl: "https://login.air.shop",
+      keyklockClientId: "oneof-next"
+    }
+  }
 };
-var SpreePay = (props) => {
+var SpreePay = ({ className, ...rest }) => {
   const { env } = useSpreePayEnv();
-  const slapiFetcher = useMemo7(
-    () => registerApi({
-      tenantId: env.tenantId,
-      accessToken: env.accessToken,
-      baseUrl: envConfig[env.environment].slapiUrl
-    }),
-    [env]
-  );
-  return /* @__PURE__ */ jsx37(
+  const environment = env?.environment || "dev";
+  const tenantId = env?.tenantId || "bookit";
+  const { isChecking, accessToken, error } = useKeycloakSSO({
+    realm: env.tenantId,
+    url: envConfig[environment][tenantId].keyklockUrl,
+    clientId: envConfig[environment][tenantId].keyklockClientId,
+    ssoPageURI: env.ssoPageURI
+  });
+  const slapiFetcher = useMemo7(() => {
+    if (accessToken) {
+      return registerApi({
+        accessToken,
+        tenantId,
+        baseUrl: envConfig[environment][tenantId].slapiUrl
+      });
+    }
+  }, [environment, tenantId, accessToken]);
+  if (isChecking) {
+    return /* @__PURE__ */ jsx37("div", { className: cn("sl-spreepay", className), children: /* @__PURE__ */ jsx37("p", { className: "w-full text-center text-sm", children: "Loading..." }) });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsx37("div", { className: cn("sl-spreepay", className), children: /* @__PURE__ */ jsxs24("p", { className: "w-full text-center text-sm", children: [
+      "Error: ",
+      error.message
+    ] }) });
+  }
+  return /* @__PURE__ */ jsx37("div", { className: cn("sl-spreepay", className), children: /* @__PURE__ */ jsx37(
     SWRConfig,
     {
       value: {
@@ -7219,15 +7422,15 @@ var SpreePay = (props) => {
         revalidateIfStale: false,
         revalidateOnReconnect: false
       },
-      children: /* @__PURE__ */ jsx37(NiceModal6.Provider, { children: /* @__PURE__ */ jsx37(SpreePayContent, { ...props }) })
+      children: /* @__PURE__ */ jsx37(NiceModal6.Provider, { children: /* @__PURE__ */ jsx37(SpreePayContent, { ...rest }) })
     }
-  );
+  ) });
 };
 // src/hooks/useCapture3DS.ts
-import { useEffect as useEffect20 } from "react";
+import { useEffect as useEffect21 } from "react";
 var useCapture3DS = (searchParams) => {
-  useEffect20(() => {
+  useEffect21(() => {
     if (window?.parent && searchParams?.paymentIntent) {
       window.parent.SP_EVENT_BUS?.emit("paymentIntent", { paymentIntent: searchParams.paymentIntent });
     }

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@superlogic/spree-pay",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "Spree-pay React component and utilities",
   "private": false,
   "type": "module",
@@ -32,6 +32,7 @@
     "@stripe/react-stripe-js": "^3.9.0",
     "@stripe/stripe-js": "^7.8.0",
     "@tanstack/react-query": "^5.85.5",
+    "keycloak-js": "^26.2.0",
     "swr": "^2.3.6",
     "viem": "^2.35.1",
     "wagmi": "^2.16.5"