a-waris/stripe-donations-checkout

Example using Stripe with TypeScript and react-stripe-js

This is a full-stack TypeScript example using:

• Frontend:
  • Next.js
  • react-stripe-js for Checkout and Elements
• Backend
  • Next.js Route Handlers and Server Actions
  • stripe-node with TypeScript

Demo

• Live demo
• Guide

The demo is running in test mode -- use 4242424242424242 as a test card number with any CVC + future expiration date.

Use the 4000002760003184 test card number to trigger a 3D Secure challenge flow.

Read more about testing on Stripe.

Checkout Donations Demo

Elements Donations Demo

Deploy your own

Once you have access to the environment variables you'll need from the Stripe Dashboard, deploy the example using Vercel:

Included functionality

• Stripe Checkout
  • Custom Amount Donation with redirect to Stripe Checkout:
    • Server Component: app/donate-with-checkout/page.tsx
    • Server Action: app/actions/stripe.ts
    • Checkout Session 'success' page fetches the Checkout Session object from Stripe: donate-with-checkout/result/page.tsx
• Stripe Elements
  • Custom Amount Donation with Stripe Payment Element & PaymentIntents:
    • Server Component: app/donate-with-elements/page.tsx
    • Server Action: app/actions/stripe.ts
    • Payment Intent 'success' page (via returl_url) fetches the Payment Intent object from Stripe: donate-with-elements/result/page.tsx
• Webhook handling for post-payment events
  • Route Handler: app/api/webhooks/route.ts

How to use

Execute create-next-app with npm, Yarn, or pnpm to bootstrap the example:

npx create-next-app --example with-stripe-typescript with-stripe-typescript-app

yarn create next-app --example with-stripe-typescript with-stripe-typescript-app

pnpm create next-app --example with-stripe-typescript with-stripe-typescript-app

Required configuration

Copy the .env.local.example file into a file named .env.local in the root directory of this project:

cp .env.local.example .env.local

You will need a Stripe account (register) to run this sample. Go to the Stripe developer dashboard to find your API keys and replace them in the .env.local file.

NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=<replace-with-your-publishable-key>
STRIPE_SECRET_KEY=<replace-with-your-secret-key>

Now install the dependencies and start the development server.

npm install
npm run dev
# or
yarn
yarn dev

Forward webhooks to your local dev server

First install the CLI and link your Stripe account.

Next, start the webhook forwarding:

stripe listen --forward-to localhost:3000/api/webhooks

The CLI will print a webhook secret key to the console. Set STRIPE_WEBHOOK_SECRET to this value in your .env.local file.