Events

const cardSubmit = sdk.create('card-submit', {
  onPostAuthorisation: async (data) => {
    console.log('Authorisation completed');
    console.log('Merchant Transaction ID:', data.merchantTransactionId);
    console.log('System Transaction ID:', data.systemTransactionId);
    
    // Get authorisation result from merchant backend
    const authorisationResult = await getAuthorisationResultFromGateway(data.merchantTransactionId, data.systemTransactionId);
    
    // Handle the authorisation result
    if (authorisationResult.state === 'Authorised') {
      // Payment successful
      console.log('Payment authorised successfully');
      
      // Update inventory
      updateInventory(data.merchantTransactionId);
      
      // Send confirmation email
      sendConfirmationEmail(customerEmail, data.merchantTransactionId);
      
      // Track analytics
      trackPurchase(data.merchantTransactionId, authorisationResult.correlationId);
      
      // Redirect to success page
      window.location.href = `/payment-success?txn=${data.merchantTransactionId}`;
    } else if (authorisationResult.state === 'Declined') {
      console.error('Payment declined');
      handleDeclinedPayment(authorisationResult);
    } else if (authorisationResult.state === 'Failed') {
      console.error('Payment failed');
      showErrorMessage('Payment failed. Please try again or use a different payment method.');
    } else if (authorisationResult.state === 'Pending') {
      console.log('Payment pending further processing');
      showMessage('Payment is being processed. You will receive confirmation shortly.', 'info');
    }
  }
});

const cardSubmit = sdk.create('card-submit', {
  onPreAuthorisation: async (data) => {
    console.log('Pre-authorisation for token:', data.gatewayTokenId);
    
    // Merchant can use gatewayTokenId to retrieve token details and update transaction decision on merchant BE
    const transactionDecision = await getAuthorisationDecision(data.gatewayTokenId);

    if (!transactionDecision) {
      // To not proceed
      return null;
    }
    
    // Perform pre-payment validation
    const deviceSessionId = await getKountSessionId();
    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: {
        deviceSessionId: deviceSessionId,
        performRiskScreening: true,
        customData: {
          customerTier: customerTier,
          orderType: 'ecommerce',
          previousTransactionCount: await getPreviousTransactionCount(),
          riskScore: isHighRisk ? 'high' : 'low'
        }
      }
    };
  }
});

const cardSubmit = sdk.create('card-submit', {
  onPreTokenisation: () => {
    // Check if customer consented to save card
    const saveCardConsent = document.getElementById('save-card-checkbox')?.checked;
    
    if (!saveCardConsent) {
      console.log('Customer declined to save card - skipping tokenisation');
      return false;
    }
    
    // Additional validation
    const isValidForStorage = validateCardForStorage();
    if (!isValidForStorage) {
      console.log('Card not suitable for storage - skipping tokenisation');
      return false;
    }
    
    console.log('Proceeding with card tokenisation');
    return true;
  }
});

const cardSubmit = sdk.create('card-submit', {
  onPostTokenisation: async (data) => {
    console.log('Card tokenised successfully. Token ID:', data.gatewayTokenId);
    
    // If merchant wants to evaluate the token details to decide whether to proceed with authentication/authorisation
    // Merchant BE uses the returned gatewayTokenId to get Token Details from Unity
    const tokenDetails = await fetchTokenDetailsFromBackend(data.gatewayTokenId);
    
    // Merchant BE evaluates the token details to update authentication/authorisation decision via Unity Update session API
    const decision = await evaluateTokenAndUpdateSession(tokenDetails);
    
    // Store token for future use
    await saveTokenToCustomerAccount({
      tokenId: data.gatewayTokenId,
      customerId: getCurrentCustomerId()
    });
    
    // Update UI to show saved card
    updateSavedPaymentMethodsUI(data.gatewayTokenId);
    
    // Track tokenisation event
    trackEvent('card-tokenized', {
      tokenId: data.gatewayTokenId,
      timestamp: new Date().toISOString()
    });
    
    // Show success message
    showMessage('Payment method saved successfully', 'success');
  }
});

const cardNumberComponent = sdk.create('card-number', {
  onBlur: (event) => {
    console.log('Card number field blurred:', event.target.value);
    
    // Validate card number on blur
    if (event.target.value) {
      const isValid = validateCardNumber(event.target.value);
      if (!isValid) {
        showFieldError('card-number', 'Please enter a valid card number');
      } else {
        clearFieldError('card-number');
      }
    }
    
    // Track field interaction
    trackFieldInteraction('card-number', 'blur', {
      hasValue: !!event.target.value,
      timestamp: new Date().toISOString()
    });
  }
});

