CardDetailsView (Android SDK)

Part of the Digital Card Engine UI SDK for Android (Jetpack Compose)

This component displays a full card details screen: balance, card art, secure fields (PAN / expiry / name / CVV via MeaWallet MCD), inline transactions, and card events. The host app supplies a DigitalCardEngineSDK instance, a CardEntity, and optional action callbacks.

Prerequisites:

Setup and Initialize completed.
Valid auth token and selected environment.
MeaWallet MCD artifact added if you render secure fields.

Quick start (Compose)

import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import com.paymentology.digital_card_engine_sdk_android.DigitalCardEngineSDK
import com.paymentology.digital_card_engine_sdk_android.ui.UILibrary
import com.paymentology.ei_card_provider_sdk.model.CardEntity

@Composable
fun CardDetailsScreen(sdk: DigitalCardEngineSDK, card: CardEntity) {
    CompositionLocalProvider(UILibrary.LocalStyleConfiguration provides sdk.styleConfiguration) {
        UILibrary.CardPageView(
            sdk = sdk,
            card = card
        )
    }
}

UILibrary.CardPageView is the full-page composition. It internally renders:

The card balance and card art.
Secure card fields (PAN, expiry, emboss name, CVV) via sdk.getCardImages() + MeaWallet MCD.
An inline transaction list (UILibrary.TransactionList).
Card lifecycle events (UILibrary.EventList).

Card overview component (`CardOverview`)

For finer control — custom action buttons, layout style, or selective rendering — use UILibrary.CardOverview directly.

Callbacks

UILibrary.CardOverview exposes four optional callbacks:

onDetails() — fired when the user taps the Card Details button (toggles secure MCD view).
onLock() — fired when the user taps the Lock button.
onManage() — fired when the user taps the Manage button.
onRetry() — fired when the user taps the retry button after a data fetch error.

Component signature

object UILibrary {
    @Composable
    fun CardOverview(
        card: CardEntity,
        properties: CardOverviewProperties = CardOverviewProperties(),
        style: CardOverviewStyleProperties = CardOverviewStyleProperties(),
        styleConfiguration: StyleConfiguration = LocalStyleConfiguration.current,
        isLoading: Boolean = false,
        errorMessage: String? = null,
        onRetry: (() -> Unit)? = null,
        onDetails: (() -> Unit)? = null,
        onLock: (() -> Unit)? = null,
        onManage: (() -> Unit)? = null,
        sdk: DigitalCardEngineSDK? = null
    )
}

Pass sdk when you want CardOverview to load secure card images internally via MeaWallet MCD.

Customization

Customization works at two levels:

Global defaults via sdk.styleConfiguration — applied to all SDK views.
Per-instance overrides via UILibrary.CardOverview parameters — take precedence over global defaults.

`CardDetailsViewProperties`

High-level toggles stored in sdk.styleConfiguration.cardDetailsViewProperties.

data class CardDetailsViewProperties(
    var actionButton: Boolean = true,
    var slider: Boolean = false,
    var cardInfoStyle: CardDetailsViewStyle = CardDetailsViewStyle.DetailStyle,
    var useFetchedImages: Boolean = false
)

Property	Type	Default	Description
`actionButton`	`Boolean`	`true`	Show the action buttons (Details, Lock, Manage).
`slider`	`Boolean`	`false`	Enable horizontal card slider (swipe between cards).
`cardInfoStyle`	`CardDetailsViewStyle`	`DetailStyle`	Choose between compact (`BriefStyle`) and expanded (`DetailStyle`) card info.
`useFetchedImages`	`Boolean`	`false`	Render secure fields from fetched card images instead of static placeholders.

`CardDetailsViewStyle`

enum class CardDetailsViewStyle {
    BriefStyle,   // Compact representation — balance only
    DetailStyle   // Full representation — balance, masked PAN, expiry
}

Usage

val props = sdk.styleConfiguration.cardDetailsViewProperties
props.actionButton = true
props.slider = false
props.cardInfoStyle = CardDetailsViewStyle.BriefStyle

`CardOverviewProperties`

Per-instance overrides passed directly to UILibrary.CardOverview.

data class CardOverviewProperties(
    val cardInfo: CardInfo = CardInfo.Brief,
    val actionButton: Boolean = true,
    val cardStatus: CardStatus = CardStatus.Default,
    val cardWidgetStyle: CardWidgetStyle = CardWidgetStyle.Large,
    val slider: Boolean = false,
    val currencySymbol: String? = null
)

