@superlogic/spree-pay 0.3.3 → 0.3.5

package/README.md

@@ -213,18 +213,49 @@ enum LogLevel {
 
 ## Theme Customization
 
-The widget uses CSS variables for theming. The `<SpreePay>` component renders with the `sl-spreepay` class, so you can override theme variables by targeting that class in your CSS:
+SpreePay uses CSS variables for theming (see all 58+ variables in `packages/spree-pay/src/styles/globals.css:22-82`). You can override these using CSS or CSS-in-JS.
+
+**Important:** To override the theme locally (scoped), you need **more specific CSS** than just `.sl-spreepay`. Use a wrapper class like `.your-class .sl-spreepay` or combine with SpreePay's className prop.
+
+### Global override (affects all SpreePay instances)
 
 ```css
 .sl-spreepay {
-  --primary: #your-color;
-  --accent: #your-accent;
-  --s-default: #your-surface-color;
-  /* ... see packages/spree-pay/src/styles/globals.css for all 58 variables */
+  --primary: #272e32;
+  --accent: #439ef4;
+  --s-default: #ffffff;
 }
 ```
 
-All available CSS variables are documented in `packages/spree-pay/src/styles/globals.css:22-82`.
+### Local/scoped override
+
+**Option A:** Wrap SpreePay in a container with your own class:
+
+```tsx
+<div className="my-checkout">
+  <SpreePay {...props} />
+</div>
+
+<style>{`
+  .my-checkout .sl-spreepay {
+    --primary: #your-color;
+    --accent: #your-accent;
+  }
+`}</style>
+```
+
+**Option B:** Pass className to SpreePay and use combined selector:
+
+```tsx
+<SpreePay className="custom-theme" {...props} />
+
+<style>{`
+  .sl-spreepay.custom-theme {
+    --primary: #your-color;
+    --accent: #your-accent;
+  }
+`}</style>
+```
 
 ## Keycloak SSO page example (/silent-check-sso.html)
 

package/build/{CryptoComTab-OW42JVO5.js → CryptoComTab-P4MC2R2N.js}

@@ -1,6 +1,6 @@
 import {
   Iframe3ds
-} from "./chunk-BSDEX662.js";
+} from "./chunk-D23MABH2.js";
 import {
   InfoBanner,
   Legal,
@@ -12,7 +12,7 @@ import {
   useSpreePayRegister,
   useSpreePaymentMethod,
   useStaticConfig
-} from "./chunk-6RZ4XF7B.js";
+} from "./chunk-KQ25SXYH.js";
 
 // src/components/CryptoComTab/CryptoComTab.tsx
 import { useCallback, useEffect } from "react";
