Card brand selector

Learn about customisation options for the card brand selector component.

Styling

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

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.

Example

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
)

Card brand selector

Styling

Callbacks

Example

Was this helpful?