@superlogic/spree-pay 0.1.0 → 0.1.1

package/build/index.cjs

@@ -38,7 +38,10 @@ module.exports = __toCommonJS(index_exports);
 
 // src/SpreePay.tsx
 var import_react7 = require("react");
-var import_swr2 = require("swr");
+var import_swr3 = require("swr");
+
+// src/SpreePayContent.tsx
+var import_react6 = require("react");
 
 // ../../node_modules/clsx/dist/clsx.mjs
 function r(e) {
@@ -3013,59 +3016,9 @@ function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
 
-// src/components/CheckoutButton.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
-var CheckoutButton = ({ amount }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex w-full max-w-[540px] flex-col overflow-hidden rounded-[24px] border border-black/25 bg-white text-xs font-medium", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "px-7 py-5", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { className: "text-secondary", children: [
-      "By clicking on the button below I acknowledge that I have read and accepted the",
-      " ",
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { className: "underline", href: "/", children: "Property Policies" }),
-      ",",
-      " ",
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { className: "underline", href: "/", children: "Check-in Instructions" }),
-      ",",
-      " ",
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { className: "underline", href: "/", children: "Property Fees" }),
-      ", and",
-      " ",
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { className: "underline", href: "/", children: "Supplier Terms and Conditions" }),
-      "."
-    ] }) }),
-    amount && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className: "bg-primary pointer w-full py-4 text-xl font-semibold text-white", children: `Pay ${amount}` })
-  ] });
-};
-
-// src/components/SpreeLegal.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var SpreeLegal = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "mt-4 flex items-center gap-4", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { className: "flex-shrink-0", xmlns: "http://www.w3.org/2000/svg", width: "66", height: "30", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      "path",
-      {
-        fill: "#000",
-        fillOpacity: ".5",
-        d: "M57.79 25.48a4.82 4.82 0 0 1-1.55-.25l.55-1.86c.34.1.65.15.92.15s.51-.1.72-.26c.21-.16.39-.43.53-.81l.2-.55-3.65-10.3h2.52l2.32 7.62h.1l2.34-7.62h2.53l-4.04 11.31c-.19.54-.44 1-.75 1.38-.31.38-.7.68-1.14.88-.45.2-.98.3-1.6.3ZM48.95 21.9a4.2 4.2 0 0 1-1.73-.35c-.5-.23-.9-.57-1.2-1.02a3 3 0 0 1-.44-1.67 2.44 2.44 0 0 1 1.18-2.3c.35-.23.76-.4 1.22-.5.46-.13.93-.21 1.42-.27l1.44-.16c.37-.05.64-.13.8-.24.18-.1.26-.27.26-.5v-.04c0-.5-.15-.88-.44-1.15-.3-.27-.72-.4-1.27-.4-.58 0-1.04.12-1.38.37-.34.26-.57.56-.69.9l-2.22-.31a3.54 3.54 0 0 1 2.35-2.47 6.29 6.29 0 0 1 3.38-.14c.48.1.92.3 1.32.56.4.26.72.6.96 1.06.25.44.37 1 .37 1.67v6.75h-2.29v-1.38h-.08a2.9 2.9 0 0 1-1.59 1.37c-.39.14-.84.22-1.37.22Zm.62-1.75c.48 0 .89-.1 1.24-.28.35-.2.62-.45.8-.77.2-.31.3-.65.3-1.03V16.9c-.08.06-.2.11-.38.17a18.34 18.34 0 0 1-1.8.32c-.36.05-.68.12-.96.23-.28.11-.5.27-.66.46-.16.2-.24.45-.24.75 0 .44.16.77.48 1 .32.22.72.33 1.22.33ZM34.43 21.7V8.23h5.05c1.03 0 1.9.2 2.6.58.7.38 1.23.91 1.6 1.59.36.67.54 1.43.54 2.28 0 .87-.18 1.63-.55 2.3a3.9 3.9 0 0 1-1.6 1.59c-.72.38-1.59.57-2.63.57H36.1v-2h3.01c.6 0 1.1-.11 1.49-.32.38-.21.67-.5.85-.87.2-.37.29-.79.29-1.27 0-.47-.1-.9-.29-1.26a1.92 1.92 0 0 0-.86-.84c-.38-.2-.88-.31-1.49-.31h-2.23v11.41h-2.44ZM14.54.46a14.54 14.54 0 1 1 0 29.08 14.54 14.54 0 0 1 0-29.08ZM5.59 18.12l-.84 3.35h.83l.84-3.35h-.83Zm1.66 0-.83 3.35h1.66l.84-3.35H7.25Zm3.35-9.58c-1.03 0-2.08.84-2.34 1.87l-1.1 4.4c-.26 1.03.37 1.87 1.4 1.87h9.64l-.34 1.44h-8.1l-.85 3.35h9.6c1.04 0 2.1-.85 2.35-1.89l1.05-4.4c.25-1.03-.38-1.85-1.4-1.85h-9.63l.36-1.44h8.13l.84-3.35H10.6Zm10.44 0-.84 3.35h1.67l.83-3.35h-1.66Zm2.5 0-.84 3.35h.83l.84-3.35h-.83Z"
-      }
-    ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("p", { className: "text-secondary text-xs", children: [
-      "Spree enables seamless crypto payments for real-world goods, travel, and experiences. Enjoy secure, fast transactions and earn rewards.",
-      " ",
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("a", { className: "underline", href: "/", children: "Learn more" }),
-      " ",
-      "about Spree."
-    ] })
-  ] });
-};
-
-// src/components/Tabs.tsx
-var import_react6 = require("react");
-var import_react_stripe_js2 = require("@stripe/react-stripe-js");
-var import_stripe_js = require("@stripe/stripe-js");
-
 // src/context/SpreePayActionsContext.tsx
 var import_react = require("react");
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime = require("react/jsx-runtime");
 var SpreePayActionsContext = (0, import_react.createContext)(void 0);
 var SpreePayProvider = ({ children, env }) => {
   const processRef = (0, import_react.useRef)(null);
@@ -3092,7 +3045,7 @@ var SpreePayProvider = ({ children, env }) => {
     selectedPaymentMethod,
     setSelectedPaymentMethod
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SpreePayActionsContext.Provider, { value, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SpreePayActionsContext.Provider, { value, children });
 };
 var useSpreePay = () => {
   const ctx = (0, import_react.useContext)(SpreePayActionsContext);
@@ -3115,21 +3068,72 @@ var useSpreePayRegister = () => {
   return { register: ctx.register };
 };
 
+// src/components/CheckoutButton.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var CheckoutButton = ({ amount, onCheckout }) => {
+  const { selectedPaymentMethod } = useSpreePaymentMethod();
+  const isDisabled = !amount || !selectedPaymentMethod.method;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex w-full flex-col overflow-hidden rounded-[24px] border border-black/25 bg-white text-xs font-medium", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "px-7 py-5", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("p", { className: "text-secondary", children: [
+      "By clicking on the button below I acknowledge that I have read and accepted the",
+      " ",
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("a", { className: "underline", href: "/", children: "Property Policies" }),
+      ",",
+      " ",
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("a", { className: "underline", href: "/", children: "Check-in Instructions" }),
+      ",",
+      " ",
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("a", { className: "underline", href: "/", children: "Property Fees" }),
+      ", and",
+      " ",
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("a", { className: "underline", href: "/", children: "Supplier Terms and Conditions" }),
+      "."
+    ] }) }),
+    onCheckout && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "button",
+      {
+        disabled: isDisabled,
+        onClick: onCheckout,
+        className: cn("bg-primary pointer w-full py-4 text-xl font-semibold text-white", {
+          "opacity-50": isDisabled
+        }),
+        children: amount ? `Pay ${amount}` : "Checkout"
+      }
+    )
+  ] });
+};
+
+// src/components/SpreeLegal.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var SpreeLegal = () => {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "mt-4 flex items-center gap-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { className: "flex-shrink-0", xmlns: "http://www.w3.org/2000/svg", width: "66", height: "30", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "path",
+      {
+        fill: "#000",
+        fillOpacity: ".5",
+        d: "M57.79 25.48a4.82 4.82 0 0 1-1.55-.25l.55-1.86c.34.1.65.15.92.15s.51-.1.72-.26c.21-.16.39-.43.53-.81l.2-.55-3.65-10.3h2.52l2.32 7.62h.1l2.34-7.62h2.53l-4.04 11.31c-.19.54-.44 1-.75 1.38-.31.38-.7.68-1.14.88-.45.2-.98.3-1.6.3ZM48.95 21.9a4.2 4.2 0 0 1-1.73-.35c-.5-.23-.9-.57-1.2-1.02a3 3 0 0 1-.44-1.67 2.44 2.44 0 0 1 1.18-2.3c.35-.23.76-.4 1.22-.5.46-.13.93-.21 1.42-.27l1.44-.16c.37-.05.64-.13.8-.24.18-.1.26-.27.26-.5v-.04c0-.5-.15-.88-.44-1.15-.3-.27-.72-.4-1.27-.4-.58 0-1.04.12-1.38.37-.34.26-.57.56-.69.9l-2.22-.31a3.54 3.54 0 0 1 2.35-2.47 6.29 6.29 0 0 1 3.38-.14c.48.1.92.3 1.32.56.4.26.72.6.96 1.06.25.44.37 1 .37 1.67v6.75h-2.29v-1.38h-.08a2.9 2.9 0 0 1-1.59 1.37c-.39.14-.84.22-1.37.22Zm.62-1.75c.48 0 .89-.1 1.24-.28.35-.2.62-.45.8-.77.2-.31.3-.65.3-1.03V16.9c-.08.06-.2.11-.38.17a18.34 18.34 0 0 1-1.8.32c-.36.05-.68.12-.96.23-.28.11-.5.27-.66.46-.16.2-.24.45-.24.75 0 .44.16.77.48 1 .32.22.72.33 1.22.33ZM34.43 21.7V8.23h5.05c1.03 0 1.9.2 2.6.58.7.38 1.23.91 1.6 1.59.36.67.54 1.43.54 2.28 0 .87-.18 1.63-.55 2.3a3.9 3.9 0 0 1-1.6 1.59c-.72.38-1.59.57-2.63.57H36.1v-2h3.01c.6 0 1.1-.11 1.49-.32.38-.21.67-.5.85-.87.2-.37.29-.79.29-1.27 0-.47-.1-.9-.29-1.26a1.92 1.92 0 0 0-.86-.84c-.38-.2-.88-.31-1.49-.31h-2.23v11.41h-2.44ZM14.54.46a14.54 14.54 0 1 1 0 29.08 14.54 14.54 0 0 1 0-29.08ZM5.59 18.12l-.84 3.35h.83l.84-3.35h-.83Zm1.66 0-.83 3.35h1.66l.84-3.35H7.25Zm3.35-9.58c-1.03 0-2.08.84-2.34 1.87l-1.1 4.4c-.26 1.03.37 1.87 1.4 1.87h9.64l-.34 1.44h-8.1l-.85 3.35h9.6c1.04 0 2.1-.85 2.35-1.89l1.05-4.4c.25-1.03-.38-1.85-1.4-1.85h-9.63l.36-1.44h8.13l.84-3.35H10.6Zm10.44 0-.84 3.35h1.67l.83-3.35h-1.66Zm2.5 0-.84 3.35h.83l.84-3.35h-.83Z"
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("p", { className: "text-secondary text-xs", children: [
+      "Spree enables seamless crypto payments for real-world goods, travel, and experiences. Enjoy secure, fast transactions and earn rewards.",
+      " ",
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("a", { className: "underline", href: "/", children: "Learn more" }),
+      " ",
+      "about Spree."
+    ] })
+  ] });
+};
+
 // src/components/CreditCard/CreditCard.tsx
 var import_react5 = require("react");
