A declined payment screen that explains the reason and offers three ways forward: retry the same card, enter another card, or pay by bank transfer with copyable sample details. A support card sits alongside with the order reference.
Your bank turned down the $86.40 charge from Northwind Supply. Nothing was taken from your account and your items are held for 24 hours.
Items held until tomorrow, 10:42.
npx shadcn@latest add https://hyperblur.dev/r/checkout-payment-failed.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/checkout-payment-failed.tsx.
import { CheckoutPaymentFailed } from "@/components/hyperblur/checkout-payment-failed"
<CheckoutPaymentFailed amount={129} onRecover={(values) => console.log(values)} />| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "Your payment was declined" | Section heading. |
| merchant | string | "Northwind Supply" | Merchant name in the copy. |
| amount | number | 86.4 | Amount that failed. |
| currency | string | "USD" | ISO currency code. |
| cardLabel | string | "Visa ending 0341" | Card that was declined. |
| reason | string | "Insufficient funds" | Decline reason shown in the facts row. |
| reference | string | "NW-20931" | Order reference, also used for bank transfers. |
| bank | { bank: string; accountName: string; account: string; routing: string } | Harbor Point Bank | Transfer details. Defaults are fictional sample values. |
| supportEmail | string | "billing@northwind.example" | Address used by the email button. |
| replyTime | string | "about 6 minutes" | Typical support reply time. |
| defaultMethod | "retry" | "card" | "transfer" | "retry" | Recovery option selected first. |
| onRecover | (values: { method: "retry" | "card" | "transfer"; amount: number; cardLast4: string }) => void | Called after the chosen recovery completes. | |
| onContact | (channel: "chat" | "email") => void | Called by the support buttons. | |
| accent | string | "#f43f5e" | Warning icon, glow and error color. |
| className | string | "" | Extra classes for the section element. |
| style | CSSProperties | Inline styles merged after the accent variable. |