Search blocks by description or jump to a page.
Payment failed billing gate showing the card on file, the exact decline code, a three attempt retry schedule, and update and retry actions.
The source for every Application block is included with Pro and Team. Start a plan to copy the code.
Already on a plan? Log in
Payment Failed State is a centered billing gate that lowers the temperature rather than raising it. A CreditCard icon sits above the heading Payment failed and a line saying the card on file could not be charged for the Team plan while the workspace keeps working. The card on file is named, Visa ending in 4242, the exact decline code is shown in mono, card_declined: insufficient_funds, and a three attempt retry schedule lists the failed first attempt and two scheduled dates. Update payment method and Retry charge now give both paths forward.
The attempts are a small array driving the schedule rows and their failed or scheduled icons from one place. The reassuring framing is the point: a muted note promises the workspace becomes read only only if the final attempt fails, nothing is deleted, and exports stay available, while the footer names who can change the card and where to write for invoicing or bank transfer.
Reach for this block when a subscription charge is declined and the retry window is still open, wired to your billing state so the card, the decline code, and the retry dates are real. Keep the retry and update actions working and gate them behind the owner and billing admin check the footer promises.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the declined subscription retry gate. Other payment failure states:
Tip: state exactly what pauses and when so a declined charge reads as a fixable retry, never a sudden lockout.