Example using Stripe with TypeScript and react-stripe-js
This is a full-stack TypeScript example using:
- Live demo: https://nextjs-typescript-react-stripe-js.vercel.app/
- CodeSandbox: https://codesandbox.io/s/github/stripe-samples/nextjs-typescript-react-stripe-js
- Tutorial: https://dev.to/thorwebdev/type-safe-payments-with-next-js-typescript-and-stripe-4jo7
The demo is running in test mode — use
4242424242424242 as a test card number with any CVC + future expiration date.
4000000000003220 test card number to trigger a 3D Secure challenge flow.
Read more about testing on Stripe at https://stripe.com/docs/testing.
Deploy your own
- Global CSS styles
- Implementation of a Layout component that loads and sets up Stripe.js and Elements for usage with SSR via
- Stripe Checkout
- Stripe Elements
- Webhook handling for post-payment events
How to use
npx create-next-app --example with-stripe-typescript with-stripe-typescript-app # or yarn create next-app --example with-stripe-typescript with-stripe-typescript-app # or pnpm create next-app -- --example with-stripe-typescript with-stripe-typescript-app
.env.local.example file into a file named
.env.local in the root directory of this project:
cp .env.local.example .env.local
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
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
Setting up a live webhook endpoint
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”.
Deploy on Vercel
Deploy Your Local Project
To deploy your local project to Vercel, push it to GitHub/GitLab/Bitbucket and import to Vercel.
Important: When you import your project on Vercel, make sure to click on Environment Variables and set them to match your
Deploy from Our Template
Alternatively, you can deploy using our template by clicking on the Deploy button below.