Payout Split | Cortexcn

Installation

ProPart of Cortexcn Pro

The source for payout-split comes with a Cortexcn Pro license, along with every other chart and the website templates. Pick a license on the pricing page.

Buy Pro See what is in Pro

Already have a license? Open the code

Usage

import { PayoutSplit } from "@/components/payout-split";

<PayoutSplit
  settled={12480}
  parts={[
    { name: "Kiln & Co.", role: "Seller", share: 0.86 },
    { name: "Platform", role: "Marketplace fee", share: 0.08 },
    { name: "Processing", role: "Card network", share: 0.03 },
    { name: "Sales tax", role: "Held for filing", share: 0.03 },
  ]}
/>

settled is split between the parts by their share, and the shares are scaled to add up to one. Use it on the page for a marketplace, a payments platform, or a creator store, to show where each payment goes.

Examples

Course sales

Revenue from a course, split between two authors, the platform, and processing.

Static

With animated={false}, nothing moves and the amounts stay as given.

Behavior

While the flow is on screen, pulses run from the left into the splitter, then on to each part. The amounts count up from zero, then each part adds its share of perPayment every time a pulse reaches it, and the total follows.
The split bar gives each part a width by its share and a deeper tint the larger it is; each row's marker carries the same tint.
The payment count under the source label goes up as pulses reach the splitter.
With reduced motion enabled, or off screen, nothing moves and every amount shows its given value.
The whole flow is one SVG that scales to its container. It lays out at minWidth or wider (560px by default); in a narrower container it scrolls sideways and takes keyboard focus.
Amounts are written with Intl.NumberFormat in locale and currency. Screen readers hear the total, then each part's payout and share.

Props

PayoutSplit

Prop	Type	Default	Description
`parts`	`PayoutSplitPart[]`	Four sample parts	Who each payment is split between
`settled`	`number`	`12480`	The amount settled so far, split by `parts`
`perPayment`	`number`	`64`	Added to a part, before the split, per pulse
`payments`	`number`	`1312`	Payments counted so far, under the source label
`paymentsLabel`	`string`	`"payments today"`	The words after the payment count
`title`	`string`	`"Today's payouts"`	The card's title
`totalLabel`	`string`	`"Settled today"`	The label over the total
`splitterName`	`string`	`"Splitter"`	The name in the middle node
`splitterCaption`	`string`	`"Splits every payment as it settles"`	A line under the middle node
`sourceLabel`	`string`	`"Card payments"`	The label over the incoming lines
`apiLabel`	`string`	`"Ledger"`	The label on the lines into the card
`note`	`string`	`"Every payment splits the same way."`	A note at the foot of the card
`caption`	`string`	`"Illustrative numbers"`	A small label in the bottom-left corner
`currency`	`string`	`"USD"`	An ISO 4217 code for the amounts
`locale`	`string`	`"en-US"`	The locale numbers are written in
`lines`	`number`	`22`	How many lines of traffic come in from the left
`accent`	`string`	`"var(--foreground)"`	Color of the pulses, markers, and split bar
`animated`	`boolean`	`true`	Run the pulses and count up while on screen
`minWidth`	`number`	`560`	Narrowest layout width in pixels; below it, scroll
`ariaLabel`	`string`	`"Payout split"`	Names the flow for screen readers
`className`	`string`	-	Extra classes on the frame

PayoutSplitPart

Prop	Type	Default	Description
`name`	`string`	-	Who gets this part
`role`	`string`	-	What the part is, such as `"Sales tax"`
`share`	`number`	-	Its share of every payment, from 0 to 1