PaymentLifecycleTracker

stable

SWIFT / ACH / SEPA payment lifecycle stepper with per-step timestamps, actor labels, and reference IDs

Finance/Storybook ↗

import { PaymentLifecycleTracker } from "@danagraph/design-system/finance"

Loading demo…

Props

Prop	Type	Default	Description
`rail`req	`PaymentRail`	—	Payment network (SWIFT, ACH, SEPA, etc.)
`reference`req	`string`	—	Payment reference ID
`currentStep`req	`PaymentLifecycleStep`	—	Current active lifecycle step
`stepData`	`Partial<Record<PaymentLifecycleStep, StepData>>`	—	Per-step timestamps, actors, and notes
`networkRef`	`string`	—	UETR or network message ID
`compact`	`boolean`	—	Single-row compact layout

railrequired

Type PaymentRailDefault —

Payment network (SWIFT, ACH, SEPA, etc.)

referencerequired

Type stringDefault —

Payment reference ID

currentSteprequired

Type PaymentLifecycleStepDefault —

Current active lifecycle step

stepData

Type Partial<Record<PaymentLifecycleStep, StepData>>Default —

Per-step timestamps, actors, and notes

networkRef

Type stringDefault —

UETR or network message ID

compact

Type booleanDefault —

Single-row compact layout

semantic type border temporal payment

Design Rationale

This component was designed to express:

View all principles →

Explore Related

PaymentTracker→

End-to-end payment lifecycle tracker with step progression and SLA deadline

PaymentStatusTracker→

Payment lifecycle tracker with maker/checker pipeline and rejection handling

SettlementNetCard→

Net settlement position card: gross debit, gross credit, net amount, counterparty, value date, netting method

Was this helpful?