3DS payments

import { PxpCheckout } from '@pxpio/web-components-sdk';

const pxpSdk = PxpCheckout.initialize({
  environment: 'test', // or 'live' for production
  session: sessionData, // Get from your backend
  ownerId: 'your-owner-id',
  ownerType: 'MerchantGroup',
  kountDisabled: false, // OPTIONAL: Set to true to disable Kount fraud detection
  transactionData: {
    currency: 'GBP',
    amount: 299.99,
    merchantTransactionId: crypto.randomUUID(),
    merchantTransactionDate: () => new Date().toISOString(),
    entryType: 'Ecom',
    intent: {
      card: 'Authorisation'
    }
  }
});

const googlePayButton = pxpSdk.create('google-pay-button', {
  paymentDataRequest: {
    allowedPaymentMethods: [{
      type: 'CARD',
      parameters: {
        allowedCardNetworks: ['VISA', 'MASTERCARD', 'AMEX'],
        allowedAuthMethods: ['CRYPTOGRAM_3DS'] // Prefer 3DS cryptogram
      }
      // Note: tokenizationSpecification is automatically configured by the SDK from session data
    }],
    transactionInfo: {
      currencyCode: 'GBP',
      totalPriceStatus: 'FINAL',
      totalPrice: '299.99'
    }
  },
  
  // OPTIONAL: Use Unity authentication strategy
  useUnityAuthenticationStrategy: true,
  
  // REQUIRED: Provide 3DS configuration
  onPreInitiateAuthentication: () => {
    return {
      providerId: 'your_3ds_provider_id', // optional
      requestorAuthenticationIndicator: '01', // Payment transaction
      timeout: 300 // 5 minutes
    };
  },
  
  // OPTIONAL: Handle the pre-initiation result
  onPostInitiateAuthentication: async (data) => {
    console.log('3DS pre-initiation completed. Authentication ID:', data.authenticationId);
    
    // Retrieve initiate authentication result from backend
    const authResult = await fetchAuthenticationResultFromBackend(data.authenticationId);
    
    // Evaluate the result to update authentication decision
    await evaluateAuthenticationAndUpdateSession(authResult);
  },
  
  // REQUIRED: Configure main authentication
  onPreAuthentication: async () => {
    // Get authentication decision evaluated after onPostInitiateAuthentication
    const decision = await getAuthenticationDecision();
    
    if (!decision) {
      // Not proceeding with authentication
      return null;
    }
    
    return {
      merchantCountryNumericCode: '826', // United Kingdom
      merchantLegalName: 'Your Store Limited',
      challengeWindowSize: 5, // Fullscreen
      requestorChallengeIndicator: decision.challengeIndicator || '01',
      timeout: decision.timeout || 300
    };
  },
  
  // OPTIONAL: Handle the authentication result
  onPostAuthentication: async (data) => {
    console.log('3DS authentication completed. Authentication ID:', data.authenticationId);
    
    // Send authenticationId to backend to retrieve authentication result
    const authResult = await fetchAuthenticationResultFromBackend(data.authenticationId);
    
    // Evaluate authentication result to update authorisation decision
    await evaluateAuthenticationAndUpdateAuthorization(authResult);
  },
  
  // REQUIRED: Final transaction review before authorisation
  onPreAuthorisation: async (data) => {
    console.log('Processing 3DS Google Pay payment');
    console.log('Gateway Token ID:', data.gatewayTokenId);
    
    // Retrieve token details and make authorisation decision
    const transactionDecision = await getAuthorisationDecision(data.gatewayTokenId);
    
    if (!transactionDecision) {
      // Not proceeding
      return null;
    }
    
    // Add any additional data
    return {
      riskScreeningData: {
        performRiskScreening: true,
        customData: {
          processingType: '3ds',
          customerType: 'returning'
        }
      }
    };
  },
  
  // REQUIRED: Handle the final result
  onPostAuthorisation: (result, paymentData) => {
    console.log('Payment result:', result);
    
    if (result && 'merchantTransactionId' in result) {
      // Success - MerchantSubmitResult
      console.log('Payment successful with 3DS!');
      console.log('Transaction ID:', result.merchantTransactionId);
      console.log('System Transaction ID:', result.systemTransactionId);
      
      // Redirect to success page
      window.location.href = '/payment-success?txn=' + result.merchantTransactionId;
    } else if (result && 'errorCode' in result) {
      // Failure - FailedSubmitResult
      console.error('Payment declined:', result.errorReason);
      showError('Payment declined. Please try another payment method.');
    }
  },
  
  // OPTIONAL: Handle errors
  onError: (error) => {
    console.error('Payment error:', error);
    showError('An error occurred. Please try again.');
  },
  
  // OPTIONAL: Handle cancellation
  onCancel: () => {
    console.log('Payment cancelled by user');
    showMessage('Payment cancelled');
  }
});