const cardNumberComponent = sdk.create('card-number', {
  onCardBrandCannotRecognised: (event) => {
    console.log('Card brand could not be recognised for:', event.target.value);
    
    // Show error message for unsupported card
    showFieldError('card-number', 'This card type is not supported. Please use Visa, MasterCard, or American Express.');
    
    // Log unsupported card attempt
    trackEvent('unsupported-card-attempted', {
      cardNumberPrefix: event.target.value.substring(0, 6),
      timestamp: new Date().toISOString()
    });
    
    // Show alternative payment methods
    showAlternativePaymentMethods();
    
    // Disable submit button until valid card is entered
    disableSubmitButton();
  }
});

const cardNumberComponent = sdk.create('card-number', {
  onCardBrandDetected: (event) => {
    const cardBrand = event.detail.cardBrand;
    const isAccepted = event.detail.isCardBrandAccept;
    
    console.log(`Card brand detected: ${cardBrand.brand}`, isAccepted);
    
    // Update card brand logo
    updateCardBrandLogo(cardBrand.brand);
    
    // Check if card brand is accepted
    if (!isAccepted) {
      showFieldError('card-number', `${cardBrand.displayName} cards are not accepted. Please use a different card.`);
      disableSubmitButton();
    } else {
      clearFieldError('card-number');
      enableSubmitButton();
      
      // Show brand-specific benefits
      showCardBrandBenefits(cardBrand.brand);
    }
    
    // Apply brand-specific validation
    applyBrandSpecificValidation(cardBrand.brand);
    
    // Track card brand usage
    trackEvent('card-brand-detected', {
      brand: cardBrand.brand,
      accepted: isAccepted,
      timestamp: new Date().toISOString()
    });
  }
});

const cardNumberComponent = sdk.create('card-number', {
  onChange: (event) => {
    console.log('Card number changed:', event.target.value);
    
    // Update card brand display
    if (event.detail.cardBrand) {
      updateCardBrandDisplay(event.detail.cardBrand);
    }
    
    // Progressive validation
    if (event.target.value.length >= 4) {
      const isValid = event.detail.isValid;
      if (isValid) {
        clearFieldError('card-number');
        showFieldSuccess('card-number');
      } else {
        showFieldError('card-number', 'Please enter a valid card number');
      }
    }
    
    // Enable submit button when all fields are filled
    checkFormCompletion();
    
    // Track input progress
    trackFieldProgress('card-number', {
      length: event.target.value.length,
      isValid: event.detail.isValid,
      timestamp: new Date().toISOString()
    });
  }
});

const cardExpiryComponent = sdk.create('card-expiry-date', {
  onChange: (event) => {
    console.log('Expiry date changed:', event.target.value);
    
    // Check for near-expiry warnings
    if (event.detail.isValid) {
      const expiryDate = new Date(event.target.value);
      const now = new Date();
      const monthsUntilExpiry = (expiryDate.getFullYear() - now.getFullYear()) * 12 + 
                                (expiryDate.getMonth() - now.getMonth());
      
      if (monthsUntilExpiry <= 1) {
        showWarning('Your card expires soon. Please ensure it will be valid when your payment is processed.');
      }
    }
  }
});

const cardSubmit = sdk.create('card-submit', {
    onClick: (event) => {
        console.log('Submit button clicked');
    
    // Track the payment attempt
    trackEvent('payment-attempt-started', {
      paymentMethod: 'card',
      timestamp: new Date().toISOString(),
      amount: getCurrentAmount(),
      currency: getCurrentCurrency()
    });
    
    // Perform final validation
    const validationErrors = performFinalValidation();
    if (validationErrors.length > 0) {
      event.preventDefault();
      showValidationErrors(validationErrors);
      return;
    }
    
    // Check inventory one final time
    const inventoryCheck = checkInventoryAvailability();
    if (!inventoryCheck.available) {
      event.preventDefault();
      showError('Some items in your cart are no longer available. Please review your order.');
      return;
    }
    
    // Show loading state
    showSubmitLoading(true);
    event.target.disabled = true;
    
    // Optional: Show confirmation dialog for high-value transactions
    const amount = getCurrentAmount();
    if (amount > 1000) {
      const confirmed = confirm(`Please confirm your payment of ${formatCurrency(amount)}`);
      if (!confirmed) {
        event.preventDefault();
        showSubmitLoading(false);
        event.target.disabled = false;
        return;
      }
    }
    
    // Log that payment is proceeding
    console.log('Payment processing initiated');
    }
});

