Payment flowPro
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.
Live · keyboard ready
- A payments or checkout landing section that explains authorization and settlement.
- Docs pages introducing processors, card networks, issuers, fees, and payout timing.
- Use checkout-flow or checkout-live for a real checkout form.
- Use webhook-fanout to explain what happens after a payment event is emitted.
Installation
Pro source and install commands unlock with a Pro plan.
example.tsx
import { PaymentFlow } from "@/registry/components/payment-flow/payment-flow"; export function PaymentsSection() { return <PaymentFlow amount={42.5} fee={1.53} balance={1284.1} currency="USD" caption="Approved in about a second, paid out the next business day." />;}PaymentFlow
An animated card payment illustration. A tap at checkout sends the amount as a small chip through the processor and the card network to the issuing bank, slipping under each node while it is processed as that node's status line changes. The bank approves, and an approval chip travels back and repaints the path in success. Then settlement runs on a second rail: the funds clear through the network, the processor takes its fee (the chip turns into the net amount), and the payout lands in the merchant balance, which counts up. A step row under the diagram counts the authorization time and fills as settlement runs.
PropTypeDefaultDescription
nodes{ terminal?, processor?, network?, issuer?, merchant?: PaymentFlowNode }Checkout, Stripe, Mastercard, Bank, Your balanceThe five stops. Each one you pass replaces the default for that stop. A node is { label, meta?, detail?, icon?, color? }: meta is the resting second line, detail is the hover tag, icon is SVG path data on a 24 by 24 viewBox painted in color, an image URL, or any ReactNode. The merchant's second line always shows the balance.amountnumber42.5The charge, shown on the chip that travels to the bank.feenumber1.53What the processor keeps at settlement. The payout is amount minus fee.balancenumber1284.1Merchant balance before the first payout. It grows by the payout on every loop.currencystring"USD"ISO currency code for every amount.localestring"en-US"Locale for money formatting. Keep it fixed so the server and the browser agree.authorizationMsnumber1340Authorization time the step row counts to, in milliseconds.labels{ authorization?: string; settlement?: string; settlementTime?: string; approved?: string }Authorization, Settlement, Next business day, ApprovedPhase names in the step row, when settlement happens, and the text on the approval chip.hideStepsbooleanfalseHides the step row and shows only the diagram.speednumber1Multiplies the pace. At 1 one payment takes about 15 seconds. 0 holds still.pausedbooleanfalseHolds the diagram still where it is, easing to rest instead of stopping in one frame.accentstring–Color of the moving amount, the active path, the settlement rail, and hovered wires. Defaults to the accent token. Approval and settled states stay semantic success.labelstring–Accessible description of the diagram. Built from the nodes and amounts when left out.captionReactNode–Optional visible caption under the diagram, rendered as a figcaption.classNamestring–Extra class on the root figure.styleCSSProperties–Inline styles on the root figure.- The diagram is one element with role="img" and an aria-label that tells the whole story: the amount, every hop, the approval, the fee, and the payout.
- Nodes are not controls, so nothing enters the tab order; hover tags only repeat optional detail.
- State never relies on color alone: every node's status line reads Checking risk, Routed to bank, Approved, Cleared, Fee $1.53, or Settled, and the approval chip carries a check and a word.
- Pass caption for a visible explanation under the diagram.
- No focus ring is drawn.
- One rAF loop writes transforms, opacity, dash values, a few attributes, and text nodes straight to the DOM, and only when a value changed; React does not render per frame.
- The payment is a pure function of time, so the loop repeats seamlessly: tap, authorize, approve, settle, pay out, rest. The balance keeps growing from loop to loop instead of jumping back.
- The amount eases from node to node and slips under each chip while it is processed, so every hop reads as enter, work, leave. The path lights in the accent behind it and turns to success as the approval travels back.
- At the processor waypoint the settlement chip crossfades from the gross to the net amount, which is the fee shown as cause and effect; the balance then counts up with tabular numerals.
- Speed changes, pausing, and hover (which slows the story a little) ease on a critically damped spring. The loop stops off screen, in hidden tabs, and when paused.
- Reduced motion shows a still frame just after the fee: approved at checkout, the network cleared, the bank settled, and the net amount on its way to the balance.
- The diagram is measured in real pixels and drawn in an SVG viewBox of that size, so text and hairlines stay crisp at any width.
- Below 700px it turns vertical: the four hops stack on the left and the balance sits top right, with the settlement rail running up beside the chain.
- The step row stacks into one column below 420px. Hover tags only appear for a mouse.
- About forty small elements driven by a single loop that caches every written value.
- Paths are sampled once per layout into small length tables; nothing is measured per frame.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use it to explain how a card payment works, why payouts arrive later than approvals, or where fees come from, on a landing page or in docs.
- Match the fee and amount to the product's real pricing so the diagram tells the truth, and swap the processor and network marks for the ones the product uses.
- Keep node labels to one or two words; the status lines carry the story.
The full library index for assistants is at /llms.txt.