enum class CardInfo { Brief, Detail }
enum class CardStatus { Default, Details, Locked }
enum class CardWidgetStyle { Default, Large }

Property	Type	Default	Description
`cardInfo`	`CardInfo`	`Brief`	Card info density: `Brief` (balance only) or `Detail` (balance + masked PAN + expiry).
`actionButton`	`Boolean`	`true`	Show action buttons in this instance.
`cardStatus`	`CardStatus`	`Default`	Visual state of the card widget: `Default`, `Details` (secure fields visible), or `Locked`.
`cardWidgetStyle`	`CardWidgetStyle`	`Large`	Widget size: `Default` (compact) or `Large` (full-width).
`slider`	`Boolean`	`false`	Show horizontal card slider in this instance.
`currencySymbol`	`String?`	`null`	Currency symbol for balance display; falls back to `sdk.styleConfiguration.currencySymbol`.

`CardOverviewStyleProperties`

Low-level visual tokens passed to UILibrary.CardOverview.

data class CardOverviewStyleProperties(
    val internalHorizontalPadding: Float = 16f,
    val internalVerticalPadding: Float = 16f,
    val externalPadding: Float = 16f,
    val internalGap: Float = 16f,
    val radius: Float = 16f,
    val containerColor: Color? = null,
    val titleTextStyle: TextStyle? = null,
    val balanceTextStyle: TextStyle? = null
)

Property	Type	Default	Applies to
`internalHorizontalPadding`	`Float`	`16f`	Left/right padding inside the card container.
`internalVerticalPadding`	`Float`	`16f`	Top/bottom padding inside the card container.
`externalPadding`	`Float`	`16f`	Outer padding around the whole card container.
`internalGap`	`Float`	`16f`	Spacing between stacked elements (e.g. card image ↔ info row).
`radius`	`Float`	`16f`	Corner radius for the card container.
`containerColor`	`Color?`	`null`	Background color override. Falls back to `palette.surface`.
`titleTextStyle`	`TextStyle?`	`null`	Typography override for the card title/label.
`balanceTextStyle`	`TextStyle?`	`null`	Typography override for the balance display.

Usage example

@Composable
fun CardDetailsScreen(sdk: DigitalCardEngineSDK, card: CardEntity) {
    CompositionLocalProvider(UILibrary.LocalStyleConfiguration provides sdk.styleConfiguration) {
        UILibrary.CardOverview(
            card = card,
            properties = CardOverviewProperties(
                cardInfo = CardInfo.Detail,
                actionButton = true,
                cardStatus = CardStatus.Default,
                cardWidgetStyle = CardWidgetStyle.Large,
                slider = false,
                currencySymbol = sdk.styleConfiguration.currencySymbol
            ),
            style = CardOverviewStyleProperties(
                externalPadding = 16f,
                internalHorizontalPadding = 16f,
                internalVerticalPadding = 16f,
                radius = 16f
            ),
            sdk = sdk,
            onDetails = { /* toggle secure MCD view */ },
            onLock   = { /* lock the card */ },
            onManage = { /* open manage screen */ },
            onRetry  = { /* retry failed data fetch */ }
        )
    }
}

Secure fields (MeaWallet MCD)

sdk.getCardImages() is a suspend function that returns a Map<String, Bitmap>? with keys:

"pan" — PAN image
"expiry" — Expiry date image
"embossName" — Cardholder name image
"cvv" — CVV image

lifecycleScope.launch {
    val images: Map<String, Bitmap>? = sdk.getCardImages()
    val panBitmap = images?.get("pan")
}

Requirements:

A card must be selected (sdk.selectCard(card) is called internally before fetching).
A valid TOTP secret must be available (getTimeBasedSecret() via the core SDK).
The MeaWallet MCD artifact must be present in your project.

Errors from MCD (e.g. missing secret, network failure) are surfaced in the UI with a retry action when using UILibrary.CardPageView.

Inline transactions and events

UILibrary.CardPageView also renders:

UILibrary.TransactionList — summary of recent transactions.
UILibrary.EventList — card lifecycle events.

To customize these independently, use them as standalone composables (see the Transaction History page). For event history, call sdk.getEventHistory(card) — the returned CardEntity carries an updated events list.

Error handling tips

Initialize the SDK before rendering details; ensure the token is valid.
If secure fields fail to load, verify the card is selected and that your backend returns the TOTP secret correctly.
For auth errors, refresh via EiCardProviderSDK.updateAuthToken(newToken) then retry.