const cardSubmit = sdk.create('card-submit', {
  onCollectEnd: (data) => {
    console.log('Data collection completed:', data);
    
    // Hide loading indicator
    hideMessage();
    hideDataCollectionSpinner();
    
    // Track collection metrics
    trackEvent('device-data-collection-completed', {
      success: data.success,
      duration: data.duration,
      timestamp: new Date().toISOString()
    });
    
    if (data.success) {
      console.log('Device fingerprinting successful');
      
      // Store fingerprint data for fraud detection
      storeFingerprintData(data.fingerprintData);
      
      // Enable submit button now that data collection is complete
      enableSubmitButton();
      
      // Show completion indicator
      showSuccessMessage('Security check completed', 2000);
    } else {
      console.warn('Data collection failed:', data.error);
      
      // Handle collection failure - continue without fingerprinting
      logError('fingerprint-collection-failed', {
        error: data.error?.message,
        duration: data.duration
      });
      
      // Still allow payment to proceed (fingerprinting is optional)
      enableSubmitButton();
      showWarningMessage('Security check unavailable - payment will proceed normally');
    }
  }
});

const cardSubmit = sdk.create('card-submit', {
  onCollectStart: (data) => {
    console.log('Data collection started:', data);
    
    // Show informative loading message
    showMessage('Performing security check...', 'info');
    showDataCollectionSpinner();
    
    // Track collection start
    trackEvent('device-data-collection-started', {
      provider: data.provider,
      sessionId: data.sessionId,
      timeout: data.timeout,
      timestamp: new Date().toISOString()
    });
    
    // Disable submit button during collection
    disableSubmitButton();
    
    // Show educational tooltip about fraud prevention
    showTooltip('security-info', 
      'We\'re performing a quick security check to protect against fraud. This helps keep your payment safe.');
    
    // Set up timeout warning
    const warningTime = data.timeout * 0.8; // Warn at 80% of timeout
    setTimeout(() => {
      if (!isDataCollectionComplete()) {
        showWarningMessage('Security check taking longer than expected...');
      }
    }, warningTime);
    
    // Log provider-specific information
    if (data.provider === 'kount') {
      console.log('Kount fraud detection initiated with session:', data.sessionId);
    } else if (data.provider === 'threatmetrix') {
      console.log('ThreatMetrix profiling started with session:', data.sessionId);
    }
  }
});

const clickOnceComponent = sdk.create('click-once', {
  onCvcEntered: (data) => {
    console.log('CVC has been entered for card:', data.maskedCardNumber);
    
    // Validate CVC format
    if (data.isValid) {
      console.log('Valid CVC entered');
      
      // Clear any previous errors
      clearFieldError('cvc');
      
      // Show success indicator
      showFieldSuccess('cvc');
      
      // Enable submit button
      enableSubmitButton();
      
      // Track successful CVC entry
      trackEvent('cvc-entered-valid', {
        cardType: data.cardType,
        maskedCardNumber: data.maskedCardNumber,
        timestamp: new Date().toISOString()
      });
      
      // Show payment ready indicator
      showPaymentReadyMessage();
      
    } else {
      console.log('Invalid CVC entered');
      
      // Show validation error
      showFieldError('cvc', 'Please enter a valid security code');
      
      // Keep submit button disabled
      disableSubmitButton();
      
      // Track invalid CVC attempts
      trackEvent('cvc-entered-invalid', {
        cardType: data.cardType,
        timestamp: new Date().toISOString()
      });
    }
    
    // Update UI to reflect CVC completion
    updateFormCompletionStatus();
  }
});