const googlePayButton = pxpSdk.create('google-pay-button', {
  // ... basic configuration
  
  onPreInitiateAuthentication: () => {
    const amount = getTransactionAmount();
    
    if (amount > 100) {
      return {
        providerId: 'your_provider',
        requestorAuthenticationIndicator: '01',
        timeout: 300
      };
    }
    
    // Return null to skip 3DS for low-value transactions
    return null;
  }
});

function selectChallengeIndicator(transaction) {
  // High-value transactions
  if (transaction.amount > 500) {
    return '04'; // Mandate challenge
  }
  
  // Subscription first payment
  if (transaction.type === 'subscription' && transaction.isFirstPayment) {
    return '03'; // Challenge requested (merchant preference)
  }
  
  // Trusted returning customers
  if (transaction.customerTrust === 'HIGH') {
    return '02'; // No challenge requested
  }
  
  // Default
  return '01'; // No preference
}

const googlePayButton = pxpSdk.create('google-pay-button', {
  // ... basic configuration
  
  onPreAuthentication: async () => {
    const decision = await getAuthenticationDecision();
    
    if (!decision) {
      return null;
    }
    
    const transaction = getCurrentTransaction();
    const challengeIndicator = selectChallengeIndicator(transaction);
    
    return {
      merchantCountryNumericCode: '826',
      merchantLegalName: 'Your Store Ltd',
      challengeWindowSize: 5,
      requestorChallengeIndicator: challengeIndicator
    };
  }
});

const googlePayButton = pxpSdk.create('google-pay-button', {
  // ... other configuration
  
  onPreRetrySoftDecline: (result) => {
    console.log('Soft decline detected, retrying with 3DS challenge');
    
    // Track soft decline
    trackEvent('payment-soft-decline', {
      transactionId: result.merchantTransactionId,
      reason: result.errorReason
    });
    
    // Retry with forced 3DS challenge
    return {
      retry: true,
      updatedConfigs: {
        onPreInitiateAuthentication: () => ({
          providerId: 'pxpfinancial',
          timeout: 12
        }),
        onPreAuthentication: async () => ({
          merchantCountryNumericCode: '826',
          merchantLegalName: 'Your Store Ltd',
          challengeWindowSize: 5,
          requestorChallengeIndicator: '04' // Force challenge on retry
        })
      }
    };
  }
});

