--- updatedAt: 2026-11-11T10:49:16.000Z agentTools: siteIndex: https://developer.paymentology.com/llms.txt projectIndex: https://developer.paymentology.com/lume/llms.txt --- # Android SDK # 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) ```kotlin 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 ```kotlin 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: 1. **Global defaults** via `sdk.styleConfiguration` — applied to all SDK views. 2. **Per-instance overrides** via `UILibrary.CardOverview` parameters — take precedence over global defaults. ### `CardDetailsViewProperties` High-level toggles stored in `sdk.styleConfiguration.cardDetailsViewProperties`. ```kotlin 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` ```kotlin enum class CardDetailsViewStyle { BriefStyle, // Compact representation — balance only DetailStyle // Full representation — balance, masked PAN, expiry } ``` #### Usage ```kotlin val props = sdk.styleConfiguration.cardDetailsViewProperties props.actionButton = true props.slider = false props.cardInfoStyle = CardDetailsViewStyle.BriefStyle ``` ### `CardOverviewProperties` Per-instance overrides passed directly to `UILibrary.CardOverview`. ```kotlin 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`. ```kotlin 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 ```kotlin @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?` with keys: * `"pan"` — PAN image * `"expiry"` — Expiry date image * `"embossName"` — Cardholder name image * `"cvv"` — CVV image ```kotlin lifecycleScope.launch { val images: Map? = 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. # Sibling pages * [iOS MFE](https://developer.paymentology.com/lume/docs/ios-card-list-mfe.md) * [Card List - Headless / API](https://developer.paymentology.com/lume/docs/api.md)