const cardOnFileComponent = sdk.create('card-on-file', {
  onDeleteTokenFailed: (data) => {
    console.log('Token deletion failed:', data.error);
    
    // Log the error for debugging
    logError('token-deletion-failed', {
      tokenId: data.tokenId,
      errorCode: data.error.code,
      errorMessage: data.error.message,
      correlationId: data.correlationId,
      timestamp: new Date().toISOString()
    });
    
    // Handle different error types
    let userMessage = 'Failed to delete payment method. Please try again.';
    
    if (data.error.code === 'UNAUTHORIZED') {
      userMessage = 'You are not authorised to delete this payment method.';
    } else if (data.error.code === 'TOKEN_NOT_FOUND') {
      userMessage = 'This payment method no longer exists.';
      // Remove from UI since it doesn't exist
      removeTokenFromUI(data.tokenId);
    } else if (data.error.code === 'NETWORK_ERROR') {
      userMessage = 'Network error. Please check your connection and try again.';
      // Offer retry option
      showRetryButton(() => retryDeleteToken(data.tokenId));
    } else if (data.error.code === 'TOKEN_IN_USE') {
      userMessage = 'This payment method cannot be deleted as it is currently being used.';
    }
    
    // Show error message to user
    showErrorMessage(userMessage);
    
    // Track deletion failure analytics
    trackEvent('token-deletion-failed', {
      tokenId: data.tokenId,
      errorCode: data.error.code,
      errorType: data.error.message,
      timestamp: new Date().toISOString()
    });
    
    // Re-enable delete button if it was disabled
    enableDeleteButton(data.tokenId);
  }
});

const cardOnFileComponent = sdk.create('card-on-file', {
  onDeleteTokenSuccess: (data) => {
    console.log('Token deleted successfully:', data.tokenId);
    
    // Remove the token from the UI
    removeTokenFromUI(data.tokenId);
    
    // Show success message
    showSuccessMessage(`${data.cardScheme} ending in ${data.maskedCardNumber.slice(-4)} has been removed successfully.`);
    
    // Update local data
    removeTokenFromLocalStorage(data.tokenId);
    
    // Track successful deletion
    trackEvent('token-deletion-success', {
      tokenId: data.tokenId,
      cardScheme: data.cardScheme,
      maskedCardNumber: data.maskedCardNumber,
      correlationId: data.correlationId,
      timestamp: new Date().toISOString()
    });
    
    // Check if this was the last saved card
    const remainingTokens = getRemainingTokenCount();
    if (remainingTokens === 0) {
      showEmptyStateMessage('No saved payment methods. Add a new card to save time on future purchases.');
      hideCardOnFileSection();
    }
    
    // If this was the default card, update default selection
    if (isDefaultCard(data.tokenId)) {
      updateDefaultCard();
    }
    
    // Log successful deletion
    console.log(`Payment method deleted: ${data.cardScheme} ${data.maskedCardNumber} at ${data.timestamp}`);
    
    // Optional: Trigger email notification about deleted payment method
    if (shouldNotifyOfDeletion()) {
      sendPaymentMethodDeletedNotification(data);
    }
  }
});

const cardNumberComponent = sdk.create('card-number', {
  onFocus: (event) => {
    console.log('Card number field focused');
    
    // Clear any previous errors
    clearFieldError('card-number');
    
    // Show helpful formatting tooltip
    showTooltip('card-number-help', 'Enter your 16-digit card number without spaces or dashes');
    
    // Highlight the field container
    highlightField('card-number');
    
    // Track field interaction
    trackEvent('field-focused', {
      fieldName: 'card-number',
      hasExistingValue: !!event.target.value,
      timestamp: new Date().toISOString()
    });
    
    // Show accepted card brands
    showAcceptedCardBrands();
  }
});

const cardExpiryComponent = sdk.create('card-expiry-date', {
  onFocus: (event) => {
    console.log('Expiry date field focused');
    
    // Show format example
    showTooltip('expiry-help', 'MM/YY format (e.g., 12/25)');
    
    // Clear errors
    clearFieldError('card-expiry-date');
    
    // Highlight field
    highlightField('card-expiry-date');
    
    // Track focus
    trackEvent('field-focused', {
      fieldName: 'card-expiry-date',
      timestamp: new Date().toISOString()
    });
  }
});

const cardCvcComponent = sdk.create('card-cvc', {
  onFocus: (event) => {
    console.log('CVC field focused');
    
    // Show security code help
    showTooltip('cvc-help', 'Enter the 3-digit security code from the back of your card (4 digits for Amex)');
    
    // Show CVC location diagram
    showCvcLocationDiagram();
    
    // Clear errors
    clearFieldError('card-cvc');
    
    // Track focus
    trackEvent('field-focused', {
      fieldName: 'card-cvc',
      timestamp: new Date().toISOString()
    });
  }
});