const googlePayButton = pxpSdk.create('google-pay-button', {
  // ... basic configuration
  
  onPostAuthentication: async (data) => {
    // Retrieve authentication result from backend
    const authResult = await fetchAuthenticationResultFromBackend(data.authenticationId);
    
    // Handle authentication failures
    if (authResult.state === 'AuthenticationFailed') {
      console.log('Authentication failed:', authResult.errorReason);
      showError('Card authentication failed');
      // Don't proceed to authorisation - update session accordingly
      await updateSessionDecision(data.authenticationId, { proceed: false });
      return;
    }

    console.log('Authentication successful, proceeding to payment');
    // Update authorization decision
    await evaluateAuthenticationAndUpdateAuthorization(authResult);
  },
  
  onError: (error) => {
    console.error('Payment error:', error);
    
    // Handle specific 3DS error types
    if (error.code === 'AUTHENTICATION_FAILED') {
      showError('Card verification failed. Please try again.');
    } else if (error.code === 'AUTHENTICATION_TIMEOUT') {
      showError('Verification timed out. Please try again.');
    } else if (error.code === 'AUTHENTICATION_REJECTED') {
      showError('Payment was rejected during verification.');
    } else if (error.code === 'BUYER_ACCOUNT_ERROR') {
      showError('There was an issue with your Google Pay account. Please try another payment method.');
    } else if (error.code === 'MERCHANT_CONFIGURATION_ERROR') {
      showError('Payment system configuration error. Please contact support.');
      logError('Google Pay merchant configuration error', error);
    } else if (error.code === 'NETWORK_ERROR') {
      showError('Connection failed. Please check your internet and try again.');
    } else {
      showError('Payment failed. Please try again or use a different payment method.');
    }
  },
  
  onPostAuthorisation: (result, paymentData) => {
    if (result && 'merchantTransactionId' in result) {
      // Success - MerchantSubmitResult
      handlePaymentSuccess(result, paymentData);
    } else if (result && 'errorCode' in result) {
      // Failure - FailedSubmitResult
      handlePaymentFailure(result);
    }
  }
});

function handlePaymentSuccess(result, paymentData) {
  console.log('✅ Payment successful with 3DS');
  console.log('Transaction ID:', result.merchantTransactionId);
  console.log('System Transaction ID:', result.systemTransactionId);
  
  // Store transaction details
  storeTransactionRecord({
    transactionId: result.merchantTransactionId,
    systemTransactionId: result.systemTransactionId,
    processingType: '3ds',
    paymentMethod: 'google-pay',
    timestamp: new Date().toISOString()
  });
  
  // Redirect to success page
  window.location.href = '/payment-success?txn=' + result.merchantTransactionId;
}

function handlePaymentFailure(result) {
  console.error('❌ Payment failed');
  console.error('Error code:', result.errorCode);
  console.error('Error reason:', result.errorReason);
  console.error('Correlation ID:', result.correlationId);
  
  // Map error codes to user-friendly messages
  const errorMessages = {
    'INSUFFICIENT_FUNDS': 'Insufficient funds. Please try a different payment method.',
    'CARD_DECLINED': 'Payment declined by your bank. Please try another card.',
    'EXPIRED_CARD': 'This card has expired. Please use a different payment method.',
    'INVALID_CARD': 'Invalid card details. Please try another payment method.',
    'FRAUD_DETECTED': 'Payment could not be processed. Please contact your bank.',
    'PROCESSING_ERROR': 'Payment processing error. Please try again.',
    'LIMIT_EXCEEDED': 'Transaction exceeds your card limit. Try a smaller amount.',
    'DO_NOT_HONOR': 'Payment declined by your bank. Please try a different payment method.'
  };
  
  const userMessage = errorMessages[result.errorCode] || 
    'Payment could not be completed. Please try a different payment method.';
  
  showError(userMessage);
  
  // Log for analysis
  logPaymentDecline({
    errorCode: result.errorCode,
    errorReason: result.errorReason,
    correlationId: result.correlationId,
    httpStatusCode: result.httpStatusCode,
    timestamp: new Date().toISOString()
  });
  
  // Offer alternative payment methods
  showAlternativePaymentOptions();
}

import { useEffect, useState } from 'react';

