A payment failure state with a shaking x mark, an error message, reason chips and Retry and Change method buttons.
Payment declined
Your bank did not approve this.
npx shadcn@latest add https://hyperblur.dev/r/pay-failed-retry.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/pay-failed-retry.tsx.
import { PayFailedRetry } from "@/components/hyperblur/pay-failed-retry"
<PayFailedRetry reasons={["Card expired"]} onRetry={() => retryPayment()} onChangeMethod={() => openPicker()} />| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "Payment declined" | Headline under the mark. |
| message | string | "Your bank did not approve this payment." | Secondary line. Hidden when empty. |
| reasons | string[] | ["Insufficient funds", "Card expired"] | Possible reasons shown as chips. |
| retryLabel | string | "Try again" | Text of the primary button. |
| changeLabel | string | "Change method" | Text of the secondary button. |
| onRetry | () => void | Called when the retry button is clicked. The mark shakes again. | |
| onChangeMethod | () => void | Called when the secondary button is clicked. | |
| busy | boolean | false | Shows a spinner in the retry button and disables it. |
| accent | string | "#ff5d6c" | Mark and chip color. |
| loop | boolean | false | Replay the shake on an interval. |
| loopDelay | number | 5600 | Milliseconds between replays when loop is on. Minimum 2500. |