@tagadapay/plugin-sdk 3.1.12 → 3.1.24

package/dist/v2/react/components/WhopCheckout.js

@@ -0,0 +1,237 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef, memo, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { useCheckoutEmbedControls, WhopCheckoutEmbed } from '@whop/checkout/react';
+import { useTagadaContext } from '../providers/TagadaProvider';
+import { useTranslation } from '../hooks/useTranslation';
+import { useWhopPaymentPolling } from '../hooks/useWhopPaymentPolling';
+export const WhopCheckout = memo(forwardRef(({ checkoutSessionId, storeId, customerEmail, shippingAddress, orderItemsCount, orderTotalAmount, onPaymentCompleted, onPaymentFailed, onReady, }, ref) => {
+    const { t } = useTranslation();
+    const { apiService } = useTagadaContext();
+    const whopRef = useCheckoutEmbedControls();
+    const isWhopPaymentSubmitted = useRef(false);
+    const orderIdRef = useRef(undefined);
+    const [planId, setPlanId] = useState(undefined);
+    const [isLoadingSession, setIsLoadingSession] = useState(true);
+    const [isPaymentLoading, setIsPaymentLoading] = useState(false);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const isSessionInitiated = useRef(false);
+    // Initialize Whop session to get planId
+    const initiateWhopSession = async () => {
+        setIsLoadingSession(true);
+        try {
+            const data = await apiService.fetch(`/api/v1/checkout-sessions/${checkoutSessionId}/whop-payment`, {
+                method: 'POST',
+                body: JSON.stringify({ checkoutSessionId, storeId }),
+                headers: { 'Content-Type': 'application/json' },
+            });
+            if (data?.planId) {
+                setPlanId(data.planId);
+            }
+        }
+        catch (err) {
+            console.error('Failed to initialize Whop session:', err);
+            setError('Failed to initialize checkout. Please try again.');
+        }
+        finally {
+            setIsLoadingSession(false);
+        }
+    };
+    useEffect(() => {
+        if (!checkoutSessionId || !storeId || isSessionInitiated.current)
+            return;
+        isSessionInitiated.current = true;
+        initiateWhopSession();
+    }, [checkoutSessionId, storeId]);
+    // Re-initiate Whop session when order summary changes (items added/removed, coupons, etc.)
+    useEffect(() => {
+        if (!checkoutSessionId || !orderItemsCount || !planId)
+            return;
+        console.log('Regenerating Whop plan due to order changes...');
+        isEmbedReady.current = false;
+        initiateWhopSession();
+    }, [orderItemsCount, orderTotalAmount]);
+    // Sync address/email to the Whop embed
+    const isEmbedReady = useRef(false);
+    const syncAddressAndEmail = () => {
+        if (!whopRef.current)
+            return;
+        if (shippingAddress) {
+            const address = {
+                name: `${shippingAddress.firstName || ''} ${shippingAddress.lastName || ''}`.trim(),
+                country: shippingAddress.country || '',
+                line1: shippingAddress.address1 || '',
+                city: shippingAddress.city || '',
+                state: shippingAddress.state || '',
+                postalCode: shippingAddress.postal || '',
+            };
+            if (typeof whopRef.current.setAddress === 'function') {
+                try {
+                    whopRef.current.setAddress(address);
+                }
+                catch {
+                    // Whop embed may not be ready yet
+                }
+            }
+        }
+        if (customerEmail && typeof whopRef.current.setEmail === 'function') {
+            try {
+                whopRef.current.setEmail(customerEmail);
+            }
+            catch {
+                // Whop embed may not be ready yet
+            }
+        }
+    };
+    // Re-sync when address/email props change after embed is ready
+    useEffect(() => {
+        if (!isEmbedReady.current)
+            return;
+        syncAddressAndEmail();
+    }, [shippingAddress, customerEmail]);
+    // Payment polling
+    const { startPolling, isPolling } = useWhopPaymentPolling({
+        apiService,
+        checkoutSessionId,
+        maxAttempts: 60,
+        intervalMs: 2000,
+        onMaxAttemptsReached: () => {
+            isWhopPaymentSubmitted.current = false;
+            setIsPaymentLoading(false);
+            setError('Payment verification timeout. Please check your email for order confirmation.');
+            onPaymentFailed?.('Payment verification timeout.');
+        },
+        onSuccess: (payment) => {
+            isWhopPaymentSubmitted.current = false;
+            setIsPaymentLoading(false);
+            onPaymentCompleted?.(payment);
+        },
+        onError: (err) => {
+            isWhopPaymentSubmitted.current = false;
+            setIsPaymentLoading(false);
+            setError('Unable to verify payment. Please check your email for order confirmation.');
+            onPaymentFailed?.(err.message);
+        },
+    });
+    // Submit payment handler - called from parent via ref
+    const handleWhopPayment = async () => {
+        if (isWhopPaymentSubmitted.current) {
+            console.warn('Whop payment already submitted.');
+            return;
+        }
+        if (!whopRef.current) {
+            console.error('Whop is not available. Please refresh the page.');
+            setError('Whop checkout is not available. Please refresh the page.');
+            onPaymentFailed?.('Whop checkout is not available.');
+            return;
+        }
+        isWhopPaymentSubmitted.current = true;
+        setError(null);
+        try {
+            if (!planId) {
+                isWhopPaymentSubmitted.current = false;
+                setError('No plan available for payment.');
+                onPaymentFailed?.('No plan available for payment.');
+                return;
+            }
+            const result = await apiService.fetch(`/api/v1/checkout-sessions/${checkoutSessionId}/whop-prepare-order`, {
+                method: 'POST',
+                body: JSON.stringify({ checkoutSessionId, storeId, planId }),
+                headers: { 'Content-Type': 'application/json' },
+            });
+            if (!result) {
+                isWhopPaymentSubmitted.current = false;
+                setError('Failed to prepare order.');
+                onPaymentFailed?.('Failed to prepare order.');
+                return;
+            }
+            orderIdRef.current = result.orderId;
+            whopRef.current.submit();
+        }
+        catch (err) {
+            console.error('Error preparing Whop order:', err);
+            isWhopPaymentSubmitted.current = false;
+            setError(err?.message || 'Failed to process payment.');
+            onPaymentFailed?.(err?.message || 'Failed to process payment.');
+        }
+    };
+    // Whop onComplete callback
+    const handleWhopPaymentCompleted = async (receiptId) => {
+        isWhopPaymentSubmitted.current = false;
+        if (!receiptId) {
+            setError('No receipt ID received from Whop.');
+            onPaymentFailed?.('No receipt ID received from Whop.');
+            return;
+        }
+        if (!orderIdRef.current) {
+            setError('No order ID found.');
+            onPaymentFailed?.('No order ID found.');
+            return;
+        }
+        // Update order with latest checkout session data
+        try {
+            const updatedOrder = await apiService.fetch(`/api/v1/checkout-sessions/${checkoutSessionId}/update-order`, {
+                method: 'POST',
+                body: JSON.stringify({ checkoutSessionId, orderId: orderIdRef.current }),
+                headers: { 'Content-Type': 'application/json' },
+            });
+            if (!updatedOrder?.id) {
+                setError('Error updating order.');
+                onPaymentFailed?.('Error updating order.');
+                return;
+            }
+            setIsPaymentLoading(true);
+            startPolling(receiptId, updatedOrder.id);
+        }
+        catch (err) {
+            console.error('Error updating order:', err);
+            setError('Error finalizing order.');
+            onPaymentFailed?.('Error finalizing order.');
+        }
+    };
+    // Expose submit method to parent
+    useImperativeHandle(ref, () => ({
+        submit: handleWhopPayment,
+    }));
+    if (isPaymentLoading || isLoadingSession) {
+        return (_jsx("div", { className: "rounded-lg border border-[var(--border-color)] bg-[var(--background-color)] p-6", children: _jsxs("div", { className: "py-8 text-center", children: [_jsx("div", { className: "mx-auto h-8 w-8 animate-spin rounded-full border-4 border-gray-300 border-t-[var(--primary-color)]" }), _jsx("p", { className: "mt-4 text-sm text-[var(--text-secondary-color)]", children: planId ? 'Updating checkout...' : 'Initializing checkout...' })] }) }));
+    }
+    if (!planId) {
+        return (_jsx("div", { className: "rounded-lg border border-[var(--border-color)] bg-[var(--background-color)] p-6", children: _jsx("div", { className: "py-8 text-center", children: _jsx("p", { className: "text-sm text-red-600", children: "Failed to initialize checkout. Please try again." }) }) }));
+    }
+    return (_jsxs(_Fragment, { children: [loading && (_jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50", children: _jsx("div", { className: "rounded-lg bg-white p-8 shadow-xl", children: _jsxs("div", { className: "flex flex-col items-center", children: [_jsx("div", { className: "h-8 w-8 animate-spin rounded-full border-4 border-gray-300 border-t-[var(--primary-color)]" }), _jsx("p", { className: "mt-4 text-base font-medium text-gray-900", children: "Payment in progress" })] }) }) })), _jsxs("div", { className: "rounded-lg border border-[var(--border-color)] bg-[var(--background-color)]", children: [_jsx(WhopCheckoutEmbed, { planId: planId, hidePrice: true, ref: whopRef, hideEmail: true, theme: "light", prefill: {
+                            email: customerEmail || '',
+                            address: shippingAddress
+                                ? {
+                                    name: `${shippingAddress.firstName || ''} ${shippingAddress.lastName || ''}`.trim(),
+                                    country: shippingAddress.country || '',
+                                    line1: shippingAddress.address1 || '',
+                                    city: shippingAddress.city || '',
+                                    state: shippingAddress.state || '',
+                                    postalCode: shippingAddress.postal || '',
+                                }
+                                : undefined,
+                        }, hideAddressForm: true, skipRedirect: true, onStateChange: (state) => {
+                            setError(null);
+                            if (state === 'ready') {
+                                isEmbedReady.current = true;
+                                syncAddressAndEmail();
+                                onReady?.();
+                                if (isWhopPaymentSubmitted.current) {
+                                    isWhopPaymentSubmitted.current = false;
+                                    onPaymentFailed?.('Payment was not completed.');
+                                }
+                            }
+                            if (state === 'loading') {
+                                setLoading(true);
+                            }
+                            else {
+                                setLoading(false);
+                            }
+                        }, onComplete: (_planId, receiptId) => handleWhopPaymentCompleted(receiptId), onAddressValidationError: (err) => {
+                            setError(err.error_message);
+                            isWhopPaymentSubmitted.current = false;
+                            onPaymentFailed?.(err.error_message);
+                        }, hideSubmitButton: true }, planId), error && (_jsx("div", { className: "border-t border-[var(--border-color)] p-4", children: _jsx("div", { className: "rounded-md bg-red-50 p-3", children: _jsx("p", { className: "text-sm text-red-800", children: error }) }) }))] })] }));
+}));
+WhopCheckout.displayName = 'WhopCheckout';