@@ -22,7 +22,7 @@ import NiceModal from "@ebay/nice-modal-react";
 var cryptoComLogger = logger.child("crypto-com-payment");
 var useCryptoComPayment = () => {
   const { selectedPaymentMethod } = useSpreePaymentMethod();
-  const { env } = useSpreePayEnv();
+  const { redirect3dsURI } = useSpreePayEnv();
   const cryptoComPayment = async (params) => {
     if (selectedPaymentMethod.type !== "CDC" /* CDC */) {
       throw new Error("Unsupported payment method");
@@ -34,8 +34,8 @@ var useCryptoComPayment = () => {
       metadata,
       type: "CDC" /* CDC */,
       cdc: {
-        returnUrl: `${typeof window !== "undefined" ? window.location.origin : ""}${env.redirect3dsURI}?payment_intent=success`,
-        cancelUrl: `${typeof window !== "undefined" ? window.location.origin : ""}${env.redirect3dsURI}?payment_intent=canceled`
+        returnUrl: `${typeof window !== "undefined" ? window.location.origin : ""}${redirect3dsURI}?payment_intent=success`,
+        cancelUrl: `${typeof window !== "undefined" ? window.location.origin : ""}${redirect3dsURI}?payment_intent=canceled`
       }
     });
     cryptoComLogger.info("Payment created", {

package/build/{CryptoTab-NTHHA7YO.js → CryptoTab-CI5C22BD.js}

@@ -2,7 +2,7 @@ import {
   CheckoutButton,
   PointsSwitch,
   cn as cn2
-} from "./chunk-ZPFV3WW6.js";
+} from "./chunk-FHY6YBXC.js";
 import {
   Dialog,
   DialogContent,
@@ -16,7 +16,7 @@ import {
   useSpreePayConfig,
   useSpreePayRegister,
   useSpreePaymentMethod
-} from "./chunk-6RZ4XF7B.js";
+} from "./chunk-KQ25SXYH.js";
 
 // src/components/CryptoTab/Crypto/CryptoWrapper.tsx
 import { useMemo as useMemo2 } from "react";

package/build/{chunk-BSDEX662.js → chunk-D23MABH2.js}

@@ -2,7 +2,7 @@ import {
   Dialog,
   DialogContent,
   DialogTitle
-} from "./chunk-6RZ4XF7B.js";
+} from "./chunk-KQ25SXYH.js";
 
 // src/modals/Iframe3ds.tsx
 import { useEffect } from "react";

package/build/{chunk-ZPFV3WW6.js → chunk-FHY6YBXC.js}

@@ -6,7 +6,7 @@ import {
   useSpreePayEnv,
   useSpreePaymentMethod,
   useStaticConfig
-} from "./chunk-6RZ4XF7B.js";
+} from "./chunk-KQ25SXYH.js";
 
 // src/components/common/PointsSwitch.tsx
 import { useId } from "react";
@@ -206,7 +206,7 @@ var CheckoutButton = ({ isLoggedIn }) => {
   const { appProps, staticConfig } = useStaticConfig();
   const { amount, onProcess, isProcessing, transactionFeePercentage } = appProps;
   const { spreePayConfig } = useSpreePayConfig();
-  const { env } = useSpreePayEnv();
+  const { tenantId, keycloakClientId } = useSpreePayEnv();
   const { selectedPaymentMethod, isInternalProcessing } = useSpreePaymentMethod();
   const { splitAmount, type, method } = selectedPaymentMethod;
   const usdAmount = getSplitAmount(amount ?? 0, splitAmount ?? 0, spreePayConfig?.pointsConversionRatio);
@@ -240,11 +240,11 @@ var CheckoutButton = ({ isLoggedIn }) => {
     isLoggedIn ? /* @__PURE__ */ jsx5(Fragment, { children: onProcess && /* @__PURE__ */ jsx5("button", { disabled: isDisabled, onClick: onProcess, className: checkoutClass, children: getCheckoutContent() }) }) : /* @__PURE__ */ jsxs3(
       "a",
       {
-        href: `${staticConfig.keycloakUrl}/realms/${env.tenantId}/protocol/openid-connect/auth?client_id=${env.keycloakClientId ?? "oneof-next"}&response_type=code&redirect_uri=${window.location.href}`,
+        href: `${staticConfig.keycloakUrl}/realms/${tenantId}/protocol/openid-connect/auth?client_id=${keycloakClientId ?? "oneof-next"}&response_type=code&redirect_uri=${window.location.href}`,
         className: checkoutClass,
         children: [
           "Log in / Sign up",
-          env.tenantId === "moca" ? " for an AIR account" : ""
+          tenantId === "moca" ? " for an AIR account" : ""
         ]
       }
     ),

package/build/{chunk-6RZ4XF7B.js → chunk-KQ25SXYH.js}

@@ -9,7 +9,7 @@ var PaymentType = /* @__PURE__ */ ((PaymentType2) => {
 })(PaymentType || {});
 
 // package.json
-var version = "0.3.3";
+var version = "0.3.5";
 
 // src/utils/logger.ts
 var LogLevel = /* @__PURE__ */ ((LogLevel2) => {
@@ -225,7 +225,7 @@ var useSpreePaymentMethod = () => {
 var useSpreePayEnv = () => {
   const ctx = useContext(SpreePayActionsContext);
   if (!ctx) throw new Error("useSpreePay must be used within a SpreePayProvider");
-  return { env: ctx.env };
+  return ctx.env;
 };
 var useSpreePayRegister = () => {
   const ctx = useContext(SpreePayActionsContext);
@@ -322,23 +322,23 @@ var config = {
 import { jsx as jsx2 } from "react/jsx-runtime";
 var StaticConfigContext = createContext2(null);
 var StaticConfigProvider = ({ children, props }) => {
-  const { env } = useSpreePayEnv();
+  const { environment, tenantId } = useSpreePayEnv();
   const [appProps, setAppProps] = useState2(props);
   useEffect(() => {
     setAppProps(props);
   }, [props]);
   const staticConfig = useMemo(() => {
-    const envConfig = config[env.environment];
-    const isKnownTenant = env.tenantId in envConfig;
+    const envConfig = config[environment];
+    const isKnownTenant = tenantId in envConfig;
     if (!isKnownTenant) {
-      logger.warn(`Unknown tenantId "${env.tenantId}", falling back to "moca"`, {
-        tenantId: env.tenantId,
-        environment: env.environment
+      logger.warn(`Unknown tenantId "${tenantId}", falling back to "moca"`, {
+        tenantId,
+        environment
       });
     }
-    const appKey = isKnownTenant ? env.tenantId : "moca";
+    const appKey = isKnownTenant ? tenantId : "moca";
     return envConfig[appKey];
-  }, [env.environment, env.tenantId]);
+  }, [environment, tenantId]);
   return /* @__PURE__ */ jsx2(StaticConfigContext.Provider, { value: { staticConfig, appProps }, children });
 };
 var useStaticConfig = () => {
@@ -464,22 +464,11 @@ var registerApi = (config2) => {
 
 // src/hooks/useSpreePayConfig.ts
 import useSWR from "swr";
+var URL = "/v1/tenants/configs/spree-pay";
 var useSpreePayConfig = () => {
-  const { data, isLoading } = useSWR("/v1/tenants/configs/spree-pay");
-  return {
-    spreePayConfig: data ? {
-      ...data,
-      rainbowProjectId: data.rainbowProjectId ?? "3fdcd5ff50cb84917cd05e40146975d8",
-      rainbowAppName: data.rainbowAppName ?? "AIR Shop",
-      pointsTitle: data.pointsTitle ?? "AIR SP",
-      pointsConversionRatio: data.pointsConversionRatio ?? 0.01,
-      crypto: {
-        ...data.crypto,
-        oneInchAggregationRouter: data.crypto?.oneInchAggregationRouter || "0x111111125421ca6dc452d289314280a0f8842a65"
-      }
-    } : null,
-    configIsLoading: isLoading
-  };
+  const { origin } = useSpreePayEnv();
+  const { data, isLoading } = useSWR(origin ? `${URL}?origin=${origin}` : URL);
+  return { spreePayConfig: data ?? null, configIsLoading: isLoading };
 };
 
 // src/components/common/InfoBanner.tsx

package/build/index.cjs

@@ -68,7 +68,7 @@ var init_payments = __esm({
 var version;
 var init_package = __esm({
   "package.json"() {
-    version = "0.3.3";
+    version = "0.3.5";
   }
 });
 
@@ -285,7 +285,7 @@ var init_SpreePayActionsContext = __esm({
     useSpreePayEnv = () => {
       const ctx = (0, import_react.useContext)(SpreePayActionsContext);
       if (!ctx) throw new Error("useSpreePay must be used within a SpreePayProvider");
-      return { env: ctx.env };
+      return ctx.env;
     };
     useSpreePayRegister = () => {
       const ctx = (0, import_react.useContext)(SpreePayActionsContext);
@@ -396,23 +396,23 @@ var init_StaticConfigContext = __esm({
     import_jsx_runtime2 = require("react/jsx-runtime");
     StaticConfigContext = (0, import_react2.createContext)(null);
     StaticConfigProvider = ({ children, props }) => {
-      const { env } = useSpreePayEnv();
+      const { environment, tenantId } = useSpreePayEnv();
       const [appProps, setAppProps] = (0, import_react2.useState)(props);
       (0, import_react2.useEffect)(() => {
         setAppProps(props);
       }, [props]);
       const staticConfig = (0, import_react2.useMemo)(() => {
-        const envConfig = config[env.environment];
-        const isKnownTenant = env.tenantId in envConfig;
+        const envConfig = config[environment];
+        const isKnownTenant = tenantId in envConfig;
         if (!isKnownTenant) {
-          logger.warn(`Unknown tenantId "${env.tenantId}", falling back to "moca"`, {
-            tenantId: env.tenantId,
-            environment: env.environment
+          logger.warn(`Unknown tenantId "${tenantId}", falling back to "moca"`, {
+            tenantId,
+            environment
           });
         }
-        const appKey = isKnownTenant ? env.tenantId : "moca";
+        const appKey = isKnownTenant ? tenantId : "moca";
         return envConfig[appKey];
-      }, [env.environment, env.tenantId]);
+      }, [environment, tenantId]);
       return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(StaticConfigContext.Provider, { value: { staticConfig, appProps }, children });
     };
     useStaticConfig = () => {
@@ -862,27 +862,17 @@ var init_transactionFee = __esm({
 });
 
 // src/hooks/useSpreePayConfig.ts
-var import_swr, useSpreePayConfig;
+var import_swr, URL, useSpreePayConfig;
 var init_useSpreePayConfig = __esm({
   "src/hooks/useSpreePayConfig.ts"() {
     "use strict";
     import_swr = __toESM(require("swr"), 1);
+    init_SpreePayActionsContext();
+    URL = "/v1/tenants/configs/spree-pay";
     useSpreePayConfig = () => {
-      const { data, isLoading } = (0, import_swr.default)("/v1/tenants/configs/spree-pay");
-      return {
-        spreePayConfig: data ? {
-          ...data,
-          rainbowProjectId: data.rainbowProjectId ?? "3fdcd5ff50cb84917cd05e40146975d8",
-          rainbowAppName: data.rainbowAppName ?? "AIR Shop",
-          pointsTitle: data.pointsTitle ?? "AIR SP",
-          pointsConversionRatio: data.pointsConversionRatio ?? 0.01,
-          crypto: {
-            ...data.crypto,
-            oneInchAggregationRouter: data.crypto?.oneInchAggregationRouter || "0x111111125421ca6dc452d289314280a0f8842a65"
-          }
-        } : null,
-        configIsLoading: isLoading
-      };
+      const { origin } = useSpreePayEnv();
+      const { data, isLoading } = (0, import_swr.default)(origin ? `${URL}?origin=${origin}` : URL);
+      return { spreePayConfig: data ?? null, configIsLoading: isLoading };
     };
   }
 });
@@ -1233,7 +1223,7 @@ var init_CheckoutButton = __esm({
       const { appProps, staticConfig } = useStaticConfig();
       const { amount, onProcess, isProcessing, transactionFeePercentage } = appProps;
       const { spreePayConfig } = useSpreePayConfig();
-      const { env } = useSpreePayEnv();
+      const { tenantId, keycloakClientId } = useSpreePayEnv();
       const { selectedPaymentMethod, isInternalProcessing } = useSpreePaymentMethod();
       const { splitAmount, type, method } = selectedPaymentMethod;
       const usdAmount = getSplitAmount(amount ?? 0, splitAmount ?? 0, spreePayConfig?.pointsConversionRatio);
@@ -1267,11 +1257,11 @@ var init_CheckoutButton = __esm({
         isLoggedIn ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_jsx_runtime11.Fragment, { children: onProcess && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", { disabled: isDisabled, onClick: onProcess, className: checkoutClass, children: getCheckoutContent() }) }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
           "a",
           {
-            href: `${staticConfig.keycloakUrl}/realms/${env.tenantId}/protocol/openid-connect/auth?client_id=${env.keycloakClientId ?? "oneof-next"}&response_type=code&redirect_uri=${window.location.href}`,
+            href: `${staticConfig.keycloakUrl}/realms/${tenantId}/protocol/openid-connect/auth?client_id=${keycloakClientId ?? "oneof-next"}&response_type=code&redirect_uri=${window.location.href}`,
             className: checkoutClass,
             children: [
               "Log in / Sign up",
-              env.tenantId === "moca" ? " for an AIR account" : ""
+              tenantId === "moca" ? " for an AIR account" : ""
             ]
           }
         ),
@@ -2314,7 +2304,7 @@ var init_useCryptoComPayment = __esm({
     cryptoComLogger = logger.child("crypto-com-payment");
     useCryptoComPayment = () => {
       const { selectedPaymentMethod } = useSpreePaymentMethod();
-      const { env } = useSpreePayEnv();
+      const { redirect3dsURI } = useSpreePayEnv();
       const cryptoComPayment = async (params) => {
         if (selectedPaymentMethod.type !== "CDC" /* CDC */) {
           throw new Error("Unsupported payment method");
@@ -2326,8 +2316,8 @@ var init_useCryptoComPayment = __esm({
           metadata,
           type: "CDC" /* CDC */,
           cdc: {
-            returnUrl: `${typeof window !== "undefined" ? window.location.origin : ""}${env.redirect3dsURI}?payment_intent=success`,
-            cancelUrl: `${typeof window !== "undefined" ? window.location.origin : ""}${env.redirect3dsURI}?payment_intent=canceled`
+            returnUrl: `${typeof window !== "undefined" ? window.location.origin : ""}${redirect3dsURI}?payment_intent=success`,
+            cancelUrl: `${typeof window !== "undefined" ? window.location.origin : ""}${redirect3dsURI}?payment_intent=canceled`
           }
         });
         cryptoComLogger.info("Payment created", {
@@ -2529,7 +2519,7 @@ init_transactionFee();
 var cardPaymentLogger = logger.child("card-payment");
 var useCardPayment = () => {
   const { selectedPaymentMethod } = useSpreePaymentMethod();
-  const { env } = useSpreePayEnv();
+  const { redirect3dsURI } = useSpreePayEnv();
   const { appProps } = useStaticConfig();
   const cardPayment = async (params) => {
     if (selectedPaymentMethod.type !== "CREDIT_CARD" /* CREDIT_CARD */ || !selectedPaymentMethod.method) {
@@ -2577,7 +2567,7 @@ var useCardPayment = () => {
       card: {
         cardId,
         transactionFee,
-        returnUrl: `${typeof window !== "undefined" ? window.location.origin : ""}${env.redirect3dsURI}`
+        returnUrl: `${typeof window !== "undefined" ? window.location.origin : ""}${redirect3dsURI}`
       }
     });
     let { status } = paymentResData;
@@ -2907,7 +2897,7 @@ init_useSpreePayConfig();
 var splitPaymentLogger = logger.child("split-card-payment");
 var useSplitCardPayments = (mode = "web2") => {
   const { selectedPaymentMethod } = useSpreePaymentMethod();
-  const { env } = useSpreePayEnv();
+  const { redirect3dsURI } = useSpreePayEnv();
   const { appProps } = useStaticConfig();
   const { spreePayConfig } = useSpreePayConfig();
   const splitPayment = async (params) => {
@@ -2947,7 +2937,7 @@ var useSplitCardPayments = (mode = "web2") => {
       card: {
         cardId,
         transactionFee,
-        returnUrl: `${typeof window !== "undefined" ? window.location.origin : ""}${env.redirect3dsURI}`
+        returnUrl: `${typeof window !== "undefined" ? window.location.origin : ""}${redirect3dsURI}`
       },
       points: {
         amount: points
@@ -3036,8 +3026,10 @@ var useSplitCardPayments = (mode = "web2") => {
 
 // src/hooks/useCards.ts
 var import_swr2 = __toESM(require("swr"), 1);
+init_SpreePayActionsContext();
 var useCards = () => {
-  const { data, isLoading, mutate } = (0, import_swr2.default)(`/v1/payments/cards`);
+  const { origin } = useSpreePayEnv();
+  const { data, isLoading, mutate } = (0, import_swr2.default)(`/v1/payments/cards?origin=${origin}`);
   return {
     cards: data?.data.filter((c) => c.active) || [],
     cardsIsLoading: isLoading,
@@ -4500,7 +4492,7 @@ var SplitBlock = (props) => {
   const [address, setAddress] = (0, import_react11.useState)(null);
   const [walletReady, setWalletReady] = (0, import_react11.useState)(false);
   const { pointsConversionRatio, pointsTitle } = spreePayConfig || {};
-  const { env } = useSpreePayEnv();
+  const { useWeb3Points, environment } = useSpreePayEnv();
   const prevPointsChainRef = (0, import_react11.useRef)(spreePayConfig?.pointsChain);
   const initWallet = (0, import_react11.useCallback)(
     async (pointsChain) => {
@@ -4509,7 +4501,7 @@ var SplitBlock = (props) => {
         const res = await getAirWallet({
           mocaChain: pointsChain.mocaChain,
           partnerId: pointsChain.partnerId,
-          buildEnv: env.environment === "prod" ? import_airkit2.BUILD_ENV.PRODUCTION : import_airkit2.BUILD_ENV.SANDBOX
+          buildEnv: environment === "prod" ? import_airkit2.BUILD_ENV.PRODUCTION : import_airkit2.BUILD_ENV.SANDBOX
         });
         setAddress(res.address ?? null);
         setWalletReady(res.walletReady);
@@ -4519,14 +4511,14 @@ var SplitBlock = (props) => {
       } catch (e) {
         splitBlockLogger.error("Air Wallet initialization failed", e, {
           partnerId: pointsChain?.partnerId,
-          environment: env.environment
+          environment
         });
       }
     },
-    [onToggle, env.environment]
+    [onToggle, environment]
   );
   (0, import_react11.useEffect)(() => {
-    if (!env.useWeb3Points) return;
+    if (!useWeb3Points) return;
     const pointsChainChanged = prevPointsChainRef.current !== spreePayConfig?.pointsChain;
     prevPointsChainRef.current = spreePayConfig?.pointsChain;
     const doInit = async () => {
@@ -4537,8 +4529,8 @@ var SplitBlock = (props) => {
       await initWallet(spreePayConfig?.pointsChain);
     };
     doInit();
-  }, [spreePayConfig?.pointsChain, initWallet, env.useWeb3Points]);
-  const isPointsSelectorDisabled = env.useWeb3Points ? !walletReady : false;
+  }, [spreePayConfig?.pointsChain, initWallet, useWeb3Points]);
+  const isPointsSelectorDisabled = useWeb3Points ? !walletReady : false;
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "flex flex-col gap-1", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(PointsSelector, { isDisabled: isPointsSelectorDisabled, onSelect: () => onSelect("air"), isSelected, children: [
     /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "flex items-center gap-2", children: balance?.availablePoints ? /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("p", { className: "text-left text-xs font-medium text-(--brand-primary) sm:text-sm", children: [
       /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "text-(--secondary)", children: "Available" }),
@@ -4592,13 +4584,13 @@ var Points = () => {
 var import_jsx_runtime28 = require("react/jsx-runtime");
 var CreditCardTab = ({ isLoggedIn }) => {
   const { selectedPaymentMethod, setSelectedPaymentMethod } = useSpreePaymentMethod();
-  const { env } = useSpreePayEnv();
+  const { useWeb3Points } = useSpreePayEnv();
   const { appProps } = useStaticConfig();
   const { spreePayConfig } = useSpreePayConfig();
   const { register } = useSpreePayRegister();
   const { mutateCards } = useCards();
   const { mutateBalance } = useSlapiBalance();
-  const isWeb3Enabled = Boolean(env.useWeb3Points);
+  const isWeb3Enabled = Boolean(useWeb3Points);
   const { cardPayment } = useCardPayment();
   const { splitPayment } = useSplitCardPayments(isWeb3Enabled ? "web3" : "web2");
   const { pointsPayment } = usePointsPayment(isWeb3Enabled ? "web3" : "web2");
@@ -4891,21 +4883,20 @@ var SpreePayInner = () => {
     const el = node.querySelector(":scope > .sl-spreepay__portal");
     setPortalEl(el ?? null);
   }, []);
-  const { env } = useSpreePayEnv();
+  const { environment, tenantId, keycloakClientId, accessToken: envAccessToken, ssoPageURI } = useSpreePayEnv();
   (0, import_react21.useEffect)(() => {
-    configureLogger({ environment: env.environment });
+    configureLogger({ environment });
     logger.logVersion();
-  }, [env.environment]);
+  }, [environment]);
   const { staticConfig, appProps } = useStaticConfig();
-  const tenantId = env?.tenantId;
   const { isChecking, accessToken } = useKeycloakSSO({
     realm: tenantId,
     url: staticConfig.keycloakUrl,
-    clientId: env.keycloakClientId ?? "oneof-next",
-    ssoPageURI: env?.ssoPageURI,
-    enabled: !env?.accessToken
+    clientId: keycloakClientId ?? "oneof-next",
+    ssoPageURI,
+    enabled: !envAccessToken
   });
-  const _accessToken = env.accessToken ?? accessToken;
+  const _accessToken = envAccessToken ?? accessToken;
   const unauthenticatedFetcher = (0, import_react21.useCallback)(() => Promise.resolve(null), []);
   const slapiFetcher = (0, import_react21.useMemo)(() => {
     if (_accessToken) {

package/build/index.d.cts

@@ -23,6 +23,7 @@ type ENV = {
     accessToken?: string;
     useWeb3Points?: boolean;
     keycloakClientId?: string;
+    origin?: string;
 };
 
 declare enum BASE_SYMBOLS {

package/build/index.d.ts

@@ -23,6 +23,7 @@ type ENV = {
     accessToken?: string;
     useWeb3Points?: boolean;
     keycloakClientId?: string;
+    origin?: string;
 };
 
 declare enum BASE_SYMBOLS {

package/build/index.js

@@ -8,10 +8,10 @@ import {
   getSplitAmount,
   getTransactionFee,
   useSlapiBalance
-} from "./chunk-ZPFV3WW6.js";
+} from "./chunk-FHY6YBXC.js";
 import {
   Iframe3ds
-} from "./chunk-BSDEX662.js";
+} from "./chunk-D23MABH2.js";
 import {
   InfoBanner,
   LogLevel,
@@ -31,7 +31,7 @@ import {
   useSpreePayRegister,
   useSpreePaymentMethod,
   useStaticConfig
-} from "./chunk-6RZ4XF7B.js";
+} from "./chunk-KQ25SXYH.js";
 
 // src/SpreePay.tsx
 import { useCallback as useCallback7, useEffect as useEffect8, useMemo as useMemo7, useState as useState10 } from "react";
@@ -49,7 +49,7 @@ import NiceModal from "@ebay/nice-modal-react";
 var cardPaymentLogger = logger.child("card-payment");
 var useCardPayment = () => {
   const { selectedPaymentMethod } = useSpreePaymentMethod();
-  const { env } = useSpreePayEnv();
+  const { redirect3dsURI } = useSpreePayEnv();
   const { appProps } = useStaticConfig();
   const cardPayment = async (params) => {
     if (selectedPaymentMethod.type !== "CREDIT_CARD" /* CREDIT_CARD */ || !selectedPaymentMethod.method) {
@@ -97,7 +97,7 @@ var useCardPayment = () => {
       card: {
         cardId,
         transactionFee,
-        returnUrl: `${typeof window !== "undefined" ? window.location.origin : ""}${env.redirect3dsURI}`
+        returnUrl: `${typeof window !== "undefined" ? window.location.origin : ""}${redirect3dsURI}`
       }
     });
     let { status } = paymentResData;
@@ -408,7 +408,7 @@ import NiceModal3 from "@ebay/nice-modal-react";
 var splitPaymentLogger = logger.child("split-card-payment");
 var useSplitCardPayments = (mode = "web2") => {
   const { selectedPaymentMethod } = useSpreePaymentMethod();
-  const { env } = useSpreePayEnv();
+  const { redirect3dsURI } = useSpreePayEnv();
   const { appProps } = useStaticConfig();
   const { spreePayConfig } = useSpreePayConfig();
   const splitPayment = async (params) => {
@@ -448,7 +448,7 @@ var useSplitCardPayments = (mode = "web2") => {
       card: {
         cardId,
         transactionFee,
-        returnUrl: `${typeof window !== "undefined" ? window.location.origin : ""}${env.redirect3dsURI}`
+        returnUrl: `${typeof window !== "undefined" ? window.location.origin : ""}${redirect3dsURI}`
       },
       points: {
         amount: points
@@ -538,7 +538,8 @@ var useSplitCardPayments = (mode = "web2") => {
 // src/hooks/useCards.ts
 import useSWR from "swr";
 var useCards = () => {
-  const { data, isLoading, mutate } = useSWR(`/v1/payments/cards`);
+  const { origin } = useSpreePayEnv();
+  const { data, isLoading, mutate } = useSWR(`/v1/payments/cards?origin=${origin}`);
   return {
     cards: data?.data.filter((c) => c.active) || [],
     cardsIsLoading: isLoading,
@@ -1967,7 +1968,7 @@ var SplitBlock = (props) => {
   const [address, setAddress] = useState7(null);
   const [walletReady, setWalletReady] = useState7(false);
   const { pointsConversionRatio, pointsTitle } = spreePayConfig || {};
-  const { env } = useSpreePayEnv();
+  const { useWeb3Points, environment } = useSpreePayEnv();
   const prevPointsChainRef = useRef6(spreePayConfig?.pointsChain);
   const initWallet = useCallback4(
     async (pointsChain) => {
@@ -1976,7 +1977,7 @@ var SplitBlock = (props) => {
         const res = await getAirWallet({
           mocaChain: pointsChain.mocaChain,
           partnerId: pointsChain.partnerId,
-          buildEnv: env.environment === "prod" ? BUILD_ENV2.PRODUCTION : BUILD_ENV2.SANDBOX
+          buildEnv: environment === "prod" ? BUILD_ENV2.PRODUCTION : BUILD_ENV2.SANDBOX
         });
         setAddress(res.address ?? null);
         setWalletReady(res.walletReady);
@@ -1986,14 +1987,14 @@ var SplitBlock = (props) => {
       } catch (e) {
         splitBlockLogger.error("Air Wallet initialization failed", e, {
           partnerId: pointsChain?.partnerId,
-          environment: env.environment
+          environment
         });
       }
     },
-    [onToggle, env.environment]
+    [onToggle, environment]
   );
   useEffect5(() => {
-    if (!env.useWeb3Points) return;
+    if (!useWeb3Points) return;
     const pointsChainChanged = prevPointsChainRef.current !== spreePayConfig?.pointsChain;
     prevPointsChainRef.current = spreePayConfig?.pointsChain;
     const doInit = async () => {
@@ -2004,8 +2005,8 @@ var SplitBlock = (props) => {
       await initWallet(spreePayConfig?.pointsChain);
     };
     doInit();
-  }, [spreePayConfig?.pointsChain, initWallet, env.useWeb3Points]);
-  const isPointsSelectorDisabled = env.useWeb3Points ? !walletReady : false;
+  }, [spreePayConfig?.pointsChain, initWallet, useWeb3Points]);
+  const isPointsSelectorDisabled = useWeb3Points ? !walletReady : false;
   return /* @__PURE__ */ jsx14("div", { className: "flex flex-col gap-1", children: /* @__PURE__ */ jsxs7(PointsSelector, { isDisabled: isPointsSelectorDisabled, onSelect: () => onSelect("air"), isSelected, children: [
     /* @__PURE__ */ jsx14("div", { className: "flex items-center gap-2", children: balance?.availablePoints ? /* @__PURE__ */ jsxs7("p", { className: "text-left text-xs font-medium text-(--brand-primary) sm:text-sm", children: [
       /* @__PURE__ */ jsx14("span", { className: "text-(--secondary)", children: "Available" }),
@@ -2059,13 +2060,13 @@ var Points = () => {
 import { jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
 var CreditCardTab = ({ isLoggedIn }) => {
   const { selectedPaymentMethod, setSelectedPaymentMethod } = useSpreePaymentMethod();
-  const { env } = useSpreePayEnv();
+  const { useWeb3Points } = useSpreePayEnv();
   const { appProps } = useStaticConfig();
   const { spreePayConfig } = useSpreePayConfig();
   const { register } = useSpreePayRegister();
   const { mutateCards } = useCards();
   const { mutateBalance } = useSlapiBalance();
-  const isWeb3Enabled = Boolean(env.useWeb3Points);
+  const isWeb3Enabled = Boolean(useWeb3Points);
   const { cardPayment } = useCardPayment();
   const { splitPayment } = useSplitCardPayments(isWeb3Enabled ? "web3" : "web2");
   const { pointsPayment } = usePointsPayment(isWeb3Enabled ? "web3" : "web2");
@@ -2190,9 +2191,9 @@ var TabButtons = (props) => {
 
 // src/SpreePayContent.tsx
 import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
-var CryptoTab = lazy(() => import("./CryptoTab-NTHHA7YO.js").then((module) => ({ default: module.CryptoTab })));
+var CryptoTab = lazy(() => import("./CryptoTab-CI5C22BD.js").then((module) => ({ default: module.CryptoTab })));
 var CryptoComTab = lazy(
-  () => import("./CryptoComTab-OW42JVO5.js").then((module) => ({ default: module.CryptoComTab }))
+  () => import("./CryptoComTab-P4MC2R2N.js").then((module) => ({ default: module.CryptoComTab }))
 );
 var TabLoadingFallback = () => /* @__PURE__ */ jsx18("div", { className: "flex items-center justify-center px-5 py-8 md:px-7", children: /* @__PURE__ */ jsxs11("div", { className: "flex flex-col items-center gap-3", children: [
   /* @__PURE__ */ jsx18("div", { className: "h-8 w-8 animate-spin rounded-full border-4 border-(--border-component-specific-card) border-t-(--brand-primary)" }),
@@ -2345,21 +2346,20 @@ var SpreePayInner = () => {
     const el = node.querySelector(":scope > .sl-spreepay__portal");
     setPortalEl(el ?? null);
   }, []);
-  const { env } = useSpreePayEnv();
+  const { environment, tenantId, keycloakClientId, accessToken: envAccessToken, ssoPageURI } = useSpreePayEnv();
   useEffect8(() => {
-    configureLogger({ environment: env.environment });
+    configureLogger({ environment });
     logger.logVersion();
-  }, [env.environment]);
+  }, [environment]);
   const { staticConfig, appProps } = useStaticConfig();
-  const tenantId = env?.tenantId;
   const { isChecking, accessToken } = useKeycloakSSO({
     realm: tenantId,
     url: staticConfig.keycloakUrl,
-    clientId: env.keycloakClientId ?? "oneof-next",
-    ssoPageURI: env?.ssoPageURI,
-    enabled: !env?.accessToken
+    clientId: keycloakClientId ?? "oneof-next",
+    ssoPageURI,
+    enabled: !envAccessToken
   });
-  const _accessToken = env.accessToken ?? accessToken;
+  const _accessToken = envAccessToken ?? accessToken;
   const unauthenticatedFetcher = useCallback7(() => Promise.resolve(null), []);
   const slapiFetcher = useMemo7(() => {
     if (_accessToken) {

package/package.json

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