Card submit

import PxpCheckout from '@pxp-io/web-components-sdk';

const pxpCheckout = PxpCheckout.initialize({
  session: {
    sessionId: 'your-session-id',
    hmacKey: 'your-hmac-key',
    encryptionKey: 'your-encryption-key'
  },
  environment: 'production',
  transactionData: {
    amount: 1000,
    currency: 'USD',
    entryType: 'Ecom',
    intent: {
      card: 'Authorisation'
    },
    merchantTransactionId: 'unique-transaction-id',
    merchantTransactionDate: () => new Date().toISOString()
  },
  ownerType: 'MerchantGroup',
  ownerId: 'your-owner-id'
});

// Create card input components
const cardNumber = pxpCheckout.create('card-number', {
  label: "Card number"
});

const cardExpiry = pxpCheckout.create('card-expiry-date', {
  label: "Expiry date"
});

const cardCvc = pxpCheckout.create('card-cvc', {
  label: "CVC"
});

// Create card submit component
const cardSubmitComponent = pxpCheckout.create('card-submit', {
  cardNumberComponent: cardNumber,
  cardExpiryDateComponent: cardExpiry,
  cardCvcComponent: cardCvc
});

// Mount components
cardNumber.mount('card-number-container');
cardExpiry.mount('expiry-date-container');
cardCvc.mount('cvc-container');
cardSubmitComponent.mount('submit-container');

// Create additional components
const cardHolderName = pxpCheckout.create('card-holder-name', {
  label: "Cardholder name"
});

const cardConsent = pxpCheckout.create('card-consent', {
  consentText: "Save this card for future purchases"
});

const billingAddress = pxpCheckout.create('billing-address', {
  showFullForm: true
});

// Create card submit with advanced configuration
const cardSubmitComponent = pxpCheckout.create('card-submit', {
  // Required components
  cardNumberComponent: cardNumber,
  cardExpiryDateComponent: cardExpiry,
  cardCvcComponent: cardCvc,
  
  // Optional card components
  cardHolderNameComponent: cardHolderName,
  cardConsentComponent: cardConsent,
  
  // Basic configuration
  submitText: "Complete Payment",
  disableUntilValidated: true,
  hideSubmitButton: false,
  id: "card-submit-btn",
  class: "payment-submit-button",
  label: "Payment Submission",
  submitAriaLabel: "Complete your payment transaction",
  tabIndex: 1,
  
  // Card-on-file configuration
  useCardOnFile: false,
  
  // AVS configuration
  avsRequest: true,
  billingAddressComponents: {
    billingAddressComponent: billingAddress
  }
});

const defaultCardSubmitStyles = {
  container: {
    display: 'block',
    width: '100%'
  },
  
  button: {
    backgroundColor: '#007bff',
    color: '#ffffff',
    border: '1px solid #007bff',
    borderRadius: '4px',
    padding: '12px 24px',
    fontSize: '16px',
    cursor: 'pointer',
    width: '100%'
  },
  
  'button:hover': {
    backgroundColor: '#0056b3',
    borderColor: '#0056b3'
  },
  
  'button:disabled': {
    backgroundColor: '#6c757d',
    borderColor: '#6c757d',
    cursor: 'not-allowed'
  }
};

const cardSubmitComponent = pxpCheckout.create('card-submit', {
  cardNumberComponent: cardNumber,
  cardExpiryDateComponent: cardExpiry,
  cardCvcComponent: cardCvc,
  
  submitText: "Complete Payment",
  
  styles: {
    // Container styling
    container: {
      backgroundColor: '#ffffff',
      border: '1px solid #e0e0e0',
      borderRadius: '8px',
      padding: '16px',
      margin: '8px 0',
      boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
    },
    
    // Submit button styling
    button: {
      backgroundColor: '#007bff',
      color: '#ffffff',
      border: '1px solid #007bff',
      borderRadius: '4px',
      padding: '12px 24px',
      fontSize: '16px',
      fontWeight: '500',
      cursor: 'pointer',
      width: '100%',
      transition: 'all 0.2s ease',
      textAlign: 'center',
      textDecoration: 'none',
      display: 'inline-block',
      lineHeight: '1.5'
    },
    
    // Button hover state
    'button:hover': {
      backgroundColor: '#0056b3',
      borderColor: '#0056b3',
      transform: 'translateY(-1px)',
      boxShadow: '0 4px 8px rgba(0,0,0,0.15)'
    },
    
    // Button focus state
    'button:focus': {
      outline: '2px solid #007bff',
      outlineOffset: '2px'
    },
    
    // Button disabled state
    'button:disabled': {
      backgroundColor: '#6c757d',
      borderColor: '#6c757d',
      cursor: 'not-allowed',
      opacity: '0.6',
      transform: 'none',
      boxShadow: 'none'
    },
    
    // Button active/pressed state
    'button:active': {
      backgroundColor: '#004085',
      borderColor: '#004085',
      transform: 'translateY(0)'
    },
    
    // Label styling
    label: {
      color: '#333333',
      fontSize: '14px',
      fontWeight: '500',
      marginBottom: '8px',
      display: 'block'
    },
    
    // Error message styling
    errorMessage: {
      color: '#dc3545',
      fontSize: '12px',
      marginTop: '4px',
      display: 'block'
    },
    
    // Loading state styling
    loading: {
      opacity: '0.7',
      cursor: 'wait'
    },
    
    // Loading spinner
    loadingSpinner: {
      border: '2px solid #f3f3f3',
      borderTop: '2px solid #007bff',
      borderRadius: '50%',
      width: '16px',
      height: '16px',
      animation: 'spin 1s linear infinite',
      display: 'inline-block',
      marginRight: '8px'
    }
  }
});

const cardSubmitComponent = pxpCheckout.create('card-submit', {
  cardNumberComponent: cardNumber,
  cardExpiryDateComponent: cardExpiry,
  cardCvcComponent: cardCvc,
  
  onClick: (event: Event) => {
    console.log("Submit button clicked");
  },
  
  onChange: (state: ComponentState) => {
    console.log("Component state changed:", state);
  },
  
  onValidation: (data: ValidationResult[]) => {
    console.log("Validation results:", data);
  },
  
  onCustomValidation: async () => {
    // Perform custom validation logic
    const termsAccepted = document.getElementById('terms-checkbox')?.checked;
    return termsAccepted === true;
  },
  
  onPreTokenisation: () => {
    console.log("About to tokenize card data");
    showLoadingSpinner();
    return true; // Return false to prevent tokenisation
  },
  
  onPostTokenisation: (data) => {
    console.log("Card tokenized:", data.token);
  },
  
  onPreInitiateAuthentication: () => {
    console.log("Preparing 3DS authentication");
    return null; // Return authentication data or null to skip
  },
  
  onPostInitiateAuthentication: (data) => {
    console.log("Authentication initiated:", data);
  },
  
  onPreAuthentication: async (data) => {
    console.log("Pre-authentication:", data);
    return null; // Return authentication data or null
  },
  
  onPostAuthentication: (data, threeDSData) => {
    console.log("Authentication completed:", data, threeDSData);
  },
  
  onPreAuthorisation: async (data, threeDSData) => {
    console.log("About to authorize payment:", data);
    return null; // Return transaction data or null
  },
  
  onPostAuthorisation: (submitResult) => {
    hideLoadingSpinner();
    
    if (submitResult.success) {
      console.log("Payment authorized successfully");
      window.location.href = '/thank-you';
    } else {
      console.error("Payment failed:", submitResult.errorMessage);
      showErrorMessage(submitResult.errorMessage);
    }
  },
  
  onPreRetrySoftDecline: (result) => {
    // Return true to retry, false to stop, or object with retry config
    return confirm("Payment was declined. Would you like to retry?");
  },
  
  onGetFingerprintResult: async () => {
    // Return device fingerprint data for fraud detection
    return await getDeviceFingerprint();
  },
  
  onCollectStart: (data) => {
    console.log("Starting data collection:", data);
  },
  
  onCollectEnd: (data) => {
    console.log("Data collection completed:", data);
  },
  
  onSubmitError: (error) => {
    hideLoadingSpinner();
    console.error("Submission error:", error);
    showErrorMessage(`Payment failed: ${error.message}`);
  }
});