+var import_react_stripe_js2 = require("@stripe/react-stripe-js");
+var import_stripe_js = require("@stripe/stripe-js");
 
 // src/hooks/useCards.ts
 var import_swr = __toESM(require("swr"), 1);
 var useCards = () => {
-  const { env } = useSpreePayEnv();
-  const { data, isLoading, mutate } = (0, import_swr.default)(
-    `/payments/cards?userExternalId=${env.userId}`,
-    {
-      revalidateOnFocus: false,
-      revalidateIfStale: false,
-      revalidateOnReconnect: false
-    }
-  );
+  const { data, isLoading, mutate } = (0, import_swr.default)(`/v1/payments/cards`);
   return {
     cards: data?.data.filter((c) => c.active) || [],
     cardsIsLoading: isLoading,
@@ -3137,6 +3141,13 @@ var useCards = () => {
   };
 };
 
+// src/hooks/useConfig.ts
+var import_swr2 = __toESM(require("swr"), 1);
+var useConfig = () => {
+  const { data, isLoading } = (0, import_swr2.default)("/v1/tenants/configs/spree-pay");
+  return { config: data, configIsLoading: isLoading };
+};
+
 // src/components/CreditCard/CardsList.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var CardListItem = ({ card, isSelected, onSelect }) => {
@@ -3196,14 +3207,15 @@ var CardListItem = ({ card, isSelected, onSelect }) => {
 };
 var CardsList = ({ selectedCard, setCard }) => {
   const { cards, cardsIsLoading } = useCards();
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex w-full flex-col gap-1", children: [
-    cardsIsLoading && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+  if (cardsIsLoading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex w-full flex-col gap-1", children: [
       /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "bg-primary/8 h-11 animate-pulse rounded-md" }),
       /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "bg-primary/8 h-11 animate-pulse rounded-md" }),
       /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "bg-primary/8 h-11 animate-pulse rounded-md" })
