@tagadapay/plugin-sdk 2.4.39 → 2.5.0

package/dist/v2/react/hooks/usePaymentPolling.js

@@ -0,0 +1,153 @@
+import { useCallback, useRef, useEffect, useMemo } from 'react';
+import { PaymentsResource } from '../../core/resources/payments';
+import { getGlobalApiClient } from './useApiQuery';
+export function usePaymentPolling() {
+    const pollIntervalRef = useRef(null);
+    const attemptsRef = useRef(0);
+    const isPollingRef = useRef(false);
+    const isMountedRef = useRef(true);
+    const currentPaymentIdRef = useRef(null);
+    // Create payments resource client
+    const paymentsResource = useMemo(() => {
+        try {
+            return new PaymentsResource(getGlobalApiClient());
+        }
+        catch (error) {
+            throw new Error('Failed to initialize payments resource: ' + (error instanceof Error ? error.message : 'Unknown error'));
+        }
+    }, []);
+    // Track mounted state and cleanup
+    useEffect(() => {
+        isMountedRef.current = true;
+        return () => {
+            isMountedRef.current = false;
+            stopPolling();
+        };
+    }, []);
+    const stopPolling = useCallback(() => {
+        if (pollIntervalRef.current) {
+            clearInterval(pollIntervalRef.current);
+            pollIntervalRef.current = null;
+        }
+        isPollingRef.current = false;
+        currentPaymentIdRef.current = null;
+        if (isMountedRef.current) {
+            console.log('Stopped polling payment status');
+        }
+    }, []);
+    const startPolling = useCallback((paymentId, options = {}) => {
+        if (!paymentId) {
+            console.error('Cannot poll payment status: paymentId is missing');
+            return { stop: stopPolling, isPolling: () => false };
+        }
+        // Prevent multiple polling sessions for the same payment
+        if (currentPaymentIdRef.current === paymentId && isPollingRef.current) {
+            console.log('Already polling for payment:', paymentId);
+            return { stop: stopPolling, isPolling: () => isPollingRef.current };
+        }
+        // Clean up any existing polling
+        stopPolling();
+        // Don't start polling if component is unmounted
+        if (!isMountedRef.current) {
+            console.log('Component unmounted, skipping polling start');
+            return { stop: stopPolling, isPolling: () => false };
+        }
+        // Reset attempts counter and set current payment
+        attemptsRef.current = 0;
+        isPollingRef.current = true;
+        currentPaymentIdRef.current = paymentId;
+        const { onRequireAction, onSuccess, onFailure, maxAttempts = 20, pollInterval = 1500 } = options;
+        console.log('Starting to poll payment status for:', paymentId);
+        const checkPaymentStatus = async () => {
+            // Stop if component was unmounted or polling was stopped
+            if (!isMountedRef.current || !isPollingRef.current) {
+                return;
+            }
+            try {
+                attemptsRef.current++;
+                console.log(`Polling attempt ${attemptsRef.current}/${maxAttempts} for payment ${paymentId}`);
+                const payment = await paymentsResource.getPaymentStatus(paymentId);
+                // Check again after async operation
+                if (!isMountedRef.current || !isPollingRef.current) {
+                    return;
+                }
+                // Type guard and validation
+                if (!payment?.id) {
+                    console.warn('Invalid payment response received');
+                    return;
+                }
+                console.log('Payment status update:', payment);
+                // Check if payment requires action
+                if (payment.requireAction !== 'none' && payment.requireActionData) {
+                    console.log('Payment requires new action, handling...');
+                    stopPolling();
+                    if (isMountedRef.current && onRequireAction) {
+                        onRequireAction(payment, stopPolling);
+                    }
+                    return;
+                }
+                // Check for successful payment
+                if (payment.status === 'succeeded' ||
+                    (payment.status === 'pending' && payment.subStatus === 'authorized')) {
+                    console.log('Payment succeeded, stopping polling');
+                    stopPolling();
+                    if (isMountedRef.current && onSuccess) {
+                        onSuccess(payment);
+                    }
+                    return;
+                }
+                // Check for failed payment (non-succeeded and not pending)
+                if (payment.status !== 'succeeded' && payment.status !== 'pending') {
+                    console.log('Payment failed, stopping polling');
+                    stopPolling();
+                    if (isMountedRef.current && onFailure) {
+                        onFailure(payment.status || 'Payment failed');
+                    }
+                    return;
+                }
+                // Stop after max attempts
+                if (attemptsRef.current >= maxAttempts) {
+                    console.log('Reached maximum polling attempts');
+                    stopPolling();
+                    if (isMountedRef.current && onFailure) {
+                        onFailure('Payment verification timeout');
+                    }
+                }
+            }
+            catch (error) {
+                console.error('Error checking payment status:', error);
+                // Stop polling on repeated errors to prevent infinite loops
+                if (attemptsRef.current >= 3) {
+                    console.log('Multiple errors encountered, stopping polling');
+                    stopPolling();
+                    if (isMountedRef.current && onFailure) {
+                        onFailure('Payment verification failed due to network errors');
+                    }
+                }
+                // Continue polling for occasional errors
+            }
+        };
+        // Start polling immediately, but check if still mounted
+        if (isMountedRef.current && isPollingRef.current) {
+            void checkPaymentStatus();
+            pollIntervalRef.current = setInterval(() => {
+                if (isMountedRef.current && isPollingRef.current) {
+                    void checkPaymentStatus();
+                }
+                else {
+                    stopPolling();
+                }
+            }, pollInterval);
+        }
+        // Return control object
+        return {
+            stop: stopPolling,
+            isPolling: () => isPollingRef.current && isMountedRef.current,
+        };
+    }, [paymentsResource, stopPolling]);
+    return {
+        startPolling,
+        stopPolling,
+        isPolling: () => isPollingRef.current && isMountedRef.current,
+    };
+}

