@superlogic/spree-pay 0.4.12 → 0.5.1

package/build/index.css

@@ -555,6 +555,11 @@
 .sl-spreepay .gap-6 {
   gap: calc(var(--spacing) * 6);
 }
+.sl-spreepay .truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 .sl-spreepay .overflow-hidden {
   overflow: hidden;
 }

package/build/index.d.cts

@@ -20,7 +20,9 @@ type SpreePayProps = Partial<{
 
 declare const SpreePay: (props: SpreePayProps) => react_jsx_runtime.JSX.Element;
 
-declare const useCapture3DS: (searchParams: Record<string, string | null>) => void;
+declare const useCapture3DS: ({ paymentIntent }: {
+    paymentIntent?: string | null;
+}) => void;
 
 type Environment = 'dev' | 'stg' | 'prod';
 type ENV = {
@@ -114,7 +116,7 @@ declare enum PaymentType {
     CREDIT_CARD_SPLIT = "SPLIT",
     POINTS = "POINTS"
 }
-declare enum SlapiPaymentStatus {
+declare enum PaymentStatus {
     NOT_INITIALIZED = "NOT_INITIALIZED",// back-end only
     PENDING = "PENDING",// back-end only
     AUTHORIZED = "AUTHORIZED",// success
@@ -124,7 +126,7 @@ declare enum SlapiPaymentStatus {
     CAPTURE_FAILED = "CAPTURE_FAILED"
 }
 type PaymentMethodResult = {
-    status: SlapiPaymentStatus;
+    status: PaymentStatus;
     paymentId: string;
     txHash: string | null;
     txId: string | null;
@@ -133,7 +135,6 @@ type PaymentMethodResult = {
 type ProcessFnParams = {
     hash: string;
     capture?: boolean;
-    metadata?: Record<string, unknown>;
 };
 type ProcessFn = (data: ProcessFnParams) => Promise<PaymentMethodResult>;
 
@@ -160,6 +161,50 @@ declare global {
   }
 }
 
+/**
+ * Thrown on a non-ok HTTP response. Keeps the status code and raw body on
+ * dedicated fields so callers can branch on 401/422/5xx without parsing the
+ * message string.
+ */
+declare class SpreePayHttpError extends Error {
+    status: number;
+    body: string;
+    url: string;
+    constructor(status: number, body: string, url: string);
+}
+/**
+ * Discriminates *why* a payment failed so consumers can show tailored UI
+ * (e.g. "your card was declined, try another" vs. a generic "try again").
+ */
+declare enum PaymentErrorCode {
+    /** The backend rejected the card (a 4xx decline, or a terminal FAILED status on a card payment). */
+    CARD_ERROR = "CARD_ERROR",
+    /** Anything else: network/server error, timeout, cancelled flow, crypto failure, … */
+    PAYMENT_ERROR = "PAYMENT_ERROR"
+}
+/**
+ * Wraps a payment failure with a category `code` and payment `status`; the original
+ * error is kept on `cause` (logs only). The widget throws this — detect it with
+ * `isPaymentError`. Not meant to be constructed by consumers.
+ */
+declare class PaymentError extends Error {
+    status: PaymentStatus;
+    code: PaymentErrorCode;
+    /**
+     * Optional stable code from the backend (e.g. `INSUFFICIENT_FUNDS`) for branching
+     * on specific cases without changing the `code` enum. Safe to expose (an
+     * identifier, not free-text); absent until the backend supplies one.
+     */
+    backendCode?: string;
+    constructor(message: string, status: PaymentStatus, options?: {
+        code?: PaymentErrorCode;
+        backendCode?: string;
+        cause?: unknown;
+    });
+}
+/** Type guard so consumers can branch on PaymentError without duck-typing `.status`. */
+declare const isPaymentError: (e: unknown) => e is PaymentError;
+
 declare enum LogLevel {
     DEBUG = 0,
     INFO = 1,
@@ -234,4 +279,4 @@ declare const configureLogger: (config: Partial<LoggerConfig> & {
     environment?: Environment;
 }) => void;
 
-export { type ENV, LogLevel, type PaymentMethodResult, PaymentType, type ProcessFn, type ProcessFnParams, type SelectedPaymentMethod, SlapiPaymentStatus, SpreePay, type SpreePayProps, SpreePayProvider, configureLogger, logger, useCapture3DS, useSpreePay };
+export { type ENV, type Environment, type LogContext, LogLevel, type LoggerConfig, PaymentError, PaymentErrorCode, type PaymentMethodResult, PaymentStatus, PaymentType, type ProcessFn, type ProcessFnParams, type SelectedPaymentMethod, SpreePay, SpreePayHttpError, type SpreePayProps, SpreePayProvider, configureLogger, isPaymentError, logger, useCapture3DS, useSpreePay };

package/build/index.d.ts

@@ -20,7 +20,9 @@ type SpreePayProps = Partial<{
 
 declare const SpreePay: (props: SpreePayProps) => react_jsx_runtime.JSX.Element;
 
-declare const useCapture3DS: (searchParams: Record<string, string | null>) => void;
+declare const useCapture3DS: ({ paymentIntent }: {
+    paymentIntent?: string | null;
+}) => void;
 
 type Environment = 'dev' | 'stg' | 'prod';
 type ENV = {
@@ -114,7 +116,7 @@ declare enum PaymentType {
     CREDIT_CARD_SPLIT = "SPLIT",
     POINTS = "POINTS"
 }
-declare enum SlapiPaymentStatus {
+declare enum PaymentStatus {
     NOT_INITIALIZED = "NOT_INITIALIZED",// back-end only
     PENDING = "PENDING",// back-end only
     AUTHORIZED = "AUTHORIZED",// success
@@ -124,7 +126,7 @@ declare enum SlapiPaymentStatus {
     CAPTURE_FAILED = "CAPTURE_FAILED"
 }
 type PaymentMethodResult = {
-    status: SlapiPaymentStatus;
+    status: PaymentStatus;
     paymentId: string;
     txHash: string | null;
     txId: string | null;
@@ -133,7 +135,6 @@ type PaymentMethodResult = {
 type ProcessFnParams = {
     hash: string;
     capture?: boolean;
-    metadata?: Record<string, unknown>;
 };
 type ProcessFn = (data: ProcessFnParams) => Promise<PaymentMethodResult>;
 
@@ -160,6 +161,50 @@ declare global {
   }
 }
 
+/**
+ * Thrown on a non-ok HTTP response. Keeps the status code and raw body on
+ * dedicated fields so callers can branch on 401/422/5xx without parsing the
+ * message string.
+ */
+declare class SpreePayHttpError extends Error {
+    status: number;
+    body: string;
+    url: string;
+    constructor(status: number, body: string, url: string);
+}
+/**
+ * Discriminates *why* a payment failed so consumers can show tailored UI
+ * (e.g. "your card was declined, try another" vs. a generic "try again").
+ */
+declare enum PaymentErrorCode {
+    /** The backend rejected the card (a 4xx decline, or a terminal FAILED status on a card payment). */
+    CARD_ERROR = "CARD_ERROR",
+    /** Anything else: network/server error, timeout, cancelled flow, crypto failure, … */
+    PAYMENT_ERROR = "PAYMENT_ERROR"
+}
+/**
+ * Wraps a payment failure with a category `code` and payment `status`; the original
+ * error is kept on `cause` (logs only). The widget throws this — detect it with
+ * `isPaymentError`. Not meant to be constructed by consumers.
+ */
+declare class PaymentError extends Error {
+    status: PaymentStatus;
+    code: PaymentErrorCode;
+    /**
+     * Optional stable code from the backend (e.g. `INSUFFICIENT_FUNDS`) for branching
+     * on specific cases without changing the `code` enum. Safe to expose (an
+     * identifier, not free-text); absent until the backend supplies one.
+     */
+    backendCode?: string;
+    constructor(message: string, status: PaymentStatus, options?: {
+        code?: PaymentErrorCode;
+        backendCode?: string;
+        cause?: unknown;
+    });
+}
+/** Type guard so consumers can branch on PaymentError without duck-typing `.status`. */
+declare const isPaymentError: (e: unknown) => e is PaymentError;
+
 declare enum LogLevel {
     DEBUG = 0,
     INFO = 1,
@@ -234,4 +279,4 @@ declare const configureLogger: (config: Partial<LoggerConfig> & {
     environment?: Environment;
 }) => void;
 
-export { type ENV, LogLevel, type PaymentMethodResult, PaymentType, type ProcessFn, type ProcessFnParams, type SelectedPaymentMethod, SlapiPaymentStatus, SpreePay, type SpreePayProps, SpreePayProvider, configureLogger, logger, useCapture3DS, useSpreePay };
+export { type ENV, type Environment, type LogContext, LogLevel, type LoggerConfig, PaymentError, PaymentErrorCode, type PaymentMethodResult, PaymentStatus, PaymentType, type ProcessFn, type ProcessFnParams, type SelectedPaymentMethod, SpreePay, SpreePayHttpError, type SpreePayProps, SpreePayProvider, configureLogger, isPaymentError, logger, useCapture3DS, useSpreePay };

package/build/index.js

@@ -8,39 +8,49 @@ import {
   getSplitAmount,
   getTransactionFee,
   useSlapiBalance
-} from "./chunk-RORSHUSF.js";
+} from "./chunk-4BM6VTMT.js";
 import {
   Iframe3ds
-} from "./chunk-JXZZJ7NS.js";
+} from "./chunk-AXNTOSBU.js";
 import {
   InfoBanner,
   LogLevel,
+  LoginStatusProvider,
   PaymentError,
+  PaymentErrorCode,
+  PaymentStatus,
   PaymentType,
   PortalContainerProvider,
   SlapiPaymentService,
+  SpreePayHttpError,
   SpreePayProvider,
   StaticConfigProvider,
   cn,
   configureLogger,
+  isDeclineStatus,
   isNewCard,
+  isPaymentError,
+  isSuccessStatus,
   logger,
   registerApi,
+  settlePaymentResult,
+  toPaymentError,
+  useIsLoggedIn,
   useSpreePay,
   useSpreePayConfig,
   useSpreePayEnv,
   useSpreePayRegister,
   useSpreePaymentMethod,
   useStaticConfig
-} from "./chunk-WRFG6YIS.js";
+} from "./chunk-PTEQVWLJ.js";
 
 // src/SpreePay.tsx
-import { useCallback as useCallback8, useEffect as useEffect7, useMemo as useMemo9, useState as useState12 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect8, useMemo as useMemo9, useState as useState12 } from "react";
 import NiceModal4 from "@ebay/nice-modal-react";
 import { SWRConfig } from "swr";
 
 // src/SpreePayContent.tsx
-import { Suspense, lazy } from "react";
+import { Suspense, lazy, useEffect as useEffect6 } from "react";
 
 // src/components/CreditCardTab/CreditCardTab.tsx
 import { useCallback as useCallback6, useEffect as useEffect5, useState as useState10 } from "react";
@@ -61,12 +71,8 @@ var useCardPayment = () => {
       });
       throw error;
     }
-    const { hash, capture, metadata } = params;
-    cardPaymentLogger.info("Starting card payment", {
-      hash,
-      capture,
-      hasMetadata: Boolean(metadata)
-    });
+    const { hash, capture } = params;
+    cardPaymentLogger.info("Starting card payment", { hash, capture });
     const card = selectedPaymentMethod.method;
     let cardId;
     if ("token" in card) {
@@ -97,7 +103,6 @@ var useCardPayment = () => {
     const { data: paymentResData } = await SlapiPaymentService.createPayment({
       hash,
       capture,
-      metadata,
       type: "CREDIT_CARD" /* CREDIT_CARD */,
       card: {
         cardId,
@@ -260,10 +265,13 @@ async function longPollPoints(paymentId) {
   let retries = 0;
   while (retries < MAX_RETRIES) {
     const { detail } = await SlapiPaymentService.getStatus(paymentId);
-    if (detail.status === "FAILED" /* FAILED */) {
-      throw new Error("Something went wrong with the payment");
+    if (isDeclineStatus(detail.status)) {
+      throw new PaymentError("Something went wrong with the points payment.", detail.status, {
+        code: "PAYMENT_ERROR" /* PAYMENT_ERROR */,
+        backendCode: detail.errorCode ?? void 0
+      });
     }
-    if (["AUTHORIZED" /* AUTHORIZED */, "CAPTURED" /* CAPTURED */].includes(detail.status)) {
+    if (isSuccessStatus(detail.status)) {
       return detail.status;
     }
     await new Promise((res) => setTimeout(res, REFRESH_INTERVAL));
@@ -276,13 +284,21 @@ async function longPollCardStatus(paymentId) {
   let shown3ds = false;
   while (retries < MAX_RETRIES) {
     const { detail } = await SlapiPaymentService.getStatus(paymentId);
-    if (detail.status === "FAILED" /* FAILED */) {
-      throw new Error(`Something went wrong with the ${detail.validationType} payment`);
+    if (isDeclineStatus(detail.status)) {
+      const isPointsLeg = detail.validationType === "POINTS";
+      throw new PaymentError(
+        isPointsLeg ? "Something went wrong with the points payment." : "Your card payment could not be completed.",
+        detail.status,
+        {
+          code: isPointsLeg ? "PAYMENT_ERROR" /* PAYMENT_ERROR */ : "CARD_ERROR" /* CARD_ERROR */,
+          backendCode: detail.errorCode ?? void 0
+        }
+      );
     }
     if (
       // Process to points payment
       detail.validationType === "POINTS" || // early card payment completion
-      ["AUTHORIZED" /* AUTHORIZED */, "CAPTURED" /* CAPTURED */].includes(detail.status)
+      isSuccessStatus(detail.status)
     ) {
       return detail.status;
     }
@@ -312,7 +328,7 @@ var usePointsPayment = (mode = "web2") => {
       });
       throw error;
     }
-    const { hash, capture, metadata } = params;
+    const { hash, capture } = params;
     pointsPaymentLogger.info("Starting points payment", {
       hash,
       capture,
@@ -327,7 +343,6 @@ var usePointsPayment = (mode = "web2") => {
       hash,
       // capture should be always true for web2 points payments
       capture: mode === "web2" ? true : capture,
-      metadata,
       type: "POINTS" /* POINTS */
     });
     pointsPaymentLogger.info("Points payment created", {
@@ -420,7 +435,7 @@ var useSplitCardPayments = (mode = "web2") => {
     if (selectedPaymentMethod.type !== "CREDIT_CARD" /* CREDIT_CARD */ || !selectedPaymentMethod.method || !params.points) {
       throw new Error("Unsupported payment method");
     }
-    const { hash, capture, metadata, points } = params;
+    const { hash, capture, points } = params;
     splitPaymentLogger.info("Starting split card+points payment", { hash, mode, points, capture });
     const card = selectedPaymentMethod.method;
     let cardId;
@@ -448,7 +463,6 @@ var useSplitCardPayments = (mode = "web2") => {
     const { data: paymentResData } = await SlapiPaymentService.createPayment({
       hash,
       capture,
-      metadata,
       type: "SPLIT" /* CREDIT_CARD_SPLIT */,
       card: {
         cardId,
@@ -871,6 +885,7 @@ var StripeWrapper = ({ onCancel, saveNewCard, publicKey }) => {
 };
 var CreditCard = ({ newCards, setNewCards }) => {
   const [showForm, setShowForm] = useState3(false);
+  const isLoggedIn = useIsLoggedIn();
   const { selectedPaymentMethod, setSelectedPaymentMethod } = useSpreePaymentMethod();
   const { spreePayConfig } = useSpreePayConfig();
   const setCard = (card) => {
@@ -892,6 +907,14 @@ var CreditCard = ({ newCards, setNewCards }) => {
     },
     [setNewCards]
   );
+  const handleAddNewCard = () => {
+    setSelectedPaymentMethod({
+      ...selectedPaymentMethod,
+      type: "CREDIT_CARD" /* CREDIT_CARD */,
+      method: null
+    });
+    setShowForm(true);
+  };
   const handleCancel = () => {
     setShowForm(false);
   };
@@ -911,14 +934,14 @@ var CreditCard = ({ newCards, setNewCards }) => {
       /* @__PURE__ */ jsx5(
         "button",
         {
-          onClick: () => setShowForm(true),
-          disabled: !spreePayConfig?.stripePublicKey,
+          onClick: handleAddNewCard,
+          disabled: !isLoggedIn || !spreePayConfig?.stripePublicKey,
           className: "text-md text-(--brand-primary) hover:underline disabled:cursor-not-allowed disabled:no-underline disabled:opacity-50",
           children: "Add new card"
         }
       )
     ] }),
-    spreePayConfig?.stripePublicKey && showForm && /* @__PURE__ */ jsx5(StripeWrapper, { onCancel: handleCancel, saveNewCard, publicKey: spreePayConfig.stripePublicKey })
+    isLoggedIn && spreePayConfig?.stripePublicKey && showForm && /* @__PURE__ */ jsx5(StripeWrapper, { onCancel: handleCancel, saveNewCard, publicKey: spreePayConfig.stripePublicKey })
   ] });
 };
 
@@ -2081,6 +2104,7 @@ var SplitBlock = (props) => {
 // src/components/CreditCardTab/Points/Points.tsx
 import { Fragment as Fragment3, jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
 var Points = () => {
+  const isLoggedIn = useIsLoggedIn();
   const [usePoints, setUsePoints] = useState9(false);
   const [selectedPointsType, setSelectedPointsType] = useState9(null);
   const { setSelectedPaymentMethod, selectedPaymentMethod } = useSpreePaymentMethod();
@@ -2100,7 +2124,7 @@ var Points = () => {
         value: usePoints,
         onChange: handleTogglePoints,
         message: spreePayConfig?.creditCard.pointsInfoMessage,
-        disabled: !spreePayConfig?.creditCard.enabled || !spreePayConfig?.creditCard.points || appProps.disabledPoints
+        disabled: !isLoggedIn || !spreePayConfig?.creditCard.enabled || !spreePayConfig?.creditCard.points || appProps.disabledPoints
       }
     ),
     usePoints && /* @__PURE__ */ jsx15(
@@ -2116,7 +2140,7 @@ var Points = () => {
 
 // src/components/CreditCardTab/CreditCardTab.tsx
 import { jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
-var CreditCardTab = ({ isLoggedIn }) => {
+var CreditCardTab = () => {
   const { selectedPaymentMethod, setSelectedPaymentMethod } = useSpreePaymentMethod();
   const { useWeb3Points } = useSpreePayEnv();
   const { appProps } = useStaticConfig();
@@ -2131,23 +2155,23 @@ var CreditCardTab = ({ isLoggedIn }) => {
   const { pointsPayment } = usePointsPayment(isWeb3Enabled ? "web3" : "web2");
   const handlePay = useCallback6(
     async (data) => {
+      const pointsAmount = selectedPaymentMethod.pointsAmount ?? 0;
+      const usdAmount = getSplitAmount(appProps.amount ?? 0, pointsAmount, spreePayConfig?.pointsConversionRatio);
+      const isPurePoints = !usdAmount && pointsAmount > 0;
+      const failureMessage = isPurePoints ? "Points payment failed" : "Card payment failed";
+      const failureCode = isPurePoints ? "PAYMENT_ERROR" /* PAYMENT_ERROR */ : "CARD_ERROR" /* CARD_ERROR */;
       try {
-        let res = null;
-        const pointsAmount = selectedPaymentMethod.pointsAmount ?? 0;
-        const usdAmount = getSplitAmount(appProps.amount ?? 0, pointsAmount, spreePayConfig?.pointsConversionRatio);
+        let res;
         if (usdAmount && pointsAmount) {
           res = await splitPayment({ ...data, points: pointsAmount });
-        } else if (!usdAmount && pointsAmount) {
+        } else if (isPurePoints) {
           res = await pointsPayment({ ...data, points: pointsAmount });
         } else {
           res = await cardPayment(data);
         }
-        if (["AUTHORIZED" /* AUTHORIZED */, "CAPTURED" /* CAPTURED */].includes(res.status)) {
-          return Promise.resolve(res);
-        }
-        return Promise.reject(new PaymentError("Card payment failed", res.status));
-      } catch (_) {
-        return Promise.reject(new PaymentError("Payment failed", "FAILED" /* FAILED */));
+        return settlePaymentResult(res, failureMessage, failureCode);
+      } catch (e) {
+        return Promise.reject(toPaymentError(e, failureMessage, failureCode));
       } finally {
         mutateBalance();
         if (selectedPaymentMethod.type === "CREDIT_CARD" /* CREDIT_CARD */ && selectedPaymentMethod.method && isNewCard(selectedPaymentMethod.method)) {
@@ -2184,7 +2208,7 @@ var CreditCardTab = ({ isLoggedIn }) => {
   return /* @__PURE__ */ jsxs9("div", { children: [
     /* @__PURE__ */ jsx16("div", { className: "border-b border-b-(--border-component-specific-card) px-5 py-5 md:px-7 md:py-6", children: /* @__PURE__ */ jsx16(CreditCard, { newCards, setNewCards }) }),
     !spreePayConfig?.creditCard.hidePoints && /* @__PURE__ */ jsx16("div", { className: "flex flex-col gap-4 border-b border-b-(--border-component-specific-card) px-5 pt-5 pb-5 md:px-7 md:pt-6 md:pb-7", children: /* @__PURE__ */ jsx16(Points, {}) }),
-    /* @__PURE__ */ jsx16(CheckoutButton, { isLoggedIn })
+    /* @__PURE__ */ jsx16(CheckoutButton, {})
   ] });
 };
 
@@ -2260,24 +2284,30 @@ var TabButtons = (props) => {
 
 // src/SpreePayContent.tsx
 import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
-var CryptoTab = lazy(() => import("./CryptoTab-57MMM4AG.js").then((module) => ({ default: module.CryptoTab })));
+var CryptoTab = lazy(() => import("./CryptoTab-632DRL2D.js").then((module) => ({ default: module.CryptoTab })));
 var CryptoComTab = lazy(
-  () => import("./CryptoComTab-DAKL7IZF.js").then((module) => ({ default: module.CryptoComTab }))
+  () => import("./CryptoComTab-ZAWBJUCM.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)" }),
   /* @__PURE__ */ jsx18("p", { className: "text-sm text-(--text-tertiary)", children: "Loading payment method..." })
 ] }) });
-var SpreePayContent = ({ isLoggedIn }) => {
+var SpreePayContent = () => {
+  const isLoggedIn = useIsLoggedIn();
   const { selectedPaymentMethod, setSelectedPaymentMethod } = useSpreePaymentMethod();
+  useEffect6(() => {
+    if (!isLoggedIn) {
+      setSelectedPaymentMethod({ type: "CREDIT_CARD" /* CREDIT_CARD */, method: null });
+    }
+  }, [isLoggedIn, setSelectedPaymentMethod]);
   return /* @__PURE__ */ jsxs11("div", { className: "w-full overflow-hidden rounded-3xl border border-(--border-component-specific-card) bg-(--surface-component-specific-card-default-card) shadow-[0_6.25px_25px_0_var(--shadow-component-specific-card)]", children: [
     /* @__PURE__ */ jsxs11("div", { className: "flex w-full flex-col gap-2 border-b border-b-(--border-component-specific-card) pt-5 pb-3 md:pt-6 md:pb-5", children: [
       /* @__PURE__ */ jsx18("h2", { className: "px-5 text-[28px] leading-8 font-medium text-(--brand-primary) md:px-7", children: "Choose a payment method" }),
       /* @__PURE__ */ jsx18(TabButtons, { value: selectedPaymentMethod.type, onChange: setSelectedPaymentMethod })
     ] }),
-    selectedPaymentMethod.type === "CREDIT_CARD" /* CREDIT_CARD */ && /* @__PURE__ */ jsx18(CreditCardTab, { isLoggedIn }),
+    selectedPaymentMethod.type === "CREDIT_CARD" /* CREDIT_CARD */ && /* @__PURE__ */ jsx18(CreditCardTab, {}),
     /* @__PURE__ */ jsxs11(Suspense, { fallback: /* @__PURE__ */ jsx18(TabLoadingFallback, {}), children: [
-      selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && /* @__PURE__ */ jsx18(CryptoTab, { isLoggedIn }),
+      selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && /* @__PURE__ */ jsx18(CryptoTab, {}),
       selectedPaymentMethod.type === "CDC" /* CDC */ && /* @__PURE__ */ jsx18(CryptoComTab, {})
     ] })
   ] });
@@ -2332,7 +2362,7 @@ var ErrorBoundary = class extends Component {
 };
 
 // src/hooks/useKeycloakSSO.ts
-import { useCallback as useCallback7, useEffect as useEffect6, useRef as useRef6, useState as useState11 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect7, useRef as useRef6, useState as useState11 } from "react";
 import Keycloak from "keycloak-js";
 var refreshAheadSeconds = 60;
 var keycloakLogger = logger.child("keycloak");
@@ -2370,10 +2400,10 @@ function useKeycloakSSO(config) {
       });
     }, delayMs);
   }, []);
-  useEffect6(() => {
+  useEffect7(() => {
     scheduleRefreshRef.current = scheduleRefresh;
   }, [scheduleRefresh]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (initRef.current || !enabled) return;
     initRef.current = true;
     const kc = new Keycloak({ url, realm, clientId });
@@ -2419,6 +2449,7 @@ var isTokenExpired = (token) => {
 
 // src/SpreePay.tsx
 import { jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
+var unauthenticatedFetcher = () => Promise.resolve(null);
 var SpreePayInner = () => {
   const [portalEl, setPortalEl] = useState12(null);
   const rootRef = useCallback8((node) => {
@@ -2427,7 +2458,7 @@ var SpreePayInner = () => {
     setPortalEl(el ?? null);
   }, []);
   const { environment, tenantId, keycloakClientId, accessToken: envAccessToken, ssoPageURI } = useSpreePayEnv();
-  useEffect7(() => {
+  useEffect8(() => {
     configureLogger({ environment });
     logger.logVersion();
   }, [environment]);
@@ -2441,7 +2472,6 @@ var SpreePayInner = () => {
     enabled: !envTokenValid
   });
   const _accessToken = envTokenValid ? envAccessToken : accessToken;
-  const unauthenticatedFetcher = useCallback8(() => Promise.resolve(null), []);
   const slapiFetcher = useMemo9(() => {
     if (_accessToken) {
       return registerApi({
@@ -2451,7 +2481,7 @@ var SpreePayInner = () => {
       });
     }
     return unauthenticatedFetcher;
-  }, [_accessToken, staticConfig, tenantId, unauthenticatedFetcher]);
+  }, [_accessToken, staticConfig, tenantId]);
   const getContent = () => {
     if (isChecking) {
       return /* @__PURE__ */ jsxs13("div", { className: "flex w-full flex-col", children: [
@@ -2468,7 +2498,7 @@ var SpreePayInner = () => {
           revalidateOnFocus: false,
           revalidateIfStale: false
         },
-        children: /* @__PURE__ */ jsx20(PortalContainerProvider, { container: portalEl, children: /* @__PURE__ */ jsx20(NiceModal4.Provider, { children: /* @__PURE__ */ jsx20(SpreePayContent, { isLoggedIn: Boolean(_accessToken) }) }) })
+        children: /* @__PURE__ */ jsx20(PortalContainerProvider, { container: portalEl, children: /* @__PURE__ */ jsx20(NiceModal4.Provider, { children: /* @__PURE__ */ jsx20(LoginStatusProvider, { isLoggedIn: Boolean(_accessToken), children: /* @__PURE__ */ jsx20(SpreePayContent, {}) }) }) })
       }
     );
   };
@@ -2482,20 +2512,25 @@ var SpreePay = (props) => {
 };
 
 // src/hooks/useCapture3DS.ts
-import { useEffect as useEffect8 } from "react";
-var useCapture3DS = (searchParams) => {
-  useEffect8(() => {
-    if (typeof window !== "undefined" && window.parent && searchParams?.paymentIntent) {
-      window.parent.SP_EVENT_BUS?.emit("paymentIntent", { paymentIntent: searchParams.paymentIntent });
+import { useEffect as useEffect9 } from "react";
+var useCapture3DS = ({ paymentIntent }) => {
+  useEffect9(() => {
+    if (typeof window !== "undefined" && window.parent && paymentIntent) {
+      window.parent.SP_EVENT_BUS?.emit("paymentIntent", { paymentIntent });
     }
-  }, [searchParams]);
+  }, [paymentIntent]);
 };
 export {
   LogLevel,
+  PaymentError,
+  PaymentErrorCode,
+  PaymentStatus,
   PaymentType,
   SpreePay,
+  SpreePayHttpError,
   SpreePayProvider,
   configureLogger,
+  isPaymentError,
   logger,
   useCapture3DS,
   useSpreePay

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@superlogic/spree-pay",
-  "version": "0.4.12",
+  "version": "0.5.1",
   "description": "Spree-pay React component and utilities",
   "private": false,
   "type": "module",
@@ -30,6 +30,8 @@
     "dev": "tsup --watch",
     "lint": "eslint . --max-warnings 0",
     "check-ts": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
     "publish": "npm run build"
   },
   "publishConfig": {
@@ -71,7 +73,8 @@
     "tailwindcss": "^4.3.0",
     "tsup": "^8.5.1",
     "tw-animate-css": "^1.4.0",
-    "typescript": "^6.0.3"
+    "typescript": "^6.0.3",
+    "vitest": "^4.1.6"
   },
   "tsup": {
     "entry": [