package/dist/v2/react/hooks/__examples__/FunnelContextExample.js

@@ -51,5 +51,5 @@ export function SimpleContextExample() {
     // Access data from previous steps
     const order = funnel.context?.resources?.order;
     const customer = funnel.context?.resources?.customer;
-    return (_jsxs("div", { children: [_jsxs("h1", { children: ["Order ", order?.id] }), _jsxs("p", { children: ["Customer: ", customer?.email] }), _jsxs("p", { children: ["Amount: $", ((order?.amount || 0) / 100).toFixed(2)] })] }));
+    return (_jsxs("div", { children: [_jsxs("h1", { children: ["Order ", order?.id] }), _jsxs("p", { children: ["Customer: ", String(customer?.email ?? '')] }), _jsxs("p", { children: ["Amount: $", (Number(order?.amount || 0) / 100).toFixed(2)] })] }));
 }

package/dist/v2/react/hooks/payment-actions/useAirwallexRadarAction.d.ts

@@ -0,0 +1,14 @@
+import type { Payment, PaymentOptions } from '../../../core/resources/payments';
+import type { PaymentsResource } from '../../../core/resources/payments';
+import type { UsePaymentOptions } from '../usePaymentQuery';
+interface UseAirwallexRadarActionParams {
+    paymentsResource: PaymentsResource;
+    startPolling: any;
+    setError: (error: string | null) => void;
+    setIsLoading: (loading: boolean) => void;
+    hookOptionsRef: React.MutableRefObject<UsePaymentOptions | undefined>;
+}
+export declare function useAirwallexRadarAction({ paymentsResource, startPolling, setError, setIsLoading, hookOptionsRef, }: UseAirwallexRadarActionParams): {
+    handleAirwallexRadar: (payment: Payment, actionData: any, options: PaymentOptions | undefined, handlePaymentAction: any) => Promise<void>;
+};
+export {};