const cardSubmit = sdk.create('card-submit', {
  onGetFingerprintResult: async () => {
    console.log('Fingerprint data requested');
    
    try {
      // Check if we have cached fingerprint data
      let fingerprintData = getCachedFingerprintData();
      
      if (!fingerprintData) {
        console.log('Generating new fingerprint data');
        
        // Generate new fingerprint using Kount
        if (window.ka && window.ka.collect) {
          fingerprintData = await new Promise((resolve, reject) => {
            window.ka.collect({
              sessionId: getKountSessionId(),
              onSuccess: (sessionId) => resolve(sessionId),
              onFailure: (error) => reject(error)
            });
          });
        } 
        // Generate fingerprint using ThreatMetrix
        else if (window.tmx && window.tmx.profiling) {
          fingerprintData = await window.tmx.profiling.generateSessionId();
        }
        // Fallback: Generate basic browser fingerprint
        else {
          fingerprintData = generateBasicFingerprint();
        }
        
        // Cache the fingerprint data for future use
        cacheFingerprintData(fingerprintData);
      }
      
      // Track successful fingerprint generation
      trackEvent('fingerprint-generated', {
        method: getFingerprintMethod(),
        sessionId: fingerprintData,
        cached: !!getCachedFingerprintData(),
        timestamp: new Date().toISOString()
      });
      
      console.log('Returning fingerprint data:', fingerprintData);
      return fingerprintData;
      
    } catch (error) {
      console.error('Fingerprint generation failed:', error);
      
      // Log the error
      logError('fingerprint-generation-failed', {
        error: error.message,
        stack: error.stack,
        timestamp: new Date().toISOString()
      });
      
      // Return a fallback fingerprint or empty string
      const fallbackFingerprint = generateFallbackFingerprint();
      
      trackEvent('fingerprint-fallback-used', {
        error: error.message,
        fallbackData: fallbackFingerprint,
        timestamp: new Date().toISOString()
      });
      
      return fallbackFingerprint;
    }
  }
});

// Helper functions for fingerprint generation
function generateBasicFingerprint() {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  ctx.textBaseline = 'top';
  ctx.font = '14px Arial';
  ctx.fillText('Basic fingerprint', 2, 2);
  
  const fingerprint = btoa(JSON.stringify({
    userAgent: navigator.userAgent,
    language: navigator.language,
    platform: navigator.platform,
    screenResolution: `${screen.width}x${screen.height}`,
    timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
    canvas: canvas.toDataURL(),
    timestamp: Date.now()
  }));
  
  return fingerprint.substring(0, 32); // Truncate for consistency
}

function generateFallbackFingerprint() {
  return btoa(`fallback_${Date.now()}_${Math.random()}`).substring(0, 32);
}

const clickOnceComponent = sdk.create('click-once', {
  onOnceCardClick: (data) => {
    console.log('User clicked on saved card:', data.maskedCardNumber);
    
    // Update UI to show selected card
    updateSelectedCardDisplay(data);
    
    // Track card selection
    trackEvent('saved-card-selected', {
      tokenId: data.tokenId,
      cardScheme: data.cardScheme,
      maskedCardNumber: data.maskedCardNumber,
      timestamp: new Date().toISOString()
    });
    
    // Show/hide CVC field based on requirements
    if (data.isCvcRequired) {
      showCvcField();
      showMessage('Please enter your security code to continue');
      disableSubmitButton(); // Keep disabled until CVC is entered
    } else {
      hideCvcField();
      enableSubmitButton();
    }
    
    // Check if card is expired
    const now = new Date();
    const [month, year] = data.expiryDate.split('/');
    const expiryDate = new Date(2000 + parseInt(year), parseInt(month) - 1);
    
    if (expiryDate < now) {
      showWarning('This card has expired. Please update your payment method or select a different card.');
      disableSubmitButton();
      showUpdateCardOption(data.tokenId);
    }
    
    // Show card-specific benefits
    showCardBenefits(data.cardScheme);
    
    // Update payment summary
    updatePaymentSummary({
      paymentMethod: `${data.cardScheme} ending in ${data.maskedCardNumber.slice(-4)}`,
      requiresCvc: data.isCvcRequired
    });
  }
});

const cardSubmit = sdk.create('card-submit', {
  onPostAuthentication: async (data) => {
    console.log('3DS authentication completed. Authentication ID:', data.authenticationId);
    
    // Send authenticationId to merchant BE to retrieve authentication result
    const authResult = await fetchAuthenticationResultFromBackend(data.authenticationId);
    
    // Merchant BE evaluates authentication result to update authorisation decision via Unity update decision API
    const authorisationDecision = await evaluateAuthenticationAndUpdateAuthorization(authResult);
    
    // Merchant BE returns the decision to merchant FE and provides the decision to the SDK via onPreAuthorization
    
    // Track authentication completion
    trackEvent('3ds-authentication-completed', {
      authenticationId: data.authenticationId,
          timestamp: new Date().toISOString()
        });
  }
});