package/dist/v2/react/hooks/usePaymentQuery.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Payment Hook using TanStack Query (V2)
+ * Matches the old usePayment.ts implementation exactly for easy migration
+ */
+import type { PaymentResponse, PaymentOptions, CardPaymentMethod, ApplePayToken, PaymentInstrumentResponse, PaymentInstrumentCustomerResponse } from '../../core/resources/payments';
+export type { Payment as PaymentType, PaymentResponse, PaymentOptions, CardPaymentMethod, ApplePayToken, PaymentInstrumentResponse, PaymentInstrumentCustomerResponse, PaymentInstrumentCustomer } from '../../core/resources/payments';
+export interface PaymentHook {
+    processCardPayment: (checkoutSessionId: string, cardData: CardPaymentMethod, options?: PaymentOptions) => Promise<PaymentResponse>;
+    processApplePayPayment: (checkoutSessionId: string, applePayToken: ApplePayToken, options?: PaymentOptions) => Promise<PaymentResponse>;
+    processPaymentWithInstrument: (checkoutSessionId: string, paymentInstrumentId: string, options?: PaymentOptions) => Promise<PaymentResponse>;
+    createCardPaymentInstrument: (cardData: CardPaymentMethod) => Promise<PaymentInstrumentResponse>;
+    createApplePayPaymentInstrument: (applePayToken: ApplePayToken) => Promise<PaymentInstrumentResponse>;
+    getCardPaymentInstruments: () => Promise<PaymentInstrumentCustomerResponse>;
+    isLoading: boolean;
+    error: string | null;
+    clearError: () => void;
+    currentPaymentId: string | null;
+}
+export declare function usePaymentQuery(): PaymentHook;

package/dist/v2/react/hooks/usePaymentQuery.js

