Learn about how to customise the dynamic card image component.
val dynamicCardImageComponentConfig = DynamicCardImageComponentConfig(
defaultCardNumber = String,
defaultCardHolderName = String,
defaultExpiryDate = String,
defaultCvc = String,
defaultBankName = String,
cardDisplayMode = CardDisplayMode,
style = DynamicCardImageStyle,
highlightedCardField = CardFieldType?,
cardNumberComponent = CardNumberComponent?,
cardExpiryDateComponent = CardExpiryDateComponent?,
cardCvcComponent = CardCvcComponent?,
cardHolderNameComponent = CardHolderNameComponent?
)| Property | Description |
|---|---|
defaultCardNumberString | Default card number to display when no real card number is provided. Defaults to "1234 5678 9012 3456". |
defaultCardHolderNameString | Default card holder name to display when no real name is provided. Defaults to "CARD HOLDER NAME". |
defaultExpiryDateString | Default expiry date to display when no real expiry date is provided. Defaults to "12/25". |
defaultCvcString | Default CVC to display when no real CVC is provided. Defaults to "123". |
defaultBankNameString | Default bank name to display when no bank name is provided. Defaults to "BANK". |
cardDisplayModeCardDisplayMode | Card display mode. Defaults to BOTH_STAGGERED. Options: FRONT, BACK, BOTH_STAGGERED. |
styleDynamicCardImageStyle | Component styling configuration. Defaults to default style. |
highlightedCardFieldCardFieldType? | Field to highlight initially. Possible values:
|
cardNumberComponentCardNumberComponent? | Card number component instance for integration. See Card number. |
cardExpiryDateComponentCardExpiryDateComponent? | Card expiry date component instance for integration. See Card expiry date. |
cardCvcComponentCardCvcComponent? | Card CVC component instance for integration. See Card CVC. |
cardHolderNameComponentCardHolderNameComponent? | Card holder name component instance for integration. See Cardholder name. |
data class DynamicCardImageComponentConfig(
val onCardBrandChanged: ((CardBrand) -> Unit)? = null
)| Callback | Description |
|---|---|
onCardBrandChanged: (CardBrand) -> Unit | Event handler for when a card brand is detected. |
For more information about callbacks, see Events.
import com.pxp.checkout.components.dynamicCardImage.DynamicCardImageComponent
import com.pxp.checkout.components.dynamicCardImage.DynamicCardImageComponentConfig
import com.pxp.checkout.components.dynamicCardImage.CardDisplayMode
import com.pxp.checkout.components.dynamicCardImage.CardFieldType
import com.pxp.checkout.styles.DynamicCardImageStyle
// Optional: Create custom styling
val customStyle = DynamicCardImageStyle(
cardWidth = 320.dp,
cardHeight = 200.dp,
cardCornerRadius = 16.dp,
cardElevation = 8.dp,
frontCardColor = Color(0xFF1565C0),
backCardColor = Color(0xFF424242),
textColor = Color.White,
placeholderTextColor = Color.White.copy(alpha = 0.7f),
highlightColor = Color.Yellow,
animationDuration = 300
)
val config = DynamicCardImageComponentConfig(
// Display configuration
cardDisplayMode = CardDisplayMode.BOTH_STAGGERED, // Options: FRONT, BACK, BOTH_STAGGERED
// Default placeholder values (shown when no real data available)
defaultCardNumber = "1234 5678 9012 3456",
defaultCardHolderName = "CARDHOLDER NAME",
defaultExpiryDate = "12/25",
defaultCvc = "123",
defaultBankName = "BANK NAME",
// Component integrations (optional - for automatic synchronisation)
cardNumberComponent = cardNumberComponent,
cardExpiryDateComponent = cardExpiryComponent,
cardCvcComponent = cardCvcComponent,
cardHolderNameComponent = cardHolderNameComponent,
// Visual configuration
style = customStyle,
highlightedCardField = CardFieldType.CARD_NUMBER, // Initially highlighted field
// Event callbacks
onCardBrandChanged = { cardBrand ->
println("Card brand detected: $cardBrand")
// Handle card brand changes
handleCardBrandChange(cardBrand)
}
)
val dynamicCardImageComponent = checkout.createComponent<DynamicCardImageComponent, DynamicCardImageComponentConfig>(
type = ComponentType.DYNAMIC_CARD_IMAGE,
config = config
)