# Dynamic card image

Learn about how to customise the dynamic card image component.

## Styling

```kotlin
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 |
|  --- | --- |
| `defaultCardNumber`String | Default card number to display when no real card number is provided. Defaults to `"1234 5678 9012 3456"`. |
| `defaultCardHolderName`String | Default card holder name to display when no real name is provided. Defaults to `"CARD HOLDER NAME"`. |
| `defaultExpiryDate`String | Default expiry date to display when no real expiry date is provided. Defaults to `"12/25"`. |
| `defaultCvc`String | Default CVC to display when no real CVC is provided. Defaults to `"123"`. |
| `defaultBankName`String | Default bank name to display when no bank name is provided. Defaults to `"BANK"`. |
| `cardDisplayMode`CardDisplayMode | Card display mode. Defaults to `BOTH_STAGGERED`. Options: `FRONT`, `BACK`, `BOTH_STAGGERED`. |
| `style`DynamicCardImageStyle | Component styling configuration. Defaults to default style. |
| `highlightedCardField`CardFieldType? | Field to highlight initially.Possible values:`CARD_NUMBER``CARD_HOLDER_NAME``EXPIRY_DATE``CVC` |
| `cardNumberComponent`CardNumberComponent? | Card number component instance for integration. See [Card number](/guides/checkout/components/android/card/card-number). |
| `cardExpiryDateComponent`CardExpiryDateComponent? | Card expiry date component instance for integration. See [Card expiry date](/guides/checkout/components/android/card/card-expiry-date). |
| `cardCvcComponent`CardCvcComponent? | Card CVC component instance for integration. See [Card CVC](/guides/checkout/components/android/card/card-cvc). |
| `cardHolderNameComponent`CardHolderNameComponent? | Card holder name component instance for integration. See [Cardholder name](/guides/checkout/components/android/card/cardholder-name). |


## Callbacks

```kotlin
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](/guides/checkout/components/android/card/events).

## Example

```kotlin
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
)
```