-    ] }),
-    cards.map((card) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CardListItem, { isSelected: selectedCard?.id === card.id, onSelect: setCard, card }, card.id))
-  ] });
+    ] });
+  }
+  if (cards.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex w-full flex-col gap-1", children: cards.map((card) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CardListItem, { isSelected: selectedCard?.id === card.id, onSelect: setCard, card }, card.id)) });
 };
 
 // src/components/CreditCard/CreditCardForm.tsx
@@ -4300,10 +4312,15 @@ var CreditCardForm = ({ saveCard }) => {
 
 // src/components/CreditCard/CreditCard.tsx
 var import_jsx_runtime14 = require("react/jsx-runtime");
+var SripeWrapper = (props) => {
+  const stripePromise = (0, import_react5.useMemo)(() => (0, import_stripe_js.loadStripe)(props.publicKey), [props.publicKey]);
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_stripe_js2.Elements, { stripe: stripePromise, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(CreditCardForm, { saveCard: props.saveNewCard }) });
+};
 var CreditCard = () => {
   const [showForm, setShowForm] = (0, import_react5.useState)(false);
   const { selectedPaymentMethod, setSelectedPaymentMethod } = useSpreePaymentMethod();
   const { mutateCards } = useCards();
+  const { config } = useConfig();
   const setCard = (card) => {
     setSelectedPaymentMethod({ type: "CREDIT_CARD" /* CREDIT_CARD */, method: card });
   };
@@ -4322,9 +4339,9 @@ var CreditCard = () => {
           setCard
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("button", { onClick: () => setShowForm(true), className: "text-sm font-medium text-black", children: "Add new card" })
+      config?.stripePublicKey && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("button", { onClick: () => setShowForm(true), className: "text-sm font-medium text-black", children: "Add new card" })
     ] }),
-    showForm && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(CreditCardForm, { saveCard: saveNewCard })
+    config?.stripePublicKey && showForm && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SripeWrapper, { saveNewCard, publicKey: config.stripePublicKey })
   ] });
 };
 
@@ -4386,23 +4403,21 @@ var TabButtons = (props) => {
 // src/components/Tabs.tsx
 var import_jsx_runtime16 = require("react/jsx-runtime");
 var Tabs = () => {
-  const { env } = useSpreePayEnv();
   const { selectedPaymentMethod, setSelectedPaymentMethod } = useSpreePaymentMethod();
-  const stripePromise = (0, import_react6.useMemo)(() => (0, import_stripe_js.loadStripe)(env.stripePublicKey), [env.stripePublicKey]);
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "mb-4 rounded-2xl border border-black/25 bg-white", children: [
     /* @__PURE__ */ (0, import_jsx_runtime16.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_runtime16.jsx)("h2", { className: "text-primary text-2xl font-semibold", children: "Choose a Payment Method" }),
       /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(TabButtons, { value: selectedPaymentMethod.type, onChange: setSelectedPaymentMethod })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "px-7 py-6", children: [
-      selectedPaymentMethod.type === "CREDIT_CARD" /* CREDIT_CARD */ && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_stripe_js2.Elements, { stripe: stripePromise, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CreditCard, {}) }),
+      selectedPaymentMethod.type === "CREDIT_CARD" /* CREDIT_CARD */ && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CreditCard, {}),
       selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && null
     ] })
   ] });
 };
 
 // src/fetcher/client.ts
