• The working app from Part 1 of this series.
• Node.js
• npm
• Git CLI
• A web browser installed on your local machine.

git clone https://github.com/NorthDevelopers/North-React-Browser-Post-API-Without-Shopping-Cart.git ./

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:

import { createContext, useState, useEffect } from 'react'

export const CartContext = createContext({
    items: [],
    getCartItemQuantity: () => {},
    addOneItemToCart: () => {},
    removeOneItemFromCart: () => {},
    deleteItemFromCart: () => {},
    getTotalCost: () => {},
    getNumberOfCartItems: () => {}
})

export function CartProvider({children}){
    const [cartItems, setCartItems] = useState(JSON.parse(localStorage.getItem('myCart')) || [])
    const [loading, setLoading] = useState(false)

    // persist the cart to local storage whenever the cartItems array changes
    useEffect(() => {
   	 const saveCartToLocalStorage = () => localStorage.setItem('myCart', JSON.stringify(cartItems))

   	 saveCartToLocalStorage()

    },[cartItems])

    // check the number of items of the specified id in the cart
    // if the item does not exist in the cart, return 0 as the number of items of the specified id in the cart
    // if the item exists in the cart, return the number of items of specified id in the cart
    // this function acts as a helper function to decide on the action to take when adding and removing items to the cart
    const getCartItemQuantity = (id) => {
   	 const itemQuantity = cartItems.find(item => item.id === id)?.quantity

   	 if(itemQuantity === undefined){
   		 return 0;
   	 }

   	 return itemQuantity;
    }

    const addOneItemToCart = (id, unitPrice, title, imageUrl) => {
   	 // check if the item already exists in the cart
   	 const itemQuantity = getCartItemQuantity(id)

   	 // if the item does not exist in the cart, add the item to the cart
   	 if(itemQuantity === 0){
   		 setCartItems([
       		 ...cartItems,
       		 {
           		 id,
           		 quantity: 1,
           		 unitPrice,
           		 title,
           		 imageUrl
       		 }
   		 ]) 	 
   	 } else{ // if the item exists in the cart, add one to the existing quantity
   		 // loop through the items. if an item's id is equal to the provided id, add one to the quantity, else, return the item
   		 setCartItems(
       		 cartItems.map((item) => (
           		 item.id === id ?
           		 { ...item, quantity: item.quantity + 1 } :
           		 item
       		 ))
   		 )
   	 }
    }

    const deleteItemFromCart = (id) => {
   	 setCartItems(
   		 cartItems => cartItems.filter(item => (
       		 item.id !== id
   		 ))
   	 )
    }

    const removeOneItemFromCart = (id) => {
   	 const itemQuantity = getCartItemQuantity(id)

   	 if(itemQuantity === 1){
   		 deleteItemFromCart(id)
   	 } else {
   		 setCartItems(
       		 cartItems.map((item) => (
           		 item.id === id ?
           		 { ...item, quantity: item.quantity - 1 } :
           		 item
       		 ))
   		 )
   	 }
    }

    const getTotalCost = () => {
   	 let totalCost = 0

   	 cartItems.map(item => totalCost += (item.quantity * item.unitPrice))

   	 return totalCost
    }

    const getNumberOfCartItems = () => {
   	 let numberOfCartItems = 0

   	 cartItems.map(item => numberOfCartItems+= item.quantity)

   	 return numberOfCartItems
    }

    const contextValue = {
   	 items: cartItems,
   	 setCartItems,
   	 loading,
   	 setLoading,
   	 getCartItemQuantity,
   	 addOneItemToCart,
   	 removeOneItemFromCart,
   	 deleteItemFromCart,
   	 getTotalCost,
   	 getNumberOfCartItems
    }
    return (
   	 <CartContext.Provider value={contextValue}>
   		 {children}
   	 </CartContext.Provider>
    )
}

export default CartProvider;

The CartProvider function contains a few variables and functions. The variables include the following:

• cartItems is 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.
• loading is a boolean value that is used to display a loading message during a post request for the terminal authorization code (TAC) token to the EPX servers.

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 number of items of the specified id in the cart. If the specified 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 the quantity key of the item object.
• addOneItemToCart() is used to add a single item to the cart. It uses the getCartItemQuantity() 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 the cartItems array and increases the quantity of the specified item by one.
• deleteItemFromCart() uses the filter method to remove the specified item from the cartItems array.
• removeOneItemFromCart() uses the getCartItemQuantity() method to check the quantity of the specified item. If the quantity is equal to one, the function calls the deleteItemFromCart() method to remove the item from the cart. Otherwise, it loops through the cartItems array and decreases the value of the quantity of the specified item by one.
• getTotalCost() loops through all the items in the cartItems array and returns the total cost of the items.
• getNumberOfCartItems() loops through all the items in the cartItems array and returns the total number of items.

In Part 1 of this series, you created the file src/pages/ProductPage.jsx, which contains a Purchase Now button that sends a post request for a TAC token when it's clicked. In this section, you will modify this button to add an item to the cart.

Open src/pages/ProductPage.jsx and replace the existing code with the following:

