Embed deposit history
Display payout history and open a selected deposit.
Confirm account eligibility
This component requires an active NMI Payments account. Gateway-only accounts are not supported. Confirm eligibility before including deposit reporting in your merchant offering.
Provide a scoped session
Implement fetchSessionId through your backend. Its response contains sessionToken and expiresAt. Protect the long-lived credential and derive merchant access from your authenticated application session.
Configure the view
DepositReporting supports filtering, pagination and exports; it can contain DepositSummary for row-to-detail navigation. Control Purpose appearance Shared component theme onError Visible recoverable error onRowClick Respond to a selected record
Verify before rollout
The source publishes @nmipayments/nmi-reporting-react for React and @nmipayments/nmi-reporting for vanilla JavaScript. Keep private credentials on your server and supply short-lived session data through fetchSessionId. TransactionReporting also requires a reportingServiceUrl that the source leaves unspecified; obtain the provisioned URL rather than guessing.
Install the documented package
npm install @nmipayments/nmi-reporting-react # Or, for vanilla JavaScript: npm install @nmipayments/nmi-reporting
Published data and event types
These are the source type definitions. Keep component-specific names and enums distinct; they are not one universal reporting record. interface SessionResponse { sessionToken: string; expiresAt: number; } interface DepositData { id: string; created: string; // ISO 8601 format status: DepositStatus; amount: number; // Decimal number with currency precision transactionCount: number; accountNumber: string; // Account number (last 4 digits) } type DepositStatus = 'pending' | 'completed' | 'released'; interface DepositFilters { status?: 'all' | DepositStatus; search?: string; // Search term for filtering across deposit fields startDate?: string; // ISO 8601 date string for filtering by created date (inclusive) endDate?: string; // ISO 8601 date string for filtering by created date (inclusive) } interface SortConfig { field: 'created' | 'status' | 'amount' | 'transactionCount' | 'id'; direction: 'asc' | 'desc'; } interface PaginationState { currentPage: number; pageSize: number; totalCount: number; lastPage: number; } interface ExportData extends ExportConfig { downloadUrl: string; fileSize: string; expiresAt: string; fileHash: string; } interface ExportConfig { format: 'csv'; filters: DepositFilters; sort: string; }
Deposit-specific behavior
Deposit History requires an active NMI Payments account; gateway-only accounts are unsupported. History lists pending/completed/released, while Summary lists completed/failed/released. These differing enums are preserved. Nest DepositSummary inside DepositReporting for automatic selection, or pass depositId for standalone detail.
Fetch a scoped session
The backend must convert endpoint date-time expires_at into the numeric unit required by your installed component version. The source does not state seconds versus milliseconds. ExportData.expiresAt is a separate string field for export downloads. export async function fetchSessionId() { // This application route derives merchant identity from the signed-in session. const response = await fetch('/api/reporting-session', { method: 'POST', credentials: 'same-origin' }); if (!response.ok) throw new Error('Reporting session unavailable'); const session = await response.json(); if (typeof session.sessionToken !== 'string' || typeof session.expiresAt !== 'number') { throw new Error('Invalid reporting session response'); } return session; } Session API contract
Mount the React component
Pass the server-backed session adapter described above. Supply application handlers for errors and export data; the export callback does not itself save a file. import { DepositReporting } from '@nmipayments/nmi-reporting-react'; export function Report({ fetchSessionId, onExport, onError }) { return <DepositReporting fetchSessionId={fetchSessionId} pagination={{ pageSize: 25, currentPage: 1 }} onExport={onExport} onError={onError} />; }