Reference

import NewCardComponentConfig from "@pxpio/web-components-sdk/components/newCardComponents/types/NewCardComponentConfig";

const newCardConfig: NewCardComponentConfig = {
  styles: ComponentStyles,
  fields: {
    cardNumber: {
      containerId: string,
      CardNumberComponentConfig
    },
    expiryDate: {
      containerId: string,
      CardExpiryDateComponentConfig
    },
    cvc: {
     containerId: string,
     isShow: boolean,
     CardCvcComponentConfig
    },
    holderName: {
      containerId: string,
      isShow: boolean,
      CardHolderNameComponentConfig
    },
    cardBrandSelector: {
      containerId: string,
      CardBrandSelectorComponentConfig
      },
    cardConsent: {
      containerId: string,
      isShow: boolean,
      CardConsentComponentConfig
     }
  },
  showLoadingState: boolean,
  loadingStateTimeout: number,
  submit: CardSubmitComponentConfig,
  dynamicCardImageComponent: DynamicCardImageComponent properties,
  displayRequiredIcon: boolean,
  onChange: (state: ComponentState) => void,
  onBlur: (event: any) => void,
  onFocus: (event: any) => void,
  onValidation: (results: ValidationResult[]) => void,
  onPostTokenization: (result: CardTokenizationResult) => void
};

 const newCard = pxpCheckoutSdk.create("new-card")

Properties

Property	Description
`styles` ComponentStyles	Custom styles for the component.
`fields` object	Configuration for the form's fields.
`showLoadingState` boolean	Whether to display a loading state.
`loadingStateTimeout` number	The loading state timeout, in milliseconds.
`submit` CardSubmitComponentConfig	Configuration for the submit button component. See reference.
`dynamicCardImageComponent` DynamicCardImageComponent	Configuration for the dynamic card image component. See reference.
`displayRequiredIcon` boolean	Whether to display an icon for all required fields.

Callbacks

Callback	Description
`onChange: (state: ComponentState) => void`	Callback function triggered when a component changes state.
`onBlur: (event: any) => void`	Callback function triggered when a component loses focus.
`onFocus: (event: any) => void`	Callback function triggered when a component gains focus.
`onValidation: (data: ValidationResult[]) => void`	Callback function triggered when validation is performed.
`onPostTokenization: (data: ValidationResult[]) => void`	Callback function triggered after card tokenisation is complete.

HTML container setup

<div id="card-number-container"></div>
<div id="card-expiry-container"></div>
<div id="card-cvc-container"></div>
<div id="card-holder-container"></div>

Example

import NewCardComponentConfig from "@pxpio/web-components-sdk/components/newCardComponents/types/NewCardComponentConfig";

const newCardConfig: NewCardComponentConfig = {
  showLoadingState: true,
  loadingStateTimeout: 5000,
  styles: { 
    container: { 
      border: "1px solid #eee" 
    } 
  },
  fields: {
    cardNumber: { 
      containerId: "card-number-container" 
    },
    expiryDate: { 
      containerId: "card-expiry-container" 
    },
    cvc: { 
      containerId: "card-cvc-container" 
    },
    holderName: { 
      containerId: "card-holder-container" 
    },
  },
  submit: cardSubmitConfig,
  onPostTokenization: (token) => console.log("Tokenised:", token)
};

 const newCard = pxpCheckoutSdk.create("new-card")