TransactionDetailsView Microfrontend (iOS)

Part of the DigitalCardEngineSDK Library for iOS (SwiftUI)

TransactionDetailsView renders a single transaction in a card‑like layout that mirrors the design from TransactionHistoryView. Hosts provide the Transaction they want to highlight, and the microfrontend lays out the primary summary (title, amount, timestamp) followed by structured detail rows.

Callbacks

This view is informational only and does not expose callbacks. Use the data that backs the view (for example, the tapped transaction from TransactionHistoryView) to drive navigation.

API surface

public struct TransactionDetailsView: View {
    public init(transaction: Transaction) { /* ... */ }
}

It derives the row values from the provided Transaction — e.g., payment method, status, merchant category, and address.

Styling

TransactionDetailsView reuses TransactionHistoryViewStyle, so the same padding, spacing, and radius tokens affect both components.

Customization can be done in two ways:

1. Global defaults via StyleConfiguration — Applied to all views across the app
2. Runtime overrides via method parameters — Passed directly when creating a view, overriding global defaults

When both are provided, runtime parameters take precedence over global configuration.

Global Configuration

let style = sdk.getStyleConfiguration().transactionHistoryViewStyle
style.internalHorizontalPadding = 12
style.internalVerticalPadding = 16
style.radius = 16

• Header card inherits internalHorizontalPadding, internalVerticalPadding, and radius.
• Section stacks use internalGap and inherit the palette/typography from StyleConfiguration.

Runtime Customization

In addition to global configuration, you can pass style directly to individual views.

Method Signature

func getTransactionDetailsView(
    transaction: Transaction,
    style: TransactionHistoryViewStyle? = nil
) throws -> AnyView

Parameters

• style — Optional. Overrides global TransactionHistoryViewStyle for this view instance.

If not provided, the view falls back to the global configuration from sdk.getStyleConfiguration().

Example: Per-View Customization

struct TransactionDetailsScreen: View {
    let sdk: DigitalCardEngine
    let transaction: Transaction

    var body: some View {
        // Custom style for this specific view
        let customStyle = TransactionHistoryViewStyle(
            internalHorizontalPadding: 20,
            internalVerticalPadding: 16,
            externalPadding: 16,
            internalGap: 20,
            radius: 16
        )
        
        return try? sdk.getTransactionDetailsView(
            transaction: transaction,
            style: customStyle
        )
        .navigationTitle("Transaction Details")
    }
}

Note: Runtime style parameter takes precedence over global StyleConfiguration. This allows you to have app-wide defaults while customizing specific screens.

Usage Example

import SwiftUI
import DigitalCardEngineSDK

struct TransactionDetailsScreen: View {
    let sdk: DigitalCardEngine
    let transaction: Transaction

    var body: some View {
        sdk.getTransactionDetailsView(transaction: transaction)
            .navigationTitle("Transaction details")
    }
}

Use this screen together with TransactionHistoryView by passing the selected transaction into getTransactionDetailsView when the onTransactionClick callback fires.