@tagadapay/plugin-sdk 1.0.2

package/dist/react/hooks/usePayment.js

@@ -0,0 +1,343 @@
+import { useState, useCallback, useEffect, useRef } from 'react';
+import { useTagadaContext } from '../providers/TagadaProvider';
+import { getBasisTheoryApiKey } from '../config/payment';
+import { usePaymentPolling } from './usePaymentPolling';
+import { useThreeds } from './useThreeds';
+// Helper function to format expiry date
+const getCardMonthAndYear = (expiryDate) => {
+    const [month, year] = expiryDate.split('/');
+    const currentYear = new Date().getFullYear();
+    const century = Math.floor(currentYear / 100) * 100;
+    const fullYear = Number(year) + century;
+    return {
+        expiration_month: Number(month),
+        expiration_year: fullYear,
+    };
+};
+export function usePayment() {
+    const { apiService, environment } = useTagadaContext();
+    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);
+    // Initialize BasisTheory dynamically
+    const [basisTheory, setBasisTheory] = useState(null);
+    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;
+                }
+                const { BasisTheory } = await import('@basis-theory/basis-theory-js');
+                if (isMounted) {
+                    const bt = await new BasisTheory().init(apiKey, {
+                        elements: false,
+                    });
+                    setBasisTheory(bt);
+                    console.log('✅ BasisTheory initialized successfully');
+                }
+            }
+            catch (err) {
+                console.error('Failed to load BasisTheory:', err);
+                if (isMounted) {
+                    setError('Failed to initialize payment processor');
+                }
+            }
+        };
+        void loadBasisTheory();
+        return () => {
+            isMounted = false;
+        };
+    }, [environment]);
+    // Clean up polling when component unmounts
+    useEffect(() => {
+        return () => {
+            stopPolling();
+        };
+    }, [stopPolling]);
+    // Handle payment actions (3DS, redirects, etc.)
+    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 apiService.fetch('/api/v1/payments/require-action/processed', {
+                method: 'POST',
+                body: {
+                    paymentId: 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?.(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);
+    }, [apiService, startChallenge, startPolling]);
+    // Create card payment instrument
+    const createCardPaymentInstrument = useCallback(async (cardData) => {
+        if (!basisTheory) {
+            throw new Error('Payment processor not initialized');
+        }
+        try {
+            console.log('Creating card payment instrument');
+            // Create token using BasisTheory
+            const btResponse = await basisTheory.tokens.create({
+                type: 'card',
+                data: {
+                    cvc: cardData.cvc,
+                    number: Number(cardData.cardNumber.replace(/\s+/g, '')),
+                    ...getCardMonthAndYear(cardData.expiryDate),
+                },
+                metadata: {
+                    nonSensitiveField: 'nonSensitiveValue',
+                },
+            });
+            // Create payment instrument through API
+            const paymentInstrumentData = {
+                type: btResponse.type,
+                card: {
+                    maskedCardNumber: String(btResponse?.data?.number || ''),
+                    expirationMonth: Number(btResponse?.data?.expiration_month || 0),
+                    expirationYear: Number(btResponse?.data?.expiration_year || 0),
+                },
+                token: btResponse.id,
+            };
+            const response = await apiService.fetch('/api/v1/payment/create-payment-instrument', {
+                method: 'POST',
+                body: { paymentInstrumentData },
+            });
+            console.log('Payment instrument created:', response);
+            return response;
+        }
+        catch (error) {
+            console.error('Error creating card payment instrument:', error);
+            throw error;
+        }
+    }, [basisTheory, apiService]);
+    // Create Apple Pay payment instrument
+    const createApplePayPaymentInstrument = useCallback(async (applePayToken) => {
+        if (!applePayToken.id) {
+            throw new Error('Apple Pay token is missing');
+        }
+        try {
+            const paymentInstrumentData = {
+                type: 'apple_pay',
+                token: applePayToken.id,
+                dpanType: applePayToken.type,
+                card: {
+                    bin: applePayToken.card.bin,
+                    last4: applePayToken.card.last4,
+                    expirationMonth: applePayToken.card.expiration_month,
+                    expirationYear: applePayToken.card.expiration_year,
+                    brand: applePayToken.card.brand,
+                },
+            };
+            const response = await apiService.fetch('/api/v1/payment/create-payment-instrument', {
+                method: 'POST',
+                body: { paymentInstrumentData },
+            });
+            return response;
+        }
+        catch (error) {
+            console.error('Error creating Apple Pay payment instrument:', error);
+            throw error;
+        }
+    }, [apiService]);
+    // Process payment directly with checkout session
+    const processPaymentDirect = useCallback(async (checkoutSessionId, paymentInstrumentId, threedsSessionId, options = {}) => {
+        try {
+            // Create order and process payment in one call
+            const response = await apiService.fetch(`/api/v1/checkout-sessions/${checkoutSessionId}/pay`, {
+                method: 'POST',
+                body: {
+                    paymentInstrumentId,
+                    threedsSessionId,
+                },
+            });
+            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.payment);
+            }
+            else {
+                // Start polling for payment status
+                startPolling(response.payment?.id, {
+                    onRequireAction: (payment) => {
+                        void handlePaymentAction(payment, options);
+                    },
+                    onSuccess: (payment) => {
+                        setIsLoading(false);
+                        options.onSuccess?.(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;
+        }
+    }, [apiService, handlePaymentAction, startPolling]);
+    // Process card payment (simplified)
+    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 (simplified)
+    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 (simplified)
+    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]);
+    const clearError = useCallback(() => {
+        setError(null);
+    }, []);
+    return {
+        processCardPayment,
+        processApplePayPayment,
+        processPaymentWithInstrument,
+        createCardPaymentInstrument,
+        createApplePayPaymentInstrument,
+        isLoading,
+        error,
+        clearError,
+        currentPaymentId,
+    };
+}

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

@@ -0,0 +1,45 @@
+export interface Payment {
+    id: string;
+    status: string;
+    subStatus: string;
+    requireAction: 'none' | 'redirect' | 'error';
+    requireActionData?: {
+        type: 'redirect' | 'threeds_auth' | 'processor_auth' | 'error';
+        url?: string;
+        processed: boolean;
+        processorId?: string;
+        metadata?: {
+            type: 'redirect';
+            redirect?: {
+                redirectUrl: string;
+                returnUrl: string;
+            };
+            threedsSession?: {
+                externalSessionId: string;
+                acsChallengeUrl: string;
+                acsTransID: string;
+                messageVersion: string;
+            };
+        };
+        redirectUrl?: string;
+        resumeToken?: string;
+        message?: string;
+        errorCode?: string;
+    };
+}
+export interface PollingOptions {
+    onRequireAction?: (payment: Payment, stop: () => void) => void;
+    onSuccess?: (payment: Payment) => void;
+    onFailure?: (error: string) => void;
+    maxAttempts?: number;
+    pollInterval?: number;
+}
+export interface PaymentPollingHook {
+    startPolling: (paymentId: string, options?: PollingOptions) => {
+        stop: () => void;
+        isPolling: () => boolean;
+    };
+    stopPolling: () => void;
+    isPolling: () => boolean;
+}
+export declare function usePaymentPolling(): PaymentPollingHook;

package/dist/react/hooks/usePaymentPolling.js

@@ -0,0 +1,146 @@
+import { useCallback, useRef, useEffect } from 'react';
+import { useTagadaContext } from '../providers/TagadaProvider';
+export function usePaymentPolling() {
+    const { apiService } = useTagadaContext();
+    const pollIntervalRef = useRef(null);
+    const attemptsRef = useRef(0);
+    const isPollingRef = useRef(false);
+    const isMountedRef = useRef(true);
+    const currentPaymentIdRef = useRef(null);
+    // 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 apiService.fetch(`/api/v1/payments/${paymentId}`, {
+                    method: 'GET',
+                });
+                // 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,
+        };
+    }, [apiService, stopPolling]);
+    return {
+        startPolling,
+        stopPolling,
+        isPolling: () => isPollingRef.current && isMountedRef.current,
+    };
+}

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

