# Card brand selector

Learn about customisation options for the card brand selector component.

## Styling


```kotlin
val cardBrandSelectorConfig = CardBrandSelectorConfig(
    style = CardBrandSelectorStyle?,
    allowedBrands = List<CardBrand>,
    onBrandChange = (CardBrand?) -> Unit,
    customBrandIcons = Map<CardBrand, Int>,
    defaultCardIcon = Int,
    useTransparentCardBrandImage = Boolean
)
```

| Property | Description |
|  --- | --- |
| `style`CardBrandSelectorStyle? | Component styling configuration. |
| `allowedBrands`List<CardBrand> | The list of allowed card brands. Defaults to an empty list (i.e., all brands allowed). |
| `onBrandChange`(CardBrand?) -> Unit | Brand change callback function. Defaults to an empty function. |
| `customBrandIcons`Map<CardBrand, Int> | Custom brand icon resource mappings. Defaults to an empty map. |
| `defaultCardIcon`Int | The default card icon resource. |
| `useTransparentCardBrandImage`Boolean | Whether to use transparent card brand images. Defaults to `true`. |


## Callbacks


```kotlin
data class CardBrandSelectorComponentConfig(
    val onBrandChange: ((CardBrand?) -> Unit)? = null
)
```

| Callback | Description |
|  --- | --- |
| `onBrandChange: (CardBrand?) -> Unit` | Event handler for when a user selects a different brand. |


For more information about callbacks, see [Events](/guides/checkout/components/android/card/events).

## Example


```kotlin
import com.pxp.checkout.components.cardbrandselector.CardBrandSelectorComponent
import com.pxp.checkout.components.cardbrandselector.CardBrandSelectorConfig
import com.pxp.checkout.models.CardBrand

// Optional: Define custom icons for specific brands
val customIcons = mapOf(
    CardBrand.VISA to R.drawable.custom_visa_icon,
    CardBrand.MASTERCARD to R.drawable.custom_mastercard_icon,
    CardBrand.AMEX to R.drawable.custom_amex_icon
)

val config = CardBrandSelectorConfig(
    // Specify which card brands to allow (optional - defaults to all brands)
    allowedBrands = listOf(
        CardBrand.VISA,
        CardBrand.MASTERCARD,
        CardBrand.AMEX,
        CardBrand.DISCOVER,
        CardBrand.JCB
    ),
    // Custom brand icons (optional)
    customBrandIcons = customIcons,
    // Default icon when no brand is selected (optional)
    defaultCardIcon = R.drawable.ic_custom_default_card,
    // Custom styling (optional)
    style = customBrandSelectorStyle,
    // Handle brand selection changes
    onBrandChange = { selectedBrand ->
        println("Brand selected: $selectedBrand")
        // Update related components
        updateCardNumberValidation(selectedBrand)
    }
)

val cardBrandSelectorComponent = checkout.createComponent<CardBrandSelectorComponent, CardBrandSelectorConfig>(
    type = ComponentType.CARD_BRAND_SELECTOR,
    config = config
)
```