---
updatedAt: 2026-09-02T15:10:31.000Z
agentTools:
projectIndex: https://docs.nmi.com/llms.txt
---
# Deposit Summary Component
Detailed deposit information including transaction breakdown and transactions
Show a complete view of a single deposit inside your platform, including deposit metadata, a transaction-type breakdown, and a paginated transaction list with export support.
**Requirements:** This component requires an active NMI Payments account. Gateway-only accounts are currently not supported.
**Standalone**: Render a specific deposit by passing a `depositId`.
**Event-driven (nested)**: Place it inside the `DepositReporting` component to create a master-detail workflow where clicking a deposit loads its summary automatically.
- **Deposit Metadata:** reference number, created date, and status
- **Transaction Type Breakdown:** counts and totals
- **Paginated List:** transaction-level details
- **Export:** CSV
# Installation
We offer a variety of npm modules for popular frameworks. The easiest way to get started is to install the module for the frame work being used.
```shell React
npm i @nmipayments/nmi-reporting-react
```
```shell Vanilla JS
npm i @nmipayments/nmi-reporting
```
# Getting the API Token
To load deposit data, your backend must create a session token using an NMI Payments token.
1. Log in to your **NMI Payments** portal
2. Click your username in the top-right corner
3. Select **Settings**
4. Open the **API Settings** tab
5. Click **Create New API Token**
Give the token a name, optionally restrict IPs, then click **Add New Token**.
Your new token is now generated and displayed in a popup window (along with your public key which isn't needed for the deposit history component).
Once created, it cannot be copied after initially being created so be sure to save it during creation.
# Using the API Token
See Embedded Component Authentication for more information on request and response details for using this token to create an embedded component session.
# Key Functional Component Properties
## Required Properties
### `fetchSessionId`
A function that returns a session token for the component to use.
Your API backend uses a secure API credential to obtain a session token for your component. This session token is a short-lived, secure credential that authenticates an embedded component.
```typescript
fetchSessionId: () => Promise
```
**SessionResponse Type**:
```typescript
interface SessionResponse {
sessionToken: string;
expiresAt: number;
}
```
```mermaid
sequenceDiagram
participant DR as DepositReporting Component
participant YA as Your Application
participant API as Your API
participant NMI as NMI Session Service
participant RS as NMI Reporting Service
Note over DR,RS: Session Token Flow
DR->>YA: fetchSessionId() called
Note right of DR: Component needs session token
for API authentication
YA->>API: Call your session endpoint
Note right of YA: Your app calls your API
with merchant context
API->>NMI: POST /api/v1/sessions
Note right of API: Send API credentials
and merchant context
NMI-->>API: SessionResponse
Note left of NMI: {
sessionToken: "sess_xxx",
expiresAt: timestamp
}
API-->>YA: SessionResponse
Note left of API: Return session token
to your application
YA-->>DR: SessionResponse
Note left of YA: Pass session token
to component
DR->>RS: API calls with session token
Note right of DR: Use token for all
reporting API requests
RS-->>DR: Deposit data
Note left of RS: Return deposit information
based on session permissions
```
## Optional Properties
### `appearance`
Styling configuration for the component. See the Appearance API to learn more.
```typescript
appearance?: Appearance
```
### `depositId`
Loads the component in **standalone mode**. When provided, the component will automatically load the deposit summary and transactions for the specified deposit ID. If not provided, the component will wait for a `depositSelected` event from a parent DepositReporting component.
```typescript
depositId?: string
```
### `onSummaryLoaded`
Fires with `DepositSummary` when deposit summary data is loaded.
```typescript
onSummaryLoaded?: (data: DepositSummary) => void
```
**DepositSummary Type:**
```typescript
interface DepositSummary {
referenceNumber: number;
createdDate: string; // ISO 8601 format
status: DepositStatus;
summary: DepositBreakdown[];
totalAmount: number;
currency: string;
transactionsCount: number | null;
}
interface DepositBreakdown {
type: string;
count: number | null;
subtotal: number;
total: number;
}
type DepositStatus = 'completed' | 'failed' | 'released';
```
### `onTransactionsLoaded`
Fires with `DepositTransactionPage` when transaction data is loaded.
```typescript
onTransactionsLoaded?: (data: DepositTransactionPage) => void
```
**DepositTransactionPage Type:**
```typescript
interface DepositTransactionPage {
data: DepositTransaction[];
pagination: {
page: number;
pageSize: number;
totalPages: number;
totalRecords: number;
};
}
interface DepositTransaction {
createdDate: string; // ISO 8601 date string
type: string; // 'payment', 'refund', etc.
paymentMethod: string; // Masked, e.g., "4242"
authorizationNumber: string;
amount: number;
}
```
### `onTransactionExport`
Fires when transaction export data is ready.
```typescript
onTransactionExport?: (data: TransactionExportData) => void
```
**TransactionExportData Type:**
```typescript
interface TransactionExportData extends TransactionExportConfig {
downloadUrl: string;
fileSize: string;
expiresAt: string;
fileHash: string;
}
interface TransactionExportConfig {
format: 'csv';
filters: {
search?: string;
startDate?: string;
endDate?: string;
};
}
```
### `onError`
Fires when an error occurs during data loading or processing.
**TypeScript:**
```typescript
onError?: (error: { type: string; message: string; code?: string }) => void
```
# Usage
## Standalone Mode
Provide `depositId` to load a specific deposit directly.
```javascript
console.log('Summary:', summary)}
onTransactionsLoaded={(transactions) => console.log('Transactions:', transactions)}
/>
```
## Event-Driven Mode (Nested)
When nested inside a `DepositReporting` component, the `depositId` prop is not required. The component responds to deposit selection automatically.
```javascript
console.log('Summary:', summary)}
onTransactionsLoaded={(transactions) => console.log('Transactions:', transactions)}
/>
```
## Nesting Embedded Components
Some embedded components support nesting to create a master-detail experience.
* `DepositReporting` renders a deposit list
* When a user clicks a row, it conditionally renders `DepositSummary` to show details for the selected deposit
```jsx
```
### Example Nesting Implementation
The following example demonstrates the proper implementation of nested components using `DepositReporting` and `DepositSummary`:
**JSX:**
```jsx
console.log('Deposits loaded:', deposits)}
onRowClick={(deposit) => console.log('Row clicked:', deposit)}
>
console.log('Summary loaded:', summary)}
onTransactionsLoaded={(transactions) => console.log('Transactions loaded:', transactions)}
onTransactionExport={(exportData) => console.log('Export ready:', exportData)}
onError={(error) => console.error('Error:', error)}
/>
```