Card submit

Learn about customisation options for th card submit component.

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`	The text to display on the submit button.
`disableUntilValidated`	Whether to disable the submit button until all fields are validated.
`hideSubmitButton`	Whether to hide the submit button.
`container`	The name of the HTML element to render the component into.
`id`	The unique identifier for the component.
`class`	The CSS class name for the component.
`label`	The label text for the component.
`styles`	Custom styles for the component.
`newCardComponent`	Component for a new card. See New card.
`cardNumberComponent`	Component for the card number. See Card number.
`cardExpiryDateComponent`	Component for the card expiry date. See Card expiry date.
`cardCvcComponent`	Component for the CVC. See Card CVC.
`cardHolderNameComponent`	Component for the cardholder name. See Cardholder name.
`cardConsentComponent`	Configuration details for the card consent component.
`cardOnFileComponent`	Configuration details for the card-on-file component for saved payment methods.
`clickOnceStandaloneComponent`	Configuration for the click-once standalone component.
`useCardOnFile`	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`	Whether to enable AVS checks.
`billingAddressComponents`	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`	Component for country selection.
`billingAddressComponents.postcodeComponent`	Component for postcode input.
`billingAddressComponents.addressComponent`	Component for address input.
`billingAddressComponents.billingAddressComponent`	Configuration details for the billing address component. See Billing address.
`tabIndex`	The tab index of the component.
`submitAriaLabel`	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
`onPostInitiateAuthentication: (data: AuthenticationResult) => void`	Event handler for after authentication initiation with the result.
`onPreAuthentication: (data: PreInitiateSuccessAuthenticationResult) => Promise<InitiateIntegratedAuthenticationData	null>`
`onPostAuthentication: (data: AuthenticationResult, threeDSAuthenticationData: ThreeDSAuthenticationData	null) => void`
`onPreAuthorisation: (data: PreAuthorizationData	null, threeDSAuthenticationData: ThreeDSAuthenticationData
`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.
`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
`onPostInitiateAuthentication: (data: AuthenticationResult) => void`	Event handler for after authentication initiation with the result.
`onPreAuthentication: (data: PreInitiateSuccessAuthenticationResult) => Promise<InitiateIntegratedAuthenticationData	null>`
`onPostAuthentication: (data: AuthenticationResult, threeDSAuthenticationData: ThreeDSAuthenticationData	null) => void`
`onPreAuthorisation: (data: PreAuthorizationData	null, threeDSAuthenticationData: ThreeDSAuthenticationData
`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();
    }
  }
};

Card submit

Styling

Callbacks

Example

Was this helpful?