Chat Now Our Works
Digittrix logo

Home - Scripts - Payment Integration

  • 12 May 2025

Stripe Payment Integration with Node.js and React

This integration allows businesses to securely process payments, handle subscriptions, and manage transactions efficiently. By leveraging Stripe’s powerful features, Node.JS App Developers can implement a smooth checkout experience with minimal coding effort while ensuring security and compliance with global payment standards.

Backend (Node.js)

Prerequisites

Before integrating Stripe into your Node.js application, ensure you have the following: 

  1. A Stripe account: Sign up at Stripe and obtain your API keys.
     
  2. Node.js installed: Ensure you have Node.js installed on your system to run the backend server.
     
  3. Basic knowledge of Express.js: This will help in setting up the server quickly. 

Install Dependencies

To integrate Stripe in your backend, you need to install the necessary dependencies. Run the following command:
npm install stripe dotenv express cors body-parser

Explanation of dependencies: 

  1. stripe: The official Stripe SDK that enables communication with Stripe’s API for handling payments.
     
  2. dotenv: Helps in managing sensitive API keys using environment variables.
     
  3. express: A minimal and flexible Node.js web framework used for building APIs.
     
  4. cors: Middleware to enable Cross-Origin Resource Sharing, allowing the frontend to communicate with the backend.
     
  5. body-parser: Used to parse incoming request payloads, ensuring correct handling of JSON data. 

API Endpoints Explained

create-payment-intent (POST)

Description: This endpoint creates a payment intent, which is required to process payments using Stripe.

                                        app.post("/create-payment-intent", async (req, res) => {
  try {
    const { amount, currency } = req.body;
    const paymentIntent = await stripe.paymentIntents.create({
      amount: amount * 100,
      currency: currency || "usd",
      automatic_payment_methods: { enabled: true },
    });
    res.json({ clientSecret: paymentIntent.client_secret });
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});

Explanation:

  1. Express server setup: Initializes an Express server to handle API requests.
  2. CORS enabled: Allows frontend applications to make requests to the backend.
  3. Stripe Payment Intent API: The /create-payment-intent endpoint generates a payment intent with a specified amount and currency.
  4. Client Secret: This secret is returned to the frontend to complete the transaction securely.

3. Handling Webhooks

Stripe uses webhooks to notify your server about transaction updates such as successful payments, refunds, and disputes.

Setting Up a Webhook Endpoint

                                        app.post("/webhook", express.raw({ type: 'application/json' }), (req, res) => {
  const sig = req.headers['stripe-signature'];
  console.log(sig);
  let event;
  try {
    event = stripe.webhooks.constructEvent(
      req.body,
      sig,
      process.env.STRIPE_WEBHOOK_SECRET
    );
  } catch (err) {
    return res.status(400).send(`Webhook Error: ${err.message}`);
  }
  // Handle the event
  switch (event.type) {
    case 'payment_intent.succeeded':
      const paymentIntent = event.data.object;
      // Handle successful payment
      break;
    default:
      console.log(`Unhandled event type: ${event.type}`);
  }
  res.json({ received: true });
});

How to Test Webhooks Locally

To test webhook events during development, use the Stripe CLI to forward events to your local server:

stripe listen --forward-to http://localhost:5000/webhook

Frontend (React)

Install Dependencies

To integrate Stripe into your React frontend, install the following dependencies:

npm install @stripe/stripe-js @stripe/react-stripe-js axios

Explanation:

@stripe/stripe-js: Loads Stripe’s JavaScript library, enabling secure communication with the Stripe API.

@stripe/react-stripe-js: Provides pre-built React components for Stripe integration.

Axios: A promise-based HTTP client that interacts with the backend API.

Create StripeCheckout.jsx

Create a React component for handling payments with Stripe.

                                        import { useState, useEffect } from 'react';
import { useStripe, useElements, PaymentElement } from '@stripe/react-stripe-js';
import axios from 'axios';
import { useNavigate } from 'react-router-dom';
const StripeCheckout = () => {
  const stripe = useStripe();
  const elements = useElements();
  const [clientSecret, setClientSecret] = useState('');
  const navigate = useNavigate();
  useEffect(() => {
    axios.post("http://localhost:5000/create-payment-intent", {
      amount: 100,
      currency: "usd"
    })
    .then((res) => {
      setClientSecret(res.data.clientSecret);
    })
    .catch((err) => console.error(err));
  }, []);
  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!stripe || !elements) return;
    const { error, paymentIntent } = await stripe.confirmPayment({
      elements,
      confirmParams: {
        return_url: "http://localhost:5173/success", // Change this to your success page
      },
      redirect: "if_required"
    });
    if (error) {
      console.log(error.message);
    } else {
      if (paymentIntent.status === "succeeded") {
        navigate('/success');
      }
    }
  };
  return (
    <form onSubmit={handleSubmit}>
      <PaymentElement />
      <button type="submit" disabled={!stripe || !clientSecret}>
        Pay
      </button>
    </form>
  );
};

