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

@superlogic/spree-pay 0.1.4 → 0.1.6

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

@@ -17,9 +17,9 @@ 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
+  environment: 'dev' as const,
   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,171 @@ 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_wallets = require("@rainbow-me/rainbowkit/wallets");
+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 +6971,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 +6993,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 +7002,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 +7013,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 +7037,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 +7113,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 +7172,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);
@@ -7131,14 +7217,23 @@ var Crypto = () => {
 // src/components/CryptoTab/Crypto/CryptoWrapper.tsx
 var import_jsx_runtime32 = require("react/jsx-runtime");
 var queryClient = new import_react_query.QueryClient();
-var config = (0, import_rainbowkit2.getDefaultConfig)({
-  appName: "Spree Pay",
-  projectId: "YOUR_PROJECT_ID",
+var connectors = (0, import_rainbowkit2.connectorsForWallets)(
+  [
+    {
+      groupName: "Supported",
+      wallets: [import_wallets.injectedWallet, import_wallets.walletConnectWallet]
+    }
+  ],
+  { appName: "Spree Pay", projectId: "YOUR_PROJECT_ID" }
+);
+var config = (0, import_wagmi5.createConfig)({
   chains: [import_chains.base],
+  connectors,
+  transports: { [import_chains.base.id]: (0, import_wagmi5.http)() },
   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 +7308,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 +7319,151 @@ 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, enabled } = 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 || !enabled) 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,
+    enabled: !env.accessToken
+  });
+  const slapiFetcher = (0, import_react12.useMemo)(() => {
+    if (accessToken || env.accessToken) {
+      return registerApi({
+        accessToken: env.accessToken || accessToken,
+        tenantId,
+        baseUrl: envConfig[environment][tenantId].slapiUrl
+      });
+    }
+  }, [env.accessToken, 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 +7472,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 });
     }