shadcn.io is not affiliated with official shadcn/ui
Retry Schedule Cards Integration Block for React
An integration grid section for a failed-payment recovery tool connecting to Stripe: three radio cards in shared hairlines, each drawing its retry schedule on a 14-day line, with a check and an inset rule on the chosen one.
Installation
Overview
An integration grid section for React with Base UI, written for Dunlark, a fictional failed-payment recovery tool, and its Stripe connection. A compact header carries the mark pair at its end. Under a band rule, three retry schedules as radio cards in cells that share their hairlines: Gentle, Standard and Daily for a week. Each card draws its schedule on a 14-day line, the failed payment as a hollow dot at Day 0, a solid dot for every retry with its day under it and a bar at Day 14 for the cancel; the days are also written out in text, with the count and span worked out from them. The chosen card reads by a heavier title, a check and an inset rule, never a fill, and arrow keys move the choice. A foot band holds a polite status line, present from load, saying the choice stays on the page and nothing changes in Stripe. It's built from Guides and native radio inputs, with your theme's tokens for every colour. Stripe is named in text only: no Stripe logo, colour or wordmark ships with the block.
FAQ
How do I add or change a schedule?
SCHEDULES holds each one: its name, the retry days and the line about who it suits. The drawing, the days in words, "5 retries in 10 days" and the status line are worked out from the days, so add an entry and it appears as a card. Keep three cards for the three-column layout, or change the grid.
Why native radio inputs?
They give a real radio group with arrow-key movement, one tab stop and form-ready values on every base without per-library code. The title is the label, stretched over the whole card so the card is the target.
Does choosing a schedule change anything in Stripe?
No. The choice only changes the card and the status line. Hook your own save where you store the schedule.
How do screen readers read a card?
The radio is named by the schedule's title and described by the count, the days in words and who it suits; the drawn line is hidden from assistive technology because the same facts are in text. The group is a fieldset with a hidden legend.
Related
- Pro
Dunning Schedule Detail Integration
Scopes and stepsAn integration detail section for a failed-payment recovery tool connecting to Stripe: the dunning schedule as four hairline cells, a None, Read and Write table of what a restricted key allows, three steps and a Connect Stripe Shine Button.
- Pro
Webhook Endpoint Setup Integration
Keys and codeAn integration setup section for a failed-payment recovery tool connecting to Stripe: three numbered bands (a copyable webhook endpoint, a signing secret in a password field, four event checkboxes) and a foot band with a test event and a Finish setup Shine Button.
- Pro
Recovery Queue Table Integration
Synced tablesAn integration list section for a failed-payment recovery tool connecting to Stripe: a real table of six failing subscriptions with plan, amount, attempts, next retry and decline reason, a row menu (Retry now, Email customer, Pause dunning) and a tally worked out from the rows.
- Pro
Message Layouts Grid Integration
Cards and previewsAn integration grid section for a spend approvals tool posting to Slack: a list of six message layouts beside a framed preview that draws the chosen one as a greyscale message, with a drawn app tile, text, facts and action chips.
- Pro
Location Cards Grid Integration
Switch and tick gridsAn integration grid section for a stock sync tool connected to Shopify: four locations as a 2 by 2 of hairline cells, each with units on hand, a bar of stock held back, a sync switch and a slider for the reserve per variant, and a tally worked out from them.
- Pro
Credit Packs Pricing
Usage and creditsOne-time credit packs where the amounts lead: 500, 2,000, 10,000 and 50,000 credits at display size over growing coin stacks, each pack cheaper per credit, rows with a buy button on phones.