shadcn.io is not affiliated with official shadcn/ui
Payment Gateway Uptime Monitoring Block for Svelte
Authorisation success for three payment gateways over 24 hours as step lines with failovers pinned, a cursor that reads every gateway's rate and share of traffic, a Success or Latency toggle and a table of the day.
Installation
Overview
See which payment gateway slipped and where the traffic went, with this uptime panel for Svelte with Ark UI. It is Tillerpay, a payment router, sending card payments through Cardlane, Wirebridge and Payvale (all made up). A hairline frame with a plus mark on each corner holds a step plot of 24 hours at half-hour steps: one line per gateway, told apart by a solid, a dashed and a dotted stroke rather than by colour. Failovers are diamond buttons above the plot; pressing one jumps the cursor to it and reads how much traffic moved and when the gateway it left was back above 95%. A hidden range over the plot is the cursor, and a row of three figures reads each gateway's rate and its share of traffic at that half hour. A Toggle Group swaps the measure between Success and Latency (the p95 time). Under the plot a table lists each gateway's day: success, p95 time, traffic now as a bar and a state word; on a phone it becomes a list. Guides draw the frame and its bands; the entrance is CSS only. For payment routers, checkout health and any service with fallbacks.
FAQ
How do I use my own gateways?
Edit GATEWAYS: each has a success series and a latency series of 48 half-hour samples, oldest first, and the share of payments it carried at the start. PINS lists the failovers by their place on the axis (a fraction of a sample), the gateway traffic moved from and to, and how many points moved. Shares at any half hour are worked out from the pins, and the "back above 95%" time is the first later sample over BACK_AT.
How does the cursor work?
It is a native range laid over the plot, named Time, whose value text is the half hour ("09:00 UTC"). Arrow keys move it one half hour, Home and End jump to the ends, and dragging scrubs it. The reading under the plot updates at once; a polite status line speaks it about 600 ms after the last change, so a drag is not read out sample by sample.
What is real here and what is typed?
All of it is typed: the series, the pins and the table are examples, and nothing is routed or measured. The gateway names are made up and no real processor is named. In your app feed the same shapes from your payments data; the plot, the shares and the state words are derived from them.
Can I read it without colour?
Yes. The lines differ by dash and weight, the cursor marks them with a circle, a square and a diamond, each figure is labelled with the gateway's name and its line sample, and state is a mark and a word (Healthy or Degraded). The table and the three figures are the plot's text equivalent.