2021-09-14
4549
#ecommerce#react
Ovie Okeh
9609
Sep 14, 2021 ⋅ 16 min read

React and Stripe payment system tutorial

Ovie Okeh Programming enthusiast, lover of all things that go beep.

Recent posts:

Exploring the new Chakra UI MCP Server

Discover how the Chakra UI MCP server integrates AI into your editor, reducing context switching and accelerating development by fetching real-time documentation, component data, and code insights directly in-app.

Emmanuel John
Oct 9, 2025 ⋅ 6 min read
Build AI Agent Without Langchain JS

LangChain.js is overrated; Build your AI agent with a simple fetch call

Skip the LangChain.js overhead: How to build a Retrieval-Augmented Generation (RAG) AI agent from scratch using just the native `fetch()` API.

Ikeh Akinyemi
Oct 9, 2025 ⋅ 3 min read
the replay october 8

The Replay (10/8/25): Data enrichment, CSS is back, TypeScript 5.9

Discover what’s new in The Replay, LogRocket’s newsletter for dev and engineering leaders, in the October 8th issue.

Matt MacCormack
Oct 8, 2025 ⋅ 30 sec read
Goodbye, messy data: An engineer’s guide to scalable data enrichment

Goodbye, messy data: An engineer’s guide to scalable data enrichment

Walk through building a data enrichment workflow that moves beyond simple lead gen to become a powerful internal tool for enterprises.

Alexandra Spalato
Oct 8, 2025 ⋅ 6 min read
View all posts

12 Replies to "React and Stripe payment system tutorial"

  1. hey ovie, I follow along your tutorial but running the npm run dev is not display the app instead it is showing “Error: ENOENT: no such file or directory, stat ‘D:\document-disk(d)\Stripe\react-stripe-payment\build\index.html”. I clone from your GitHub the project but it is the same error. Could you look in to it. thanks

    1. Hi Ermias,

      Sorry for the error you encountered. Run `npm run build` and then run `npm run dev`. Go to localhost:7000 to see the application.

      That would help.

  2. Thanks, Ovie! Such a beautiful explanation.

    A small tip for a question that may arise at any time from a reader: if you’re getting the “secret key” from your environment (since you’re using dotenv) when initializing your stripe, remember to call the `dotenv.config()` before importing your `stripe.js` module, so that environment variables can be processed before being used.

    1. Fill in 4242 4242 4242 4242 for the Card details field

      The checkout page will display a “Payment Successful!” UI.

  3. This method has a security issue, the frontend is setting the amount, so I can basically pay via API and choose the amount I want, I also could rewrite you array of products to put 0 amount.

Leave a Reply