-var cfg = { baseUrl: void 0, authKey: void 0 };
+var cfg = { baseUrl: void 0, accessToken: void 0, tenantId: void 0 };
 var buildUrl = (key) => {
   if (!cfg.baseUrl) throw new Error("Missing SLAPI baseUrl. Call registerApi(...) first.");
   if (typeof key === "string") return cfg.baseUrl + key;
@@ -4419,8 +4434,10 @@ var request = async (method, url, body) => {
   const headers = {
     Accept: "application/json"
   };
-  if (!cfg.authKey) throw new Error("Missing SLAPI authKey. Call registerApi(...) first.");
-  headers.Authorization = `Bearer ${cfg.authKey}`;
+  if (!cfg.accessToken) throw new Error("Missing SLAPI accessToken. Call registerApi(...) first.");
+  if (!cfg.tenantId) throw new Error("Missing SLAPI tenantId. Call registerApi(...) first.");
+  headers.Authorization = `Bearer ${cfg.accessToken}`;
+  headers["X-Tenant-ID"] = cfg.tenantId;
   let payload;
   if (method !== "GET" && method !== "DELETE" && body !== void 0) {
     if (typeof FormData !== "undefined" && body instanceof FormData) {
@@ -4448,9 +4465,6 @@ var request = async (method, url, body) => {
   }
   return await res.json();
 };
-var slapiFetcher = async () => {
-  throw new Error("slapiFetcher is not configured. Call registerApi(...) first.");
-};
 var slapiApi = {
   get: async () => {
     throw new Error("slapiApi is not configured. Call registerApi(...) first.");
@@ -4470,7 +4484,8 @@ var slapiApi = {
 };
 var registerApi = (config) => {
   cfg.baseUrl = config.baseUrl;
-  cfg.authKey = config.authKey;
+  cfg.accessToken = config.accessToken;
+  cfg.tenantId = config.tenantId;
   slapiApi = {
     get: async (key) => {
       const url = buildUrl(key);
@@ -4493,7 +4508,7 @@ var registerApi = (config) => {
       return request("DELETE", url);
     }
   };
-  slapiFetcher = async (key) => slapiApi.get(key);
+  return (key) => slapiApi.get(key);
 };
 
 // src/services/slapi.ts
@@ -4536,7 +4551,7 @@ var SlapiPaymentService = {
   // },
   createPayment: (params) => {
     const { type, hash } = params;
-    return slapiApi.post("/payments", { ...{ type, hash, card: params.card }, capture: false }).then((data) => ({ data }));
+    return slapiApi.post("/v1/payments", { ...{ type, hash, card: params.card }, capture: false }).then((data) => ({ data }));
   },
   // signEncodedTransaction: async (signTransaction: SignTransaction, encodedTX: string): Promise<string> => {
   //   const swapTransactionBuf = Buffer.from(encodedTX, 'base64');
@@ -4551,11 +4566,11 @@ var SlapiPaymentService = {
   // },
   addCard: (params) => {
     const { source, hash } = params;
-    return slapiApi.post("/payments/cards", { hash, source }).then((data) => ({ data }));
+    return slapiApi.post("/v1/payments/cards", { hash, source }).then((data) => ({ data }));
   },
   validate3DS: (params) => {
     const { paymentId } = params;
-    return slapiApi.post("/payments/validate", { paymentId, type: "CREDIT_CARD" }).then((data) => ({ data }));
+    return slapiApi.post("/v1/payments/validate", { paymentId, type: "CREDIT_CARD" }).then((data) => ({ data }));
   }
 };
 
@@ -4574,17 +4589,13 @@ var cardPayment = async ({ card, hash }) => {
   return { status: paymentResData.status };
 };
 
-// src/SpreePay.tsx
+// src/SpreePayContent.tsx
 var import_jsx_runtime17 = require("react/jsx-runtime");
-var SpreePay = (props) => {
-  const { className } = props;
-  const { env } = useSpreePayEnv();
+var SpreePayContent = (props) => {
+  const { className, amount, onProcess } = props;
   const { selectedPaymentMethod } = useSpreePaymentMethod();
-  (0, import_react7.useEffect)(() => {
-    registerApi({ baseUrl: env.slapiUrl, authKey: env.slapiAuthKey });
-  }, [env.slapiUrl, env.slapiAuthKey]);
   const { register } = useSpreePayRegister();
-  const handlePay = (0, import_react7.useCallback)(
+  const handlePay = (0, import_react6.useCallback)(
     (data) => {
       if (selectedPaymentMethod.type === "CREDIT_CARD" /* CREDIT_CARD */ && selectedPaymentMethod.method) {
         return cardPayment({ card: selectedPaymentMethod.method, hash: data.hash });
@@ -4593,14 +4604,45 @@ var SpreePay = (props) => {
     },
     [selectedPaymentMethod]
   );
-  (0, import_react7.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     register(handlePay);
   }, [register, handlePay]);
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_swr2.SWRConfig, { value: { fetcher: slapiFetcher }, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: cn("sl-spreepay", className), children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "w-full max-w-[540px]", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: cn("sl-spreepay", className), children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "w-full max-w-[540px]", children: [
     /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Tabs, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(CheckoutButton, { amount: props.amount }),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(CheckoutButton, { onCheckout: onProcess, amount }),
     /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(SpreeLegal, {})
-  ] }) }) });
+  ] }) });
+};
+
+// src/SpreePay.tsx
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var envConfig = {
+  dev: { slapiUrl: "https://slapi.dev.superlogic.com", tenantId: "bookit" },
+  stg: { slapiUrl: "https://slapi.dev.superlogic.com", tenantId: "bookit" },
+  prod: { slapiUrl: "https://slapi.dev.superlogic.com", tenantId: "bookit" }
+};
+var SpreePay = (props) => {
+  const { env } = useSpreePayEnv();
+  const slapiFetcher = (0, import_react7.useMemo)(
+    () => registerApi({
+      accessToken: env.accessToken,
+      baseUrl: envConfig[env.environment].slapiUrl,
+      tenantId: envConfig[env.environment].tenantId
+    }),
+    [env]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    import_swr3.SWRConfig,
+    {
+      value: {
+        fetcher: slapiFetcher,
+        revalidateOnFocus: false,
+        revalidateIfStale: false,
+        revalidateOnReconnect: false
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SpreePayContent, { ...props })
+    }
+  );
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/build/index.d.cts

@@ -1,16 +1,15 @@
 import { FC, ReactNode } from 'react';
 
 type SpreePayProps = {
+    onProcess?: () => Promise<void>;
     amount?: string;
     className?: string;
 };
+
 declare const SpreePay: FC<SpreePayProps>;
 
 type ENV = {
-    userId: string;
-    stripePublicKey: string;
-    slapiUrl: string;
-    slapiAuthKey: string;
+    environment: 'dev' | 'stg' | 'prod';
     accessToken: string;
 };
 
@@ -81,4 +80,4 @@ declare const useSpreePay: () => {
     selectedPaymentMethod: SelectedPaymentMethod;
 };
 
-export { SpreePay, type SpreePayProps, SpreePayProvider, useSpreePay };
+export { SpreePay, SpreePayProvider, useSpreePay };

package/build/index.d.ts

@@ -1,16 +1,15 @@
 import { FC, ReactNode } from 'react';
 
 type SpreePayProps = {
+    onProcess?: () => Promise<void>;
     amount?: string;
     className?: string;
 };
+
 declare const SpreePay: FC<SpreePayProps>;
 
 type ENV = {
-    userId: string;
-    stripePublicKey: string;
-    slapiUrl: string;
-    slapiAuthKey: string;
+    environment: 'dev' | 'stg' | 'prod';
     accessToken: string;
 };
 
@@ -81,4 +80,4 @@ declare const useSpreePay: () => {
     selectedPaymentMethod: SelectedPaymentMethod;
 };
 
-export { SpreePay, type SpreePayProps, SpreePayProvider, useSpreePay };
+export { SpreePay, SpreePayProvider, useSpreePay };

package/build/index.js

@@ -1,7 +1,10 @@
 // src/SpreePay.tsx
-import { useCallback as useCallback5, useEffect as useEffect5 } from "react";
+import { useMemo as useMemo5 } from "react";
 import { SWRConfig } from "swr";
 
+// src/SpreePayContent.tsx
+import { useCallback as useCallback5, useEffect as useEffect5 } from "react";
+
 // ../../node_modules/clsx/dist/clsx.mjs
 function r(e) {
   var t, f, n = "";
@@ -2975,59 +2978,9 @@ function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
 
-// src/components/CheckoutButton.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-var CheckoutButton = ({ amount }) => {
-  return /* @__PURE__ */ jsxs("div", { className: "flex w-full max-w-[540px] flex-col overflow-hidden rounded-[24px] border border-black/25 bg-white text-xs font-medium", children: [
-    /* @__PURE__ */ jsx("div", { className: "px-7 py-5", children: /* @__PURE__ */ jsxs("p", { className: "text-secondary", children: [
-      "By clicking on the button below I acknowledge that I have read and accepted the",
-      " ",
-      /* @__PURE__ */ jsx("a", { className: "underline", href: "/", children: "Property Policies" }),
-      ",",
-      " ",
-      /* @__PURE__ */ jsx("a", { className: "underline", href: "/", children: "Check-in Instructions" }),
-      ",",
-      " ",
-      /* @__PURE__ */ jsx("a", { className: "underline", href: "/", children: "Property Fees" }),
-      ", and",
-      " ",
-      /* @__PURE__ */ jsx("a", { className: "underline", href: "/", children: "Supplier Terms and Conditions" }),
-      "."
-    ] }) }),
-    amount && /* @__PURE__ */ jsx("button", { className: "bg-primary pointer w-full py-4 text-xl font-semibold text-white", children: `Pay ${amount}` })
-  ] });
-};
-
-// src/components/SpreeLegal.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var SpreeLegal = () => {
-  return /* @__PURE__ */ jsxs2("div", { className: "mt-4 flex items-center gap-4", children: [
-    /* @__PURE__ */ jsx2("svg", { className: "flex-shrink-0", xmlns: "http://www.w3.org/2000/svg", width: "66", height: "30", fill: "none", children: /* @__PURE__ */ jsx2(
-      "path",
-      {
-        fill: "#000",
-        fillOpacity: ".5",
-        d: "M57.79 25.48a4.82 4.82 0 0 1-1.55-.25l.55-1.86c.34.1.65.15.92.15s.51-.1.72-.26c.21-.16.39-.43.53-.81l.2-.55-3.65-10.3h2.52l2.32 7.62h.1l2.34-7.62h2.53l-4.04 11.31c-.19.54-.44 1-.75 1.38-.31.38-.7.68-1.14.88-.45.2-.98.3-1.6.3ZM48.95 21.9a4.2 4.2 0 0 1-1.73-.35c-.5-.23-.9-.57-1.2-1.02a3 3 0 0 1-.44-1.67 2.44 2.44 0 0 1 1.18-2.3c.35-.23.76-.4 1.22-.5.46-.13.93-.21 1.42-.27l1.44-.16c.37-.05.64-.13.8-.24.18-.1.26-.27.26-.5v-.04c0-.5-.15-.88-.44-1.15-.3-.27-.72-.4-1.27-.4-.58 0-1.04.12-1.38.37-.34.26-.57.56-.69.9l-2.22-.31a3.54 3.54 0 0 1 2.35-2.47 6.29 6.29 0 0 1 3.38-.14c.48.1.92.3 1.32.56.4.26.72.6.96 1.06.25.44.37 1 .37 1.67v6.75h-2.29v-1.38h-.08a2.9 2.9 0 0 1-1.59 1.37c-.39.14-.84.22-1.37.22Zm.62-1.75c.48 0 .89-.1 1.24-.28.35-.2.62-.45.8-.77.2-.31.3-.65.3-1.03V16.9c-.08.06-.2.11-.38.17a18.34 18.34 0 0 1-1.8.32c-.36.05-.68.12-.96.23-.28.11-.5.27-.66.46-.16.2-.24.45-.24.75 0 .44.16.77.48 1 .32.22.72.33 1.22.33ZM34.43 21.7V8.23h5.05c1.03 0 1.9.2 2.6.58.7.38 1.23.91 1.6 1.59.36.67.54 1.43.54 2.28 0 .87-.18 1.63-.55 2.3a3.9 3.9 0 0 1-1.6 1.59c-.72.38-1.59.57-2.63.57H36.1v-2h3.01c.6 0 1.1-.11 1.49-.32.38-.21.67-.5.85-.87.2-.37.29-.79.29-1.27 0-.47-.1-.9-.29-1.26a1.92 1.92 0 0 0-.86-.84c-.38-.2-.88-.31-1.49-.31h-2.23v11.41h-2.44ZM14.54.46a14.54 14.54 0 1 1 0 29.08 14.54 14.54 0 0 1 0-29.08ZM5.59 18.12l-.84 3.35h.83l.84-3.35h-.83Zm1.66 0-.83 3.35h1.66l.84-3.35H7.25Zm3.35-9.58c-1.03 0-2.08.84-2.34 1.87l-1.1 4.4c-.26 1.03.37 1.87 1.4 1.87h9.64l-.34 1.44h-8.1l-.85 3.35h9.6c1.04 0 2.1-.85 2.35-1.89l1.05-4.4c.25-1.03-.38-1.85-1.4-1.85h-9.63l.36-1.44h8.13l.84-3.35H10.6Zm10.44 0-.84 3.35h1.67l.83-3.35h-1.66Zm2.5 0-.84 3.35h.83l.84-3.35h-.83Z"
-      }
-    ) }),
-    /* @__PURE__ */ jsxs2("p", { className: "text-secondary text-xs", children: [
-      "Spree enables seamless crypto payments for real-world goods, travel, and experiences. Enjoy secure, fast transactions and earn rewards.",
-      " ",
-      /* @__PURE__ */ jsx2("a", { className: "underline", href: "/", children: "Learn more" }),
-      " ",
-      "about Spree."
-    ] })
-  ] });
-};
-
-// src/components/Tabs.tsx
-import { useMemo as useMemo4 } from "react";
-import { Elements } from "@stripe/react-stripe-js";
-import { loadStripe } from "@stripe/stripe-js";
-
 // src/context/SpreePayActionsContext.tsx
 import { createContext, useCallback, useContext, useRef, useState } from "react";
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 var SpreePayActionsContext = createContext(void 0);
 var SpreePayProvider = ({ children, env }) => {
   const processRef = useRef(null);
@@ -3054,7 +3007,7 @@ var SpreePayProvider = ({ children, env }) => {
     selectedPaymentMethod,
     setSelectedPaymentMethod
   };
-  return /* @__PURE__ */ jsx3(SpreePayActionsContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx(SpreePayActionsContext.Provider, { value, children });
 };
 var useSpreePay = () => {
   const ctx = useContext(SpreePayActionsContext);
@@ -3077,21 +3030,72 @@ var useSpreePayRegister = () => {
   return { register: ctx.register };
 };
 
+// src/components/CheckoutButton.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var CheckoutButton = ({ amount, onCheckout }) => {
+  const { selectedPaymentMethod } = useSpreePaymentMethod();
+  const isDisabled = !amount || !selectedPaymentMethod.method;
+  return /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col overflow-hidden rounded-[24px] border border-black/25 bg-white text-xs font-medium", children: [
+    /* @__PURE__ */ jsx2("div", { className: "px-7 py-5", children: /* @__PURE__ */ jsxs("p", { className: "text-secondary", children: [
+      "By clicking on the button below I acknowledge that I have read and accepted the",
+      " ",
+      /* @__PURE__ */ jsx2("a", { className: "underline", href: "/", children: "Property Policies" }),
+      ",",
+      " ",
+      /* @__PURE__ */ jsx2("a", { className: "underline", href: "/", children: "Check-in Instructions" }),
+      ",",
+      " ",
+      /* @__PURE__ */ jsx2("a", { className: "underline", href: "/", children: "Property Fees" }),
+      ", and",
+      " ",
+      /* @__PURE__ */ jsx2("a", { className: "underline", href: "/", children: "Supplier Terms and Conditions" }),
+      "."
+    ] }) }),
+    onCheckout && /* @__PURE__ */ jsx2(
+      "button",
+      {
+        disabled: isDisabled,
+        onClick: onCheckout,
+        className: cn("bg-primary pointer w-full py-4 text-xl font-semibold text-white", {
+          "opacity-50": isDisabled
+        }),
+        children: amount ? `Pay ${amount}` : "Checkout"
+      }
+    )
+  ] });
+};
+
+// src/components/SpreeLegal.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var SpreeLegal = () => {
+  return /* @__PURE__ */ jsxs2("div", { className: "mt-4 flex items-center gap-4", children: [
+    /* @__PURE__ */ jsx3("svg", { className: "flex-shrink-0", xmlns: "http://www.w3.org/2000/svg", width: "66", height: "30", fill: "none", children: /* @__PURE__ */ jsx3(
+      "path",
+      {
+        fill: "#000",
+        fillOpacity: ".5",
+        d: "M57.79 25.48a4.82 4.82 0 0 1-1.55-.25l.55-1.86c.34.1.65.15.92.15s.51-.1.72-.26c.21-.16.39-.43.53-.81l.2-.55-3.65-10.3h2.52l2.32 7.62h.1l2.34-7.62h2.53l-4.04 11.31c-.19.54-.44 1-.75 1.38-.31.38-.7.68-1.14.88-.45.2-.98.3-1.6.3ZM48.95 21.9a4.2 4.2 0 0 1-1.73-.35c-.5-.23-.9-.57-1.2-1.02a3 3 0 0 1-.44-1.67 2.44 2.44 0 0 1 1.18-2.3c.35-.23.76-.4 1.22-.5.46-.13.93-.21 1.42-.27l1.44-.16c.37-.05.64-.13.8-.24.18-.1.26-.27.26-.5v-.04c0-.5-.15-.88-.44-1.15-.3-.27-.72-.4-1.27-.4-.58 0-1.04.12-1.38.37-.34.26-.57.56-.69.9l-2.22-.31a3.54 3.54 0 0 1 2.35-2.47 6.29 6.29 0 0 1 3.38-.14c.48.1.92.3 1.32.56.4.26.72.6.96 1.06.25.44.37 1 .37 1.67v6.75h-2.29v-1.38h-.08a2.9 2.9 0 0 1-1.59 1.37c-.39.14-.84.22-1.37.22Zm.62-1.75c.48 0 .89-.1 1.24-.28.35-.2.62-.45.8-.77.2-.31.3-.65.3-1.03V16.9c-.08.06-.2.11-.38.17a18.34 18.34 0 0 1-1.8.32c-.36.05-.68.12-.96.23-.28.11-.5.27-.66.46-.16.2-.24.45-.24.75 0 .44.16.77.48 1 .32.22.72.33 1.22.33ZM34.43 21.7V8.23h5.05c1.03 0 1.9.2 2.6.58.7.38 1.23.91 1.6 1.59.36.67.54 1.43.54 2.28 0 .87-.18 1.63-.55 2.3a3.9 3.9 0 0 1-1.6 1.59c-.72.38-1.59.57-2.63.57H36.1v-2h3.01c.6 0 1.1-.11 1.49-.32.38-.21.67-.5.85-.87.2-.37.29-.79.29-1.27 0-.47-.1-.9-.29-1.26a1.92 1.92 0 0 0-.86-.84c-.38-.2-.88-.31-1.49-.31h-2.23v11.41h-2.44ZM14.54.46a14.54 14.54 0 1 1 0 29.08 14.54 14.54 0 0 1 0-29.08ZM5.59 18.12l-.84 3.35h.83l.84-3.35h-.83Zm1.66 0-.83 3.35h1.66l.84-3.35H7.25Zm3.35-9.58c-1.03 0-2.08.84-2.34 1.87l-1.1 4.4c-.26 1.03.37 1.87 1.4 1.87h9.64l-.34 1.44h-8.1l-.85 3.35h9.6c1.04 0 2.1-.85 2.35-1.89l1.05-4.4c.25-1.03-.38-1.85-1.4-1.85h-9.63l.36-1.44h8.13l.84-3.35H10.6Zm10.44 0-.84 3.35h1.67l.83-3.35h-1.66Zm2.5 0-.84 3.35h.83l.84-3.35h-.83Z"
+      }
+    ) }),
+    /* @__PURE__ */ jsxs2("p", { className: "text-secondary text-xs", children: [
+      "Spree enables seamless crypto payments for real-world goods, travel, and experiences. Enjoy secure, fast transactions and earn rewards.",
+      " ",
+      /* @__PURE__ */ jsx3("a", { className: "underline", href: "/", children: "Learn more" }),
+      " ",
+      "about Spree."
+    ] })
+  ] });
+};
+
 // src/components/CreditCard/CreditCard.tsx