package/dist/v2/react/hooks/payment-actions/useAirwallexRadarAction.js

@@ -0,0 +1,181 @@
+/**
+ * Hook for handling Airwallex fraud detection
+ */
+import { useCallback } from 'react';
+export function useAirwallexRadarAction({ paymentsResource, startPolling, setError, setIsLoading, hookOptionsRef, }) {
+    const handleAirwallexRadar = useCallback(async (payment, actionData, options = {}, handlePaymentAction) => {
+        // Handle Airwallex fraud detection - collect device fingerprint
+        const isTest = actionData.metadata?.isTest || false;
+        const orderId = payment.order?.id;
+        const checkoutSessionId = payment.order?.checkoutSessionId;
+        if (!orderId || !checkoutSessionId) {
+            console.error('Airwallex radar: missing order or checkoutSessionId');
+            setError('Missing order information for fraud detection');
+            setIsLoading(false);
+            options.onFailure?.('Missing order information for fraud detection');
+            options.onPaymentFailed?.({
+                code: 'AIRWALLEX_RADAR_MISSING_ORDER',
+                message: 'Missing order information for fraud detection',
+                payment,
+            });
+            return;
+        }
+        try {
+            // Generate a unique session ID for Airwallex device fingerprinting
+            const generateAirwallexSessionId = () => {
+                return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+                    const r = (Math.random() * 16) | 0;
+                    const v = c === 'x' ? r : (r & 0x3) | 0x8;
+                    return v.toString(16);
+                });
+            };
+            const sessionId = generateAirwallexSessionId();
+            // Load Airwallex fraud API script if not already loaded
+            const existingScript = document.getElementById('airwallex-fraud-api');
+            if (!existingScript) {
+                const script = document.createElement('script');
+                script.type = 'text/javascript';
+                script.async = true;
+                script.id = 'airwallex-fraud-api';
+                script.setAttribute('data-order-session-id', sessionId);
+                // Use demo URL for testing, production URL for live
+                const baseUrl = isTest ? 'https://static-demo.airwallex.com' : 'https://static.airwallex.com';
+                script.src = `${baseUrl}/webapp/fraud/device-fingerprint/index.js`;
+                // Wait for script to load
+                await new Promise((resolve, reject) => {
+                    script.onload = () => {
+                        console.log('Airwallex fraud API script loaded successfully');
+                        resolve();
+                    };
+                    script.onerror = () => {
+                        reject(new Error('Failed to load Airwallex fraud API script'));
+                    };
+                    // Append script to body
+                    document.body.appendChild(script);
+                });
+            }
+            else {
+                // Update existing script with new session ID
+                existingScript.setAttribute('data-order-session-id', sessionId);
+                console.log('Updated existing Airwallex script with new session ID');
+            }
+            console.log('Airwallex device fingerprint session created:', sessionId);
+            // Save radar session to database
+            await paymentsResource.saveRadarSession({
+                checkoutSessionId,
+                orderId,
+                airwallexRadarSessionId: sessionId,
+            });
+            console.log('Airwallex radar session saved to database');
+            // Resume payment by calling completePaymentAfterAction
+            const resumedPayment = await paymentsResource.completePaymentAfterAction(payment.id);
+            console.log('Payment resumed after Airwallex radar:', resumedPayment);
+            console.log('📊 [usePayment] Resumed payment details:', {
+                status: resumedPayment.status,
+                requireAction: resumedPayment.requireAction,
+                hasRequireActionData: !!resumedPayment.requireActionData,
+                error: resumedPayment.error,
+            });
+            // Handle the resumed payment response
+            // IMPORTANT: Check for declined/failed status FIRST, before checking requireAction
+            // This is because a failed 3DS can return with status=declined but still have requireAction set
+            if (resumedPayment.status === 'declined' || resumedPayment.status === 'failed') {
+                // Payment declined or failed - extract error message from response
+                const errorMsg = resumedPayment.error?.message
+                    || resumedPayment.error?.processorMessage
+                    || 'Payment declined';
+                console.error('❌ [usePayment] Payment declined after Airwallex radar:', errorMsg);
+                setError(errorMsg);
+                setIsLoading(false);
+                options.onFailure?.(errorMsg);
+                options.onPaymentFailed?.({
+                    code: resumedPayment.error?.code || 'PAYMENT_DECLINED',
+                    message: errorMsg,
+                    payment: resumedPayment,
+                });
+                // Hook-level callback (universal handler)
+                if (hookOptionsRef.current?.onPaymentFailed) {
+                    hookOptionsRef.current.onPaymentFailed(errorMsg, {
+                        isRedirectReturn: false,
+                    });
+                }
+            }
+            else if (resumedPayment.status === 'succeeded') {
+                // Payment succeeded
+                setIsLoading(false);
+                const response = {
+                    paymentId: resumedPayment.id,
+                    payment: resumedPayment,
+                    order: resumedPayment.order,
+                };
+                // Hook-level callback (universal handler)
+                if (hookOptionsRef.current?.onPaymentCompleted) {
+                    await hookOptionsRef.current.onPaymentCompleted(resumedPayment, {
+                        isRedirectReturn: false,
+                        order: response.order,
+                    });
+                }
+                options.onSuccess?.(response);
+                options.onPaymentSuccess?.(response);
+            }
+            else if (resumedPayment.requireAction !== 'none' && resumedPayment.requireActionData) {
+                // Payment requires another action (e.g., 3DS)
+                await handlePaymentAction(resumedPayment, options);
+            }
+            else {
+                // Start polling for final status
+                startPolling(resumedPayment.id, {
+                    onRequireAction: (updatedPayment) => {
+                        void handlePaymentAction(updatedPayment, options);
+                    },
+                    onSuccess: async (successPayment) => {
+                        setIsLoading(false);
+                        const response = {
+                            paymentId: successPayment.id,
+                            payment: successPayment,
+                            order: successPayment.order,
+                        };
+                        // Hook-level callback (universal handler)
+                        if (hookOptionsRef.current?.onPaymentCompleted) {
+                            await hookOptionsRef.current.onPaymentCompleted(successPayment, {
+                                isRedirectReturn: false,
+                                order: response.order,
+                            });
+                        }
+                        options.onSuccess?.(response);
+                        options.onPaymentSuccess?.(response);
+                    },
+                    onFailure: async (errorMsg) => {
+                        setError(errorMsg);
+                        setIsLoading(false);
+                        // Hook-level callback (universal handler)
+                        if (hookOptionsRef.current?.onPaymentFailed) {
+                            await hookOptionsRef.current.onPaymentFailed(errorMsg, {
+                                isRedirectReturn: false,
+                            });
+                        }
+                        options.onFailure?.(errorMsg);
+                        options.onPaymentFailed?.({
+                            code: 'PAYMENT_FAILED',
+                            message: errorMsg,
+                            payment,
+                        });
+                    },
+                });
+            }
+        }
+        catch (radarError) {
+            const errorMsg = radarError instanceof Error ? radarError.message : 'Airwallex fraud detection failed';
+            console.error('Airwallex radar error:', radarError);
+            setError(errorMsg);
+            setIsLoading(false);
+            options.onFailure?.(errorMsg);
+            options.onPaymentFailed?.({
+                code: 'AIRWALLEX_RADAR_FAILED',
+                message: errorMsg,
+                payment,
+            });
+        }
+    }, [paymentsResource, startPolling, setError, setIsLoading, hookOptionsRef]);
+    return { handleAirwallexRadar };
+}

