@superlogic/spree-pay 0.3.2 → 0.3.4

package/README.md

@@ -213,24 +213,49 @@ enum LogLevel {
 
 ## Theme Customization
 
-The widget uses CSS variables for theming. You can override the default theme by wrapping the `<SpreePay>` component in a container with custom CSS variables:
+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: #272e32;
+  --accent: #439ef4;
+  --s-default: #ffffff;
+}
+```
+
+### Local/scoped override
+
+**Option A:** Wrap SpreePay in a container with your own class:
 
 ```tsx
-<div
-  style={
-    {
-      '--primary': '#your-color',
-      '--accent': '#your-accent',
-      '--s-default': '#your-surface-color',
-      // ... see packages/spree-pay/src/styles/globals.css for all 54 variables
-    } as React.CSSProperties
-  }
->
+<div className="my-checkout">
   <SpreePay {...props} />
 </div>
+
+<style>{`
+  .my-checkout .sl-spreepay {
+    --primary: #your-color;
+    --accent: #your-accent;
+  }
+`}</style>
 ```
 
-All available CSS variables are documented in `packages/spree-pay/src/styles/globals.css:21-81`.
+**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-XPQRAAD5.js → CryptoComTab-BZZUG4BL.js}

@@ -1,6 +1,6 @@
 import {
   Iframe3ds
-} from "./chunk-256NJIJQ.js";
+} from "./chunk-ER5YKU2O.js";
 import {
   InfoBanner,
   Legal,
@@ -12,7 +12,7 @@ import {
   useSpreePayRegister,
   useSpreePaymentMethod,
   useStaticConfig
-} from "./chunk-QNXCPSL7.js";
+} from "./chunk-5FKBVNC4.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-VDQLJRGP.js → CryptoTab-PJIZU5AQ.js}

@@ -2,7 +2,7 @@ import {
   CheckoutButton,
   PointsSwitch,
   cn as cn2
-} from "./chunk-STFEOIP4.js";
+} from "./chunk-GO3SK2EV.js";
 import {
   Dialog,
   DialogContent,
@@ -16,7 +16,7 @@ import {
   useSpreePayConfig,
   useSpreePayRegister,
   useSpreePaymentMethod
-} from "./chunk-QNXCPSL7.js";
+} from "./chunk-5FKBVNC4.js";
 
 // src/components/CryptoTab/Crypto/CryptoWrapper.tsx
 import { useMemo as useMemo2 } from "react";

package/build/{chunk-QNXCPSL7.js → chunk-5FKBVNC4.js}

@@ -9,7 +9,7 @@ var PaymentType = /* @__PURE__ */ ((PaymentType2) => {
 })(PaymentType || {});
 
 // package.json
-var version = "0.3.2";
+var version = "0.3.4";
 
 // 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);
@@ -256,8 +256,8 @@ var config = {
       keycloakUrl: "https://auth.dev.umusicpassport.com"
     },
     cdc: {
-      slapiUrl: "https://slapi.dev.superlogic.com",
-      keycloakUrl: "https://auth.dev02.superlogic.com"
+      slapiUrl: "https://slapi.dev.travel.crypto.superlogic.com",
+      keycloakUrl: "https://auth.dev.travel.crypto.superlogic.com"
     },
     tria: {
       slapiUrl: "https://slapi.dev.tria.superlogic.com",
@@ -282,8 +282,8 @@ var config = {
       keycloakUrl: "https://auth.stg.umusicpassport.com"
     },
     cdc: {
-      slapiUrl: "https://slapi.stg.superlogic.com",
-      keycloakUrl: "https://auth.stg02.superlogic.com"
+      slapiUrl: "https://slapi.stg.travel.crypto.superlogic.com",
+      keycloakUrl: "https://auth.stg.travel.crypto.superlogic.com"
     },
     tria: {
       slapiUrl: "https://slapi.stg.tria.superlogic.com",
@@ -308,12 +308,12 @@ var config = {
       keycloakUrl: "https://auth.umusicpassport.com"
     },
     cdc: {
-      slapiUrl: "https://slapi.superlogic.com",
-      keycloakUrl: "https://auth.superlogic.com"
+      slapiUrl: "https://slapi.travel.crypto.com",
+      keycloakUrl: "https://auth.travel.crypto.com"
     },
     tria: {
-      slapiUrl: "https://auth.travel.tria.so",
-      keycloakUrl: "https://slapi.travel.tria.so"
+      slapiUrl: "https://slapi.travel.tria.so",
+      keycloakUrl: "https://auth.travel.tria.so"
     }
   }
 };
@@ -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/{chunk-256NJIJQ.js → chunk-ER5YKU2O.js}

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

package/build/{chunk-STFEOIP4.js → chunk-GO3SK2EV.js}

@@ -6,7 +6,7 @@ import {
   useSpreePayEnv,
   useSpreePaymentMethod,
   useStaticConfig
-} from "./chunk-QNXCPSL7.js";
+} from "./chunk-5FKBVNC4.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);
@@ -234,15 +234,18 @@ var CheckoutButton = ({ isLoggedIn }) => {
     }
     return "Checkout";
   };
-  const checkoutClass = "text-(--inverse) h-14 w-full cursor-pointer rounded-4xl bg-(--s-brand) hover:bg-(--s-brand-hover) px-4 text-center text-xl leading-6 font-medium disabled:cursor-not-allowed disabled:bg-(--s-disabled) disabled:text-(--disabled)";
+  const checkoutClass = "text-(--inverse) h-14 leading-14 w-full cursor-pointer rounded-4xl bg-(--s-brand) hover:bg-(--s-brand-hover) px-4 text-center text-xl leading-6 font-medium disabled:cursor-not-allowed disabled:bg-(--s-disabled) disabled:text-(--disabled)";
   return /* @__PURE__ */ jsxs3("div", { className: "flex w-full flex-col gap-4 p-6 text-xs leading-5 font-medium text-(--secondary) md:px-7", children: [
     /* @__PURE__ */ jsx5(Legal, {}),
-    isLoggedIn ? /* @__PURE__ */ jsx5(Fragment, { children: onProcess && /* @__PURE__ */ jsx5("button", { disabled: isDisabled, onClick: onProcess, className: checkoutClass, children: getCheckoutContent() }) }) : /* @__PURE__ */ jsx5(
+    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 for an AIR account"
+        children: [
+          "Log in / Sign up",
+          tenantId === "moca" ? " for an AIR account" : ""
+        ]
       }
     ),
     /* @__PURE__ */ jsxs3("a", { href: "https://www.spree.finance/", className: "flex items-center justify-center gap-2 hover:underline", children: [

package/build/index.cjs

@@ -68,7 +68,7 @@ var init_payments = __esm({
 var version;
 var init_package = __esm({
   "package.json"() {
-    version = "0.3.2";
+    version = "0.3.4";
   }
 });
 
@@ -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);
@@ -319,8 +319,8 @@ var init_config = __esm({
           keycloakUrl: "https://auth.dev.umusicpassport.com"
         },
         cdc: {
-          slapiUrl: "https://slapi.dev.superlogic.com",
-          keycloakUrl: "https://auth.dev02.superlogic.com"
+          slapiUrl: "https://slapi.dev.travel.crypto.superlogic.com",
+          keycloakUrl: "https://auth.dev.travel.crypto.superlogic.com"
         },
         tria: {
           slapiUrl: "https://slapi.dev.tria.superlogic.com",
@@ -345,8 +345,8 @@ var init_config = __esm({
           keycloakUrl: "https://auth.stg.umusicpassport.com"
         },
         cdc: {
-          slapiUrl: "https://slapi.stg.superlogic.com",
-          keycloakUrl: "https://auth.stg02.superlogic.com"
+          slapiUrl: "https://slapi.stg.travel.crypto.superlogic.com",
+          keycloakUrl: "https://auth.stg.travel.crypto.superlogic.com"
         },
         tria: {
           slapiUrl: "https://slapi.stg.tria.superlogic.com",
@@ -371,12 +371,12 @@ var init_config = __esm({
           keycloakUrl: "https://auth.umusicpassport.com"
         },
         cdc: {
-          slapiUrl: "https://slapi.superlogic.com",
-          keycloakUrl: "https://auth.superlogic.com"
+          slapiUrl: "https://slapi.travel.crypto.com",
+          keycloakUrl: "https://auth.travel.crypto.com"
         },
         tria: {
-          slapiUrl: "https://auth.travel.tria.so",
-          keycloakUrl: "https://slapi.travel.tria.so"
+          slapiUrl: "https://slapi.travel.tria.so",
+          keycloakUrl: "https://auth.travel.tria.so"
         }
       }
     };
@@ -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);
@@ -1261,15 +1251,18 @@ var init_CheckoutButton = __esm({
         }
         return "Checkout";
       };
-      const checkoutClass = "text-(--inverse) h-14 w-full cursor-pointer rounded-4xl bg-(--s-brand) hover:bg-(--s-brand-hover) px-4 text-center text-xl leading-6 font-medium disabled:cursor-not-allowed disabled:bg-(--s-disabled) disabled:text-(--disabled)";
+      const checkoutClass = "text-(--inverse) h-14 leading-14 w-full cursor-pointer rounded-4xl bg-(--s-brand) hover:bg-(--s-brand-hover) px-4 text-center text-xl leading-6 font-medium disabled:cursor-not-allowed disabled:bg-(--s-disabled) disabled:text-(--disabled)";
       return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex w-full flex-col gap-4 p-6 text-xs leading-5 font-medium text-(--secondary) md:px-7", children: [
         /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Legal, {}),
-        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.jsx)(
+        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 for an AIR account"
+            children: [
+              "Log in / Sign up",
+              tenantId === "moca" ? " for an AIR account" : ""
+            ]
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("a", { href: "https://www.spree.finance/", className: "flex items-center justify-center gap-2 hover:underline", children: [
@@ -2311,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");
@@ -2323,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", {
@@ -2526,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) {
@@ -2574,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;
@@ -2904,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) => {
@@ -2944,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
@@ -4497,7 +4490,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) => {
@@ -4506,7 +4499,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);
@@ -4516,14 +4509,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 () => {
@@ -4534,8 +4527,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" }),
@@ -4589,13 +4582,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");
@@ -4888,21 +4881,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.css

@@ -844,6 +844,10 @@
   --tw-leading: calc(var(--spacing) * 9);
   line-height: calc(var(--spacing) * 9);
 }
+.sl-spreepay .leading-14 {
+  --tw-leading: calc(var(--spacing) * 14);
+  line-height: calc(var(--spacing) * 14);
+}
 .sl-spreepay .leading-\[1\.3\] {
   --tw-leading: 1.3;
   line-height: 1.3;

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-STFEOIP4.js";
+} from "./chunk-GO3SK2EV.js";
 import {
   Iframe3ds
-} from "./chunk-256NJIJQ.js";
+} from "./chunk-ER5YKU2O.js";
 import {
   InfoBanner,
   LogLevel,
@@ -31,7 +31,7 @@ import {
   useSpreePayRegister,
   useSpreePaymentMethod,
   useStaticConfig
-} from "./chunk-QNXCPSL7.js";
+} from "./chunk-5FKBVNC4.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
@@ -1967,7 +1967,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 +1976,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 +1986,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 +2004,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 +2059,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 +2190,9 @@ var TabButtons = (props) => {
 
 // src/SpreePayContent.tsx
 import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
-var CryptoTab = lazy(() => import("./CryptoTab-VDQLJRGP.js").then((module) => ({ default: module.CryptoTab })));
+var CryptoTab = lazy(() => import("./CryptoTab-PJIZU5AQ.js").then((module) => ({ default: module.CryptoTab })));
 var CryptoComTab = lazy(
-  () => import("./CryptoComTab-XPQRAAD5.js").then((module) => ({ default: module.CryptoComTab }))
+  () => import("./CryptoComTab-BZZUG4BL.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 +2345,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.2",
+  "version": "0.3.4",
   "description": "Spree-pay React component and utilities",
   "private": false,
   "type": "module",

package/src/styles/globals.css

@@ -16,7 +16,6 @@
 @custom-variant dark (&:is(.dark *));
 
 /* Default theme values in :root for standalone use.
-   These match the moca/bookit theme from live-tickets.
    When used inside live-tickets, these are overridden by the host's :root variables. */
 :root {
   /* color / text-icons */