Modernizing Non-Profit Donations with Stripe & Sanity

The Legacy Burden

For years, a prominent Non-Governmental Organization (NGO) struggled with a slow, cumbersome WordPress website. Updating campaigns required technical knowledge, and the donation portal was confusing and frequently timed out.

As a result, they were losing potential donors at the checkout stage. They hired us to completely rebuild their digital presence.

The Headless Revolution

We transitioned them to a Headless Architecture.

Instead of an all-in-one monolith, we decoupled the frontend from the backend:

Frontend: A lightning-fast, highly accessible React application built with Next.js.
Backend (Content): Sanity CMS, providing a beautiful, custom dashboard for volunteers to update content without touching code.

Building a Frictionless Donation Flow

The most critical feature was the donation portal. We integrated the Stripe API directly into the Next.js application.

By using Stripe Elements, we built a completely custom checkout flow that kept the user on the NGO's website rather than redirecting them to a generic payment page.

// Simplified Stripe integration for one-time vs recurring
const session = await stripe.checkout.sessions.create({
  payment_method_types: ['card'],
  line_items: [
    {
      price: isRecurring ? recurringPriceId : oneTimePriceId,
      quantity: 1,
    },
  ],
  mode: isRecurring ? 'subscription' : 'payment',
  success_url: `${domain}/thank-you`,
  cancel_url: `${domain}/donate`,
});

We also implemented Apple Pay and Google Pay, allowing users to donate securely in just two taps.

The Impact

The results were immediate. By combining lightning-fast page loads (improving SEO and user trust) with a frictionless, modern checkout experience, the NGO saw a 45% increase in monthly recurring donations within the first 60 days of launch.

This project proves that investing in a premium digital experience pays tangible dividends, even in the non-profit sector.