@@ -0,0 +1,283 @@
+/**
+ * Payment Hook using TanStack Query (V2)
+ * Matches the old usePayment.ts implementation exactly for easy migration
+ */
+import { useState, useCallback, useMemo, useRef, useEffect } from 'react';
+import { useBasisTheory } from '@basis-theory/basis-theory-react';
+import { getBasisTheoryApiKey } from '../../../react/config/payment';
+import { useTagadaContext } from '../providers/TagadaProvider';
+import { PaymentsResource } from '../../core/resources/payments';
+import { usePaymentPolling } from './usePaymentPolling';
+import { useThreeds } from './useThreeds';
+import { getGlobalApiClient } from './useApiQuery';
+export function usePaymentQuery() {
+    const { environment } = useTagadaContext();
+    // Create payments resource client
+    const paymentsResource = useMemo(() => {
+        try {
+            return new PaymentsResource(getGlobalApiClient());
+        }
+        catch (error) {
+            throw new Error('Failed to initialize payments resource: ' + (error instanceof Error ? error.message : 'Unknown error'));
+        }
+    }, []);
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const [currentPaymentId, setCurrentPaymentId] = useState(null);
+    const { startPolling, stopPolling } = usePaymentPolling();
+    const { createSession, startChallenge } = useThreeds();
+    // Track challenge in progress to prevent multiple challenges
+    const challengeInProgressRef = useRef(false);
+    // 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(() => {
+        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 () => {
+            stopPolling();
+        };
+    }, [stopPolling]);
+    // Handle payment actions (3DS, redirects, etc.) - matches old implementation
+    const handlePaymentAction = useCallback(async (payment, options = {}) => {
+        if (payment.requireAction === 'none')
+            return;
+        if (payment?.requireActionData?.processed)
+            return;
+        const actionData = payment.requireActionData;
+        if (!actionData)
+            return;
+        // Mark action as processed
+        try {
+            await paymentsResource.markPaymentActionProcessed(payment.id);
+        }
+        catch (error) {
+            console.error('Error setting payment action as processed', error);
+        }
+        console.log('Processing payment action:', actionData.type);
+        switch (actionData.type) {
+            case 'threeds_auth':
+                if (actionData.metadata?.threedsSession && !challengeInProgressRef.current) {
+                    try {
+                        challengeInProgressRef.current = true;
+                        console.log('Starting 3DS challenge...');
+                        await startChallenge({
+                            sessionId: actionData.metadata.threedsSession.externalSessionId,
+                            acsChallengeUrl: actionData.metadata.threedsSession.acsChallengeUrl,
+                            acsTransactionId: actionData.metadata.threedsSession.acsTransID,
+                            threeDSVersion: actionData.metadata.threedsSession.messageVersion,
+                        }, { provider: options.threedsProvider || 'basis_theory' });
+                        challengeInProgressRef.current = false;
+                        console.log('3DS challenge completed');
+                        // Start polling after challenge completion
+                        if (payment.id) {
+                            startPolling(payment.id, {
+                                onRequireAction: (updatedPayment) => {
+                                    void handlePaymentAction(updatedPayment, options);
+                                },
+                                onSuccess: (successPayment) => {
+                                    setIsLoading(false);
+                                    options.onSuccess?.({
+                                        paymentId: successPayment.id,
+                                        payment: successPayment,
+                                    });
+                                },
+                                onFailure: (errorMsg) => {
+                                    console.error('Payment failed:', errorMsg);
+                                    setError(errorMsg);
+                                    setIsLoading(false);
+                                    options.onFailure?.(errorMsg);
+                                },
+                            });
+                        }
+                    }
+                    catch (error) {
+                        challengeInProgressRef.current = false;
+                        console.error('Error starting 3DS challenge:', error);
+                        const errorMsg = error instanceof Error ? error.message : 'Failed to start 3DS challenge';
+                        setError(errorMsg);
+                        setIsLoading(false);
+                        options.onFailure?.(errorMsg);
+                    }
+                }
+                break;
+            case 'processor_auth':
+            case 'redirect': {
+                if (actionData.metadata?.redirect?.redirectUrl) {
+                    window.location.href = actionData.metadata.redirect.redirectUrl;
+                }
+                break;
+            }
+            case 'error': {
+                const errorMsg = actionData.message || 'Payment processing failed';
+                setError(errorMsg);
+                setIsLoading(false);
+                options.onFailure?.(errorMsg);
+                break;
+            }
+        }
+        options.onRequireAction?.(payment);
+    }, [paymentsResource, startPolling, startChallenge]);
+    // Create card payment instrument - matches old implementation
+    const createCardPaymentInstrument = useCallback((cardData) => {
+        return paymentsResource.createCardPaymentInstrument(basisTheory, cardData);
+    }, [basisTheory, paymentsResource]);
+    // Create Apple Pay payment instrument - matches old implementation
+    const createApplePayPaymentInstrument = useCallback((applePayToken) => {
+        return paymentsResource.createApplePayPaymentInstrument(basisTheory, applePayToken);
+    }, [basisTheory, paymentsResource]);
+    // Process payment directly with checkout session - matches old implementation
+    const processPaymentDirect = useCallback(async (checkoutSessionId, paymentInstrumentId, threedsSessionId, options = {}) => {
+        try {
+            const response = await paymentsResource.processPaymentDirect(checkoutSessionId, paymentInstrumentId, threedsSessionId, {
+                initiatedBy: options.initiatedBy,
+                source: options.source,
+            });
+            console.log('Payment response:', response);
+            setCurrentPaymentId(response.payment?.id);
+            if (response.payment.requireAction !== 'none') {
+                await handlePaymentAction(response.payment, options);
+            }
+            else if (response.payment.status === 'succeeded') {
+                setIsLoading(false);
+                options.onSuccess?.(response);
+            }
+            else {
+                // Start polling for payment status
+                startPolling(response.payment?.id, {
+                    onRequireAction: (payment) => {
+                        void handlePaymentAction(payment, options);
+                    },
+                    onSuccess: (payment) => {
+                        setIsLoading(false);
+                        options.onSuccess?.({
+                            paymentId: payment.id,
+                            payment,
+                        });
+                    },
+                    onFailure: (errorMsg) => {
+                        console.error('Payment failed:', errorMsg);
+                        setError(errorMsg);
+                        setIsLoading(false);
+                        options.onFailure?.(errorMsg);
+                    },
+                });
+            }
+            return response;
+        }
+        catch (error) {
+            const errorMsg = error instanceof Error ? error.message : 'Payment failed';
+            setError(errorMsg);
+            setIsLoading(false);
+            options.onFailure?.(errorMsg);
+            throw error;
+        }
+    }, [paymentsResource, handlePaymentAction, startPolling]);
+    // Process card payment - matches old implementation
+    const processCardPayment = useCallback(async (checkoutSessionId, cardData, options = {}) => {
+        setIsLoading(true);
+        setError(null);
+        try {
+            // 1. Create payment instrument
+            const paymentInstrument = await createCardPaymentInstrument(cardData);
+            // 2. Create 3DS session if enabled
+            let threedsSessionId;
+            if (options.enableThreeds !== false) {
+                try {
+                    const threedsSession = await createSession(paymentInstrument, {
+                        provider: options.threedsProvider || 'basis_theory',
+                    });
+                    threedsSessionId = threedsSession.id;
+                }
+                catch (error) {
+                    console.warn('Failed to create 3DS session, proceeding without 3DS:', error);
+                }
+            }
+            // 3. Process payment directly
+            return await processPaymentDirect(checkoutSessionId, paymentInstrument.id, threedsSessionId, options);
+        }
+        catch (error) {
+            setIsLoading(false);
+            const errorMsg = error instanceof Error ? error.message : 'Payment failed';
+            setError(errorMsg);
+            options.onFailure?.(errorMsg);
+            throw error;
+        }
+    }, [createCardPaymentInstrument, createSession, processPaymentDirect]);
+    // Process Apple Pay payment - matches old implementation
+    const processApplePayPayment = useCallback(async (checkoutSessionId, applePayToken, options = {}) => {
+        setIsLoading(true);
+        setError(null);
+        try {
+            // 1. Create payment instrument
+            const paymentInstrument = await createApplePayPaymentInstrument(applePayToken);
+            // 2. Process payment directly (Apple Pay typically doesn't require 3DS)
+            return await processPaymentDirect(checkoutSessionId, paymentInstrument.id, undefined, options);
+        }
+        catch (error) {
+            setIsLoading(false);
+            const errorMsg = error instanceof Error ? error.message : 'Apple Pay payment failed';
+            setError(errorMsg);
+            options.onFailure?.(errorMsg);
+            throw error;
+        }
+    }, [createApplePayPaymentInstrument, processPaymentDirect]);
+    // Process payment with existing instrument - matches old implementation
+    const processPaymentWithInstrument = useCallback(async (checkoutSessionId, paymentInstrumentId, options = {}) => {
+        setIsLoading(true);
+        setError(null);
+        try {
+            return await processPaymentDirect(checkoutSessionId, paymentInstrumentId, undefined, options);
+        }
+        catch (error) {
+            setIsLoading(false);
+            const errorMsg = error instanceof Error ? error.message : 'Payment failed';
+            setError(errorMsg);
+            options.onFailure?.(errorMsg);
+            throw error;
+        }
+    }, [processPaymentDirect]);
+    // Get card payment instruments - matches old implementation
+    const getCardPaymentInstruments = useCallback(async () => {
+        try {
+            const response = await paymentsResource.getCardPaymentInstruments();
+            return response;
+        }
+        catch (error) {
+            console.error('Error fetching card payment instruments:', error);
+            const errorMsg = error instanceof Error ? error.message : 'Failed to fetch payment instruments';
+            setError(errorMsg);
+            throw error;
+        }
+    }, [paymentsResource]);
+    const clearError = useCallback(() => {
+        setError(null);
+    }, []);
+    return {
+        processCardPayment,
+        processApplePayPayment,
+        processPaymentWithInstrument,
+        createCardPaymentInstrument,
+        createApplePayPaymentInstrument,
+        getCardPaymentInstruments,
+        isLoading: isLoading || !basisTheory, // Indicate loading if BasisTheory is not initialized
+        error,
+        clearError,
+        currentPaymentId,
+    };
+}

