Dynamic card image

Learn about customisation options for the dynamic card image component.

Styling

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,
};

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 Card number.
`cardExpiryDateComponent` CardExpiryDateComponent	Component for the card expiry date. See Card expiry date.
`cardCvcComponent` CardCvcComponent	Component for the CVC field. See Card CVC.
`cardHolderNameComponent` CardHolderNameComponent	Component for the cardholder name field. See Cardholder name.

Example

const dynamicCardImageConfig: DynamicCardImageComponentConfig = {
  cardNumberText: "1234 5678 9012 3456",
  cardExpiryDateText: "MM/YY",
  cardHolderNameText: "JOHN SMITH",
  cvcText: "123",
  frontDynamicCardImageBackground: "/images/card-front-bg.png",
  backDynamicCardImageBackground: "/images/card-back-bg.png",  
  textStyling: {
    fontFamily: "monospace",
    fontSize: "14px",
    color: "#ffffff"
  }, 
  cardNumberTextStyling: {
    fontSize: "18px",
    fontWeight: "bold",
    letterSpacing: "2px",
    color: "#ffffff"
  },
  holderNameTextStyling: {
    fontSize: "12px",
    textTransform: "uppercase",
    fontWeight: "600",
    color: "#ffffff"
  }, 
  expiryDateLabelTextStyling: {
    fontSize: "8px",
    color: "#cccccc"
  }, 
  expiryDateValueTextStyling: {
    fontSize: "12px",
    fontWeight: "500",
    color: "#ffffff"
  }, 
  cvcLabelTextStyling: {
    fontSize: "8px",
    color: "#cccccc"
  },  
  cvcValueTextStyling: {
    fontSize: "12px",
    fontWeight: "500",
    color: "#333333"
  }, 
  bankNameTextStyling: {
    fontSize: "10px",
    fontWeight: "bold",
    color: "#ffffff"
  }, 
  highlightFieldStyling: {
    color: "#ffd700",
    textShadow: "0 0 4px rgba(255, 215, 0, 0.5)"
  },  
  cardNumberComponent: cardNumberComponent,
  cardExpiryDateComponent: cardExpiryDateComponent,
  cardCvcComponent: cardCvcComponent,
  cardHolderNameComponent: cardHolderNameComponent
};

Dynamic card image

Styling

Example

Was this helpful?