Full-stack TypeScript example using Next.js, react-stripe-js, and stripe-node.
This is a full-stack TypeScript example using:
The demo is running in test mode -- use
4242424242424242as a test card number with any CVC + future expiration date.
4000000000003220test card number to trigger a 3D Secure challenge flow.
Read more about testing on Stripe at https://stripe.com/docs/testing.
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
Download the example:
curl https://codeload.github.com/vercel/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-stripe-typescript cd with-stripe-typescript
.env.local.examplefile into a file named
.env.localin 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
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_SECRETto this value in your
After deploying, copy the deployment URL with the webhook path (
https://your-url.now.sh/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:
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".
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
Alternatively, you can deploy using our template by clicking on the Deploy button below.
If you found a bug or want to suggest a new [feature/use case/sample], please file an issue.
Sign up to stay updated with developer news.