package/dist/v2/react/hooks/usePluginConfig.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Plugin Configuration Hook
+ * Uses PluginConfigUtils for business logic
+ */
+import { PluginConfig, RawPluginConfig } from '../../core/utils/pluginConfig';
+export interface UsePluginConfigOptions {
+    rawConfig?: RawPluginConfig;
+}
+export interface UsePluginConfigResult<TConfig = Record<string, any>> {
+    config: PluginConfig<TConfig>;
+    storeId?: string;
+    accountId?: string;
+    basePath?: string;
+    isValid: boolean;
+}
+export declare function usePluginConfig<TConfig = Record<string, any>>(options?: UsePluginConfigOptions): UsePluginConfigResult<TConfig>;

package/dist/v2/react/hooks/usePluginConfig.js

@@ -0,0 +1,36 @@
+/**
+ * Plugin Configuration Hook
+ * Uses PluginConfigUtils for business logic
+ */
+import { useMemo } from 'react';
+import { useTagadaContext } from '../providers/TagadaProvider';
+import { PluginConfigUtils } from '../../core/utils/pluginConfig';
+export function usePluginConfig(options = {}) {
+    const { pluginConfig } = useTagadaContext();
+    const config = useMemo(() => {
+        const baseConfig = PluginConfigUtils.getPluginConfig(options.rawConfig, {
+            storeId: pluginConfig.storeId,
+            accountId: pluginConfig.accountId,
+            basePath: pluginConfig.basePath,
+        });
+        // Merge config properties from the loaded plugin config
+        return {
+            ...baseConfig,
+            ...pluginConfig.config,
+            storeId: pluginConfig.storeId,
+            accountId: pluginConfig.accountId,
+            basePath: pluginConfig.basePath,
+        };
+    }, [options.rawConfig, pluginConfig]);
+    const isValid = useMemo(() => {
+        return PluginConfigUtils.validateConfig(config);
+    }, [config]);
+    console.log('🔍 [usePluginConfig] Config:', config);
+    return {
+        config,
+        storeId: config.storeId,
+        accountId: config.accountId,
+        basePath: config.basePath,
+        isValid,
+    };
+}

