Building a Serverless E-commerce Storefront with React and Stripe
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.