In this practice project, I added the functionality of a payment gateway through Stripe to a cart of products. Here's a step-by-step overview of what I did:

• Installation and Initial Setup:

  Installed a Next.js app.

  Removed unnecessary default code.

• 
  

1. Create Account:

   • Registered for a testing account on Stripe.
   • 
     

2. Add Product:

   • Added three products using Stripe's product section.
   • Set pricing and other details for these products.
   • 
     

3. Package Installation:

   • Installed npm packages for Stripe and Axios.
   • 
     

4. Get Keys:

   • Obtained Secret and Public keys from Stripe.
   • Stored these keys in the .env file.
   • 
     

5. API Routes:

   • Created API routes in the api folder.
   • Implemented a post request route in a file related to payments.
   • Set up a get request route in a file related to products.
   • These routes allowed me to retrieve product names and prices from Stripe.
   • 
     

6. Product UI:

   • Designed a UI component in the Component folder named "pricing.js".
   • Utilized Tailwind CSS for styling.
   • Used Axios for making API calls in the pricing.js component to fetch and display data on cards.
   • 
     

7. Hosting:

   • After testing, deployed the project on Vercel for hosting.