Stripe Payment Integration with Node js and React

Integrate Stripe with Node.js and React to enable secure, fast, and scalable online payment processing in modern web applications with ease.

Key Points

Stripe’s API is PCI-compliant and trusted by developers for secure payment handling.
Prebuilt UIs reduce integration time by 40%, enabling quick and easy setup.
Stripe handles $1T+ in annual payments, trusted by Amazon, Shopify, and more.

Co-Founder

Vandana Abrol

3 min read

With Over 14 years of Experience in the IT Field, Helping Companies Optimise there Products for more Conversions

image showing stripe payment integration in with node js and react

Stripe payment integration with Node.js and React enables seamless online transactions by connecting a React frontend with a Node.js backend using the Stripe API.

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:

A Stripe account: Sign up at Stripe and obtain your API keys.
Node.js installed: Ensure you have Node.js installed on your system to run the backend server.
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:

stripe: The official Stripe SDK that enables communication with Stripe’s API for handling payments.
dotenv: Helps in managing sensitive API keys using environment variables.
express: A minimal and flexible Node.js web framework used for building APIs.
cors: Middleware to enable Cross-Origin Resource Sharing, allowing the frontend to communicate with the backend.
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:

Express server setup: Initializes an Express server to handle API requests.

CORS enabled: Allows frontend applications to make requests to the backend.
Stripe Payment Intent API: The /create-payment-intent endpoint generates a payment intent with a specified amount and currency.
Client Secret: This secret is returned to the frontend to complete the transaction securely.

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:

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

Use StripeCheckout in App.js

                                        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>
  );
}

Going Live

To switch from test mode to production mode:

Update Stripe API Keys

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

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

Deploy to a Production Server

Deploy the Node.js backend using Heroku, AWS, or DigitalOcean.
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:

Ensuring Secure Transactions – Stripe’s advanced encryption and fraud prevention tools protect sensitive payment data.
Enhancing User Convenience – One-click payments and card storage improve checkout efficiency.
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!