CardNumberComponentConfig

View the reference for the CardNumberComponentConfig file.

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

PropertyDescription
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

CallbackDescription
onCardBrandDetected: (event: Event) => voidCallback function triggered when the card brand is recognised.
onCardBrandCanNotRecognized: (event: Event) => voidCallback 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");