Styling

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
};

Property	Description
`submitText` string	The text to display on the submit button.
`disableUntilValidated` boolean	Whether to disable the submit button until all fields are validated.
`hideSubmitButton` boolean	Whether to hide the submit button.
`container` string	The name of the HTML element to render the component into.
`id` string	The unique identifier for the component.
`class` string	The CSS class name for the component.
`label` string	The label text for the component.
`styles` CardSubmitComponentStyles	Custom styles for the component.
`newCardComponent` NewCardComponent	Component for a new card. See New card.
`cardNumberComponent` CardNumberComponent	Component for the card number. See Card number.
`cardExpiryDateComponent` CardExpiryDate	Component for the card expiry date. See Card expiry date.
`cardCvcComponent` CardCvcComponentt	Component for the CVC. See Card CVC.
`cardHolderNameComponent` CardHolderNameComponent	Component for the cardholder name. See Cardholder name.
`cardConsentComponent` CardConsentComponent	Configuration details for the card consent component.
`cardOnFileComponent` CardOnFileComponent	Configuration details for the card-on-file component for saved payment methods.
`clickOnceStandaloneComponent` ClickOnceStandaloneComponent	Configuration for the click-once standalone component.
`useCardOnFile` boolean	Whether to select the card-on-file method to initiate the transaction. If `true`, uses COF data. If`false`, uses new card data. Defaults to `false`.
`avsRequest` boolean	Whether to enable AVS checks.
`billingAddressComponents` object	Configuration details for the billing address components. Allows you to integrate the pre-built billing address component with the card submit component. If you pass `billingAddressComponents` and `avsRequest` is set to `true`, that will send billing address data to the transaction. If you pass both the pre-built `billingAddressComponent` and the three standalone components, that will use pre-built `billingAddressComponent`'s data.
`billingAddressComponents.countrySelectionComponent` CountrySelectionComponent	Component for country selection.
`billingAddressComponents.postcodeComponent` PostcodeComponent	Component for postcode input.
`billingAddressComponents.addressComponent` AddressComponent	Component for address input.
`billingAddressComponents.billingAddressComponent` BillingAddressComponent	Configuration details for the billing address component. See Billing address.
`tabIndex` number	The tab index of the component.
`submitAriaLabel` string	The aria label for the submit button.

Callbacks

const cardSubmitConfig: CardSubmitComponentConfig = {
  onClick: (event: Event) => void,
  onChange: (state: ComponentState) => void,
  onValidation: (data: ValidationResult[]) => void,
  onPreTokenisation: () => boolean,
  onPostTokenisation: (data: CardTokenizationResult) => void,
  onPreInitiateAuthentication: () => PreInitiateIntegratedAuthenticationData | null | undefined,
  onPostInitiateAuthentication: (data: AuthenticationResult) => void,
  onPreAuthentication: (data: PreInitiateSuccessAuthenticationResult) => Promise<InitiateIntegratedAuthenticationData | null>,
  onPostAuthorisation: (submitResult: BaseSubmitResult) => void,
  onGetFingerprintResult: () => Promise<string>,
  onSubmitError: (baseSdkException: BaseSdkException) => void,
  onCollectStart: (data: any) => void,
  onCollectEnd: (data: any) => void
};

Callback	Description
`onClick: (event: Event) => void`	Event handler for when the submit button is clicked.
`onChange: (state: ComponentState) => void`	Event handler for when the component state changes.
`onValidation: (data: ValidationResult[]) => void`	Event handler for when validation occurs with validation results.
`onPreTokenisation: () => boolean`	Event handler for before tokenisation.
`onPostTokenisation: (data: CardTokenizationResult) => void`	Event handler for after tokenisation completes with the tokenisation result.
`onPreInitiateAuthentication: () => PreInitiateIntegratedAuthenticationData \| null \| undefined`	Return authentication data to proceed with pre-initiate authentication, or null to skip.
`onPostInitiateAuthentication: (data: AuthenticationResult) => void`	Event handler for after authentication initiation with the result.
`onPreAuthentication: (data: PreInitiateSuccessAuthenticationResult) => Promise<InitiateIntegratedAuthenticationData \| null>`	Handle pre-authentication with the initiated result data.
`onPostAuthentication: (data: AuthenticationResult, threeDSAuthenticationData: ThreeDSAuthenticationData \| null) => void`	Event handler for after authentication.
`onPreAuthorisation: (data: PreAuthorizationData \| null, threeDSAuthenticationData: ThreeDSAuthenticationData \| null) => Promise<TransactionInitiationData \| null>`	Handle pre-authorisation logic and return transaction initiation data.
`onPostAuthorisation: (submitResult: BaseSubmitResult) => void`	Event handler for after authorisation completes with the submit result.
`onGetFingerprintResult: () => Promise<string>`	Retrieve fingerprint data for authentication.
`onSubmitError: (baseSdkException: BaseSdkException) => void`	Event handler for when an error occurs during submission.
`onCollectStart: (data: any) => void`	Event handler for when data collection begins.
`onCollectEnd: (data: any) => void`	Event handler for when data collection ends.

📘
For more information about callbacks, see Events.

Example

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();
    }
  }
};