package/dist/v2/react/hooks/usePostPurchasesQuery.d.ts

@@ -0,0 +1,63 @@
+/**
+ * Post Purchases Hook using TanStack Query
+ * Handles post-purchase offers with automatic caching
+ */
+import { PostPurchaseOffer, PostPurchaseOfferItem, PostPurchaseOfferSummary, CheckoutSessionState, OrderSummary, CurrencyOptions } from '../../core/resources/postPurchases';
+export interface UsePostPurchasesQueryOptions {
+    orderId: string;
+    enabled?: boolean;
+    autoInitializeCheckout?: boolean;
+}
+export interface UsePostPurchasesQueryResult {
+    offers: PostPurchaseOffer[];
+    isLoading: boolean;
+    error: Error | null;
+    acceptOffer: (offerId: string, items: PostPurchaseOfferItem[]) => Promise<{
+        success: boolean;
+        summary?: PostPurchaseOfferSummary;
+        error?: string;
+    }>;
+    declineOffer: (offerId: string) => Promise<{
+        success: boolean;
+        error?: string;
+    }>;
+    previewOffer: (offerId: string, items: PostPurchaseOfferItem[]) => Promise<{
+        success: boolean;
+        summary?: PostPurchaseOfferSummary;
+        error?: string;
+    }>;
+    refresh: () => void;
+    payWithCheckoutSession: (checkoutSessionId: string, orderId?: string) => Promise<void>;
+    initCheckoutSession: (offerId: string, orderId: string) => Promise<{
+        checkoutSessionId: string;
+    }>;
+    initCheckoutSessionWithVariants: (offerId: string, orderId: string, lineItems: {
+        variantId: string;
+        quantity: number;
+    }[]) => Promise<{
+        checkoutSessionId: string;
+    }>;
+    getOffer: (offerId: string) => PostPurchaseOffer | undefined;
+    getTotalValue: () => number;
+    getTotalSavings: () => number;
+    getCheckoutSessionState: (offerId: string) => CheckoutSessionState | null;
+    initializeOfferCheckout: (offerId: string) => Promise<void>;
+    getAvailableVariants: (offerId: string, productId: string) => {
+        variantId: string;
+        variantName: string;
+        variantSku: string | null;
+        variantDefault: boolean | null;
+        variantExternalId: string | null;
+        priceId: string;
+        currencyOptions: CurrencyOptions;
+    }[];
+    selectVariant: (offerId: string, productId: string, variantId: string) => Promise<void>;
+    getOrderSummary: (offerId: string) => OrderSummary | null;
+    isLoadingVariants: (offerId: string, productId: string) => boolean;
+    isUpdatingOrderSummary: (offerId: string) => boolean;
+    confirmPurchase: (offerId: string, options?: {
+        draft?: boolean;
+        returnUrl?: string;
+    }) => Promise<void>;
+}
+export declare function usePostPurchasesQuery(options: UsePostPurchasesQueryOptions): UsePostPurchasesQueryResult;