Building a Serverless E-commerce Storefront with React and Stripe

Majd Muhtaseb07/04/202510 minutes

Introduction

This article demonstrates how to build a simple, serverless e-commerce storefront. We'll use React for the frontend to display products and handle user interactions, and Stripe for secure payment processing. The backend logic will be minimal and deployed to a serverless environment (like Netlify Functions or AWS Lambda) for scalability and cost-effectiveness.

Frontend (React)

First, let's set up our React application. You can use create-react-app or your preferred method:

npx create-react-app serverless-storefront
cd serverless-storefront

We'll need a simple product listing component.

// src/components/ProductList.js
import React from 'react';

const products = [
  { id: 1, name: 'Awesome T-Shirt', price: 25 },
  { id: 2, name: 'Cool Mug', price: 15 },
];

const ProductList = () => {
  return (
    <div>
      {products.map(product => (
        <div key={product.id}>
          <h3>{product.name}</h3>
          <p>${product.price}</p>
          <button>Add to Cart</button>
        </div>
      ))}
    </div>
  );
};

export default ProductList;

// src/App.js
import React from 'react';
import ProductList from './components/ProductList';

function App() {
  return (
    <div className="App">
      <h1>Serverless Storefront</h1>
      <ProductList />
    </div>
  );
}

export default App;

Backend (Serverless Function)

For the backend, let's create a serverless function that handles creating a Stripe Checkout session. We will mock the payment flow for the sake of simplicity. In a real application, you would securely integrate the Stripe API using your secret key, not visible on the frontend. This sample will not work without a valid Stripe Secret Key.

// netlify/functions/create-checkout-session.js  (example using Netlify Functions)

exports.handler = async (event, context) => {
  //  Replace with your actual Stripe secret key. **DO NOT HARDCODE IN PRODUCTION.**

  // This example doesn't use Stripe API calls for simplicity.
  // In a real implementation, you would use the Stripe API here to create a checkout session.

  const response = {
    statusCode: 200,
    body: JSON.stringify({ sessionId: 'mock_session_id' }), // Simulated session ID
  };

  return response;
};

Integrating Stripe.js (Frontend)

To integrate with Stripe, we'll use Stripe.js.

// src/components/ProductList.js (updated)
import React from 'react';

const products = [
  { id: 1, name: 'Awesome T-Shirt', price: 25 },
  { id: 2, name: 'Cool Mug', price: 15 },
];

const ProductList = () => {

  const handleCheckout = async () => {
    try {
      const response = await fetch('/.netlify/functions/create-checkout-session', {
        method: 'POST',
      });

      const data = await response.json();
      //Redirect to Stripe Checkout (replace with actual Stripe redirection in a real app)

      window.location.href = "https://example.com/checkout?sessionId=" + data.sessionId
      console.log("Checkout Started, usually redirecting to stripe now");


    } catch (error) {
      console.error("Error creating checkout session:", error);
    }
  };

  return (
    <div>
      {products.map(product => (
        <div key={product.id}>
          <h3>{product.name}</h3>
          <p>${product.price}</p>
          <button onClick={handleCheckout}>Buy Now</button>
        </div>
      ))}
    </div>
  );
};

export default ProductList;

Deployment

Deploy your React application and serverless function to a platform like Netlify or Vercel. Ensure your serverless function is configured correctly to handle Stripe API requests (using your secure API key) in a real-world application. You would also need configure build steps for your Netlify function to ensure all dependencies are installed.

Conclusion

This provides a basic framework for building a serverless e-commerce storefront using React and Stripe. Remember to handle security considerations, error handling, and implement a real Stripe integration for production environments. This code is simplified for demonstration and does not handle security, inventory, or other production-level concerns.