Show a deposit breakdown
Display one deposit and the transactions behind its total.
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
DepositSummary can load a depositId directly or respond to a selection inside DepositReporting. It presents metadata, transaction breakdown and paginated entries. Control Purpose appearance Shared component theme onError Visible recoverable error onSummaryLoaded Receive summary data
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.
Choose standalone or nested mode
Standalone mode uses depositId. Nested inside DepositReporting, the summary responds to depositSelected and does not require an explicit depositId. Supply fetchSessionId to both components. The source requires an NMI Payments account; gateway-only accounts are not supported.
Handle summary and export callbacks
onSummaryLoaded receives the reference, creation date, status, currency, total and breakdown. onTransactionsLoaded receives data plus pagination. onTransactionExport provides CSV download metadata including expiry and hash. onError reports loading failures. Treat an exported download URL as temporary and protect it as account data. Property Shape fetchSessionId () => Promise<{ sessionToken: string; expiresAt: number }> depositId Optional string for standalone mode onTransactionsLoaded pagination page, pageSize, totalPages, totalRecords onError type, message, optional code
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 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'; 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; } interface TransactionExportData extends TransactionExportConfig { downloadUrl: string; fileSize: string; expiresAt: string; fileHash: string; } interface TransactionExportConfig { format: 'csv'; filters: { search?: string; startDate?: string; endDate?: 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