# Payment flow

A card tap goes to a processor, then the network, then the bank and back with authorization, then settlement; each hop lights up with a status label and the amount travels as a chip.

- ID: `payment-flow`
- Import: `animui/payment-flow`
- Category: Special
- Runtime exports: `PaymentFlow`
- Declaration: `types/pro/payment-flow.d.ts`
- Type provenance: reconstructed-from-docs-and-runtime
- Related: data-flow

```tsx
import { PaymentFlow } from 'animui/payment-flow';
```

This import example is not a complete render recipe: read the declaration below and its local references for required props, data, callbacks and provider context. Use `animui info payment-flow` to resolve the local declaration graph. Global setup is in `llms.txt`.

```ts
/** Reconstructed from saved Arc documentation and runtime binding evidence; original TypeScript source was unavailable. */
import type { ComponentType, ReactNode, CSSProperties, Ref, ButtonHTMLAttributes, HTMLAttributes, ReactElement } from 'react';

export interface PaymentFlowNode { label: string; meta?: string; detail?: string; icon?: string | ReactNode; color?: string; }
export interface PaymentFlowProps {
  nodes?: { terminal?: string, processor?: string, network?: string, issuer?: string, merchant?: PaymentFlowNode };
  amount?: number;
  fee?: number;
  balance?: number;
  currency?: string;
  locale?: string;
  authorizationMs?: number;
  labels?: { authorization?: string; settlement?: string; settlementTime?: string; approved?: string };
  hideSteps?: boolean;
  speed?: number;
  paused?: boolean;
  accent?: string;
  label?: string;
  caption?: ReactNode;
  className?: string;
  style?: CSSProperties;
}

export declare const PaymentFlow: ComponentType<PaymentFlowProps>;

export default PaymentFlow;
```