Skip to content

Implement donation section with real payment integration #7

Description

@SaharPak

Problem

The Donation section (`DonationSection.tsx`) exists but the "Donate" button shows an alert saying "coming soon" — there's no real payment integration. We need to connect actual donation methods so supporters can contribute.

Goal

Turn the donation section into a working feature where people can actually support Tech Immigrants financially. Include multiple donation methods and clear transparency about how funds are used.

Suggested Approach

Payment Methods to Integrate

Since our audience is global (Iran + diaspora + international), we need multiple options:

  1. GitHub Sponsors — great for developer audience, set up at github.com/sponsors/TechImmigrants
  2. Buy Me a Coffee / Ko-fi — simple, well-known, international
  3. PayPal — widely available for international donors
  4. Crypto (optional) — useful for donors in countries with limited payment access
  5. Direct bank transfer (optional) — for larger donations / Finnish/EU donors

UI Design

  1. Replace the placeholder button with donation tier cards:
    • Supporter — $5/month — "Buy us a coffee"
    • 🎙️ Producer — $15/month — "Help us produce more episodes"
    • 🚀 Champion — $50/month — "Cover server & tool costs for a month"
    • 💛 Custom — Any amount — one-time donation
  2. Each tier card has a brief description of impact and a "Donate" button
  3. Below the tiers, show how funds are used (transparency section):
    • Server & hosting costs
    • Recording equipment & tools (StreamYard, etc.)
    • Content production (editing, thumbnails)
    • Open source development
  4. Show a "Thank you" wall or supporter count (if using GitHub Sponsors, this can be pulled from the API)

Technical Notes

  • For GitHub Sponsors / Buy Me a Coffee / Ko-fi: just link to external page
  • For embedded payments: consider Stripe integration via a serverless function
  • Keep it simple initially — external links are fine for v1

Files to modify

  • src/components/landing/DonationSection.tsx (major rewrite)

Acceptance Criteria

  • At least 2 working donation methods are available (e.g. GitHub Sponsors + Buy Me a Coffee)
  • Donation tiers are clearly presented with impact descriptions
  • Transparency section explains how funds are used
  • All payment links work and open in new tabs
  • Design matches the warmth of the existing section (heart icon, community tone)
  • Mobile-responsive

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or requesthelp wantedExtra attention is needed

    Type

    No type

    Projects

    Status
    Backlog

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions