Card submit

const cardSubmitConfig: CardSubmitComponentConfig = {
  submitText: string,
  disableUntilValidated: boolean,
  hideSubmitButton: boolean,
  container: string,
  id: string,
  class: string,
  label: string,
  styles: CardSubmitComponentStyles,
  newCardComponent: NewCardComponent,
  cardNumberComponent: CardNumberComponent,
  cardExpiryDateComponent: CardExpiryDateComponent,
  cardCvcComponent: CardCvcComponent,
  cardHolderNameComponent: CardHolderNameComponent,
  cardConsentComponent: CardConsentComponent,
  cardOnFileComponent: CardOnFileComponent,
  clickOnceStandaloneComponent: ClickOnceStandaloneComponent,
  useCardOnFile: boolean,
  avsRequest: boolean,
  billingAddressComponents: {
    countrySelectionComponent: CountrySelectionComponent,
    postcodeComponent: PostcodeComponent,
    addressComponent: AddressComponent,
    billingAddressComponent: BillingAddressComponent
  },
  tabIndex: number,
  submitAriaLabel: string
};

const cardSubmitConfig: CardSubmitComponentConfig = {
  onClick: (event: Event) => void,
  onChange: (state: ComponentState) => void,
  onValidation: (data: ValidationResult[]) => void,
  onCustomValidation: () => Promise<boolean>,
  onPreTokenisation: () => boolean,
  onPostTokenisation: (data: { gatewayTokenId: string }) => void,
  onPreInitiateAuthentication: () => PreInitiateIntegratedAuthenticationData | null | undefined,
  onPostInitiateAuthentication: (data: { authenticationId: string }) => void,
  onPreAuthentication: () => Promise<InitiateIntegratedAuthenticationData | null>,
  onPostAuthentication: (data: { authenticationId: string }) => void,
  onPreAuthorisation: (data: { gatewayTokenId: string }) => Promise<TransactionInitiationData | null>,
  onPostAuthorisation: (data: { merchantTransactionId: string, systemTransactionId: string }) => void,
  onGetFingerprintResult: () => Promise<string>,
  onSubmitError: (baseSdkException: BaseSdkException) => void,
  onCollectStart: (data: any) => void,
  onCollectEnd: (data: any) => void
};

const cardSubmitConfig: CardSubmitComponentConfig = {
  submitText: "Pay now",
  disableUntilValidated: true,
  avsRequest: true,
  cardNumberComponent: cardNumber,
  cardExpiryDateComponent: cardExpiry,
  cardCvcComponent: cardCvc,
  cardHolderNameComponent: cardHolderName,
  onClick: (event: Event) => {
    console.log('Submit button clicked', event);
    // Add custom logic before submission
    if (!userConsent) {
     event.preventDefault();
      showConsentDialog();
    }
  }
};

const cardSubmitConfig: CardSubmitComponentConfig = {
  submitText: "Pay now",
  disableUntilValidated: true,
  avsRequest: true,
  cardNumberComponent: cardNumber,
  cardExpiryDateComponent: cardExpiry,
  cardCvcComponent: cardCvc,
  cardHolderNameComponent: cardHolderName,
  billingAddressComponents: {
    billingAddressComponent: billingAddress
  },
  // Validate merchant fields alongside SDK billing address validation
  onCustomValidation: async () => {
    let isValid = true;

    // Validate shipping address
    const shippingAddress = document.getElementById('shipping-address').value;
    if (!shippingAddress || shippingAddress.trim().length < 5) {
      showError('shipping-address', 'Please enter a valid shipping address');
      isValid = false;
    }

    // Validate email
    const email = document.getElementById('email').value;
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!email || !emailRegex.test(email)) {
      showError('email', 'Please enter a valid email address');
      isValid = false;
    }

    // Validate terms acceptance
    const termsAccepted = document.getElementById('terms-checkbox').checked;
    if (!termsAccepted) {
      showError('terms', 'You must accept the terms and conditions');
      isValid = false;
    }

    // Return true to proceed with submission, false to prevent it
    return isValid;
  },
  onPreAuthorisation: (data) => {
    // Transaction data logic
    return Promise.resolve({
      psd2Data: {}
    });
  },
  onPostAuthorisation: (result) => {
    console.log('Payment completed:', result.merchantTransactionId);
  },
  onSubmitError: (error) => {
    console.error('Payment error:', error.message);
  }
};