Payment Failure

1"use client";
2 
3import * as React from "react";
4import { XCircle, RefreshCw, Home, Mail } from "lucide-react";
5import { Button } from "@/components/ui/button";
6import {
7  Card,
8  CardContent,
9  CardDescription,
10  CardFooter,
11  CardHeader,
12  CardTitle,
13} from "@/components/ui/card";
14import { cn } from "@/lib/utils";
15 
16export interface PaymentFailureProps extends React.HTMLAttributes<HTMLDivElement> {
17  /**
18   * Optional heading at the top.
19   * @default "Payment Failed"
20   */
21  title?: string;
22 
23  /**
24   * Short description under the title.
25   * @default "We couldn't process your payment."
26   */
27  subtitle?: string;
28 
29  /**
30   * Extra explanatory message under the reasons list.
31   * @default "Please check your payment details and try again, or contact your bank for more information."
32   */
33  message?: string;
34 
35  /**
36   * Bullet points explaining common failure reasons.
37   */
38  reasons?: string[];
39 
40  /**
41   * Whether the primary action is in loading / retrying state.
42   */
43  isRetrying?: boolean;
44 
45  /**
46   * Label for the primary CTA button.
47   * @default "Try Again"
48   */
49  retryButtonText?: string;
50 
51  /**
52   * Label for the secondary button (e.g. Home).
53   * @default "Home"
54   */
55  secondaryButtonText?: string;
56 
57  /**
58   * Label for the tertiary button (e.g. Support).
59   * @default "Support"
60   */
61  tertiaryButtonText?: string;
62 
63  /**
64   * Called when user clicks the primary CTA (Try Again).
65   */
66  onRetry?: () => void;
67 
68  /**
69   * Called when user clicks the secondary button (Home).
70   */
71  onSecondary?: () => void;
72 
73  /**
74   * Called when user clicks the tertiary button (Support).
75   */
76  onTertiary?: () => void;
77}
78 
79export const PaymentFailure = React.forwardRef<
80  HTMLDivElement,
81  PaymentFailureProps
82>(
83  (
84    {
85      className,
86      title = "Payment Failed",
87      subtitle = "We couldn't process your payment.",
88      message = "Please check your payment details and try again, or contact your bank for more information.",
89      reasons = [
90        "Insufficient funds in your account",
91        "Incorrect card details or expired card",
92        "Card declined by your bank",
93        "Network connection issues",
94      ],
95      isRetrying = false,
96      retryButtonText = "Try Again",
97      secondaryButtonText = "Home",
98      tertiaryButtonText = "Support",
99      onRetry,
100      onSecondary,
101      onTertiary,
102      ...props
103    },
104    ref,
105  ) => {
106    return (
107      <Card ref={ref} className={cn("w-full max-w-md", className)} {...props}>
108// … truncated