function GooglePay3DSCheckout() {
  const [googlePayButton, setGooglePayButton] = useState(null);
  const [isProcessing, setIsProcessing] = useState(false);
  const [error, setError] = useState(null);
  
  useEffect(() => {
    // Initialise SDK
    const pxpSdk = PxpCheckout.initialize({
      environment: 'test',
      session: sessionData, // Get from your backend
      ownerId: 'your-owner-id',
      ownerType: 'MerchantGroup',
      kountDisabled: false, // OPTIONAL: Set to true to disable Kount fraud detection
      transactionData: {
        currency: 'GBP',
        amount: 299.99,
        merchantTransactionId: crypto.randomUUID(),
        merchantTransactionDate: () => new Date().toISOString(),
        entryType: 'Ecom',
        intent: {
          card: 'Authorisation'
        }
      }
    });
    
    // Create Google Pay button with 3DS
    const button = pxpSdk.create('google-pay-button', {
      paymentDataRequest: {
        allowedPaymentMethods: [{
          type: 'CARD',
          parameters: {
            allowedCardNetworks: ['VISA', 'MASTERCARD', 'AMEX'],
            allowedAuthMethods: ['CRYPTOGRAM_3DS']
          }
          // Note: tokenizationSpecification is automatically configured by the SDK from session data
        }],
        transactionInfo: {
          currencyCode: 'GBP',
          countryCode: 'GB',
          totalPriceStatus: 'FINAL',
          totalPrice: '299.99'
        }
      },
      
      // Use Unity authentication strategy
      useUnityAuthenticationStrategy: true,
      
      // Step 1: Set up 3DS
      onPreInitiateAuthentication: () => {
        console.log('🔐 Initiating 3DS authentication');
        return {
          providerId: process.env.REACT_APP_THREEDS_PROVIDER_ID,
          requestorAuthenticationIndicator: '01',
          timeout: 300
        };
      },
      
      // Step 2: Handle pre-initiation result
      onPostInitiateAuthentication: async (data) => {
        console.log('📋 Pre-authentication check complete:', data.authenticationId);
        
        const authResult = await fetchAuthenticationResultFromBackend(data.authenticationId);
        await evaluateAuthenticationAndUpdateSession(authResult);
        
        if (authResult.scaMandated) {
          console.log('SCA mandated - full authentication required');
        }
      },
      
      // Step 3: Configure authentication
      onPreAuthentication: async () => {
        console.log('🔍 Configuring full 3DS authentication');
        
        const decision = await getAuthenticationDecision();
        
        if (!decision) {
          return null; // Skip authentication
        }
        
        // Assess transaction risk
        const amount = getTransactionAmount();
        const customerHistory = await getCustomerHistory();
        const isHighRisk = amount > 500 || customerHistory.chargebacks > 0;
        
        let challengeIndicator = '01'; // No preference
        if (isHighRisk) {
          challengeIndicator = '04'; // Mandate challenge
        } else if (amount < 30 && customerHistory.successfulTransactions > 10) {
          challengeIndicator = '02'; // No challenge requested
        }
        
        return {
          merchantCountryNumericCode: '826',
          merchantLegalName: 'Your Store Limited',
          challengeWindowSize: 5,
          requestorChallengeIndicator: challengeIndicator
        };
      },
      
      // Step 4: Handle authentication result
      onPostAuthentication: async (data) => {
        console.log('✅ 3DS authentication completed:', data.authenticationId);
        
        const authResult = await fetchAuthenticationResultFromBackend(data.authenticationId);
        
        if (authResult.state === 'AuthenticationFailed') {
          setError('Card verification failed. Please try again.');
          return;
        }
        
        await evaluateAuthenticationAndUpdateAuthorization(authResult);
      },
      
      // Step 5: Final authorisation
      onPreAuthorisation: async (data) => {
        console.log('💳 Processing payment with 3DS data');
        
        const transactionDecision = await getAuthorisationDecision(data.gatewayTokenId);
        
        if (!transactionDecision) {
          return null;
        }
        
        return {
          riskScreeningData: {
            performRiskScreening: true,
            customData: {
              threeDsApplied: true,
              paymentMethod: 'google-pay'
            }
          }
        };
      },
      
      // Step 6: Handle success/failure
      onPostAuthorisation: (result, paymentData) => {
        setIsProcessing(false);
        
        if (result && 'merchantTransactionId' in result) {
          console.log('✅ Payment authorised with 3DS');
          window.location.href = '/payment-success?txn=' + result.merchantTransactionId;
        } else if (result && 'errorCode' in result) {
          console.error('❌ Payment declined:', result.errorReason);
          setError('Payment declined. Please try another payment method.');
        }
      },
      
      // Step 7: Error handling
      onError: (error) => {
        console.error('Error during 3DS flow:', error);
        setIsProcessing(false);
        
        if (error.code === 'AUTHENTICATION_FAILED') {
          setError('Card verification failed. Please try again.');
        } else if (error.code === 'AUTHENTICATION_TIMEOUT') {
          setError('Verification timed out. Please try again.');
        } else {
          setError('An error occurred. Please try again.');
        }
      },
      
      onCancel: () => {
        console.log('Payment cancelled by user');
        setIsProcessing(false);
        setError(null);
      }
    });
    
    // Mount button
    button.mount('google-pay-button-container');
    setGooglePayButton(button);
    
    // Cleanup
    return () => {
      if (button) {
        button.unmount();
      }
    };
  }, []);
  
  return (
    <div className="checkout-container">
      <div className="order-summary">
        <h2>Order summary</h2>
        <div className="order-items">
          <div className="order-item">
            <span>Premium Product</span>
            <span>£299.99</span>
          </div>
          <div className="order-total">
            <span>Total</span>
            <span>£299.99</span>
          </div>
        </div>
      </div>
      
      <div className="payment-section">
        <h2>Pay with Google Pay (3DS Secure)</h2>
        
        {error && (
          <div className="error-message">
            {error}
          </div>
        )}
        
        <div id="google-pay-button-container"></div>
        
        {isProcessing && (
          <div className="processing-indicator">
            Processing secure payment...
          </div>
        )}
        
        <div className="payment-info">
          <p>✓ Protected by 3D Secure authentication</p>
          <p>✓ Fast and secure checkout with Google Pay</p>
          <p>✓ Additional verification for your safety</p>
        </div>
      </div>
    </div>
  );
}

