End-to-End Stripe Integration in React (Payments, Subscriptions & Checkout)

From One-Time Payments to Subscriptions—Stripe in React, Simplified. Build, scale, and secure every transaction with confidence.

Managing payments safely and smoothly is a common requirement when developing a contemporary web application. Because of its developer-friendly APIs, comprehensive documentation, and support for both one-time payments and monthly subscriptions, Stripe has established itself to become one of the most commonly utilised payment services.

This tutorial will follow you through integrating Stripe into a React application from start to finish, covering:

• One-time payments
• Billing for subscriptions
• Stripe Payment
• Integration of the backend
• The best methods

🚀 Why Use Stripe?

Stripe simplifies the payment processing process by managing:

• Secure card transactions
• Management of subscriptions
• International payments
• Preventing fraud

As Stripe takes care of security and compliance, you can concentrate on your product rather than creating extensive payment systems from the ground up.

🧱 Architecture Overview

This is how a standard Stripe + React configuration appears:

Frontend (React):

• Obtains payment information
• Makes use of elements and Stripe.js

Backend (Node.js/Express or similar):

• Generates Subscriptions and Payment Intents
• Securely interacts with the Stripe API

Stripe:

• Transfers payments
• Manages customers, subscriptions, bills

Looking for Stripe Integration. Let's talk

🔧 Step 1: Set Up Stripe

• Click a Stripe account
• Obtain your API keys:
  • Frontend publishable key
  • Backend secret key

Set up the dependencies:

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

💳 Step 2: One-Time Payments (PaymentIntent)

Backend (Node.js example)

Create a payment intent:
const stripe = require("stripe")(process.env.STRIPE_SECRET_KEY);
app.post("/create-payment-intent", async (req, res) => {
const { amount } = req.body;
const paymentIntent = await stripe.paymentIntents.create({
amount,
currency: "usd",
});
res.send({ clientSecret: paymentIntent.client_secret });
});

Frontend (React)

Wrap your app:
import { Elements } from "@stripe/react-stripe-js";
import { loadStripe } from "@stripe/stripe-js";
const stripePromise = loadStripe("your_publishable_key");

<Elements stripe={stripePromise}>
<CheckoutForm />
</Elements>

Payment Form

import { CardElement, useStripe, useElements } from "@stripe/react-stripe-js";
function CheckoutForm() {
const stripe = useStripe();
const elements = useElements();
const handleSubmit = async (e) => {
e.preventDefault();
const res = await fetch("/create-payment-intent", {
method: "POST",
body: JSON.stringify({ amount: 1000 }),
});
const { clientSecret } = await res.json();
const result = await stripe.confirmCardPayment(clientSecret, {
payment_method: {
card: elements.getElement(CardElement),
},
});
console.log(result);
};
return (

<form onSubmit={handleSubmit}>
               <CardElement />

Pay

);
}

🔁 Step 3: Subscriptions Billing with Stripe React

Subscriptions require:

• A Product
• A cost (created in Stripe Dashboard)

Backend: Create Customer + Subscription

app.post("/create-subscription", async (req, res) => {
const { email, paymentMethodId } = req.body;
const customer = await stripe.customers.create({
email,
payment_method: paymentMethodId,
invoice_settings: {
default_payment_method: paymentMethodId,
},
});
const subscription = await stripe.subscriptions.create({
customer: customer.id,
items: [{ price: "price_id_here" }],
expand: ["latest_invoice.payment_intent"],
});
res.send(subscription);
});

Frontend: Collect Payment Method

const { paymentMethod } = await stripe.createPaymentMethod({
type: "card",
card: elements.getElement(CardElement),
});
Send paymentMethod.id to backend to attach to customer.

🛒 Step 4: Stripe Checkout (Simplest Option)

Stripe Checkout is a prebuilt hosted payment page.

Backend: Create Checkout Session

app.post("/create-checkout-session", async (req, res) => {
const session = await stripe.checkout.sessions.create({
payment_method_types: ["card"],
mode: "payment",
line_items: [
{
price_data: {
currency: "usd",
product_data: { name: "Sample Product" },
unit_amount: 2000,
},
quantity: 1,
},
],
success_url: "http://localhost:3000/success",
cancel_url: "http://localhost:3000/cancel",
});
res.json({ id: session.id });
});

Frontend: Redirect to Checkout

const stripe = await stripePromise;
const res = await fetch("/create-checkout-session", {
method: "POST",
});
const { id } = await res.json();
stripe.redirectToCheckout({ sessionId: id });

🔔 Step 5: Webhooks (Critical for Production)

Through webhooks, Stripe can alert your backend to things like:

• Payment successful
• Subscription extended
• Payment unsuccessful

Example

app.post("/webhook", express.raw({ type: "application/json" }), (req, res) => {
const event = req.body;
if (event.type === "payment_intent.succeeded") {
console.log("Payment successful!");
}
res.sendStatus(200);
});

🔐 Best Practices

• In frontend, never reveal your private key
• Always use webhooks to verify payments
• In production, use HTTPS
• Store customer IDs securely
• Deal with unsuccessful payments with grace

⚡ When to Use What?

Use Case	Recommended Approach
Simple payments	Stripe Checkout
Custom UI payments	PaymentIntents + Elements
SaaS billing	Subscriptions API

💼 Need Help? We’ve Got You Covered

We at Kodrite specialise in creating secure, scalable, and production-ready payment methods using Stripe integration and modern frontend technologies like React.

🔧 We Offer the Following Stripe Payment Integration Services Kodrite:

• Complete Stripe integration (Node.js + React)
• Systems for recurring and one-time payments
• Setting up subscription and SaaS billing
• Custom UI implementation with Stripe Checkout
• Setting up webhooks and managing events
• Security and optimisation of payments
• Support for international and multicurrency payments

🚀 Why Choose Kodrite?

• Code layout that is clear and scalable
• Quick delivery using industry best practices
• Knowledge of actual SaaS products
• Complete support (front-end and back-end)

We can assist you with effectively utilising Stripe, whether you're developing a startup MVP or expanding an already-existing product.

📩 Get in touch with us

Please contact us if you require a full payment solution or want to include Stripe into your React application. 👉 Let's create something strong together!

🎯 Conclusion

Stripe offers a whole ecosystem for managing secure online payments in React applications. Stripe may provide you with a fully customised billing system or an instant checkout option.

Contact Us