await cardSubmitComponent.submitAsync();

cardSubmitComponent.mount('submit-container');

cardSubmitComponent.unmount();

// Create card input components
const cardNumber = pxpCheckout.create('card-number', {
  label: "Card number",
  formatCardNumber: true
});

const cardExpiry = pxpCheckout.create('card-expiry-date', {
  label: "Expiry date"
});

const cardCvc = pxpCheckout.create('card-cvc', {
  label: "CVC"
});

// Create submit component
const cardSubmitComponent = pxpCheckout.create('card-submit', {
  cardNumberComponent: cardNumber,
  cardExpiryDateComponent: cardExpiry,
  cardCvcComponent: cardCvc,
  
  submitText: "Pay now",
  disableUntilValidated: true,
  
  onPostAuthorisation: (result) => {
    if (result.success) {
      window.location.href = '/thank-you';
    } else {
      showErrorMessage('Payment was declined. Please try again.');
    }
  },
  
  onSubmitError: (error) => {
    console.error('Payment failed:', error);
    showErrorMessage(error.message);
  }
});

// Mount all components
cardNumber.mount('card-number-container');
cardExpiry.mount('expiry-date-container');
cardCvc.mount('cvc-container');
cardSubmitComponent.mount('submit-container');

// Create all card components
const cardNumber = pxpCheckout.create('card-number', {
  label: "Card number",
  formatCardNumber: true
});

const cardExpiry = pxpCheckout.create('card-expiry-date', {
  label: "Expiry date"
});

const cardCvc = pxpCheckout.create('card-cvc', {
  label: "CVC"
});

const cardHolderName = pxpCheckout.create('card-holder-name', {
  label: "Cardholder name"
});

const cardConsent = pxpCheckout.create('card-consent', {
  consentText: "Save card for future use"
});

const billingAddress = pxpCheckout.create('billing-address', {
  showFullForm: true
});

// Create submit with comprehensive configuration
const cardSubmitComponent = pxpCheckout.create('card-submit', {
  cardNumberComponent: cardNumber,
  cardExpiryDateComponent: cardExpiry,
  cardCvcComponent: cardCvc,
  cardHolderNameComponent: cardHolderName,
  cardConsentComponent: cardConsent,
  
  submitText: "Complete Payment",
  disableUntilValidated: true,
  id: "enterprise-submit-btn",
  class: "enterprise-payment-submit",
  
  avsRequest: true,
  billingAddressComponents: {
    billingAddressComponent: billingAddress
  },
  
  styles: {
    button: {
      backgroundColor: '#2563eb',
      color: '#ffffff',
      borderRadius: '6px',
      padding: '16px 32px',
      fontSize: '16px',
      fontWeight: '600'
    },
    'button:hover': {
      backgroundColor: '#1d4ed8'
    }
  },
  
  onClick: (event) => {
    if (!validateTermsAcceptance()) {
      event.preventDefault();
      showTermsModal();
    }
  },
  
  onValidation: (validationResults) => {
    handleValidationFeedback(validationResults);
  },
  
  onPreTokenisation: () => {
    showLoadingIndicator();
    return true;
  },
  
  onPostTokenisation: (tokenData) => {
    console.log('Tokenisation completed:', tokenData.token);
  },
  
  onPostAuthorisation: (submitResult) => {
    hideLoadingIndicator();
    
    if (submitResult.success) {
      showPaymentSuccessMessage();
      setTimeout(() => {
        window.location.href = `/thank-you?order=${submitResult.orderId}`;
      }, 2000);
    } else {
      handlePaymentFailure(submitResult);
    }
  },
  
  onSubmitError: (error) => {
    hideLoadingIndicator();
    
    switch (error.type) {
      case 'VALIDATION_ERROR':
        showValidationErrors(error.details);
        break;
      case 'NETWORK_ERROR':
        showNetworkError();
        break;
      default:
        showGenericError(error.message);
    }
  }
});

