Embed transaction history

Plan a transaction view with filtering, details and exports inside your application.

Choose the reporting component

The transaction component presents payment activity; it does not collect payments. Use the Payment Component for checkout and this reporting integration for merchant visibility.

Create sessions on your server

The browser requests a short-lived session through your backend. Resolve merchant access from the authenticated application user. Keep the partner credential or applicable Merchant Central token on the server. Check merchant and operator authorization. Create the reporting session using the configured service. Return the scoped session token to the component. Handle expired sessions and denied access.

Confirm package and session setup

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. Implementation prerequisite: verified reporting package and account session configuration. This overview is not a complete executable integration.

Review the merchant experience

Provide loading, empty, unavailable and expired-session states. Test filters, record details and export permissions with two distinct merchant accounts to catch accidental cross-account access.

Wire the component properties

fetchSessionId returns a Promise containing sessionToken and numeric expiresAt. reportingServiceUrl is also required. Optional pagination defaults to pageSize 10 and currentPage 1. demoSet accepts gateway or merchant-central for preview data; remove it to load account data. Callback Payload role onTransactionsLoaded TransactionData array onRowClick Selected transaction onFilterChange Current filters onSortChange Sort field and direction onPaginationChange Page state onExport CSV download URL, expiry, size and hash onError Type, message and optional code

Resolve the session endpoint discrepancy

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 TransactionData { id: string; date: string; // ISO 8601 format type: TransactionType; status: TransactionStatus; amount: number; // Decimal number with currency precision payment_method: PaymentMethod; // e.g., 'ach' or 'card' processor_response_code: string; processor_response_code_description: string; gateway_response_code: string; gateway_response_description: string; payment_method_brand: PaymentCardBrand; payment_method_last_4: string; // Last 4 digits of card/account payment_method_expiration_date: string; // 'MM/YY' format customer_name: string; customer_email: string; customer_address: string; customer_country: string; order_id: string; entry_method: EntryMethod; merchant_defined_fields: Record<string, string>; authorization_code: string; events: TransactionEvent[]; } type TransactionType = 'payment' | 'refund'; type TransactionStatus = 'pending' | 'failed' | 'complete' | 'canceled'; type PaymentMethod = 'card' | 'ach'; type PaymentCardBrand = 'visa' | 'mastercard' | 'american_express' | 'discover'; type TransactionEvent = { name: string; description?: string; // optional date: string; // ISO 8601 format } type TransactionFilters = { statuses?: TransactionStatus[]; // Transaction status filter - exact match types?: TransactionType[]; // Transaction type filter - exact match payment_method?: PaymentMethod[]; // Payment method filter - exact match amount_min?: number; // Minimum amount filter - exact match amount_max?: number; // Maximum amount filter - exact match transaction_id?: string; // Transaction ID filter - exact match customer_first_name?: string; // Customer first name filter - exact match customer_last_name?: string; // Customer last name filter - exact match customer_email?: string; // Customer email filter - exact match start_date?: string; // ISO 8601 date string for filtering by created date (inclusive) end_date?: string; // ISO 8601 date string for filtering by created date (inclusive) } interface TransactionSortConfig { field: 'date' | 'types' | 'statuses' | 'customer_name' | 'amount' | 'id'; direction: 'asc' | 'desc'; } interface TransactionPaginationState { currentPage: number; pageSize: number; totalCount: number; lastPage: number; } interface TransactionReportingExportData extends TransactionReportingExportConfig { downloadUrl: string; fileSize: string; expiresAt: string; fileHash: string; } interface TransactionReportingExportConfig { format: 'csv'; filters: TransactionFilters; sort: string; }

Unresolved reporting details

The TransactionData definition refers to EntryMethod without defining its allowed values. The sort contract uses types/statuses while record fields use type/status. Preserve the published spellings and confirm package behavior; do not silently normalize them. The source calls onRowClick a deposit event in prose, but its type is TransactionData.

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. Obtain the reporting service URL for your environment; the source does not publish a usable value. import { TransactionReporting } from '@nmipayments/nmi-reporting-react'; export function Report({ fetchSessionId, onExport, onError, reportingServiceUrl }) { return <TransactionReporting fetchSessionId={fetchSessionId} reportingServiceUrl={reportingServiceUrl} pagination={{ pageSize: 25, currentPage: 1 }} onExport={onExport} onError={onError} />; }