-import { useState as useState7 } from "react";
+import { useMemo as useMemo4, useState as useState7 } from "react";
+import { Elements } from "@stripe/react-stripe-js";
+import { loadStripe } from "@stripe/stripe-js";
 
 // src/hooks/useCards.ts
 import useSWR from "swr";
 var useCards = () => {
-  const { env } = useSpreePayEnv();
-  const { data, isLoading, mutate } = useSWR(
-    `/payments/cards?userExternalId=${env.userId}`,
-    {
-      revalidateOnFocus: false,
-      revalidateIfStale: false,
-      revalidateOnReconnect: false
-    }
-  );
+  const { data, isLoading, mutate } = useSWR(`/v1/payments/cards`);
   return {
     cards: data?.data.filter((c) => c.active) || [],
     cardsIsLoading: isLoading,
@@ -3099,8 +3103,15 @@ var useCards = () => {
   };
 };
 
+// src/hooks/useConfig.ts
+import useSWR2 from "swr";
+var useConfig = () => {
+  const { data, isLoading } = useSWR2("/v1/tenants/configs/spree-pay");
+  return { config: data, configIsLoading: isLoading };
+};
+
 // src/components/CreditCard/CardsList.tsx
-import { Fragment, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var CardListItem = ({ card, isSelected, onSelect }) => {
   const handleSelect = () => {
     onSelect(card);
@@ -3158,14 +3169,15 @@ var CardListItem = ({ card, isSelected, onSelect }) => {
 };
 var CardsList = ({ selectedCard, setCard }) => {
   const { cards, cardsIsLoading } = useCards();
-  return /* @__PURE__ */ jsxs3("div", { className: "flex w-full flex-col gap-1", children: [
-    cardsIsLoading && /* @__PURE__ */ jsxs3(Fragment, { children: [
+  if (cardsIsLoading) {
+    return /* @__PURE__ */ jsxs3("div", { className: "flex w-full flex-col gap-1", children: [
       /* @__PURE__ */ jsx4("div", { className: "bg-primary/8 h-11 animate-pulse rounded-md" }),
       /* @__PURE__ */ jsx4("div", { className: "bg-primary/8 h-11 animate-pulse rounded-md" }),
       /* @__PURE__ */ jsx4("div", { className: "bg-primary/8 h-11 animate-pulse rounded-md" })
-    ] }),
-    cards.map((card) => /* @__PURE__ */ jsx4(CardListItem, { isSelected: selectedCard?.id === card.id, onSelect: setCard, card }, card.id))
-  ] });
+    ] });
+  }
+  if (cards.length === 0) return null;
+  return /* @__PURE__ */ jsx4("div", { className: "flex w-full flex-col gap-1", children: cards.map((card) => /* @__PURE__ */ jsx4(CardListItem, { isSelected: selectedCard?.id === card.id, onSelect: setCard, card }, card.id)) });
 };
 
 // src/components/CreditCard/CreditCardForm.tsx
@@ -3213,7 +3225,7 @@ function useComposedRefs(...refs) {
 }
 
 // ../../node_modules/@radix-ui/react-slot/dist/index.mjs
-import { Fragment as Fragment22, jsx as jsx5 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx5 } from "react/jsx-runtime";
 // @__NO_SIDE_EFFECTS__
 function createSlot(ownerName) {
   const SlotClone = /* @__PURE__ */ createSlotClone(ownerName);
@@ -4262,10 +4274,15 @@ var CreditCardForm = ({ saveCard }) => {
 
 // src/components/CreditCard/CreditCard.tsx
 import { Fragment as Fragment5, jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
+var SripeWrapper = (props) => {
+  const stripePromise = useMemo4(() => loadStripe(props.publicKey), [props.publicKey]);
+  return /* @__PURE__ */ jsx14(Elements, { stripe: stripePromise, children: /* @__PURE__ */ jsx14(CreditCardForm, { saveCard: props.saveNewCard }) });
+};
 var CreditCard = () => {
   const [showForm, setShowForm] = useState7(false);
   const { selectedPaymentMethod, setSelectedPaymentMethod } = useSpreePaymentMethod();
   const { mutateCards } = useCards();
+  const { config } = useConfig();
   const setCard = (card) => {
     setSelectedPaymentMethod({ type: "CREDIT_CARD" /* CREDIT_CARD */, method: card });
   };
@@ -4284,9 +4301,9 @@ var CreditCard = () => {
           setCard
         }
       ),
-      /* @__PURE__ */ jsx14("button", { onClick: () => setShowForm(true), className: "text-sm font-medium text-black", children: "Add new card" })
+      config?.stripePublicKey && /* @__PURE__ */ jsx14("button", { onClick: () => setShowForm(true), className: "text-sm font-medium text-black", children: "Add new card" })
     ] }),
-    showForm && /* @__PURE__ */ jsx14(CreditCardForm, { saveCard: saveNewCard })
+    config?.stripePublicKey && showForm && /* @__PURE__ */ jsx14(SripeWrapper, { saveNewCard, publicKey: config.stripePublicKey })
   ] });
 };
 