const cardSubmit = sdk.create('card-submit', {
  onPostInitiateAuthentication: async (data) => {
    console.log('3DS authentication initiated. Authentication ID:', data.authenticationId);
    
    // Merchant evaluates the 3DS PreInitiateAuthentication Result to decide whether to proceed with Authentication/Authorisation
    // Merchant BE uses authenticationId to retrieve initiate authentication result
    const authResult = await fetchAuthenticationResultFromBackend(data.authenticationId);
    
    // Merchant BE evaluates the PreInitiateAuthentication result to update authentication/authorisation decision via Unity update decision api if needed
    const decision = await evaluateAuthenticationAndUpdateSession(authResult);
    
    // Merchant BE returns the decision to merchant FE
    // Merchant FE answers to the onPreAuthentication callback whether to proceed with it
    
    // Track initiation result
    trackEvent('3ds-authentication-initiated', {
      authenticationId: data.authenticationId,
          timestamp: new Date().toISOString()
        });
  }
});

const cardSubmit = sdk.create('card-submit', {
  onPreAuthentication: async () => {
    // Get authentication decision evaluated after onPostInitiateAuthentication 
    const decision = await getAuthenticationDecision();
    
    if (!decision) {
      // Not proceeded
      return null;
    }
    
    // Provide authentication configuration if proceeding
    return {
      challengeWindowSize: decision.challengeWindowSize,
      timeout: decision.timeout,
      // other configurations
    };
  }
});

const cardOnFileComponent = sdk.create('card-on-file', {
  onPreDeleteToken: async (token) => {
    console.log('Token deletion requested:', token.maskedPrimaryAccountNumber);
    
    // Track deletion attempt
    trackEvent('token-deletion-requested', {
      tokenId: token.gatewayTokenId,
      cardScheme: token.scheme,
      maskedCardNumber: token.maskedPrimaryAccountNumber,
      timestamp: new Date().toISOString()
    });
    
    try {
      // Check if token is used in active subscriptions
      const activeSubscriptions = await checkActiveSubscriptions(token.gatewayTokenId);
      
      if (activeSubscriptions.length > 0) {
        const subscriptionList = activeSubscriptions.map(sub => sub.name).join(', ');
        const confirmed = confirm(
          `This payment method is used for active subscriptions: ${subscriptionList}. ` +
          `Deleting it may affect these subscriptions. Are you sure you want to continue?`
        );
        
        if (!confirmed) {
          trackEvent('token-deletion-cancelled-subscriptions', {
            tokenId: token.gatewayTokenId,
            subscriptionCount: activeSubscriptions.length,
            timestamp: new Date().toISOString()
          });
          return false;
        }
      }
      
      // Show confirmation dialog
      const cardDescription = `${token.scheme} ending in ${token.maskedPrimaryAccountNumber.slice(-4)}`;
      const confirmed = confirm(`Are you sure you want to delete ${cardDescription}?`);
      
      if (confirmed) {
        // Log confirmation
        trackEvent('token-deletion-confirmed', {
          tokenId: token.gatewayTokenId,
          cardScheme: token.scheme,
          timestamp: new Date().toISOString()
        });
        
        // Show deletion in progress
        showMessage('Deleting payment method...', 'info');
        
        return true;
    } else {
        // Log cancellation
        trackEvent('token-deletion-cancelled', {
          tokenId: token.gatewayTokenId,
          timestamp: new Date().toISOString()
        });
        
        return false;
      }
      
    } catch (error) {
      console.error('Error during token deletion validation:', error);
      
      // Log validation error
      logError('token-deletion-validation-failed', {
        tokenId: token.gatewayTokenId,
        error: error.message,
        timestamp: new Date().toISOString()
      });
      
      // Show error and allow user to decide
      const confirmed = confirm(
        'Unable to check payment method usage. Do you still want to delete it?'
      );
      
      return confirmed;
    }
  }
});