package/dist/v2/react/hooks/payment-actions/useErrorAction.d.ts

@@ -0,0 +1,9 @@
+import type { Payment, PaymentOptions } from '../../../core/resources/payments';
+interface UseErrorActionParams {
+    setError: (error: string | null) => void;
+    setIsLoading: (loading: boolean) => void;
+}
+export declare function useErrorAction({ setError, setIsLoading }: UseErrorActionParams): {
+    handleError: (payment: Payment, actionData: any, options?: PaymentOptions) => Promise<void>;
+};
+export {};

package/dist/v2/react/hooks/payment-actions/useErrorAction.js

@@ -0,0 +1,21 @@
+/**
+ * Hook for handling error actions
+ */
+import { useCallback } from 'react';
+export function useErrorAction({ setError, setIsLoading }) {
+    const handleError = useCallback(async (payment, actionData, options = {}) => {
+        const errorMsg = actionData.message || 'Payment processing failed';
+        const errorCode = actionData.errorCode || 'PAYMENT_FAILED';
+        setError(errorMsg);
+        setIsLoading(false);
+        // Legacy callback (backwards compatibility)
+        options.onFailure?.(errorMsg);
+        // Funnel-aligned callback (recommended)
+        options.onPaymentFailed?.({
+            code: errorCode,
+            message: errorMsg,
+            payment,
+        });
+    }, [setError, setIsLoading]);
+    return { handleError };
+}

package/dist/v2/react/hooks/payment-actions/useFinixRadarAction.d.ts

@@ -0,0 +1,14 @@
+import type { Payment, PaymentOptions } from '../../../core/resources/payments';
+import type { PaymentsResource } from '../../../core/resources/payments';
+import type { UsePaymentOptions } from '../usePaymentQuery';
+interface UseFinixRadarActionParams {
+    paymentsResource: PaymentsResource;
+    startPolling: any;
+    setError: (error: string | null) => void;
+    setIsLoading: (loading: boolean) => void;
+    hookOptionsRef: React.MutableRefObject<UsePaymentOptions | undefined>;
+}
+export declare function useFinixRadarAction({ paymentsResource, startPolling, setError, setIsLoading, hookOptionsRef, }: UseFinixRadarActionParams): {
+    handleFinixRadar: (payment: Payment, actionData: any, options: PaymentOptions | undefined, handlePaymentAction: any) => Promise<void>;
+};
+export {};