Integrating React Stripe Checkout With Next.js ECommerce

Create an account on stripe

Create an account on stripe and get the test publishable key and secret key. Add it to the .env file

Create a stripe intent

Create a file called `stripe-payment-intent.js` under pages/api folder of your next.js app

Stripe Checkout Form

Now create a component called stripe checkout form.

Card options for styles can be placed in constants directory.

Stripe Checkout Page

Create a page called `page/stripe-checkout.js`

Thank you Page
Create a page called `page/thankyou.js`

Now go to localhost/3000/stripe-checkout

Once the payment is made it will be redirected to thank you page.

For more reference visit
https://stripe.com/docs/stripe-js/react

--

--

--

👤 Full Stack Developer at rtCamp, Speaker, Blogger, YouTuber, Wordpress, React, Node, Laravel Developer http://youtube.com/ImranSayedDev

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

The Ever So Stylish “Styled-Components” — Part 2: The Extensions!

Clone of Groww

JavaScript Core Concept 10 Important Topic I Learned

Tutorial: Create API with loopback IBM

Visual Regression Testing (how you can move fast and don’t break things)

Structuring VueJS apps with the Composition API

React Website with Image Slideshow

I Built the Same API With & Without Express. Here Are the Differences.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Imran Sayed

Imran Sayed

👤 Full Stack Developer at rtCamp, Speaker, Blogger, YouTuber, Wordpress, React, Node, Laravel Developer http://youtube.com/ImranSayedDev

More from Medium

How To Build Your Portfolio Using NextJS, TypeScript, Vercel, and CircleCI

React Dropzone and upload images Part 7 upload images and update the document

Setting up Environment Variables and Hosting on Vercel | NEXTJS

NextJs. What Next?