export default StripeCheckout;

Explanation:

  1. loadStripe: Loads Stripe’s public key for handling payments.
  2. Elements and CardElement: Provides secure UI components for collecting payment details.
  3. useStripe and useElements: Hooks to interact with Stripe’s API.
  4. Axios POST request: Sends a request to the backend to create a payment intent.

Use StripeCheckout in App.js

export default App;

                                        import "./App.css";
import StripeCheckout from "./checkoutForm";
function App() {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
      <h1>Stripe Payment Integration</h1>
      <StripeCheckout />
    </div>
  );
}
export default App;

Going Live

To switch from test mode to production mode:

Update Stripe API Keys

  1. Replace test keys with live keys in .env

STRIPE_SECRET_KEY=your_live_secret_key

REACT_APP_STRIPE_PUBLIC_KEY=your_live_publishable_key

STRIPE_WEBHOOK_SECRET=your_live_webhook_secret

Secure Backend Endpoints

  1. Validate request origins to prevent unauthorized access.
  2. Use authentication middleware for secure API access.

Deploy to a Production Server

  1. Deploy the Node.js backend using Heroku, AWS, or DigitalOcean.
  2. Deploy the React frontend using Netlify, Vercel, or Firebase Hosting.

Final Words

Following this guide, you have successfully integrated Stripe payments in your Node.js backend and React frontend. This implementation enables seamless transactions with a secure and scalable payment processing system. Stripe offers various payment methods, such as Apple Pay, Google Pay, and direct bank transfers, which can be implemented for enhanced user experience.

For further enhancements, consider implementing subscription billing, one-click checkout, and refund processing to expand your application's functionality.

Why Stripe Payment Integration Matters in Web and Mobile App Development

In today's digital economy, secure and seamless payment processing is essential for web and mobile applications. Whether it's an eCommerce store, a subscription-based platform, or an on-demand App, integrating Stripe payments enhances the user experience by:

  1. Ensuring Secure Transactions – Stripe’s advanced encryption and fraud prevention tools protect sensitive payment data.
  2. Enhancing User Convenience – One-click payments and card storage improve checkout efficiency.
  3. Supporting Multiple Payment Methods – Accept credit/debit cards, digital wallets, and international payments effortlessly.

At Digittrix, we specialize in secure and scalable payment integration using Stripe, Node.js, and React. Our expert developers can help you build customized, user-friendly, and highly secure payment solutions tailored to your business needs.

Looking for web or mobile app development with perfect Stripe payment integration? Contact us today!

Do you want help implementing this?

Get a summary via Google for

$0

Get Help Now!

Tech Stack & Version

Backend

  • Node.js (v16+)
  • Express.js (v4+)
  • Stripe Node SDK

Frontend

  • React.js (v18+)
  • npm install @stripe/react-stripe-js

Deployment

  • Netlify
  • Vercel
  • Firebase

Recent Scripts

API Development

Calculate Distance Using Google Maps API in Laravel

Author by Vandana Abrol – January 1, 1970 – 4 minute read

Calculate accurate travel distances and time between locations using Laravel and Google Maps API, ideal for logistics, delivery apps and location-based mobile services.

Payment Integration

Phonepe Integration in Node And React

Author by Harsh Abrol – January 1, 1970 – 3 minute read

An easy way to integrate PhonePe payment gateway into the Node.js backend and React-front-end respectively to allow secure UPI-based transactions in your web application.

PhonePe
Security

Google Login Implementation in React and Node.js

Author by Vandana Abrol – January 1, 1970 – 3 minute read

Learn how to implement Google Login in React and Node.js with OAuth authentication. Securely authenticate users and manage their data with Google’s OAuth API

img

©2025Digittrix Infotech Private Limited , All rights reserved.