Reference

import CardNumberComponentConfig from "@pxpio/web-components-sdk/components/cardNumberComponents/CardNumberComponent";

const cardNumberConfig: CardNumberComponentConfig = {
  formatCardNumber: boolean,
  renderCardBrandSelector: boolean,
  acceptedCardBrands: [],
  validationOnChange: boolean,
  validationOnBlur: boolean,
  showHintIcon: boolean,
  showTooltip: boolean,
  hintIconSrc: string,
  cardCvcComponent: CardCvcComponent,
  cardBrandSelectorComponent: CardBrandSelectorComponent,
  dynamicCardImageComponent: DynamicCardImageComponent,
  onCardBrandDetected: (event: Event) => void,
  onCardBrandCanNotRecognized: (event: Event) => void
};

const cardNumber = pxpCheckoutSdk.create("card-number");

Properties

Property	Description
`formatCardNumber` boolean	Whether to auto-format the number as typed.
`renderCardBrandSelector` boolean	Whether to rend the card brand drop-down.
`acceptedCardBrands` CardBrands[]	The list of accepted card brands.
`validationOnChange` boolean	Whether to validate on input change.
`validationOnBlur` boolean	Whether to validate on input blur.
`showHintIcon` boolean	Whether to display a hint icon.
`hintIconSrc` string	The URL to your custom hint icon.
`showTooltip` boolean	Whether to show a tooltip when hovering over the hint.
`cardCvcComponent` CardCvcComponent	Component for the CVC component. See reference.
`cardBrandSelectorComponent` CardBrandSelectorComponent	Configuration for the card brand selector component. See reference.
`dynamicCardImageComponent` DynamicCardImageComponent	Component to display dynamic card images. See reference.

Callbacks

Callback	Description
`onCardBrandDetected: (event: Event) => void`	Callback function triggered when the card brand is recognised.
`onCardBrandCanNotRecognized: (event: Event) => void`	Callback function triggered when the card brand is unrecognised.

HTML container setup

<div id="card-number-container"></div>
<div id="card-brand-selector-container"></div>

Example

import CardNumberComponentConfig from "@pxpio/web-components-sdk/components/cardNumberComponents/CardNumberComponent";

const cardNumberConfig: CardNumberComponentConfig = {
  formatCardNumber: true,
  acceptedCardBrands: ["visa", "mastercard"],
  showHintIcon: true,
  hintIconSrc: "/assets/card-hint.svg"
};

const cardNumber = pxpCheckoutSdk.create("card-number");