Next.js | Donation Elements

Everfund Donation Elements are fully compatible with the latest version of Next.js, supporting both app and page routers. It works with both server and client components, due to the 'use client' directive added to the components.

Follow the instructions on this page to add Everfund Donation Elements into your Next.js project.

Install Donation Elements

pnpm add @everfund/react-sdk

Optional (Recommended) Add Apple pay Verification File

Download the domain association file found here.
Add the verification file to your public directory. The typical location would be:
- For Next.js pages router: public/.well-known/apple-developer-merchantid-domain-association
- For Next.js app router: app/.well-known/apple-developer-merchantid-domain-association
Navigate to the domain page found in your Organization’s settings page in the Everfund dashboard.
Enter your domain name in the new domain form. These are the domains that you want to enable browser payments on, and they must be the same as the domain that you are hosting your donation portal on.
Click on the verify button in the Everfund dashboard

That’s all

You can now start using the components in your application.

"use client";
 
import { useDonationCheckoutModal } from "@everfund/react-sdk";
 
export default function Example() {
  const { openModal } = useDonationCheckoutModal({
    code: "ggsm",
  });
 
  return <button onClick={() => openModal()}>Donate Now</button>;
}