In Part 1 of this series, you learned how North's Embedded Checkout can be used to accept payments through a secure, prebuilt payment form that supports multiple payment options like credit cards and digital wallets, and how to integrate it into your React application. The React app you created in that tutorial allows customers to purchase one item at a time. In this article, you'll learn how to modify your ecommerce app to include a shopping cart so customers can purchase multiple items in one transaction.
A shopping cart makes your customers' shopping experience more convenient and improves the overall user experience. They can add items to their cart as they browse, as well as pause and resume their selection process later. They can also organize and manage the products they want to purchase in one place so that they can make changes to their order before they complete their purchase.
For merchants, shopping carts offer the opportunity to upsell and cross-sell related or complementary products, and provide suggestions to customers. This can help increase sales and it also improves the customer's shopping experience.
In this tutorial, you'll implement a shopping cart in the React app you created in Part 1 of this series. You'll also learn how you can persist the cart to local storage using client-side rendering to make sure users can access their cart if they leave and return to the page. Finally, you'll learn how to make it easy for the customer to edit each cart item before checking out with North's Embedded Checkout using their preferred payment method.
You can follow along with this Node.js GitHub repo for the back-end web service and this React repo for the front-end ecommerce storefront.
Setting Up the Development Environment
paymentshub-react-cart, then run the following command to clone the React app you created in Part 1 of this series:
Creating the Cart Context to Share State Across Components
React Context API is a feature that allows you to share data between various components in your application. This helps to avoid the problem of prop drilling, which is when data is passed through multiple levels of components that don't need it, in order to get to a nested component.
To create the cart context, create a folder named context inside the src folder. In the context folder, create a new file named CartContext.jsx and paste the code below into it:
The CartProvider function contains a few variables and functions. The variables include the following:
cartItemsis an array that stores the details of the items in a cart. The initial value of this variable is read from local storage. If it does not exist in local storage, the initial value is set to an empty array.loadingis a boolean value that is used to display a loading message while North creates a checkout session for the items in the cart.
The code also contains a useEffect function that persists the cart to local storage when the value of the cartItems array changes.
The CartProvider function also includes the following functions:
getCartItemQuantity()is a helper function used to get the item quantity of the specifiedidin the cart. If the specified cart item does not exist in the cart, the function returns zero. If the specified item exists in the cart, the function returns the value of thequantitykey of the item object.addOneItemToCart()is used to add a single item to the cart. It uses thegetCartItemQuantity()function to check if an item exists in the cart. If the item does not exist in the cart, it uses the spread operator to expand the array and add an object containing the values received as parameters and an initial quantity of one. Otherwise, the function loops through the objects in thecartItemsarray and increases the quantity of the specified item by one.removeOneItemFromCart()uses thegetCartItemQuantity()method to check the quantity of the specified item. If the quantity is equal to one, the function calls thedeleteItemFromCart()method to remove the item from the cart. Otherwise, it loops through thecartItemsarray and decreases the value of the quantity of the specified item by one.getTotalCost()loops through all the items in thecartItemsarray and returns the total cost of the items.getNumberOfCartItems()loops through all the items in thecartItemsarray and returns the total number of items.
Adding Products to the Cart from the Product Page
In Part 1 of this series, you created the file src/pages/ProductPage.jsx, which contains a Purchase Now button that created a checkout session for a single item when it's clicked. In this section, you will change this button to add an item to the cart instead, so customers can keep browsing before they check out.
Open src/pages/ProductPage.jsx and replace the existing code with the following:
The code above uses the useContext() hook to load the loading and addOneItemToCart() context values from the CartContext. When the loading value is set to true, the page displays a modal with items centered showing the loading message. When the Add to Cart button is clicked, the addOneItemToCart() function is called and the product ID, price, title, and image are passed as arguments.
Verifying the Payment and Clearing the Cart
Next, you'll modify the src/pages/PaymentResults.jsx file so that, in addition to verifying the payment result server-side (as you did in Part 1), it resets the cartItems array and clears the cart from local storage once a payment is approved.
Open the file and replace the existing code with the following:
Like Part 1, this page makes a secure verification request to our backend server, but here we pass the north_session_token (retrieved from sessionStorage) to the secure /api/complete endpoint via a POST request. Once the payment status is authoritatively verified by North's API and returned as approved, we clear the client's shopping cart by calling setCartItems([]) and remove myCart and totalCost from local storage so the customer starts fresh with an empty cart.
Building the Cart Modal and Checkout Button
In this section, you'll create the modal in which your shopping cart will be displayed.
Start by opening the src/components/NavBar.jsx file and replacing the existing code with the following:
The code above contains a show variable that is used to track the status of the modal. It also contains the handleClose() and handleShow() functions, which are used to control whether the modal should be displayed or not.
The code also displays a CartModal component, which you will create next. Create a file named CartModal.jsx inside the src/components folder and paste the following code into it:
The code above uses the useContext() hook to load getNumberOfCartItems(), getTotalCost(), setLoading(), and items from CartContext. The getNumberOfCartItems() function is used to display the total number of items in the cart next to the button used to control the modal status.
Modal.Footer contains the Continue Shopping button, which is used to close the modal and navigate to the home page, as well as the Checkout button, which is used to close the modal and call the handleCheckout() function.
The handleCheckout() function retrieves the total cost of the items currently in the cart and stores it in the local storage as totalCost before navigating the customer to the payment page (/payment).
Modal.Body displays a message when the cart is empty if the length of the items array is less than one. Otherwise, it renders the MyCart component, which you will create next.
Unlike the static checkout flow, the checkout session in our dynamic shopping cart app is created on the payment page itself. This decouples the modal UI from the session creation logic, ensuring a robust and clean architecture. Next, you will update the payment page component to handle this session generation dynamically.
Updating the Payment Page to Generate Sessions Dynamically
In Part 1 of this series, the payment page simply fetched a prebuilt session token. For a dynamic shopping cart, we've updated the payment page to load the actual cart items and total amount from the CartContext, map them to the products format North's API expects, and dynamically request a checkout session token from our Express backend endpoint (/api/session).
Open the src/pages/Payment.jsx file and replace the existing code with the following:
This page retrieves the cart's latest products and total amount directly from CartContext and posts them to our /api/session backend. Once the session is generated, we store the token securely in sessionStorage as north_session_token, set up an event listener for onPaymentComplete to navigate to the results page, and then call window.checkout.mount to render the Embedded Checkout form inside the container.
Building the Cart Items Component
Finally, create a file named MyCart.jsx inside the src/components folder and paste the following code into it:
The code above uses the useContext() hook to load items, addOneItemToCart, removeOneItemFromCart, deleteItemFromCart, and getTotalCost from CartContext. The code loops through the items array and renders a table row for each cart item in the array. It also contains buttons to allow the user to edit the item quantity in the cart.
Providing the Cart Context to the React App
To ensure that your app can access the variables and functions in the CartContext.jsx file, open the App.jsx file and wrap your entire application with the CartProvider, as in the code below:
Deploying the React Shopping Cart App to Netlify
Your app is now ready to deploy!
Upload the React app code to GitHub and deploy it to Netlify.
Because North's Embedded Checkout keeps every sensitive credential on your server, you don't need to configure any secret environment variables in Netlify — the front-end only talks to your own backend API. Just make sure the Node API you built and deployed in Part 1 is still running with its CHECKOUT_PRIVATE_KEY, CHECKOUT_ID, and PROFILE_ID environment variables set.
Because our app uses relative API calls (/api/session and /api/complete) proxied appropriately, you don't have to hardcode any deployed API URLs! Just make sure your Express API server is running alongside the React application.
Testing the Shopping Cart and Embedded Checkout Flow
When the deployment finishes, open your deployed app to test it. Click View Details on any product to open the product details page.
Click on 'Add to Cart' to add the item to the cart. Open another product and click on 'Add to Cart'. Then, click on 'My Cart' to view the items in the cart.
You can click +, -, and x to add, remove, and delete items from the cart.
To add more items to the cart, you can click on 'Continue Shopping'. Otherwise, click on 'Checkout' to navigate to the payment page, where the application dynamically creates a checkout session for the full cart total.
Once the session is created, North's secure Embedded Checkout form mounts on the payment page, showing the available payment options (card checkout, and digital wallets if configured). Enter test card credentials to complete the purchase.
The form submits the payment details directly to North's PCI-compliant servers and triggers the on-payment-complete callback, which redirects you to the payment results page. That page verifies the result server-side, displays the transaction details on approval, and clears your cart.
Conclusion: A Multi-Item React Checkout with North
In Part 1 of this series, you used North's Embedded Checkout to set up embedded payments in a React ecommerce application. In this article, you learned how to add a shopping cart to your app, including how to manage cart item quantity with an Add to Cart button, handle cases when the cart is empty, create a checkout session for the full cart, and provide a great user experience for ecommerce websites.
Both embedded payments and a shopping cart make for a more convenient customer experience, which is great for increasing conversions and revenue. As mentioned in Part 1, using Embedded Checkout also has the benefit of not storing sensitive payment data, such as credit card details, in the merchant's system. Because card details are sent directly to North's secure environment, this reduces the risk of data breaches and makes Payment Card Industry (PCI) compliance much easier for merchants.
How To Get Started
Contact North's Sales Engineering team to learn more about how Embedded Checkout and other tools can meet your business needs.