@tagadapay/plugin-sdk 1.0.9 → 1.0.11

package/dist/react/config/payment.d.ts

@@ -18,6 +18,12 @@ export declare const PAYMENT_CONFIGS: Record<string, PaymentConfig>;
 export declare function getPaymentConfig(environment?: string): PaymentConfig;
 /**
  * Get BasisTheory API key for current environment
- * Falls back to environment variable if available
+ *
+ * Behavior:
+ * - LOCAL/DEVELOPMENT: Always uses embedded test key (key_test_us_pub_VExdfbFQARn821iqP8zNaq)
+ *   Environment variables are ignored to prevent accidental production key usage
+ *
+ * - PRODUCTION: Uses environment variable if set, falls back to embedded production key
+ *   This allows deployment-time configuration while having safe defaults
  */
 export declare function getBasisTheoryApiKey(environment?: string): string;

package/dist/react/config/payment.js

@@ -15,14 +15,22 @@ export const PAYMENT_CONFIGS = {
     },
     development: {
         basisTheory: {
-            // TODO: Replace with actual development BasisTheory public API key
+            // Embedded test API key for development
             publicApiKey: 'key_test_us_pub_VExdfbFQARn821iqP8zNaq',
             environment: 'sandbox',
         },
     },
     local: {
         basisTheory: {
-            // Development/testing API key (sandbox)
+            // Embedded test API key for local development
+            publicApiKey: 'key_test_us_pub_VExdfbFQARn821iqP8zNaq',
+            environment: 'sandbox',
+        },
+    },
+    // Default fallback configuration
+    default: {
+        basisTheory: {
+            // Embedded test API key as fallback
             publicApiKey: 'key_test_us_pub_VExdfbFQARn821iqP8zNaq',
             environment: 'sandbox',
         },
@@ -32,21 +40,30 @@ export const PAYMENT_CONFIGS = {
  * Get payment configuration based on environment
  */
 export function getPaymentConfig(environment = 'local') {
-    return PAYMENT_CONFIGS[environment] || PAYMENT_CONFIGS.local;
+    return PAYMENT_CONFIGS[environment] || PAYMENT_CONFIGS.default || PAYMENT_CONFIGS.local;
 }
 /**
  * Get BasisTheory API key for current environment
- * Falls back to environment variable if available
+ *
+ * Behavior:
+ * - LOCAL/DEVELOPMENT: Always uses embedded test key (key_test_us_pub_VExdfbFQARn821iqP8zNaq)
+ *   Environment variables are ignored to prevent accidental production key usage
+ *
+ * - PRODUCTION: Uses environment variable if set, falls back to embedded production key
+ *   This allows deployment-time configuration while having safe defaults
  */
 export function getBasisTheoryApiKey(environment = 'local') {
-    // Check environment variable first (allows override)
-    if (typeof process !== 'undefined' && process.env?.NEXT_PUBLIC_BASIS_THEORY_PUBLIC_API_KEY) {
-        return process.env.NEXT_PUBLIC_BASIS_THEORY_PUBLIC_API_KEY;
-    }
-    if (typeof process !== 'undefined' && process.env?.VITE_BASIS_THEORY_PUBLIC_API_KEY) {
-        return process.env.VITE_BASIS_THEORY_PUBLIC_API_KEY;
+    // For production environment, allow environment variable override
+    if (environment === 'production') {
+        if (typeof process !== 'undefined' && process.env?.NEXT_PUBLIC_BASIS_THEORY_PUBLIC_API_KEY) {
+            return process.env.NEXT_PUBLIC_BASIS_THEORY_PUBLIC_API_KEY;
+        }
+        if (typeof process !== 'undefined' && process.env?.VITE_BASIS_THEORY_PUBLIC_API_KEY) {
+            return process.env.VITE_BASIS_THEORY_PUBLIC_API_KEY;
+        }
     }
-    // Fall back to embedded configuration
+    // For local/development, always use embedded test key to prevent accidental production key usage
+    // Fall back to embedded configuration based on environment
     const config = getPaymentConfig(environment);
     return config.basisTheory.publicApiKey;
 }

package/dist/react/hooks/useCheckout.d.ts

@@ -2,6 +2,7 @@ export interface CheckoutLineItem {
     externalProductId?: string | null;
     externalVariantId?: string | null;
     variantId?: string | null;
+    priceId?: string | null;
     quantity: number;
 }
 export interface CheckoutInitParams {
@@ -229,6 +230,21 @@ export interface UseCheckoutResult {
         success: boolean;
         error?: any;
     }>;
+    addLineItems: (lineItems: CheckoutLineItem[]) => Promise<{
+        success: boolean;
+        error?: any;
+    }>;
+    removeLineItems: (lineItems: {
+        variantId: string;
+        quantity?: number;
+    }[]) => Promise<{
+        success: boolean;
+        error?: any;
+    }>;
+    setItemQuantity: (variantId: string, quantity: number, priceId?: string) => Promise<{
+        success: boolean;
+        error?: any;
+    }>;
     toggleOrderBump: (orderBumpOfferId: string, selected: boolean) => Promise<{
         success: boolean;
         error?: any;
@@ -257,6 +273,12 @@ export interface UseCheckoutResult {
         shippingCountryChanged?: boolean;
         billingCountryChanged?: boolean;
     }>;
+    previewOrderSummary: (orderBumpOfferIds: string[], orderBumpType?: 'primary' | 'secondary' | 'vip') => Promise<{
+        savings: number;
+        savingsPct: number;
+        currency: string;
+        error?: any;
+    }>;
     clear: () => void;
 }
 export declare function useCheckout(options?: UseCheckoutOptions): UseCheckoutResult;

package/dist/react/hooks/useCheckout.js

@@ -3,7 +3,7 @@ import { useTagadaContext } from '../providers/TagadaProvider';
 import { getCheckoutToken } from '../utils/urlUtils';
 import { useCurrency } from '../hooks/useCurrency';
 export function useCheckout(options = {}) {
-    const { apiService } = useTagadaContext();
+    const { apiService, updateCheckoutDebugData } = useTagadaContext();
     const { code: currentCurrency } = useCurrency();
     const [checkout, setCheckout] = useState(null);
     const [isLoading, setIsLoading] = useState(false);
@@ -21,6 +21,38 @@ export function useCheckout(options = {}) {
             }
         };
     }, []);
+    // Update debug data whenever checkout state changes with comprehensive information
+    useEffect(() => {
+        const debugData = checkout
+            ? {
+                checkout,
+                sessionId: checkout.checkoutSession?.id,
+                checkoutToken: currentCheckoutTokenRef.current,
+                currency: checkout.summary?.currency,
+                totalAmount: checkout.summary?.totalAmount,
+                totalAdjustedAmount: checkout.summary?.totalAdjustedAmount,
+                promotionAmount: checkout.summary?.totalPromotionAmount,
+                itemsCount: checkout.summary?.items?.length || 0,
+                orderBumps: checkout.checkoutSession?.sessionLineItems?.filter((item) => item.isOrderBump) || [],
+                adjustments: checkout.summary?.adjustments || [],
+                isInitialized,
+                lastUpdated: new Date().toISOString(),
+            }
+            : null;
+        updateCheckoutDebugData(debugData, error, isLoading);
+        if (debugData) {
+            console.log('🐛 [useCheckout] Debug data updated for debug drawer', {
+                sessionId: debugData.sessionId,
+                totalAmount: debugData.totalAmount,
+                totalAdjustedAmount: debugData.totalAdjustedAmount,
+                promotionAmount: debugData.promotionAmount,
+                itemsCount: debugData.itemsCount,
+                orderBumpsCount: debugData.orderBumps?.length || 0,
+                adjustmentsCount: debugData.adjustments?.length || 0,
+                lastUpdated: debugData.lastUpdated,
+            });
+        }
+    }, [checkout, error, isLoading, isInitialized]); // Removed updateCheckoutDebugData from deps to prevent infinite loop
     const init = useCallback(async (params) => {
         // Don't allow init if we already have a checkout token
         if (providedToken) {
@@ -85,6 +117,14 @@ export function useCheckout(options = {}) {
             setCheckout(response);
             currentCheckoutTokenRef.current = checkoutToken;
             setIsInitialized(true);
+            console.log('📊 [useCheckout] Checkout data updated', {
+                sessionId: response.checkoutSession?.id,
+                totalAmount: response.summary?.totalAmount,
+                promotionAmount: response.summary?.totalPromotionAmount,
+                itemsCount: response.summary?.items?.length || 0,
+                orderBumpsCount: response.checkoutSession?.sessionLineItems?.filter((item) => item.isOrderBump)?.length || 0,
+                timestamp: new Date().toISOString(),
+            });
             return response;
         }
         catch (err) {
@@ -100,7 +140,12 @@ export function useCheckout(options = {}) {
         if (!currentCheckoutTokenRef.current) {
             throw new Error('No checkout session to refresh');
         }
+        console.log('🔄 [useCheckout] Refreshing checkout data...', {
+            checkoutToken: currentCheckoutTokenRef.current.substring(0, 8) + '...',
+            timestamp: new Date().toISOString(),
+        });
         await getCheckout(currentCheckoutTokenRef.current);
+        console.log('✅ [useCheckout] Refresh completed, debug data will be updated automatically');
     }, [getCheckout]);
     const updateAddress = useCallback(async (data) => {
         if (!checkout?.checkoutSession.id) {
@@ -213,6 +258,63 @@ export function useCheckout(options = {}) {
             throw error;
         }
     }, [apiService, checkout?.checkoutSession.id, refresh]);
+    const addLineItems = useCallback(async (lineItems) => {
+        if (!checkout?.checkoutSession.id) {
+            throw new Error('No checkout session available');
+        }
+        try {
+            const response = await apiService.fetch(`/api/v1/checkout-sessions/${checkout.checkoutSession.id}/line-items/add`, {
+                method: 'POST',
+                body: { lineItems },
+            });
+            if (response.success) {
+                await refresh();
+            }
+            return response;
+        }
+        catch (err) {
+            const error = err instanceof Error ? err : new Error('Failed to add line items');
+            throw error;
+        }
+    }, [apiService, checkout?.checkoutSession.id, refresh]);
+    const removeLineItems = useCallback(async (lineItems) => {
+        if (!checkout?.checkoutSession.id) {
+            throw new Error('No checkout session available');
+        }
+        try {
+            const response = await apiService.fetch(`/api/v1/checkout-sessions/${checkout.checkoutSession.id}/line-items/remove`, {
+                method: 'POST',
+                body: { lineItems },
+            });
+            if (response.success) {
+                await refresh();
+            }
+            return response;
+        }
+        catch (err) {
+            const error = err instanceof Error ? err : new Error('Failed to remove line items');
+            throw error;
+        }
+    }, [apiService, checkout?.checkoutSession.id, refresh]);
+    const setItemQuantity = useCallback(async (variantId, quantity, priceId) => {
+        if (!checkout?.checkoutSession.id) {
+            throw new Error('No checkout session available');
+        }
+        try {
+            const response = await apiService.fetch(`/api/v1/checkout-sessions/${checkout.checkoutSession.id}/line-items/set-quantity`, {
+                method: 'POST',
+                body: { variantId, quantity, priceId },
+            });
+            if (response.success) {
+                await refresh();
+            }
+            return response;
+        }
+        catch (err) {
+            const error = err instanceof Error ? err : new Error('Failed to set item quantity');
+            throw error;
+        }
+    }, [apiService, checkout?.checkoutSession.id, refresh]);
     const toggleOrderBump = useCallback(async (orderBumpOfferId, selected) => {
         if (!checkout?.checkoutSession.id) {
             throw new Error('No checkout session available');
@@ -223,7 +325,13 @@ export function useCheckout(options = {}) {
                 body: { orderBumpOfferId, selected },
             });
             if (response.success) {
+                console.log('🎯 [useCheckout] Order bump toggled successfully, refreshing checkout data...', {
+                    orderBumpOfferId,
+                    selected,
+                    timestamp: new Date().toISOString(),
+                });
                 await refresh();
+                console.log('✅ [useCheckout] Order bump refresh completed, debug drawer should now show updated data');
             }
             return response;
         }
@@ -268,6 +376,30 @@ export function useCheckout(options = {}) {
             throw error;
         }
     }, [apiService, checkout?.checkoutSession.id, refresh]);
+    const previewOrderSummary = useCallback(async (orderBumpOfferIds, orderBumpType = 'vip') => {
+        if (!checkout?.checkoutSession.id) {
+            throw new Error('No checkout session available');
+        }
+        try {
+            const response = await apiService.fetch(`/api/v1/checkout-sessions/${checkout.checkoutSession.id}/vip-preview`, {
+                method: 'POST',
+                body: {
+                    orderBumpOfferIds,
+                    orderBumpType,
+                },
+            });
+            return response;
+        }
+        catch (err) {
+            const error = err instanceof Error ? err : new Error('Failed to preview order summary');
+            return {
+                savings: 0,
+                savingsPct: 0,
+                currency: checkout?.summary?.currency ?? 'EUR',
+                error: error.message,
+            };
+        }
+    }, [apiService, checkout?.checkoutSession.id, checkout?.summary?.currency]);
     const clear = useCallback(() => {
         setCheckout(null);
         setError(null);
@@ -317,9 +449,13 @@ export function useCheckout(options = {}) {
         removePromotion,
         getAppliedPromotions,
         updateLineItems,
+        addLineItems,
+        removeLineItems,
+        setItemQuantity,
         toggleOrderBump,
         updateCustomer,
         updateCustomerAndSessionInfo,
+        previewOrderSummary,
         clear,
     };
 }

package/dist/react/hooks/useOrderBump.d.ts

@@ -0,0 +1,30 @@
+export interface OrderBumpPreview {
+    savings: number;
+    savingsPct: number;
+    currency: string;
+    selectedOffers: {
+        productId: string | null;
+        variantId: string | null;
+        isSelected: boolean;
+    }[];
+}
+export interface UseOrderBumpOptions {
+    checkoutSessionId?: string;
+    offerId: string;
+    orderBumpType?: 'primary' | 'secondary' | 'vip';
+    autoPreview?: boolean;
+}
+export interface UseOrderBumpResult {
+    isSelected: boolean;
+    preview: OrderBumpPreview | null;
+    savings: number | null;
+    isLoading: boolean;
+    isToggling: boolean;
+    error: Error | null;
+    toggle: (selected?: boolean) => Promise<{
+        success: boolean;
+        error?: any;
+    }>;
+    refreshPreview: () => Promise<void>;
+}
+export declare function useOrderBump(options: UseOrderBumpOptions): UseOrderBumpResult;

package/dist/react/hooks/useOrderBump.js

@@ -0,0 +1,97 @@
+import { useState, useCallback, useEffect } from 'react';
+import { useTagadaContext } from '../providers/TagadaProvider';
+export function useOrderBump(options) {
+    const { apiService } = useTagadaContext();
+    const { checkoutSessionId, offerId, orderBumpType = 'vip', autoPreview = true } = options;
+    const [isSelected, setIsSelected] = useState(false);
+    const [preview, setPreview] = useState(null);
+    const [isLoading, setIsLoading] = useState(false);
+    const [isToggling, setIsToggling] = useState(false);
+    const [error, setError] = useState(null);
+    const refreshPreview = useCallback(async () => {
+        if (!checkoutSessionId)
+            return;
+        setIsLoading(true);
+        setError(null);
+        try {
+            const response = await apiService.fetch(`/api/v1/checkout-sessions/${checkoutSessionId}/vip-preview`, {
+                method: 'POST',
+                body: {
+                    orderBumpOfferIds: [offerId],
+                    orderBumpType,
+                },
+            });
+            setPreview(response);
+            // Update isSelected based on preview data
+            const offerSelected = response.selectedOffers?.some((offer) => offer.isSelected);
+            setIsSelected(offerSelected ?? false);
+        }
+        catch (err) {
+            const error = err instanceof Error ? err : new Error('Failed to fetch preview');
+            setError(error);
+            console.error('Order bump preview failed:', error);
+        }
+        finally {
+            setIsLoading(false);
+        }
+    }, [checkoutSessionId, offerId, orderBumpType, apiService]);
+    const toggle = useCallback(async (selected) => {
+        if (!checkoutSessionId) {
+            throw new Error('No checkout session available');
+        }
+        const targetState = selected ?? !isSelected;
+        // Optimistic update
+        setIsSelected(targetState);
+        setIsToggling(true);
+        setError(null);
+        try {
+            const response = await apiService.fetch(`/api/v1/checkout-sessions/${checkoutSessionId}/toggle-order-bump`, {
+                method: 'POST',
+                body: {
+                    orderBumpOfferId: offerId,
+                    selected: targetState,
+                },
+            });
+            if (response.success) {
+                // Refresh preview to get updated savings
+                await refreshPreview();
+                return { success: true };
+            }
+            else {
+                // Revert optimistic update
+                setIsSelected(!targetState);
+                return { success: false, error: response.error };
+            }
+        }
+        catch (err) {
+            // Revert optimistic update
+            setIsSelected(!targetState);
+            const error = err instanceof Error ? err : new Error('Failed to toggle order bump');
+            setError(error);
+            return { success: false, error: error.message };
+        }
+        finally {
+            setIsToggling(false);
+        }
+    }, [checkoutSessionId, offerId, isSelected, apiService, refreshPreview]);
+    // Auto-fetch preview on mount and when dependencies change
+    useEffect(() => {
+        if (autoPreview && checkoutSessionId) {
+            refreshPreview().catch((error) => {
+                console.error('Auto-preview failed:', error);
+            });
+        }
+    }, [autoPreview, refreshPreview]);
+    // Calculate current savings
+    const savings = isSelected && preview?.savings ? preview.savings : preview?.savings || null;
+    return {
+        isSelected,
+        preview,
+        savings,
+        isLoading,
+        isToggling,
+        error,
+        toggle,
+        refreshPreview,
+    };
+}

package/dist/react/hooks/usePayment.js

@@ -1,4 +1,5 @@
-import { useState, useCallback, useEffect, useRef } from 'react';
+import { useState, useCallback, useEffect, useRef, useMemo } from 'react';
+import { useBasisTheory } from '@basis-theory/basis-theory-react';
 import { useTagadaContext } from '../providers/TagadaProvider';
 import { getBasisTheoryApiKey } from '../config/payment';
 import { usePaymentPolling } from './usePaymentPolling';
@@ -23,47 +24,25 @@ export function usePayment() {
     const { createSession, startChallenge } = useThreeds();
     // Track challenge in progress to prevent multiple challenges
     const challengeInProgressRef = useRef(false);
-    // Initialize BasisTheory dynamically
-    const [basisTheory, setBasisTheory] = useState(null);
-    const [isBasisTheoryLoading, setIsBasisTheoryLoading] = useState(true);
+    // Stabilize environment value to prevent re-renders
+    const currentEnvironment = useMemo(() => environment?.environment || 'local', [environment?.environment]);
+    // Get API key from embedded configuration with proper environment detection
+    const apiKey = useMemo(() => getBasisTheoryApiKey(currentEnvironment), [currentEnvironment]);
+    // Initialize BasisTheory using React wrapper
+    const { bt: basisTheory, error: btError } = useBasisTheory(apiKey, {
+        elements: false,
+    });
+    // Handle BasisTheory initialization errors (only log once when state changes)
     useEffect(() => {
-        let isMounted = true;
-        const loadBasisTheory = async () => {
-            try {
-                setIsBasisTheoryLoading(true);
-                // Get API key from embedded configuration (with env override support)
-                const apiKey = getBasisTheoryApiKey(environment?.environment || 'local');
-                if (!apiKey) {
-                    console.warn('BasisTheory API key not configured');
-                    if (isMounted) {
-                        setError('BasisTheory API key not configured');
-                        setIsBasisTheoryLoading(false);
-                    }
-                    return;
-                }
-                const { BasisTheory } = await import('@basis-theory/basis-theory-js');
-                if (isMounted) {
-                    const bt = await new BasisTheory().init(apiKey, {
-                        elements: false,
-                    });
-                    setBasisTheory(bt);
-                    setIsBasisTheoryLoading(false);
-                    console.log('✅ BasisTheory initialized successfully');
-                }
-            }
-            catch (err) {
-                console.error('Failed to load BasisTheory:', err);
-                if (isMounted) {
-                    setError('Failed to initialize payment processor');
-                    setIsBasisTheoryLoading(false);
-                }
-            }
-        };
-        void loadBasisTheory();
-        return () => {
-            isMounted = false;
-        };
-    }, [environment]);
+        if (btError) {
+            console.error('BasisTheory initialization error:', btError);
+            setError('Failed to initialize payment processor: ' + btError.message);
+        }
+        else if (basisTheory && !error) {
+            console.log('✅ BasisTheory initialized successfully');
+            setError(null); // Clear any previous errors
+        }
+    }, [basisTheory, btError]); // Removed error from dependency to prevent loops
     // Clean up polling when component unmounts
     useEffect(() => {
         return () => {
@@ -154,9 +133,6 @@ export function usePayment() {
     }, [apiService, startChallenge, startPolling]);
     // Create card payment instrument
     const createCardPaymentInstrument = useCallback(async (cardData) => {
-        if (isBasisTheoryLoading) {
-            throw new Error('Payment processor is still initializing. Please wait...');
-        }
         if (!basisTheory) {
             throw new Error('Payment processor not initialized');
         }
@@ -195,11 +171,11 @@ export function usePayment() {
             console.error('Error creating card payment instrument:', error);
             throw error;
         }
-    }, [basisTheory, apiService, isBasisTheoryLoading]);
+    }, [basisTheory, apiService]);
     // Create Apple Pay payment instrument
     const createApplePayPaymentInstrument = useCallback(async (applePayToken) => {
-        if (isBasisTheoryLoading) {
-            throw new Error('Payment processor is still initializing. Please wait...');
+        if (!basisTheory) {
+            throw new Error('Payment processor not initialized');
         }
         if (!applePayToken.id) {
             throw new Error('Apple Pay token is missing');
@@ -227,7 +203,7 @@ export function usePayment() {
             console.error('Error creating Apple Pay payment instrument:', error);
             throw error;
         }
-    }, [apiService, isBasisTheoryLoading]);
+    }, [basisTheory, apiService]);
     // Process payment directly with checkout session
     const processPaymentDirect = useCallback(async (checkoutSessionId, paymentInstrumentId, threedsSessionId, options = {}) => {
         try {
@@ -349,7 +325,7 @@ export function usePayment() {
         processPaymentWithInstrument,
         createCardPaymentInstrument,
         createApplePayPaymentInstrument,
-        isLoading: isLoading || isBasisTheoryLoading,
+        isLoading: isLoading || !basisTheory, // Indicate loading if BasisTheory is not initialized
         error,
         clearError,
         currentPaymentId,

package/dist/react/hooks/useThreeds.d.ts

@@ -7,16 +7,12 @@ export interface PaymentInstrument {
         maskedCardNumber?: string;
         expirationMonth?: number;
         expirationYear?: number;
-        brand?: string;
-        bin?: string;
-        last4?: string;
-    } | null;
+    };
 }
 export interface ThreedsSession {
     id: string;
-    provider: ThreedsProvider;
-    status: string;
-    sessionData: any;
+    sessionId: string;
+    provider: string;
 }
 export interface ThreedsChallenge {
     sessionId: string;
@@ -33,6 +29,8 @@ export interface ThreedsHook {
     isLoading: boolean;
     error: Error | null;
 }
-export declare function useThreeds(options?: {
+interface UseThreedsOptions {
     defaultProvider?: ThreedsProvider;
-}): ThreedsHook;
+}
+export declare function useThreeds(options?: UseThreedsOptions): ThreedsHook;
+export {};

package/dist/react/hooks/useThreeds.js

@@ -4,22 +4,17 @@ import { getBasisTheoryApiKey } from '../config/payment';
 import { useThreedsModal } from './useThreedsModal';
 export function useThreeds(options = {}) {
     const { defaultProvider = 'basis_theory' } = options;
-    const { apiService, environment } = useTagadaContext();
+    const { apiService } = useTagadaContext();
     const [isLoading, setIsLoading] = useState(false);
     const [error, setError] = useState(null);
     const { createThreedsModal, closeThreedsModal } = useThreedsModal();
     const [basisTheory3ds, setBasisTheory3ds] = useState(null);
+    const [currentChallenge, setCurrentChallenge] = useState(null);
     // Dynamically import BasisTheory3ds on the client side only
     useEffect(() => {
         let isMounted = true;
         const loadBasisTheory = async () => {
             try {
-                // Get API key from embedded configuration (with env override support)
-                const apiKey = getBasisTheoryApiKey(environment?.environment || 'local');
-                if (!apiKey) {
-                    console.warn('BasisTheory API key not configured');
-                    return;
-                }
                 // Dynamically import the library only on the client side
                 const { BasisTheory3ds } = await import('@basis-theory/web-threeds');
                 if (isMounted) {
@@ -38,20 +33,17 @@ export function useThreeds(options = {}) {
         return () => {
             isMounted = false;
         };
-    }, [environment]);
+    }, []);
     // Create a 3DS session with BasisTheory
     const createBasisTheorySession = useCallback(async (paymentInstrument) => {
         try {
             if (!basisTheory3ds) {
                 throw new Error('BasisTheory3ds not loaded yet');
             }
-            // Get API key from embedded configuration
-            const apiKey = getBasisTheoryApiKey(environment?.environment || 'local');
-            if (!apiKey) {
-                throw new Error('BasisTheory API key not configured');
-            }
+            // Use the same API key approach as the working CMS version
+            const apiKey = getBasisTheoryApiKey('production'); // Use production config for now
             const bt3ds = basisTheory3ds(apiKey);
-            console.log('Creating BasisTheory 3DS session for payment instrument:', paymentInstrument.id);
+            console.log('paymentInstrument paymentInstrument', paymentInstrument?.token);
             const session = await bt3ds.createSession({
                 tokenId: paymentInstrument.token,
             });
@@ -70,7 +62,7 @@ export function useThreeds(options = {}) {
             console.error('Error creating BasisTheory 3DS session:', error);
             throw error;
         }
-    }, [apiService, basisTheory3ds, environment]);
+    }, [apiService, basisTheory3ds]);
     // Generic createSession method that supports multiple providers
     const createSession = useCallback(async (paymentInstrument, options) => {
         const provider = options?.provider || defaultProvider;
@@ -96,31 +88,37 @@ export function useThreeds(options = {}) {
         }
     }, [defaultProvider, createBasisTheorySession]);
     // Start a 3DS challenge with BasisTheory
-    const startBasisTheoryChallenge = useCallback(async (challengeData) => {
+    const startBasisTheoryChallenge = useCallback(async (sessionId, acsChallengeUrl, acsTransactionId, threeDSVersion) => {
         try {
             if (!basisTheory3ds) {
                 throw new Error('BasisTheory3ds not loaded yet');
             }
-            // Get API key from embedded configuration
-            const apiKey = getBasisTheoryApiKey(environment?.environment || 'local');
+            // Use the same API key approach as the working CMS version
+            const apiKey = getBasisTheoryApiKey('production'); // Use production config for now
             if (!apiKey) {
-                throw new Error('BasisTheory API key is not configured');
+                throw new Error('BasisTheory API key is not set');
             }
             const modal = createThreedsModal({
                 onClose: () => {
+                    // Throw error when user closes the modal
                     throw new Error('Authentication was cancelled by the user');
                 },
             });
             const bt3ds = basisTheory3ds(apiKey);
-            console.log('Starting BasisTheory 3DS challenge:', challengeData);
+            console.log('bt3ds starting challenge with params', {
+                sessionId,
+                acsChallengeUrl,
+                acsTransactionId,
+                threeDSVersion,
+            });
             const challengeCompletion = await bt3ds.startChallenge({
-                sessionId: challengeData.sessionId,
-                acsChallengeUrl: challengeData.acsChallengeUrl,
-                acsTransactionId: challengeData.acsTransactionId,
-                threeDSVersion: challengeData.threeDSVersion,
+                sessionId,
+                acsChallengeUrl,
+                acsTransactionId,
+                threeDSVersion: threeDSVersion,
                 containerId: modal.containerId + '-content',
                 mode: 'iframe',
-                timeout: 60000 * 3, // 3 minutes
+                timeout: 60000 * 3,
             });
             closeThreedsModal();
             return challengeCompletion;
@@ -130,7 +128,7 @@ export function useThreeds(options = {}) {
             closeThreedsModal();
             throw error;
         }
-    }, [basisTheory3ds, createThreedsModal, closeThreedsModal, environment]);
+    }, [basisTheory3ds, createThreedsModal, closeThreedsModal]);
     // Generic startChallenge method that supports multiple providers
     const startChallenge = useCallback(async (challengeData, options) => {
         const provider = options?.provider || defaultProvider;
@@ -138,7 +136,7 @@ export function useThreeds(options = {}) {
         setError(null);
         try {
             if (provider === 'basis_theory') {
-                return await startBasisTheoryChallenge(challengeData);
+                return await startBasisTheoryChallenge(challengeData.sessionId, challengeData.acsChallengeUrl, challengeData.acsTransactionId, challengeData.threeDSVersion);
             }
             else {
                 throw new Error(`Unsupported 3DS provider: ${String(provider)}`);

package/dist/react/hooks/useThreedsModal.d.ts

@@ -1,16 +1,13 @@
-export interface ThreedsModalOptions {
-    containerId?: string;
-    mode?: 'fixed' | 'auto-fit';
-    onClose?: () => void;
-}
-export interface ThreedsModalInstance {
-    containerId: string;
-    getContentElement: () => HTMLElement | null;
-    updateModalSize: () => void;
-    cleanup: () => void;
-}
-export interface ThreedsModalHook {
-    createThreedsModal: (options?: ThreedsModalOptions) => ThreedsModalInstance;
+export declare function useThreedsModal(): {
+    createThreedsModal: (options?: {
+        containerId?: string;
+        mode?: "fixed" | "auto-fit";
+        onClose?: () => void;
+    }) => {
+        containerId: string;
+        getContentElement: () => HTMLElement | null;
+        updateModalSize: () => void;
+        cleanup: () => void;
+    };
     closeThreedsModal: (containerId?: string) => void;
-}
-export declare function useThreedsModal(): ThreedsModalHook;
+};

package/dist/react/hooks/useThreedsModal.js

@@ -1,3 +1,4 @@
+'use client';
 import { useCallback } from 'react';
 export function useThreedsModal() {
     // Close the 3DS modal
@@ -44,9 +45,9 @@ export function useThreedsModal() {
             zIndex: '9998',
             display: 'flex',
             justifyContent: 'center',
-            alignItems: 'center',
+            alignItems: 'center', // Default to center alignment
             transition: 'opacity 0.3s ease',
-            opacity: '0',
+            opacity: '0', // Start transparent
         });
         // Create modal container
         const container = document.createElement('div');
@@ -57,7 +58,7 @@ export function useThreedsModal() {
         const baseStyles = {
             position: 'relative',
             backgroundColor: 'white',
-            borderRadius: '12px',
+            borderRadius: '12px', // Default border radius
             boxShadow: '0 10px 25px rgba(0, 0, 0, 0.2)',
             maxWidth: '100%',
             overflow: 'hidden',
@@ -69,10 +70,12 @@ export function useThreedsModal() {
         // Function to apply styles based on screen size and mode
         const applyResponsiveStyles = () => {
             isMobile = window.innerWidth < 768;
+            // Always ensure backdrop is properly centered
             backdrop.style.alignItems = 'center';
             backdrop.style.justifyContent = 'center';
             if (mode === 'fixed') {
                 if (isMobile) {
+                    // Full screen modal for mobile
                     Object.assign(container.style, {
                         ...baseStyles,
                         position: 'fixed',
@@ -82,7 +85,7 @@ export function useThreedsModal() {
                         bottom: '0',
                         width: '100%',
                         height: '100%',
-                        borderRadius: '0',
+                        borderRadius: '0', // No border radius for full screen
                         margin: '0',
                         backgroundColor: 'white',
                         transform: 'scale(0.95)',
@@ -91,6 +94,7 @@ export function useThreedsModal() {
                     });
                 }
                 else {
+                    // Desktop styles
                     Object.assign(container.style, {
                         ...baseStyles,
                         width: '550px',
@@ -108,6 +112,7 @@ export function useThreedsModal() {
             else {
                 // auto-fit mode
                 if (isMobile) {
+                    // Full screen modal for mobile
                     Object.assign(container.style, {
                         ...baseStyles,
                         position: 'fixed',
@@ -117,7 +122,7 @@ export function useThreedsModal() {
                         bottom: '0',
                         width: '100%',
                         height: '100%',
-                        borderRadius: '0',
+                        borderRadius: '0', // No border radius for full screen
                         margin: '0',
                         backgroundColor: 'white',
                         transform: 'scale(0.95)',
@@ -126,6 +131,7 @@ export function useThreedsModal() {
                     });
                 }
                 else {
+                    // Desktop styles
                     Object.assign(container.style, {
                         ...baseStyles,
                         width: '550px',
@@ -249,6 +255,7 @@ export function useThreedsModal() {
             if (!content)
                 return;
             if (isMobile) {
+                // On mobile, we're using full screen so just ensure content scrolls
                 content.style.height = 'calc(100% - 60px)';
                 content.style.overflowY = 'auto';
             }
@@ -258,10 +265,12 @@ export function useThreedsModal() {
                 const headerHeight = header.offsetHeight;
                 const maxModalHeight = viewportHeight * 0.85;
                 if (contentHeight + headerHeight < maxModalHeight) {
+                    // Content fits, let it determine the height
                     container.style.height = 'auto';
                     content.style.overflowY = 'visible';
                 }
                 else {
+                    // Content is too large, cap the height
                     container.style.height = `${maxModalHeight}px`;
                     content.style.height = `${maxModalHeight - headerHeight}px`;
                     content.style.overflowY = 'auto';
@@ -270,27 +279,33 @@ export function useThreedsModal() {
         };
         // Handle window resize
         const handleResize = () => {
+            // Store current opacity values before applying new styles
             const currentOpacity = container.style.opacity;
             const currentTransform = container.style.transform;
             applyResponsiveStyles();
             updateContentStyles();
+            // Restore opacity and transform to maintain visibility
             container.style.opacity = currentOpacity;
             container.style.transform = currentTransform;
+            // For auto-fit mode, also adjust the height
             if (mode === 'auto-fit') {
                 adjustAutoFitHeight();
             }
         };
         // Set up mutation observer to detect content changes
-        const contentObserver = new MutationObserver(() => {
+        const contentObserver = new MutationObserver((mutations) => {
+            // When content changes, adjust the height
             if (mode === 'auto-fit') {
+                // Small delay to ensure content has rendered
                 setTimeout(adjustAutoFitHeight, 50);
             }
         });
+        // Configure and start the mutation observer
         contentObserver.observe(content, {
-            childList: true,
-            subtree: true,
-            characterData: true,
-            attributes: true,
+            childList: true, // Watch for changes to child elements
+            subtree: true, // Watch the entire subtree
+            characterData: true, // Watch for changes to text content
+            attributes: true, // Watch for changes to attributes
         });
         // For auto-fit mode, set up resize observer for content element
         let resizeObserver = null;
@@ -311,7 +326,7 @@ export function useThreedsModal() {
         return {
             containerId,
             getContentElement: () => document.getElementById(`${containerId}-content`),
-            updateModalSize,
+            updateModalSize, // Expose function to manually update size
             cleanup: () => {
                 window.removeEventListener('resize', handleResize);
                 if (resizeObserver) {

package/dist/react/index.d.ts

@@ -5,6 +5,7 @@ export { TagadaProvider } from './providers/TagadaProvider';
 export { useCheckout } from './hooks/useCheckout';
 export { useProducts } from './hooks/useProducts';
 export { useOffers } from './hooks/useOffers';
+export { useOrderBump } from './hooks/useOrderBump';
 export { useSession } from './hooks/useSession';
 export { useCurrency } from './hooks/useCurrency';
 export { useCustomer } from './hooks/useCustomer';
@@ -19,8 +20,8 @@ export { useThreeds } from './hooks/useThreeds';
 export { useThreedsModal } from './hooks/useThreedsModal';
 export type { Customer, Session, AuthState, Locale, Currency, Store, Environment, EnvironmentConfig, Order, OrderItem, OrderSummary, OrderAddress, PickupPoint, } from './types';
 export type { UseCheckoutOptions, UseCheckoutResult, CheckoutInitParams, CheckoutLineItem, CheckoutSession, CheckoutData, Promotion, } from './hooks/useCheckout';
+export type { UseOrderBumpOptions, UseOrderBumpResult, OrderBumpPreview } from './hooks/useOrderBump';
 export type { Payment, PollingOptions, PaymentPollingHook } from './hooks/usePaymentPolling';
 export type { PaymentInstrument, ThreedsSession, ThreedsChallenge, ThreedsOptions, ThreedsHook, ThreedsProvider, } from './hooks/useThreeds';
-export type { ThreedsModalOptions, ThreedsModalInstance, ThreedsModalHook } from './hooks/useThreedsModal';
 export type { ApplePayToken, CardPaymentMethod, PaymentResponse, PaymentOptions, PaymentInstrumentResponse, PaymentHook, } from './hooks/usePayment';
 export { formatMoney, formatMoneyWithoutSymbol, getCurrencyInfo, minorUnitsToMajorUnits, moneyStringOrNumberToMinorUnits, convertCurrency, formatSimpleMoney, } from './utils/money';

package/dist/react/index.js

@@ -8,6 +8,7 @@ export { TagadaProvider } from './providers/TagadaProvider';
 export { useCheckout } from './hooks/useCheckout';
 export { useProducts } from './hooks/useProducts';
 export { useOffers } from './hooks/useOffers';
+export { useOrderBump } from './hooks/useOrderBump';
 export { useSession } from './hooks/useSession';
 export { useCurrency } from './hooks/useCurrency';
 export { useCustomer } from './hooks/useCustomer';

package/dist/react/providers/TagadaProvider.d.ts

@@ -39,17 +39,11 @@ interface TagadaProviderProps {
     children: ReactNode;
     environment?: Environment;
     customApiConfig?: Partial<EnvironmentConfig>;
-    developmentMode?: boolean;
     debugMode?: boolean;
     storeId?: string;
     accountId?: string;
-    mockData?: {
-        customer?: Partial<Customer>;
-        session?: Partial<Session>;
-        store?: Partial<Store>;
-    };
 }
-export declare function TagadaProvider({ children, environment, customApiConfig, developmentMode, debugMode, // Remove default, will be set based on environment
-storeId, accountId, mockData, }: TagadaProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function TagadaProvider({ children, environment, customApiConfig, debugMode, // Remove default, will be set based on environment
+storeId, accountId, }: TagadaProviderProps): import("react/jsx-runtime").JSX.Element;
 export declare function useTagadaContext(): TagadaContextValue;
 export {};

package/dist/react/providers/TagadaProvider.js

@@ -29,8 +29,8 @@ const InitializationLoader = () => (_jsx("div", { style: {
         }
       ` }) }));
 const TagadaContext = createContext(null);
-export function TagadaProvider({ children, environment, customApiConfig, developmentMode = false, debugMode, // Remove default, will be set based on environment
-storeId, accountId, mockData, }) {
+export function TagadaProvider({ children, environment, customApiConfig, debugMode, // Remove default, will be set based on environment
+storeId, accountId, }) {
     const [isLoading, setIsLoading] = useState(true);
     const [isInitialized, setIsInitialized] = useState(false);
     const [token, setToken] = useState(null);
@@ -284,49 +284,6 @@ storeId, accountId, mockData, }) {
             try {
                 console.debug('[SDK] Initializing token...');
                 setIsLoading(true);
-                if (developmentMode) {
-                    console.debug('[SDK] Development mode: Using mock data');
-                    // Use mock data in development mode
-                    if (mockData?.customer) {
-                        setCustomer({
-                            id: 'dev-customer-123',
-                            email: 'dev@example.com',
-                            firstName: 'John',
-                            lastName: 'Doe',
-                            phone: '+1234567890',
-                            isAuthenticated: true,
-                            role: 'authenticated',
-                            ...mockData.customer,
-                        });
-                    }
-                    if (mockData?.session) {
-                        setSession({
-                            sessionId: 'dev-session-123',
-                            storeId: 'dev-store-123',
-                            accountId: 'dev-account-123',
-                            customerId: 'dev-customer-123',
-                            role: 'authenticated',
-                            isValid: true,
-                            isLoading: false,
-                            ...mockData.session,
-                        });
-                    }
-                    if (mockData?.store) {
-                        setStore({
-                            id: 'dev-store-123',
-                            name: 'Development Store',
-                            domain: 'dev.localhost',
-                            currency: 'USD',
-                            locale: 'en-US',
-                            presentmentCurrencies: ['USD'],
-                            chargeCurrencies: ['USD'],
-                            ...mockData.store,
-                        });
-                    }
-                    setIsInitialized(true);
-                    setIsLoading(false);
-                    return;
-                }
                 // Check for existing token
                 const existingToken = getClientToken();
                 let tokenToUse = null;
@@ -374,7 +331,7 @@ storeId, accountId, mockData, }) {
             }
         };
         void initializeToken();
-    }, [developmentMode, mockData, storeId, createAnonymousToken, initializeSession]);
+    }, [storeId, createAnonymousToken, initializeSession]);
     // Update auth state when customer/session changes
     useEffect(() => {
         setAuth({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tagadapay/plugin-sdk",
-  "version": "1.0.9",
+  "version": "1.0.11",
   "description": "Modern React SDK for building Tagada Pay plugins",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -34,8 +34,8 @@
   "license": "MIT",
   "dependencies": {
     "@basis-theory/apple-pay-js": "^2.0.2",
-    "@basis-theory/basis-theory-js": "^4.28.2",
-    "@basis-theory/basis-theory-react": "^1.32.4",
+    "@basis-theory/basis-theory-js": "^4.30.0",
+    "@basis-theory/basis-theory-react": "^1.32.5",
     "@basis-theory/web-threeds": "^1.0.1",
     "axios": "^1.6.0",
     "react-intl": "^7.1.11"