Reference

import CardHolderNameComponentConfig from "@pxpio/web-components-sdk/components/cardHolderNameComponents/CardHolderNameComponent";

const cardHolderNameConfig: CardHolderNameComponentConfig = {
  autoCapitalize: boolean,
  defaultValue: string,
  showHintIcon: boolean,
  showTooltip: boolean,
  hintIconSrc: string,
  dynamicCardImageComponent: DynamicCardImageComponent
};

const cardHolderName = pxpCheckoutSdk.create("card-holder-name");

Properties

Property	Description
`autoCapitalize` boolean	Whether to convert the input to uppercase automatically.
`defaultValue` string	The initial value for the name field.
`showHintIcon` boolean	Whether to display a hint icon.
`showTooltip` boolean	Whether to display a tooltip on hint.
`hintIconSrc` string	The URL to your custom hint icon.
`dynamicCardImageComponent` DynamicCardImageComponent	Component to display dynamic card images. See reference.

HTML container setup

<div id="card-holder-name-container"></div>

Example

import CardHolderNameComponentConfig from "@pxpio/web-components-sdk/components/cardHolderNameComponents/CardHolderNameComponent";

const cardHolderNameConfig: CardHolderNameComponentConfig = {
  autoCapitalize: true,
  defaultValue: "JANE DOE",
  showHintIcon: true,
  hintIconSrc: "/assets/name-hint.svg"
};

const cardHolderName = pxpCheckoutSdk.create("card-holder-name")