@@ -4348,23 +4365,21 @@ var TabButtons = (props) => {
 // src/components/Tabs.tsx
 import { jsx as jsx16, jsxs as jsxs8 } from "react/jsx-runtime";
 var Tabs = () => {
-  const { env } = useSpreePayEnv();
   const { selectedPaymentMethod, setSelectedPaymentMethod } = useSpreePaymentMethod();
-  const stripePromise = useMemo4(() => loadStripe(env.stripePublicKey), [env.stripePublicKey]);
   return /* @__PURE__ */ jsxs8("div", { className: "mb-4 rounded-2xl border border-black/25 bg-white", children: [
     /* @__PURE__ */ jsxs8("div", { className: "flex w-full flex-col gap-4 border-b-1 border-black/7 px-7 py-6", children: [
       /* @__PURE__ */ jsx16("h2", { className: "text-primary text-2xl font-semibold", children: "Choose a Payment Method" }),
       /* @__PURE__ */ jsx16(TabButtons, { value: selectedPaymentMethod.type, onChange: setSelectedPaymentMethod })
     ] }),
     /* @__PURE__ */ jsxs8("div", { className: "px-7 py-6", children: [
-      selectedPaymentMethod.type === "CREDIT_CARD" /* CREDIT_CARD */ && /* @__PURE__ */ jsx16(Elements, { stripe: stripePromise, children: /* @__PURE__ */ jsx16(CreditCard, {}) }),
+      selectedPaymentMethod.type === "CREDIT_CARD" /* CREDIT_CARD */ && /* @__PURE__ */ jsx16(CreditCard, {}),
       selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && null
     ] })
   ] });
 };
 
 // src/fetcher/client.ts
-var cfg = { baseUrl: void 0, authKey: void 0 };
+var cfg = { baseUrl: void 0, accessToken: void 0, tenantId: void 0 };
 var buildUrl = (key) => {
   if (!cfg.baseUrl) throw new Error("Missing SLAPI baseUrl. Call registerApi(...) first.");
   if (typeof key === "string") return cfg.baseUrl + key;
@@ -4381,8 +4396,10 @@ var request = async (method, url, body) => {
   const headers = {
     Accept: "application/json"
   };
-  if (!cfg.authKey) throw new Error("Missing SLAPI authKey. Call registerApi(...) first.");
-  headers.Authorization = `Bearer ${cfg.authKey}`;
+  if (!cfg.accessToken) throw new Error("Missing SLAPI accessToken. Call registerApi(...) first.");
+  if (!cfg.tenantId) throw new Error("Missing SLAPI tenantId. Call registerApi(...) first.");
+  headers.Authorization = `Bearer ${cfg.accessToken}`;
+  headers["X-Tenant-ID"] = cfg.tenantId;
   let payload;
   if (method !== "GET" && method !== "DELETE" && body !== void 0) {
     if (typeof FormData !== "undefined" && body instanceof FormData) {
@@ -4410,9 +4427,6 @@ var request = async (method, url, body) => {
   }
   return await res.json();
 };
-var slapiFetcher = async () => {
-  throw new Error("slapiFetcher is not configured. Call registerApi(...) first.");
-};
 var slapiApi = {
   get: async () => {
     throw new Error("slapiApi is not configured. Call registerApi(...) first.");
@@ -4432,7 +4446,8 @@ var slapiApi = {
 };
 var registerApi = (config) => {
   cfg.baseUrl = config.baseUrl;
-  cfg.authKey = config.authKey;
+  cfg.accessToken = config.accessToken;
+  cfg.tenantId = config.tenantId;
   slapiApi = {
     get: async (key) => {
       const url = buildUrl(key);
@@ -4455,7 +4470,7 @@ var registerApi = (config) => {
       return request("DELETE", url);
     }
   };
-  slapiFetcher = async (key) => slapiApi.get(key);
+  return (key) => slapiApi.get(key);
 };
 
 // src/services/slapi.ts
@@ -4498,7 +4513,7 @@ var SlapiPaymentService = {
   // },
   createPayment: (params) => {
     const { type, hash } = params;
-    return slapiApi.post("/payments", { ...{ type, hash, card: params.card }, capture: false }).then((data) => ({ data }));
+    return slapiApi.post("/v1/payments", { ...{ type, hash, card: params.card }, capture: false }).then((data) => ({ data }));
   },
   // signEncodedTransaction: async (signTransaction: SignTransaction, encodedTX: string): Promise<string> => {
   //   const swapTransactionBuf = Buffer.from(encodedTX, 'base64');
@@ -4513,11 +4528,11 @@ var SlapiPaymentService = {
   // },
   addCard: (params) => {
     const { source, hash } = params;
-    return slapiApi.post("/payments/cards", { hash, source }).then((data) => ({ data }));
+    return slapiApi.post("/v1/payments/cards", { hash, source }).then((data) => ({ data }));
   },
   validate3DS: (params) => {
     const { paymentId } = params;
-    return slapiApi.post("/payments/validate", { paymentId, type: "CREDIT_CARD" }).then((data) => ({ data }));
+    return slapiApi.post("/v1/payments/validate", { paymentId, type: "CREDIT_CARD" }).then((data) => ({ data }));
   }
 };
 
@@ -4536,15 +4551,11 @@ var cardPayment = async ({ card, hash }) => {
   return { status: paymentResData.status };
 };
 
-// src/SpreePay.tsx
+// src/SpreePayContent.tsx
 import { jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
-var SpreePay = (props) => {
-  const { className } = props;
-  const { env } = useSpreePayEnv();
+var SpreePayContent = (props) => {
+  const { className, amount, onProcess } = props;
   const { selectedPaymentMethod } = useSpreePaymentMethod();
-  useEffect5(() => {
-    registerApi({ baseUrl: env.slapiUrl, authKey: env.slapiAuthKey });
-  }, [env.slapiUrl, env.slapiAuthKey]);
   const { register } = useSpreePayRegister();
   const handlePay = useCallback5(
     (data) => {
@@ -4558,11 +4569,42 @@ var SpreePay = (props) => {
   useEffect5(() => {
     register(handlePay);
   }, [register, handlePay]);
-  return /* @__PURE__ */ jsx17(SWRConfig, { value: { fetcher: slapiFetcher }, children: /* @__PURE__ */ jsx17("div", { className: cn("sl-spreepay", className), children: /* @__PURE__ */ jsxs9("div", { className: "w-full max-w-[540px]", children: [
+  return /* @__PURE__ */ jsx17("div", { className: cn("sl-spreepay", className), children: /* @__PURE__ */ jsxs9("div", { className: "w-full max-w-[540px]", children: [
     /* @__PURE__ */ jsx17(Tabs, {}),
-    /* @__PURE__ */ jsx17(CheckoutButton, { amount: props.amount }),
+    /* @__PURE__ */ jsx17(CheckoutButton, { onCheckout: onProcess, amount }),
     /* @__PURE__ */ jsx17(SpreeLegal, {})
-  ] }) }) });
+  ] }) });
+};
+
+// src/SpreePay.tsx
+import { jsx as jsx18 } from "react/jsx-runtime";
+var envConfig = {
+  dev: { slapiUrl: "https://slapi.dev.superlogic.com", tenantId: "bookit" },
+  stg: { slapiUrl: "https://slapi.dev.superlogic.com", tenantId: "bookit" },
+  prod: { slapiUrl: "https://slapi.dev.superlogic.com", tenantId: "bookit" }
+};
+var SpreePay = (props) => {
+  const { env } = useSpreePayEnv();
+  const slapiFetcher = useMemo5(
+    () => registerApi({
+      accessToken: env.accessToken,
+      baseUrl: envConfig[env.environment].slapiUrl,
+      tenantId: envConfig[env.environment].tenantId
+    }),
+    [env]
+  );
+  return /* @__PURE__ */ jsx18(
+    SWRConfig,
+    {
+      value: {
+        fetcher: slapiFetcher,
+        revalidateOnFocus: false,
+        revalidateIfStale: false,
+        revalidateOnReconnect: false
+      },
+      children: /* @__PURE__ */ jsx18(SpreePayContent, { ...props })
+    }
+  );
 };
 export {
   SpreePay,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@superlogic/spree-pay",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Spree-pay React component and utilities",
   "private": false,
   "type": "module",
@@ -19,11 +19,6 @@
     "check-ts": "tsc --noEmit",
     "publish": "npm run build"
   },
-  "exports": {
-    ".": {
-      "import": "./src/index.ts"
-    }
-  },
   "publishConfig": {
     "access": "public"
   },