import React, { useEffect, useState, useContext } from 'react'
import { Button, Col, Container, Modal, Row } from 'react-bootstrap'
import { useParams } from 'react-router-dom'
import { CartContext } from '../context/CartContext';

function ProductPage() {
    const { id } = useParams()

	const { loading, addOneItemToCart } = useContext(CartContext)

    const [product,  setProduct] = useState(null)

    useEffect(() => {
        const fetchProduct = async () => {
     	   const response = await fetch(`https://fakestoreapi.com/products/${id}`)
     	   const json = await response.json()
     	   setProduct(json)
        }

        fetchProduct()

    }, [])
   
  return (
    product &&
    <Container className='mt-4'>
  	  {
  	  loading &&

  	  <Modal show={loading}>
  			  <Modal.Body className='d-flex flex-column justify-content-center align-items-center'>
  				  <p>Loading...</p>
  				  <svg xmlns="http://www.w3.org/2000/svg" width='70' fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
  					  <path strokeLinecap="round" strokeLinejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" />
  				  </svg>
  			  </Modal.Body>
  	  </Modal>
	}
        <Row>
     	   <Col>
     		   <img src={product.image} style={{maxWidth: '400px'}} />
     	   </Col>

     	   <Col className='py-5 d-flex flex-column justify-content-around'>
     		   <h3>{product.title}</h3>
     		   <p>{product.description}</p>
     		   <h5>$ {(product.price).toFixed(2)}</h5>
     		   <Button variant='success' onClick={() => addOneItemToCart(id, product.price, product.title, product.image)} className='w-25'>Add to Cart</Button>
     	   </Col>
        </Row>
    </Container>
  )
}

export default ProductPage

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 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.

Next, you'll modify the src/pages/PaymentResults.jsx file to reset the cartItems array and remove the values saved in local storage once a payment is successfully processed.

Open the file and replace the existing code with the following:

import React, { useState, useEffect, useContext} from 'react'
import { CartContext } from '../context/CartContext'

function PaymentResults() {
  const [paymentResult, setPaymentResult] = useState(null)

  useEffect(() => {
    const paymentResults = () => fetch('<YOUR-DEPLOYED-API-LINK>/getPaymentResult')
               				   .then(res => res.json())
               				   .then(({ data }) => {
                 				   let dataObj = JSON.parse('{"' + decodeURI(data.replace(/&/g, "\",\"").replace(/=/g,"\":\"")) + '"}')
                 				   setPaymentResult(dataObj)
               				   })
               				   .catch(error => console.log(error))


    paymentResults()

  }, [])

  if(!paymentResult) return <p>Loading...</p>

  const { setCartItems } = useContext(CartContext)

  if(paymentResult.AUTH_RESP == '00'){
	localStorage.removeItem('TAC')
	localStorage.removeItem('myCart')
	localStorage.removeItem('totalCost')
	setCartItems([])
  }
  return (
    <div className='w-50 mx-auto border'>
      {
        paymentResult.AUTH_RESP == '00' ?

        <div className='text-center p-4'>
   		   <svg xmlns="http://www.w3.org/2000/svg" width='70' fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-2 h-2">
     		   <path strokeLinecap="round" strokeLinejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 01-1.043 3.296 3.745 3.745 0 01-3.296 1.043A3.745 3.745 0 0112 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 01-3.296-1.043 3.745 3.745 0 01-1.043-3.296A3.745 3.745 0 013 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 011.043-3.296 3.746 3.746 0 013.296-1.043A3.746 3.746 0 0112 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 013.296 1.043 3.746 3.746 0 011.043 3.296A3.745 3.745 0 0121 12z" />
   		   </svg>

   		   <p className='fw-bold'>Payment succeeded</p>

     	   <p>Amount paid: ${paymentResult.AUTH_AMOUNT_REQUESTED}</p>
     	   <p>Account No: {paymentResult.AUTH_MASKED_ACCOUNT_NBR}</p>
        </div> :

        <div className='text-center p-4'>
   	   <svg xmlns="http://www.w3.org/2000/svg" width='70' fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
     	   <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
   	   </svg>

   	   <p className='fw-bold'>Payment failed</p>
   	   <p>Reason: {paymentResult.AUTH_RESP_TEXT}</p>
        </div>
      }
    </div>
  )
}

export default PaymentResults

Be sure to replace with the actual link of the Node API that you created and deployed in Part 1 of this series.

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. A loading message will display while the TAC token is being generated.

After the TAC token is successfully generated, the payment form will load. The form will be prefilled with the test card test details, as you saw in Part 1.

Click 'Submit' to make a payment request. This will post the payment details to EPX's servers and redirect you to the payment results page.

In Part 1 of this series, you used North's Browser Post API to set up embedded payments in a React ecommerce application. In this article, you learned how to add a shopping cart to your app.

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 the Browser Post API for embedded payments also has the benefit of not storing sensitive payment data, such as credit card details, in the merchant's system. This reduces the risk of data breaches and makes Payment Card Industry (PCI) compliance much easier for merchants.