Donation Success Page

Donation Success Page

Component File: src/features/donors/components/DonationSuccess.tsx Route: /donate/success?session_id=xxx or /donate/success?donation_id=xxx Access Level: Public (No authentication required) Last Updated: January 29, 2026 Status: ✅ Implemented

Overview

The Donation Success page displays a confirmation after a successful donation. It's designed to work with both embedded donation forms and standalone donation pages, providing donors with a clear confirmation of their gift.

Features

• Confirmation number - Unique identifier for the donation
• Donation amount - Clear display of amount donated
• Recurring indicator - Shows if donation is recurring with frequency
• Donor details - Name and email confirmation
• Organization branding - Logo and name display
• Tax receipt notice - Confirms receipt has been sent
• Social sharing - Facebook, Twitter, LinkedIn, copy link
• Return URL support - Optional redirect back to nonprofit's website

URL Parameters

| Parameter | Description | Required |

|-----------|-------------|----------|

| `session_id` | Stripe Checkout session ID | One of session_id or donation_id |

| `donation_id` | Database donation ID | One of session_id or donation_id |

| `embed` | Set to `true` for embed mode styling | Optional |

| `return_url` | URL to redirect donor back to | Optional |

Payment Flow Integration

Embed Mode Flow

When a donation form is embedded on a nonprofit's website:

1. Donor fills out embedded form 2. Clicks "Donate Now" 3. Stripe Checkout opens in new tab 4. After payment, redirects to /donate/success?session_id={CHECKOUT_SESSION_ID}&embed=true 5. Success page fetches donation details via get-donation-details edge function 6. Displays confirmation with option to return to nonprofit's site

Standalone Mode Flow

When using the full donation landing page:

1. Donor completes inline PaymentElement 2. On success, handlePaymentSuccess() sets showSuccess = true 3. Inline success screen displays within DonorLandingPage component

Edge Function: get-donation-details

Endpoint: GET /functions/v1/get-donation-details

Parameters:

• session_id - Stripe Checkout session ID
• donation_id - Database donation UUID

Response:

interface DonationDetails {
  donationId: string;
  confirmationNumber: string;
  amount: number;
  isRecurring: boolean;
  recurringFrequency?: string;
  donorName: string;
  donorEmail: string;
  organizationName: string;
  organizationLogo?: string;
  purposeName?: string;
  createdAt: string;
  taxDeductible: boolean;
}

Behavior: 1. If donation_id provided, queries donations table directly 2. If session_id provided, first tries donations table by stripe_session_id 3. If not found in database (webhook pending), fetches from Stripe API 4. Returns formatted donation details

UI Layout

┌─────────────────────────────────────────────────────────┐
│ [Logo] Organization Name                                │
├─────────────────────────────────────────────────────────┤
│                                                         │
│                    ✓                                    │
│              Thank You!                                 │
│     Your generosity makes a difference                  │
│                                                         │
├─────────────────────────────────────────────────────────┤
│                                                         │
│  Confirmation Number: ABC12345                          │
│                                                         │
│  ┌─────────────────────────────────────────────────┐   │
│  │              $100.00/month                       │   │
│  │         donated to Organization                  │   │
│  │         Purpose: Annual Fund                     │   │
│  └─────────────────────────────────────────────────┘   │
│                                                         │
│  📧 John Doe                                            │
│     john@example.com                                    │
│                                                         │
│  📅 Date                                                │
│     January 29, 2026                                    │
│                                                         │
│  🧾 Tax Receipt                                         │
│     A tax-deductible receipt has been sent...          │
│                                                         │
├─────────────────────────────────────────────────────────┤
│                                                         │
│  🔗 Spread the Word                                     │
│                                                         │
│  [Facebook] [Twitter] [LinkedIn] [Copy Link]            │
│                                                         │
├─────────────────────────────────────────────────────────┤
│                                                         │
│  [Return to Organization] or [Make Another Donation]    │
│                                                         │
│  📧 A confirmation email has been sent to...            │
│                                                         │
└─────────────────────────────────────────────────────────┘

State Management

const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const [donation, setDonation] = useState<DonationDetails | null>(null);

Error Handling

| Scenario | Behavior |

|----------|----------|

| No session_id or donation_id | Shows error: "No donation information provided" |

| Donation not found | Shows error: "Donation not found" with back button |

| Edge function error | Shows error with back button |

Related Components

• DonorLandingPage - Main donation form (has inline success for non-embed)
• PublicDonationPage - Route handler that renders DonationSuccess for /donate/success
• EventRegistrationSuccess - Similar pattern for event registrations

Related Documentation

• 08-DONOR-LANDING-PAGE.md - Donation form
• backend/shared/07-DONOR-LANDING-PAGES.md - Historical backend specification

Deployment Notes

The get-donation-details edge function must be deployed:

supabase functions deploy get-donation-details

Required environment variables:

• SUPABASE_URL
• SUPABASE_SERVICE_ROLE_KEY
• STRIPE_SECRET_KEY

Synced from IFMmvp-Frontend documentation: pages/donor-hub/09-DONATION-SUCCESS.md