# iOS Transaction Details

# 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

```swift
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

```swift
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

```swift
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

```swift
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

```swift
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.