const cardSubmit = sdk.create('card-submit', {
  onPostInitiateAuthentication: async (data) => {
    console.log('3DS authentication initiated. Authentication ID:', data.authenticationId);
    
    // Merchant evaluates the 3DS PreInitiateAuthentication Result to decide whether to proceed with Authentication/Authorisation
    // Merchant BE uses authenticationId to retrieve initiate authentication result
    const authResult = await fetchAuthenticationResultFromBackend(data.authenticationId);
    
    // Merchant BE evaluates the PreInitiateAuthentication result to update authentication/authorisation decision via Unity update decision api if needed
    const decision = await evaluateAuthenticationAndUpdateSession(authResult);
    
    // Merchant BE returns the decision to merchant FE
    // Merchant FE answers to the onPreAuthentication callback whether to proceed with it
    
    // Track initiation result
    trackEvent('3ds-authentication-initiated', {
      authenticationId: data.authenticationId,
      timestamp: new Date().toISOString()
    });
  }
});

const cardSubmit = sdk.create('card-submit', {
  onPostTokenisation: async (data) => {
    console.log('Card tokenised successfully. Token ID:', data.gatewayTokenId);
    
    // If merchant wants to evaluate the token details to decide whether to proceed with authentication/authorisation
    // Merchant BE uses the returned gatewayTokenId to get Token Details from Unity
    const tokenDetails = await fetchTokenDetailsFromBackend(data.gatewayTokenId);
    
    // Merchant BE evaluates the token details to update authentication/authorisation decision via Unity Update session API
    const decision = await evaluateTokenAndUpdateSession(tokenDetails);
    
    // Store token for future use
    await saveTokenToCustomerAccount({
      tokenId: data.gatewayTokenId,
      customerId: getCurrentCustomerId()
    });
    
    // Track tokenisation success for analytics
    trackEvent('card-tokenisation-success', {
      tokenId: data.gatewayTokenId,
      timestamp: new Date().toISOString()
    });
    
    // Update UI to show the card was saved
    showSuccessMessage('Your payment method has been saved securely!');
    
    // Add to saved cards list in UI
    updateSavedPaymentMethodsUI(data.gatewayTokenId);
  }
});

const cardSubmit = sdk.create('card-submit', {
  onPreAuthentication: async () => {
    // Get authentication decision evaluated after onPostInitiateAuthentication 
    const decision = await getAuthenticationDecision();
    
    if (!decision) {
      // Not proceeded
      return null;
    }
    
    // Provide authentication configuration if proceeding
    return {
      challengeWindowSize: decision.challengeWindowSize,
      timeout: decision.timeout,
      // other configurations
    };
  }
});

const cardSubmit = sdk.create('card-submit', {
  onPreAuthorisation: async (data) => {
    console.log('Pre-authorisation for token:', data.gatewayTokenId);
    
    // Merchant can use gatewayTokenId to retrieve token details and update transaction decision on merchant BE
    const transactionDecision = await getAuthorisationDecision(data.gatewayTokenId);

    if (!transactionDecision) {
      // To not proceed
      return null;
    }

    // Perform pre-payment validation
    const deviceSessionId = await getKountSessionId();
    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: {
        deviceSessionId: deviceSessionId,
        performRiskScreening: true,
        customData: {
          customerTier: customerTier,
          orderType: 'ecommerce',
          previousTransactionCount: await getPreviousTransactionCount(),
          riskScore: isHighRisk ? 'high' : 'low'
        }
      }
    };
  }
});

const cardOnFileComponent = sdk.create('card-on-file', {
  onPreDeleteToken: async (token) => {
    // Check if token is used in active subscriptions
    const hasActiveSubscriptions = await checkActiveSubscriptions(token.gatewayTokenId);
    
    if (hasActiveSubscriptions) {
      const confirmed = confirm(
        `This card is used for active subscriptions. Deleting it will cancel those subscriptions. Continue?`
      );
      if (!confirmed) return false;
    }
    
    // Show custom confirmation dialog
    const confirmed = confirm(
      `Delete ${token.scheme} card ending in ${token.maskedPrimaryAccountNumber.slice(-4)}?`
    );
    
    // Log deletion attempt for security auditing
    if (confirmed) {
      trackEvent('token-deletion-confirmed', {
        tokenId: token.gatewayTokenId,
        scheme: token.scheme,
        lastFour: token.maskedPrimaryAccountNumber.slice(-4)
      });
    }
    
    return confirmed;
  }
});

const cardSubmit = sdk.create('card-submit', {
  onPreInitiateAuthentication: () => {
    // Configure 3DS authentication parameters
    return {
      providerId: 'your-3ds-provider-id', // optional
      requestorAuthenticationIndicator: '01', // Payment transaction
      timeout: 30 // 30 seconds timeout for fingerprinting
    };
  }
});

