In this tutorial, we will learn how to build a shopping cart using React and integrate Stripe for payment processing. The shopping cart will allow users to add items to their cart, update quantities, and remove items. When the user is ready to checkout, they will be redirected to the Stripe payment page to complete the purchase.<\/p>\n
Before we begin, make sure you have Node.js and npm installed on your machine. You will also need a Stripe account to obtain the necessary API keys.<\/p>\n
Let’s start by setting up a new React project.<\/p>\n
Open a terminal and run the following command:<\/p>\n
npx create-react-app shopping-cart\n<\/code><\/pre>\nOnce the project is created, navigate to the project directory:<\/p>\n
cd shopping-cart\n<\/code><\/pre>\n2. Installing Dependencies<\/h2>\n
Next, we need to install the necessary dependencies for our project. We will use the stripe<\/code> and react-stripe-checkout<\/code> libraries for integrating Stripe payment processing.<\/p>\nRun the following command to install the dependencies:<\/p>\n
npm install stripe react-stripe-checkout\n<\/code><\/pre>\n3. Setting up Stripe<\/h2>\n
To integrate Stripe into our shopping cart, we need to obtain the necessary API keys.<\/p>\n
\n- Log in to your Stripe account, or create a new account if you don’t have one.<\/li>\n
- In the Dashboard, navigate to Developers > API keys.<\/li>\n
- Copy your Publishable key<\/strong> and Secret key<\/strong>. We will use these in our code.<\/li>\n<\/ol>\n
4. Creating the Shopping Cart Component<\/h2>\n
Now let’s start building our shopping cart component.<\/p>\n
Create a new file called ShoppingCart.js<\/code> in the src<\/code> directory and add the following code:<\/p>\nimport React, { useState } from 'react';\n\nconst ShoppingCart = () => {\n const [cartItems, setCartItems] = useState([]);\n\n \/\/ TODO: Implement add to cart, update quantity, remove item, and checkout functions\n\n return (\n <div>\n {\/* TODO: Display cart items *\/}\n {\/* TODO: Implement add to cart, update quantity, and remove item buttons *\/}\n {\/* TODO: Implement checkout button *\/}\n <\/div>\n );\n};\n\nexport default ShoppingCart;\n<\/code><\/pre>\nIn the code above, we import the useState<\/code> hook from React to manage the cart items state. We also define the cartItems<\/code> state variable as an empty array. We will use this array to store the items in the cart.<\/p>\n5. Displaying Cart Items<\/h2>\n
Let’s start by displaying the items in the cart.<\/p>\n
Update the ShoppingCart<\/code> component code as follows:<\/p>\nimport React, { useState } from 'react';\n\nconst ShoppingCart = () => {\n const [cartItems, setCartItems] = useState([]);\n\n return (\n <div>\n <h2>Shopping Cart<\/h2>\n {cartItems.length === 0 ? (\n <p>No items in cart<\/p>\n ) : (\n <ul>\n {cartItems.map((item, index) => (\n <li key={index}>\n {item.name} - {item.quantity}\n <\/li>\n ))}\n <\/ul>\n )}\n <\/div>\n );\n};\n\nexport default ShoppingCart;\n<\/code><\/pre>\nIn the updated code, we display a heading “Shopping Cart” and check if cartItems.length<\/code> is zero. If the length is zero, we display a message “No items in cart”. Otherwise, we map through the cartItems<\/code> array and display each item name and quantity as a list item.<\/p>\n6. Adding Items to Cart<\/h2>\n
Let’s implement the functionality to add items to the cart.<\/p>\n
Update the ShoppingCart<\/code> component code as follows:<\/p>\nimport React, { useState } from 'react';\n\nconst ShoppingCart = () => {\n const [cartItems, setCartItems] = useState([]);\n\n const addToCart = (item) => {\n const existingItem = cartItems.find((i) => i.id === item.id);\n if (existingItem) {\n setCartItems(\n cartItems.map((i) =>\n i.id === item.id ? { ...i, quantity: i.quantity + 1 } : i\n )\n );\n } else {\n setCartItems([...cartItems, { ...item, quantity: 1 }]);\n }\n };\n\n return (\n <div>\n {\/* Display cart items *\/}\n {\/* Implement add to cart, update quantity, and remove item buttons *\/}\n {\/* Implement checkout button *\/}\n <\/div>\n );\n};\n\nexport default ShoppingCart;\n<\/code><\/pre>\nIn the updated code, we define the addToCart<\/code> function. This function takes an item as a parameter and checks if the item already exists in the cart (existingItem<\/code>). If it exists, we update the quantity of the item by finding it in the cartItems<\/code> array with find<\/code>, and if not, we add the item to the array with a quantity of 1 ([...cartItems, { ...item, quantity: 1 }]<\/code>). Finally, we update the cartItems<\/code> state with setCartItems<\/code>.<\/p>\nTo test the functionality, update the code where you’re rendering the ShoppingCart<\/code> component:<\/p>\nimport React from 'react';\nimport ShoppingCart from '.\/ShoppingCart';\n\nconst App = () => {\n const item = {\n id: 1,\n name: 'Example Item',\n };\n\n return (\n <div>\n <h1>Shopping App<\/h1>\n <ShoppingCart \/>\n <button onClick={() => addToCart(item)}>Add to cart<\/button>\n <\/div>\n );\n};\n\nexport default App;\n<\/code><\/pre>\nIn the code above, we define an item<\/code> object and pass it as a prop to the ShoppingCart<\/code> component. We also add a button and an onClick<\/code> event that calls the addToCart<\/code> function with the item<\/code> object.<\/p>\n7. Updating Item Quantities<\/h2>\n
Next, let’s implement the functionality to update item quantities in the cart.<\/p>\n
Update the ShoppingCart<\/code> component code as follows:<\/p>\nimport React, { useState } from 'react';\n\nconst ShoppingCart = () => {\n const [cartItems, setCartItems] = useState([]);\n\n const addToCart = (item) => {\n \/\/ ... (Add item to cart logic)\n };\n\n const updateQuantity = (item, quantity) => {\n if (quantity === 0) {\n removeItem(item);\n } else {\n setCartItems(\n cartItems.map((i) => (i.id === item.id ? { ...i, quantity } : i))\n );\n }\n };\n\n const removeItem = (item) => {\n setCartItems(cartItems.filter((i) => i.id !== item.id));\n };\n\n return (\n <div>\n {\/* Display cart items *\/}\n {cartItems.length === 0 ? (\n <p>No items in cart<\/p>\n ) : (\n <ul>\n {cartItems.map((item, index) => (\n <li key={index}>\n {item.name} - {item.quantity}\n <button\n onClick={() => updateQuantity(item, item.quantity - 1)}\n >\n -\n <\/button>\n <button\n onClick={() => updateQuantity(item, item.quantity + 1)}\n >\n +\n <\/button>\n <button onClick={() => removeItem(item)}>Remove<\/button>\n <\/li>\n ))}\n <\/ul>\n )}\n {\/* Implement add to cart button *\/}\n {\/* Implement checkout button *\/}\n <\/div>\n );\n};\n\nexport default ShoppingCart;\n<\/code><\/pre>\nIn the updated code, we define the updateQuantity<\/code> function that takes an item and a quantity as parameters. If the quantity is 0, we call the removeItem<\/code> function. Otherwise, we update the cartItems<\/code> state by mapping through the cartItems<\/code> array and updating the quantity of the item if the item ID matches (setCartItems(cartItems.map((i) => (i.id === item.id ? { ...i, quantity } : i)))<\/code>). Finally, we define the removeItem<\/code> function that filters out the item from the cartItems<\/code> array and updates the state.<\/p>\nWe also update the rendering of the cartItems<\/code> in the return<\/code> statement to include buttons for updating the quantity (-<\/code> and +<\/code>), and a button to remove the item from the cart.<\/p>\n8. Implementing Checkout<\/h2>\n
Now let’s implement the checkout functionality using Stripe.<\/p>\n
Update the ShoppingCart<\/code> component code as follows:<\/p>\nimport React, { useState } from 'react';\nimport StripeCheckout from 'react-stripe-checkout';\n\nconst ShoppingCart = () => {\n const [cartItems, setCartItems] = useState([]);\n\n const addToCart = (item) => {\n \/\/ ... (Add item to cart logic)\n };\n\n const updateQuantity = (item, quantity) => {\n \/\/ ... (Update quantity logic)\n };\n\n const removeItem = (item) => {\n \/\/ ... (Remove item logic)\n };\n\n const handleToken = (token) => {\n console.log(token);\n \/\/ Send the token to your server for processing\n };\n\n return (\n <div>\n {\/* Display cart items *\/}\n {\/* Implement add to cart, update quantity, and remove item buttons *\/}\n <StripeCheckout\n stripeKey=\"YOUR_STRIPE_PUBLISHABLE_KEY\"\n token={handleToken}\n >\n <button>Checkout<\/button>\n <\/StripeCheckout>\n <\/div>\n );\n};\n\nexport default ShoppingCart;\n<\/code><\/pre>\nIn the updated code, we import the StripeCheckout<\/code> component from react-stripe-checkout<\/code> and define the handleToken<\/code> function. This function logs the token to the console and can be used to send the token to your server for processing.<\/p>\nWe also add a StripeCheckout<\/code> component that takes your Stripe Publishable key<\/strong> as the stripeKey<\/code> prop, and the handleToken<\/code> function as the token<\/code> prop. Inside the StripeCheckout<\/code> component, we add a button for the user to initiate the checkout process.<\/p>\nAt this point, you should replace 'YOUR_STRIPE_PUBLISHABLE_KEY'<\/code> with your actual Stripe Publishable key.<\/p>\n9. Testing the Shopping Cart<\/h2>\n
Now let’s test the shopping cart functionality.<\/p>\n
Update the App<\/code> component code as follows:<\/p>\nimport React from 'react';\nimport ShoppingCart from '.\/ShoppingCart';\n\nconst App = () => {\n const item = {\n id: 1,\n name: 'Example Item',\n };\n\n return (\n <div>\n <h1>Shopping App<\/h1>\n <ShoppingCart \/>\n <button onClick={() => addToCart(item)}>Add to cart<\/button>\n <\/div>\n );\n};\n\nexport default App;\n<\/code><\/pre>\nIn the code above, we import the ShoppingCart<\/code> component and define an item<\/code> object. We also add a button with an onClick<\/code> event that calls the addToCart<\/code> function with the item<\/code> object.<\/p>\nSave your changes and start the development server by running the following command:<\/p>\n
npm start\n<\/code><\/pre>\nOpen your browser and navigate to `http:\/\/localhost:3000`. You should see the shopping cart component and a button to add the item to the cart. Click the button, and the item should be displayed in the cart. You can also update the quantity or remove the item from the cart.<\/p>\n
10. Completing the Checkout Process<\/h2>\n
To complete the checkout process, we need to implement the server-side functionality to process the Stripe token and create the charge. This tutorial focuses on the front-end implementation using React, so we will not cover the server-side implementation in detail.<\/p>\n
However, we can provide an example of how you can make an API request to your server using fetch<\/code> and pass the token to your server for processing.<\/p>\nUpdate the handleToken<\/code> function in the ShoppingCart<\/code> component code as follows:<\/p>\nconst handleToken = (token) => {\n fetch('\/charge', {\n method: 'POST',\n body: JSON.stringify(token),\n headers: {\n 'Content-Type': 'application\/json',\n },\n })\n .then((response) => response.json())\n .then((data) => {\n console.log(data);\n \/\/ Handle the response from your server\n })\n .catch((error) => {\n console.error('Error:', error);\n });\n};\n<\/code><\/pre>\nIn the updated code, we use the fetch<\/code> function to make a POST<\/code> request to the \/charge<\/code> endpoint of your server. We pass the Stripe token as the request body, and set the content type to application\/json<\/code>. We also handle the response from your server for further processing.<\/p>\nUpdate the ShoppingCart<\/code> component code:<\/p>\nimport React, { useState } from 'react';\nimport StripeCheckout from 'react-stripe-checkout';\n\nconst ShoppingCart = () => {\n const [cartItems, setCartItems] = useState([]);\n\n \/\/ ... (Additem to cart, update quantity, remove item functions)\n\n const handleToken = (token) => {\n fetch('\/charge', {\n method: 'POST',\n body: JSON.stringify(token),\n headers: {\n 'Content-Type': 'application\/json',\n },\n })\n .then((response) => response.json())\n .then((data) => {\n console.log(data);\n alert('Payment Successful!');\n setCartItems([]);\n })\n .catch((error) => {\n console.error('Error:', error);\n });\n };\n\n return (\n <div>\n {\/* Display cart items *\/}\n {\/* Implement add to cart, update quantity, and remove item buttons *\/}\n <StripeCheckout\n stripeKey=\"YOUR_STRIPE_PUBLISHABLE_KEY\"\n token={handleToken}\n >\n <button>Checkout<\/button>\n <\/StripeCheckout>\n <\/div>\n );\n};\n\nexport default ShoppingCart;\n<\/code><\/pre>\n