export default GooglePay3DSCheckout;

onPostInitiateAuthentication: async (data) => {
  console.log('3DS pre-initiation completed. Authentication ID:', data.authenticationId);
  
  // Retrieve initiate authentication result from Unity
  const authResult = await fetchAuthenticationResultFromBackend(data.authenticationId);
  
  // Check if authentication setup was successful
  if (authResult.state === 'PendingClientData') {
    console.log('Waiting for client data collection');
  }
  
  // Check if SCA (Strong Customer Authentication) is mandated
  if (authResult.scaMandated) {
    console.log('SCA is required - 3DS must complete successfully');
    showMessage('Additional verification required');
  }
  
  // Check available exemptions
  if (authResult.applicableExemptions === 'LVP') {
    console.log('Low value exemption available');
  } else if (authResult.applicableExemptions === 'TRA') {
    console.log('Transaction risk analysis exemption available');
  }
  
  // Evaluate the result to update authentication decision
  const decision = await evaluateAuthenticationAndUpdateSession(authResult);
}

onPreAuthentication: async () => {
  // Get authentication decision evaluated after onPostInitiateAuthentication
  const decision = await getAuthenticationDecision();
  
  if (!decision) {
    // Not proceeding with authentication
    console.log('Skipping authentication based on backend decision');
    return null;
  }
  
  console.log('Proceeding with authentication');
  
  // Check if SCA is mandated to adjust challenge preference
  let challengeIndicator = '01'; // No preference
  
  if (decision.scaMandated) {
    challengeIndicator = '04';
    console.log('SCA mandated - requesting challenge');
  } else if (decision.applicableExemptions === 'LVP') {
    challengeIndicator = '10'; 
    console.log('Low value exemption - requesting no challenge');
  } else if (decision.applicableExemptions === 'TRA') {
    challengeIndicator = '05';
    console.log('TRA exemption - requesting no challenge');
  }
  
  return {
    merchantCountryNumericCode: '826',
    merchantLegalName: 'Your Company Ltd',
    challengeWindowSize: 5,
    requestorChallengeIndicator: challengeIndicator,
    timeout: decision.scaMandated ? 600 : 300
  };
}