// Mount all components
cardNumber.mount('card-number-container');
cardExpiry.mount('expiry-date-container');
cardCvc.mount('cvc-container');
cardHolderName.mount('cardholder-name-container');
cardConsent.mount('consent-container');
billingAddress.mount('billing-address-container');
cardSubmitComponent.mount('submit-container');

const cardSubmitComponent = pxpCheckout.create('card-submit', {
  cardNumberComponent: cardNumber,
  cardExpiryDateComponent: cardExpiry,
  cardCvcComponent: cardCvc,
  
  submitText: "Process Payment",
  disableUntilValidated: true,
  
  onCustomValidation: async () => {
    // Check terms acceptance
    const termsAccepted = document.getElementById('terms-checkbox')?.checked;
    if (!termsAccepted) {
      showErrorMessage("Please accept the terms and conditions");
      return false;
    }
    
    // Verify email
    const email = document.getElementById('email-input')?.value;
    if (!email || !isValidEmail(email)) {
      showErrorMessage("Please enter a valid email address");
      return false;
    }
    
    // All custom validations passed
    return true;
  },
  
  onPostAuthorisation: (result) => {
    if (result.success) {
      // Send confirmation email
      sendConfirmationEmail(result.transactionId);
      window.location.href = '/success';
    }
  }
});

const cardSubmitComponent = pxpCheckout.create('card-submit', {
  cardNumberComponent: cardNumber,
  cardExpiryDateComponent: cardExpiry,
  cardCvcComponent: cardCvc,
  
  hideSubmitButton: true, // Hide the default button
  
  onPostAuthorisation: (result) => {
    if (result.success) {
      window.location.href = '/thank-you';
    }
  }
});

cardSubmitComponent.mount('submit-container');

// Custom submit button
document.getElementById('custom-pay-button')?.addEventListener('click', async () => {
  try {
    await cardSubmitComponent.submitAsync();
  } catch (error) {
    console.error('Payment failed:', error);
    showErrorMessage('Unable to process payment');
  }
});

const cardSubmitComponent = pxpCheckout.create('card-submit', {
  cardNumberComponent: cardNumber,
  cardExpiryDateComponent: cardExpiry,
  cardCvcComponent: cardCvc,
  
  submitText: "Pay Now",
  
  onPreRetrySoftDecline: (result) => {
    // Show custom retry dialog
    const shouldRetry = confirm(
      `Payment was declined: ${result.declineReason}\n\n` +
      `Would you like to try again?`
    );
    
    if (shouldRetry) {
      // Optionally update configuration for retry
      return {
        retry: true,
        updatedConfigs: {
          applyExemption: true // Try with SCA exemption
        }
      };
    }
    
    return false;
  },
  
  onPostAuthorisation: (result) => {
    if (result.success) {
      showSuccessMessage('Payment processed successfully');
    } else if (result.retryAttempted) {
      showErrorMessage('Payment declined after retry. Please use a different card.');
    }
  }
});

const cardSubmitComponent = pxpCheckout.create('card-submit', {
  cardNumberComponent: cardNumber,
  cardExpiryDateComponent: cardExpiry,
  cardCvcComponent: cardCvc,
  
  submitText: "Secure Payment",
  
  onPreInitiateAuthentication: () => {
    console.log("Preparing 3DS authentication");
    showLoadingMessage("Preparing secure authentication...");
    return null;
  },
  
  onPostInitiateAuthentication: (data) => {
    console.log("3DS authentication initiated:", data);
    showLoadingMessage("Please complete authentication...");
  },
  
  onPostAuthentication: (data, threeDSData) => {
    if (data.authenticated) {
      console.log("Authentication successful");
      showLoadingMessage("Processing payment...");
    } else {
      console.log("Authentication failed or not required");
    }
  },
  
  onPostAuthorisation: (result) => {
    hideLoadingMessage();
    
    if (result.success) {
      showSuccessMessage("Payment completed successfully");
      window.location.href = '/confirmation';
    } else {
      showErrorMessage(result.errorMessage || "Payment failed");
    }
  },
  
  onSubmitError: (error) => {
    hideLoadingMessage();
    console.error("Payment error:", error);
    showErrorMessage(`Payment failed: ${error.message}`);
  }
});