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
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");
Updated 15 days ago