"use client"; import * as React from "react"; import { XCircle, RefreshCw, Home, Mail } from "lucide-react"; import { Button } from "@/components/ui/button"; import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from "@/components/ui/card"; import { cn } from "@/lib/utils"; export interface PaymentFailureProps extends React.HTMLAttributes { /** * Optional heading at the top. * @default "Payment Failed" */ title?: string; /** * Short description under the title. * @default "We couldn't process your payment." */ subtitle?: string; /** * Extra explanatory message under the reasons list. * @default "Please check your payment details and try again, or contact your bank for more information." */ message?: string; /** * Bullet points explaining common failure reasons. */ reasons?: string[]; /** * Whether the primary action is in loading / retrying state. */ isRetrying?: boolean; /** * Label for the primary CTA button. * @default "Try Again" */ retryButtonText?: string; /** * Label for the secondary button (e.g. Home). * @default "Home" */ secondaryButtonText?: string; /** * Label for the tertiary button (e.g. Support). * @default "Support" */ tertiaryButtonText?: string; /** * Called when user clicks the primary CTA (Try Again). */ onRetry?: () => void; /** * Called when user clicks the secondary button (Home). */ onSecondary?: () => void; /** * Called when user clicks the tertiary button (Support). */ onTertiary?: () => void; } export const PaymentFailure = React.forwardRef< HTMLDivElement, PaymentFailureProps >( ( { className, title = "Payment Failed", subtitle = "We couldn't process your payment.", message = "Please check your payment details and try again, or contact your bank for more information.", reasons = [ "Insufficient funds in your account", "Incorrect card details or expired card", "Card declined by your bank", "Network connection issues", ], isRetrying = false, retryButtonText = "Try Again", secondaryButtonText = "Home", tertiaryButtonText = "Support", onRetry, onSecondary, onTertiary, ...props }, ref, ) => { return (

{title} {subtitle}

{reasons.length > 0 && (

Common reasons for payment failure:

{reason}

)} {message && (

{message}

)} {(onSecondary || onTertiary) && (

{onSecondary && ( )} {onTertiary && ( )}

)} ); }, ); PaymentFailure.displayName = "PaymentFailure";

Ecommerce - Checkout Blocks

Select an Item to view its code