- Stripe Checkout [Check stripe-end branch]
- Custom Amount Donation with redirect to Stripe Checkout:
- Server Component: app/stripe-checkout/page.tsx
- Server Action: app/actions/stripe.ts
- Checkout Session 'success' page fetches the Checkout Session object from Stripe: stripe-checkout/result/page.tsx
- Custom Amount Donation with redirect to Stripe Checkout:
- Stripe Elements [Check master branch]
- Custom Amount Donation with Stripe Payment Element & PaymentIntents:
- Server Component: app/stripe-with-elements/page.tsx
- Server Action: app/actions/stripe.ts
- Payment Intent 'success' page (via
returl_url
) fetches the Payment Intent object from Stripe: stripe-with-elements/result/page.tsx
- Custom Amount Donation with Stripe Payment Element & PaymentIntents:
- Webhook handling for post-payment events
- Route Handler: app/api/webhooks/route.ts
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
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.
After deploying, copy the deployment URL with the webhook path (https://your-url.vercel.app/api/webhooks
) and create a live webhook endpoint in your Stripe dashboard.
Once created, you can click to reveal your webhook's signing secret. Copy the webhook secret (whsec_***
) and add it as a new environment variable in your Vercel Dashboard:
- Select your newly created project.
- Navigate to the Settings tab.
- In the general settings scroll to the "Environment Variables" section.
After adding an environment variable you will need to rebuild your project for it to become within your code. Within your project Dashboard, navigate to the "Deployments" tab, select the most recent deployment, click the overflow menu button (next to the "Visit" button) and select "Redeploy".