const cardSubmit = sdk.create('card-submit', {
  onPreInitiateAuthentication: () => {
    // Return null to skip authentication
    return null;
  }
});

const cardSubmit = sdk.create('card-submit', {
  onPreTokenisation: () => {
    console.log('About to tokenise card');
    
    // Check if user has opted in to save payment method
    const savePaymentMethod = document.getElementById('save-card-checkbox')?.checked;
    if (!savePaymentMethod) {
      console.log('User opted out of saving payment method');
      return false;
    }
    
    // Apply business rules
    const isValidForStorage = validateCardForStorage();
    if (!isValidForStorage) {
      console.log('Card not suitable for storage - skipping tokenisation');
      return false;
    }
    
    console.log('Proceeding with card tokenisation');
    return true;
  }
});

const cardOnFileComponent = sdk.create('card-on-file', {
  onPreRenderTokens: (data) => {
    // Filter and transform tokens based on business rules
    const filteredTokens = data.gatewayTokens
      .filter(token => {
        // Only show non-expired cards
        const currentDate = new Date();
        const expiryParts = token.expiryDate.split('/');
        const expiryDate = new Date(2000 + parseInt(expiryParts[1]), parseInt(expiryParts[0]) - 1);
        return expiryDate > currentDate;
      })
      .filter(token => {
        // Only show cards from supported countries
        const supportedCountries = ['US', 'GB', 'CA', 'AU'];
        return supportedCountries.includes(token.issuerCountryCode);
      })
      .sort((a, b) => {
        // Sort by scheme preference
        const schemeOrder = { 'Visa': 1, 'MasterCard': 2, 'Amex': 3 };
        return (schemeOrder[a.scheme] || 999) - (schemeOrder[b.scheme] || 999);
      });

    // Transform to required format with custom CVC requirements
    return filteredTokens.map(token => ({
        id: token.gatewayTokenId,
      isCvcRequired: token.scheme === 'Amex' ? false : true // Amex doesn't require CVC
      }));
  }
});

const cardOnFileComponent = sdk.create('card-on-file', {
  onRetrieveTokensFailed: (data) => {
    console.error('Failed to retrieve saved cards:', data.error);
    
    // Track the error for analytics
    trackError('token-retrieval-failed', {
      errorCode: data.error.code,
      correlationId: data.correlationId,
      statusCode: data.statusCode
    });
    
    // Show user-friendly error message
    let errorMessage = 'Unable to load your saved payment methods.';
    if (data.error.code === 'NETWORK_ERROR') {
      errorMessage = 'Network connection issue. Please check your internet connection.';
    } else if (data.error.code === 'UNAUTHORIZED') {
      errorMessage = 'Please log in again to access your saved payment methods.';
    }
    
    showNotification(errorMessage, 'error');
    
    // Hide the saved cards section and show alternative options
    document.getElementById('saved-cards-section').style.display = 'none';
    document.getElementById('add-new-card-section').style.display = 'block';
  }
});

const cardSubmit = sdk.create('card-submit', {
  onSubmitError: (error) => {
    console.error('Card submission failed:', error);
    
    // Track the error for analytics
    trackError('card-submit-error', {
      errorCode: error.errorCode,
      correlationId: error.correlationId,
      timestamp: error.timestamp
    });
    
    // Handle different types of errors
    let userMessage = 'Payment submission failed. Please try again.';
    
    switch (error.errorCode) {
      case 'VALIDATION_FAILED':
        userMessage = 'Please check your card details and try again.';
        // Handle specific field validation errors
        if (error.validationErrors) {
          error.validationErrors.forEach(validationError => {
            highlightFieldError(validationError.field, validationError.message);
          });
        }
        break;
        
      case 'NETWORK_ERROR':
        userMessage = 'Network connection issue. Please check your internet connection and try again.';
        break;
        
      case 'CARD_DECLINED':
        userMessage = 'Your card was declined. Please try a different payment method.';
        break;
        
      case 'INSUFFICIENT_FUNDS':
        userMessage = 'Insufficient funds. Please try a different card or payment method.';
        break;
        
      case 'EXPIRED_CARD':
        userMessage = 'Your card has expired. Please update your card details.';
        break;
        
      default:
        userMessage = `Payment failed: ${error.message}`;
    }
    
    // Show error to user
    showErrorNotification(userMessage);
    
    // Re-enable submit button for retry
    document.getElementById('submit-button').disabled = false;
  }
});