onPostAuthentication: async (data) => {
  console.log('3DS authentication completed. Authentication ID:', data.authenticationId);
  
  // Send authenticationId to backend to retrieve authentication result
  const authResult = await fetchAuthenticationResultFromBackend(data.authenticationId);
  
  console.log('Authentication result:', authResult);
  
  // Check transaction status
  switch (authResult.transactionStatus) {
    case 'Y':
      console.log('Authentication successful - no challenge needed');
      showMessage('Card verified successfully');
      break;
      
    case 'C':
      console.log('Challenge completed - checking result...');
      if (authResult.state === 'AuthenticationSuccessful') {
        console.log('Challenge completed successfully');
        showMessage('Verification completed');
      } else {
        console.log('Challenge failed');
        showError('Verification failed. Please try again.');
        return; // Stop payment
      }
      break;
      
    case 'N':
      console.log('Authentication failed');
      showError('Card verification failed');
      return; // Stop payment
      
    case 'R':
      console.log('Authentication rejected');
      showError('Payment was rejected by your bank');
      return; // Stop payment
  }
  
  // Evaluate authentication result to update authorisation decision
  const authorisationDecision = await evaluateAuthenticationAndUpdateAuthorization(authResult);
  
  console.log('Proceeding to final authorisation...');
}

onPreAuthorisation: async (data) => {
  console.log('Pre-authorisation for token:', data.gatewayTokenId);
  
  // Retrieve token details and make authorisation decision
  const transactionDecision = await getAuthorisationDecision(data.gatewayTokenId);
  
  if (!transactionDecision) {
    // Not proceeding
    console.log('Not proceeding with authorization');
    return null;
  }
  
  // Perform pre-payment validation
  const isHighRisk = await checkCustomerRiskProfile();
  const customerTier = await getCustomerTier();
  
  // Get billing address if AVS is enabled
  const billingAddress = await getBillingAddress();
  
  return {
    addressVerification: billingAddress ? {
      countryCode: billingAddress.countryCode,
      houseNumberOrName: billingAddress.address,
      postalCode: billingAddress.postalCode,
      city: billingAddress.city,
      state: billingAddress.state
    } : undefined,
    riskScreeningData: {
      performRiskScreening: true,
      customData: {
        customerTier: customerTier,
        orderType: 'ecommerce',
        paymentMethod: 'google-pay',
        threeDsApplied: true,
        previousTransactionCount: await getPreviousTransactionCount(),
        riskScore: isHighRisk ? 'high' : 'low'
      }
    }
  };
}

{
  initiateIntegratedSuccessAuthenticationResult: {
    status: 200,
    authenticationId: "auth_12345678-abcd-1234-efgh-123456789012",
    uniqueId: "unique_98765",
    state: "Completed",
    transactionStatus: "Y",
    electronicCommerceIndicator: "05",
    exemptionGranted: false,
    exemptionGrantedByIssuer: "79",
    threeDSecureVersion: "2.2.0",
    directoryServerTransactionId: "ds_trans_12345",
    cardholderAuthenticationVerificationValue: "jGvQIvG/5UhjAREALGYYemQLXPI=",
    acsUrl: null, 
    challengeData: null,
    stateData: {
      code: "SUCCESS",
      reason: "Authentication completed successfully"
    },
    cardholderInfo: "Additional cardholder verification completed"
  },
  transactionInitiationData: {
    psd2Data: {
      scaExemption: null
    },
    threeDSecureData: {
      threeDSecureVersion: "2.2.0",
      electronicCommerceIndicator: "05",
      cardHolderAuthenticationVerificationValue: "jGvQIvG/5UhjAREALGYYemQLXPI=",
      directoryServerTransactionId: "ds_trans_12345",
      threeDSecureTransactionStatus: "Y"
    },
    identityVerification: {
      nameVerification: true
    },
    addressVerification: {
      countryCode: "GB",
      houseNumberOrName: "123",
      postalCode: "SW1A 1AA"
    }
  },
  cardTokenData: null
}

