shadcn.io is not affiliated with official shadcn/ui
Payment Methods Dashboard Block for React
A matrix of decline counts by payment method and reason, shaded in five steps, with a period select and a line that says what to do about the chosen cell.
Installation
Overview
See which payment methods fail and why, with this decline matrix for React with Base UI. A hairline frame with a plus mark on each corner holds a table with a row for Card, Bank transfer, Wire and Wallet, each head showing its attempts and success rate, and a column for Insufficient funds, Expired card, Do not honour, Fraud check and Network, plus a total of declines. Each cell is a button with its count, shaded in five steps against the busiest cell, and a method that cannot produce a reason reads n/a. Choosing a cell opens a line under the matrix with the share of that method's declines and attempts and what to do about the reason, such as turning on a card updater for expired cards. A Native Select in the header picks the last 7, 30 or 90 days, and the busiest cell is chosen again for the new period. The counts are typed per period and every rate and total is worked out from them. Below the medium breakpoint the matrix scrolls sideways in a region you can focus, with the method column held in place so about three reasons show at once. It's built from a native table, Native Select and Guides. For payment acceptance and growth teams.
FAQ
How do I load my own declines?
Edit PERIODS. Each period has the attempts for every method and, for every method, the decline counts in the order of REASONS. Add a method to METHODS or a reason to REASONS with its advice sentence and the table grows; list the pairs a method can never produce in NOT_APPLICABLE.
How is the shading chosen?
Each count is compared with the largest count in the matrix for that period: under 15 percent of it is the lightest step, under 40 percent the next, under 75 percent the third and the rest the solid step, with zero left unshaded. Every cell also shows its number, so the shade is never the only signal.
Where does the advice come from?
It is a typed sentence for each reason in REASONS, shown for any method. It is a suggestion and the dashboard changes nothing; in your app you could attach advice to a method and reason pair, or link each line to the setting that fixes it.
What stays local, and how do I wire it for real?
The counts and the advice are typed and the chosen cell lives in component state. To wire it up, load decline counts grouped by method and reason from your payment provider for each period, and keep the same shape.