Dunning Banner
Payment-failed notice with the card charged, retry schedule, exact access-pause date, and an update payment method action.
Payment-failed notice with the card charged, retry schedule, exact access-pause date, and an update payment method action.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Dunning Banner is the payment-failed notice, a single card with a TriangleAlert icon and the plain headline Your last payment did not go through. The body names the card (Visa ending 4242), the amount ($96), the attempt date (Jun 13, 2026), and immediately reassures: nothing has changed for your team yet. Two ruled rows follow: the 7-day retry window with the specific retry dates Jun 16 and Jun 20, and the hard deadline, workspace becomes read-only at 00:00 UTC on Jun 21 if it keeps failing, with the explicit note that no data is deleted.
All copy is in one component, no arrays needed. The footer clarifies that updating the card now charges immediately and removes the Jun 20 deadline, so the action is meaningful and the consequence is visible before clicking.
Reach for this block at the top of any authenticated page when a payment is in the retry window, wired to your billing status endpoint. Replace the card last four, amount, and dates with real values; generic copy like your card was declined earns less trust than specifics.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the active dunning notice. Other payment status banners:
Tip: name the retry dates explicitly so users can plan around them rather than checking back daily.