Reference

import CardSubmitComponentConfig from "@pxpio/web-components-sdk/components/cardSubmitComponents/CardSubmitComponent";

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,
  onPreTokenization: () => boolean,
  onPostTokenization: (result) => console.log(result),
  onClick: (event: Event) => void,
  onChange: (state: ComponentState) => void,
  onValidation: (data: ValidationResult[]) => void,
  onPreInitiateAuthentication: () => PreInitiateIntegratedAuthenticationData | null | undefined,
  onPostInitiateAuthentication: (data: AuthenticationResult) => void,
  onPreAuthentication: (data: PreInitiateSuccessAuthenticationResult) => Promise<InitiateIntegratedAuthenticationData>,
  onPostAuthentication: (data: AuthenticationResult, challengeResult?: ChallengeResponse | null) => void,
  onPreAuthorization: (data: PreAuthorizationData | null) => Promise<TransactionInitiationData | null>,
  onPostAuthorization: (submitResult: BaseSubmitResult) => void,
  onGetFingerprintResult: () => Promise<string>,
  onSubmitError: (error) => console.error(error)
  onCollectStart: (data: any) => void,
  onCollectEnd: (data: any) => void
};

 const cardSubmit = pxpCheckoutSdk.create("card-submit");

Properties

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 reference.
`cardNumberComponent` CardNumberComponent	Component for the card number. See reference.
`cardExpiryDateComponent` CardExpiryDate	Component for the card expiry date. See reference.
`cardCvcComponent` CardCvcComponentt	Component for the CVC. See reference.
`cardHolderNameComponent` CardHolderNameComponent	Component for the cardholder name. See reference.
`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 reference.
`tabIndex` number	The tab index of the component.
`submitAriaLabel` string	The aria label for the submit button.

Callbacks

Callback	Description
`onPreTokenization: () => boolean`	Callback function executed before tokenisation. Allows you to decide whether or not to proceed with the tokenisation.
`onPostTokenization: (data: CardTokenizationResult) => void`	Callback function executed after tokenisation completes with the tokenisation result.
`onClick: (event: Event) => void`	Callback function triggered when the submit button is clicked.
`onChange: (state: ComponentState) => void`	Callback function triggered when the component state changes.
`onValidation: (data: ValidationResult[]) => void`	Callback function triggered when validation occurs with validation results.
`onPreInitiateAuthentication: () => PreInitiateIntegratedAuthenticationData \\| null \\| undefined`	Callback function for pre-initiating an authentication. Return `PreInitiateIntegratedAuthenticationData` if you want to proceed with pre-initiating an authentication, `null` otherwise.
`onPostInitiateAuthentication: (data: AuthenticationResult) => void`	Callback function executed after an authentication was pre-initiated. Returns the result of the pre-initiated authentication: If successful, you'll get the `PreInitiateSuccessAuthenticationResult`. If not, you'll get the `FailedAuthenticationResult`.
`onPreAuthentication: (data: PreInitiateSuccessAuthenticationResult) => Promise<InitiateIntegratedAuthenticationData>`	Callback function for pre-authentication. Returns `InitiateIntegratedAuthenticationData` if you want to proceed with the authentication, `null` otherwise.
`onPostAuthentication: (data: AuthenticationResult,threeDSAuthenticationData: ThreeDSAuthenticationData \\| null) => void`	Callback function executed post-authentication. Returns the result of the initiated authentication: If successful, you'll get the `InitiateIntegratedSuccessAuthenticationResult`. If not, you'll get the `FailedAuthenticationResult` . Also returns the `ThreeDSAuthenticationData`. If you want to proceed with the challenge, returns `true` . If not, `false`.
`onPreAuthorization: (data: PreAuthorizationData \\| null, threeDSAuthenticationData: ThreeDSAuthenticationData \\| null) => Promise<TransactionInitiationData \\| null>`	Callback function for pre-authorisation. Returns the result of the authentication. If you want to proceed with authorisation, returns `TransactionInitiationData`. If not, `null`.
`onPostAuthorization: (submitResult: BaseSubmitResult) => void`	Callback function executed post-authorisation. Returns the authorisation result.
`onGetFingerprintResult: () => Promise<string>`	Callback function to retrieve fingerprint data for authentication.
`onSubmitError: (baseSdkException: BaseSdkException) => void`	Callback function triggered when an error occurs during submission.
`onCollectStart: (data: any) => void`	Callback function triggered when the data collection begins.
`onCollectEnd: (data: any) => void`	Callback function triggered when the data collection ends.

HTML container setup

<div id="card-submit-container"></div>

Example

import CardSubmitComponentConfig from "@pxpio/web-components-sdk/components/cardSubmitComponents/CardSubmitComponent";

const cardSubmitConfig: CardSubmitComponentConfig = {
  submitText: "Pay Now",
  disableUntilValidated: true,
  avsRequest: true,
  cardNumberComponent: cardNumber,
  cardExpiryDateComponent: cardExpiry,
  cardCvcComponent: cardCvc,
  cardHolderNameComponent: cardHolderName,
  onPostTokenization: (data: CardTokenizationResult) => void,
  onSubmitError: (baseSdkException: BaseSdkException) => void,
};

 const cardSubmit = pxpCheckoutSdk.create("card-submit");