@@ -0,0 +1,95 @@
+export interface ProductPrice {
+    id: string;
+    amount: number;
+    currency: string;
+    recurring: boolean;
+    interval?: string;
+    intervalCount?: number;
+    default?: boolean;
+    currencyOptions: Record<string, {
+        amount: number;
+        currency: string;
+    }>;
+}
+export interface ProductVariant {
+    id: string;
+    name: string;
+    sku?: string;
+    weight?: number;
+    imageUrl?: string;
+    default?: boolean;
+    prices: ProductPrice[];
+}
+export interface Product {
+    id: string;
+    name: string;
+    description?: string;
+    image?: string;
+    variants: ProductVariant[];
+    defaultPrice?: ProductPrice;
+}
+export interface UseProductsOptions {
+    /**
+     * Array of product IDs to fetch. If empty, fetches all products for the store
+     */
+    productIds?: string[];
+    /**
+     * Whether to fetch products automatically on mount
+     * @default true
+     */
+    enabled?: boolean;
+    /**
+     * Whether to include variants in the response
+     * @default true
+     */
+    includeVariants?: boolean;
+    /**
+     * Whether to include prices in the response
+     * @default true
+     */
+    includePrices?: boolean;
+}
+export interface UseProductsResult {
+    /**
+     * Array of fetched products
+     */
+    products: Product[];
+    /**
+     * Loading state
+     */
+    isLoading: boolean;
+    /**
+     * Error state
+     */
+    error: Error | null;
+    /**
+     * Refetch products
+     */
+    refetch: () => Promise<void>;
+    /**
+     * Get product by ID from the loaded products
+     */
+    getProduct: (productId: string) => Product | undefined;
+    /**
+     * Get variant by ID from all loaded products
+     */
+    getVariant: (variantId: string) => {
+        product: Product;
+        variant: ProductVariant;
+    } | undefined;
+    /**
+     * Get all variants from all products as a flat array
+     */
+    getAllVariants: () => {
+        product: Product;
+        variant: ProductVariant;
+    }[];
+    /**
+     * Filter variants by criteria
+     */
+    filterVariants: (predicate: (variant: ProductVariant, product: Product) => boolean) => {
+        product: Product;
+        variant: ProductVariant;
+    }[];
+}
+export declare function useProducts(options?: UseProductsOptions): UseProductsResult;