onPostAuthorisation: (result, paymentData) => {
  console.log('3DS Google Pay payment result');
  
  if (result && 'merchantTransactionId' in result) {
    // Success - MerchantSubmitResult
    console.log('✅ Payment successful with 3DS!');
    console.log('Merchant Transaction ID:', result.merchantTransactionId);
    console.log('System Transaction ID:', result.systemTransactionId);
    
    // Store transaction details
    storeTransactionRecord({
      merchantTransactionId: result.merchantTransactionId,
      systemTransactionId: result.systemTransactionId,
      paymentMethod: 'google-pay',
      processingType: '3ds',
      liabilityShift: true,
      timestamp: new Date().toISOString()
    });
    
    // Redirect to success page
    window.location.href = `/payment-success?txn=${result.merchantTransactionId}`;
    
  } else if (result && 'errorCode' in result) {
    // Failure - FailedSubmitResult
    console.error('❌ Payment failed');
    console.error('Error code:', result.errorCode);
    console.error('Error reason:', result.errorReason);
    console.error('Correlation ID:', result.correlationId);
    
    // Handle specific error types
    handlePaymentFailure(result);
  }
}

{
  merchantTransactionId: "order-123456",
  systemTransactionId: "sys-txn-789012"
}

{
  errorCode: "AUTHENTICATION_FAILED",
  errorReason: "3DS authentication failed",
  correlationId: "corr_abc123def456",
  httpStatusCode: 402
}

onError: (error) => {
  console.error('3DS Google Pay error:', error);
  
  // Handle specific error types
  switch (error.code) {
    case 'AUTHENTICATION_FAILED':
      showError('Card verification failed. Please try again.');
      trackError('3ds-authentication-failed', error);
      break;
      
    case 'AUTHENTICATION_TIMEOUT':
      showError('Verification timed out. Please try again.');
      trackError('3ds-authentication-timeout', error);
      break;
      
    case 'AUTHENTICATION_REJECTED':
      showError('Payment was rejected during verification.');
      trackError('3ds-authentication-rejected', error);
      break;
      
    case 'BUYER_ACCOUNT_ERROR':
      showError('There was an issue with your Google Pay account. Please try another payment method.');
      trackError('google-pay-account-error', error);
      break;
      
    case 'MERCHANT_CONFIGURATION_ERROR':
      showError('Payment system configuration error. Please contact support.');
      logError('Google Pay merchant configuration error', error);
      notifySupport(error);
      break;
      
    case 'NETWORK_ERROR':
      showError('Connection failed. Please check your internet and try again.');
      enableRetry();
      break;
      
    case 'DEVELOPER_ERROR':
      console.error('Google Pay implementation error:', error.message);
      logError('Google Pay developer error', error);
      showError('Payment system error. Please try again later.');
      break;
      
    default:
      showError('Payment failed. Please try again or use a different payment method.');
      logError('Unknown 3DS Google Pay error', error);
  }
  
  // Re-enable payment form
  hideLoadingSpinner();
  enablePaymentOptions();
}

onCancel: () => {
  console.log('3DS Google Pay payment cancelled by user');
  
  // Track cancellation for analytics
  trackEvent('payment-cancelled', {
    paymentMethod: 'google-pay',
    authenticationType: '3ds',
    timestamp: new Date().toISOString()
  });
  
  // Show message to user
  showMessage('Payment cancelled. Your order is still in your basket.');
  
  // Reset UI state
  hideLoadingSpinner();
  enablePaymentOptions();
}