Reference

import DyanmicCardImageComponentConfig  from "@pxpio/web-components-sdk/src/components/dynamicCardImageComponents/types/DynamicCardImageComponentConfig";

const dynamicCardImageConfig: DynamicCardImageComponentConfig = {
  frontDynamicCardImageBackground: string,
  backDynamicCardImageBackground: string,
  cardNumberText: string,
  cardExpiryDateText: string,
  cardHolderNameText: string,
  cvcText: string,
  textStyling: CSSProperties,
  bankNameTextStyling: CSSProperties,
  cardNumberTextStyling: CSSProperties,
  expiryDateLabelTextStyling: CSSProperties,
  expiryDateValueTextStyling: CSSProperties,
  holderNameTextStyling: CSSProperties,
  cvcLabelTextStyling: CSSProperties,
  cvcValueTextStyling: CSSProperties,
  highlightFieldStyling: CSSProperties,
  cardNumberComponent: CardNumberComponent,
  cardExpiryDateComponent: CardExpiryDateComponent,
  cardCvcComponent: CardCvcComponent,
  cardHolderNameComponent: CardHolderNameComponent,
};

const dynamicCardImage = pxpCheckoutSdk.create("dynamic-card-image");

Properties

Property	Description
`cardNumberText` string	The label for the number field on the card.
`cardExpiryDateText` string	The label for the expiry date on the card.
`cardHolderNameText` string	The label for the cardholder name on the card.
`cvcText` string	The label for the CVC field on the card.
`frontDynamicCardImageBackground` string	The URL for the image on the front of card.
`backDynamicCardImageBackground` string	The URL for the image on the back of the card (CVC side).
`textStyling` CSSProperties	General text styling for the card text.
`cvcLabelTextStyling` CSSProperties	The text styling for the CVC label.
`cvcValueTextStyling` CSSProperties	The text styling for the CVC value.
`bankNameTextStyling` CSSProperties	The text styling for the bank name.
`cardNumberTextStyling` CSSProperties	The text styling for the card number.
`expiryDateLabelTextStyling` CSSProperties	The text styling for the expiry label.
`expiryDateValueTextStyling` CSSProperties	The text styling for the expiry value.
`holderNameTextStyling` CSSProperties	The text styling for the cardholder name.
`highlightFieldStyling` CSSProperties	The styling for the field when highlighted.
`cardNumberComponent` CardNumberComponent	Component for the card number field. See reference.
`cardExpiryDateComponent` CardExpiryDateComponent	Component for the card expiry date. See reference.
`cardCvcComponent` CardCvcComponent	Component for the CVC field. See reference.
`cardHolderNameComponent` CardHolderNameComponent	Component for the cardholder name field. See reference.

Example

import DyanmicCardImageComponentConfig  from "@pxpio/web-components-sdk/src/components/dynamicCardImageComponents/types/DynamicCardImageComponentConfig";

const dynamicCardImageConfig: DynamicCardImageComponentConfig = {
  frontDynamicCardImageBackground: "/images/front.png",
  backDynamicCardImageBackground: "/images/back.png",
  cardNumberText: "Card Number",
  cardHolderNameText: "Cardholder Name",
  cvcText: "CVC",
  cardNumberComponent,
  cardHolderNameComponent,
  cardCvcComponent,
  cardExpiryDateComponent
};

const dynamicCardImage = pxpCheckoutSdk.create("dynamic-card-image");