diff --git a/vue/src/App.vue b/vue/src/App.vue
index fb6aca6c..0e8da955 100644
--- a/vue/src/App.vue
+++ b/vue/src/App.vue
@@ -13,6 +13,7 @@ import { RouterLink, RouterView } from "vue-router";
       <nav class="nav">
         <RouterLink to="/about">About</RouterLink>
         <RouterLink to="/products">Products</RouterLink>
+        <RouterLink to="/checkout">Cart</RouterLink>
         <RouterLink to="/subscribe">Subscribe</RouterLink>
       </nav>
     </header>
diff --git a/vue/src/router/index.js b/vue/src/router/index.js
index e9ebbee3..4675a758 100644
--- a/vue/src/router/index.js
+++ b/vue/src/router/index.js
@@ -6,6 +6,7 @@ import SubscribeView from '../views/SubscribeView.vue'
 import ErrorView from '../views/ErrorView.vue'
 import HomePage from "../components/HomePage.vue";
 import ProductsView from "../views/ProductsView.vue";
+import CheckoutView from "../views/CheckoutView.vue";
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -44,6 +45,11 @@ const router = createRouter({
       name: "trigger",
       component: ManualView,
     },
+    {
+      path: "/checkout",
+      name: "checkout",
+      component: CheckoutView
+    }
   ],
 });
 
diff --git a/vue/src/stores/cart.js b/vue/src/stores/cart.js
index 152b2a09..2921436b 100644
--- a/vue/src/stores/cart.js
+++ b/vue/src/stores/cart.js
@@ -10,20 +10,47 @@ export const useCounterStore = defineStore({
     updatePrice(val = 1) {
       this.counter += val;
     },
+    getQuantities(){
+      let quantities = {}
+      for (let item in this.cart) {
+        quantities[this.cart[item].id] = this.cart[item].count
+      }
+      return quantities;
+    },
+    getTotalPrice(){
+      let total = 0;
+      for (let item in this.cart) {
+        total += this.cart[item].totalPrice
+      }
+      return total;
+    },
     updateCart(product) {
-      this.cart.push(product);
-      console.log("cart", this.cart);
-      // if (this.cart.length() > 0) {
-      //   this.cart.forEach((eachCartItem) => {
-      //     if (eachCartItem.id === product.id) {
-      //       return;
-      //     } else {
-      //       this.cart.push(product);
-      //     }
-      //   });
-      // } else {
-      //   this.cart.push(product);
-      // }
+      let index = this.cart.findIndex( item => item.id === product.id);
+      if (index === -1) {
+        product.count = 1
+        product.totalPrice = product.price;
+        this.cart.push(product);
+      } else {
+        this.cart[index].totalPrice += product.price;
+        this.cart[index].count += 1;
+      }
+    },
+    getCartItems() {
+      return this.cart
+    },
+    decreaseQuantity(item){
+      const index = this.cart.findIndex(cartItem => cartItem.id === item.id);
+      if (index !== -1) {
+        this.cart[index].count--;
+        this.cart[index].totalPrice -= this.cart[index].price;
+      }
     },
+    increaseQuantity(item){
+      const index = this.cart.findIndex(cartItem => cartItem.id === item.id);
+      if (index !== -1) {
+        this.cart[index].count++;
+        this.cart[index].totalPrice += this.cart[index].price;
+      }
+    }
   },
 });
diff --git a/vue/src/views/CheckoutView.vue b/vue/src/views/CheckoutView.vue
new file mode 100644
index 00000000..d5a702b1
--- /dev/null
+++ b/vue/src/views/CheckoutView.vue
@@ -0,0 +1,320 @@
+<template>
+  <div class="checkout">
+    <div class="cart-container">
+    <h1>Checkout</h1>
+    <hr />
+    <div 
+      class="cart-item" 
+      v-for="(item, index) in cartItems" 
+      :key="item.id"
+    >
+      <img class="item-image" :src="item.imgcropped" :alt="`Image for item ${item.id}`" />
+      <div class="item-details">
+        <p class="item-title">Item {{ item.id }}</p>
+        <p class="item-price">${{ item.price.toFixed(2) }}</p>
+        <div class="item-quantity">
+          <button @click="decreaseQuantity(item)">-</button>
+          <span>{{ item.count }}</span>
+          <button @click="increaseQuantity(item)">+</button>
+        </div>
+        <p class="item-total">${{ item.totalPrice.toFixed(2) }}</p>
+      </div>
+    </div>
+    <hr />
+  </div>
+    <form @submit.prevent="handleSubmit" class="checkout-form">
+      <h1>Contact Form</h1>
+      <div class="section">
+        <label for="email">Email</label>
+        <input type="email" id="email" v-model="email" required />
+      </div>
+
+      <div class="section">
+        <h2>Shipping address</h2>
+        <label for="firstName">First Name</label>
+        <input type="text" id="firstName" v-model="firstName" required />
+
+        <label for="lastName">Last Name</label>
+        <input type="text" id="lastName" v-model="lastName" required />
+
+        <label for="address">Address</label>
+        <input type="text" id="address" v-model="address" required />
+
+        <label for="city">City</label>
+        <input type="text" id="city" v-model="city" required />
+
+        <label for="country">Country/Region</label>
+        <select id="country" v-model="country" required>
+          <option value="United States of America">United States of America</option>
+          <!-- Add more countries as needed -->
+        </select>
+
+        <label for="state">State</label>
+        <input type="text" id="state" v-model="state" required />
+
+        <label for="zipCode">Zip Code</label>
+        <input type="text" id="zipCode" v-model="zipCode" required />
+      </div>
+
+      <button type="submit" class="submit-button">Submit</button>
+      <a href="/products" class="back-link">Back to products</a>
+    </form>
+  </div>
+</template>
+    
+<script>
+import * as Sentry from "@sentry/vue";
+import { useCounterStore } from "../stores/cart";
+
+  export default {
+  data() {
+    return {
+      store: useCounterStore(),
+      email: 'plant.lover@example.com',
+      subscribe: false,
+      firstName: 'Jane',
+      lastName: 'Greenthumb',
+      address: '123 Main Street',
+      city: 'San Francisco',
+      country: 'United States of America',
+      state: 'CA',
+      zipCode: '94122'
+    };
+  },
+  computed: {
+    // Access the store's properties and methods through computed properties
+    cartItems() {
+      return this.store.getCartItems();
+    },
+    cartTotal() {
+      return this.store.getTotalPrice(); // example if you have a cart total in the store
+    },
+    cartQuantities(){
+      return this.store.getQuantities()
+    },
+    contactForm(){
+      return {
+        email,
+        firstName,
+        lastName,
+        address,
+        city,
+        country,
+        state,
+        zipCode
+      }
+    }
+  },
+  methods: {
+    decreaseQuantity: (item) => {
+      const store = useCounterStore();
+      store.decreaseQuantity(item);
+    },
+    increaseQuantity: (item) => {
+      const store = useCounterStore();
+      store.increaseQuantity(item)
+    },
+    makeCheckoutRequest: function(requestOptions) {
+      return fetch(
+          "https://application-monitoring-flask-dot-sales-engineering-sf.appspot.com/checkout",
+          requestOptions
+        ).then(function (response) {
+          if (!response.ok) {
+            const err = new Error(
+              response.status +
+                " -- " +
+                (response.statusText || "Internal Server Error")
+            );
+            throw err
+          } else {
+            return true;
+          }
+        });
+    },
+
+    handleSubmit() {
+      let success = null;
+
+      Sentry.startNewTrace(() => {
+        Sentry.startSpan({ name: "Checkout" }, async (span) => {
+          const payload = {
+            cart: {
+              items: this.cartItems,
+              quantities: this.cartQuantities,
+              total: this.cartTotal,
+            },
+            form: this.contactForm,          
+          }
+          var requestOptions = {
+            method: "POST",
+            headers: {
+              "Content-Type": "text/plain",
+            },
+            body: JSON.stringify(payload),
+            redirect: "follow",
+          };
+
+          try {
+            success = await this.makeCheckoutRequest(requestOptions);
+          } catch (error) {
+            Sentry.withActiveSpan(span, async () => {
+              Sentry.captureException(error);
+            })
+            this.$router.push("/error");
+
+          }
+
+          return success;
+        })
+      })
+
+      if (!success) {
+        this.$router.push("/error");
+      }
+    }
+  }
+};
+</script>
+
+  <style scoped>
+  .checkout {
+    max-width: 600px;
+    margin: 0 auto;
+    padding: 20px;
+    font-family: Arial, sans-serif;
+    color: #333;
+    margin-bottom: 8rem;
+  }
+
+  h1 {
+    text-align: center;
+  }
+
+  .checkout-form {
+    display: flex;
+    flex-direction: column;
+    margin-top: 2em;
+  }
+
+  .section {
+    margin-bottom: 20px;
+    margin-top: 2rem;
+  }
+
+  h2 {
+    font-size: 1.2em;
+    margin-bottom: 10px;
+  }
+
+  label {
+    font-weight: bold;
+    margin-top: 10px;
+  }
+
+  input,
+  select {
+    width: 100%;
+    padding: 8px;
+    margin-top: 5px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+  }
+
+  .checkbox {
+    align-items: center;
+    margin-top: 10px;
+  }
+
+  .checkbox input {
+    margin-right: 10px;
+  }
+
+  .submit-button {
+    width: 100%;
+    padding: 10px;
+    background-color: #333;
+    color: #fff;
+    border: none;
+    border-radius: 4px;
+    font-weight: bold;
+    cursor: pointer;
+    margin-top: 20px;
+  }
+
+  .submit-button:hover {
+    background-color: #555;
+  }
+
+  .back-link {
+    display: block;
+    text-align: center;
+    margin-top: 10px;
+    color: #333;
+    text-decoration: none;
+  }
+
+  .back-link:hover {
+    text-decoration: underline;
+  }
+
+  .cart-container {
+  font-family: Arial, sans-serif;
+  text-align: center;
+  color: #2f2f2f;
+  padding: 20px;
+}
+
+h1 {
+  font-size: 2rem;
+  margin-bottom: 1rem;
+}
+
+.cart-item {
+  display: flex;
+  align-items: center;
+  margin-bottom: 1.5rem;
+  margin-top: 1.5rem;
+}
+
+.item-image {
+  width: 100px;
+  height: auto;
+  margin-right: 1rem;
+}
+
+.item-details {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.item-title {
+  font-size: 1.2rem;
+  font-weight: bold;
+}
+
+.item-price,
+.item-total {
+  font-size: 1rem;
+}
+
+.item-quantity {
+  display: flex;
+  align-items: center;
+}
+
+.item-quantity button {
+  width: 30px;
+  height: 30px;
+  font-size: 1rem;
+  cursor: pointer;
+  background-color: #2f2f2f;
+  color: white;
+  border: none;
+  margin: 0px 0.5rem 0 0.5rem;
+}
+
+.cart-summary {
+  margin-top: 2rem;
+}
+  </style>
\ No newline at end of file
diff --git a/vue/src/views/ProductsView.vue b/vue/src/views/ProductsView.vue
index c82a0530..57d634d8 100644
--- a/vue/src/views/ProductsView.vue
+++ b/vue/src/views/ProductsView.vue
@@ -39,29 +39,7 @@ export default {
         });
     },
     checkout: function () {
-      this.disabledStatus = true;
-      let internalTagSE = this.SE;
-      let success = null;
-
-      Sentry.startSpan({ name: "Checkout", forceTransaction: true}, async () => {
-        var raw =
-        '{"cart":{"items":[{"id":4,"title":"Botana Voice","description":"Lets plants speak for themselves.","descriptionfull":"Now we don\'t want him to get lonely, so we\'ll give him a little friend. Let your imagination just wonder around when you\'re doing these things. Let your imagination be your guide. Nature is so fantastic, enjoy it. Let it make you happy.","price":175,"img":"https://storage.googleapis.com/application-monitoring/plant-to-text.jpg","imgcropped":"https://storage.googleapis.com/application-monitoring/plant-to-text-cropped.jpg","pg_sleep":"","reviews":[{"id":4,"productid":4,"rating":4,"customerid":null,"description":null,"created":"2021-06-04 00:12:33.553939","pg_sleep":""},{"id":5,"productid":4,"rating":3,"customerid":null,"description":null,"created":"2021-06-04 00:12:45.558259","pg_sleep":""},{"id":6,"productid":4,"rating":2,"customerid":null,"description":null,"created":"2021-06-04 00:12:50.510322","pg_sleep":""},{"id":13,"productid":4,"rating":3,"customerid":null,"description":null,"created":"2021-07-01 00:12:43.312186","pg_sleep":""},{"id":14,"productid":4,"rating":3,"customerid":null,"description":null,"created":"2021-07-01 00:12:54.719873","pg_sleep":""},{"id":15,"productid":4,"rating":3,"customerid":null,"description":null,"created":"2021-07-01 00:12:57.760686","pg_sleep":""},{"id":16,"productid":4,"rating":3,"customerid":null,"description":null,"created":"2021-07-01 00:13:00.140407","pg_sleep":""},{"id":17,"productid":4,"rating":3,"customerid":null,"description":null,"created":"2021-07-01 00:13:00.971730","pg_sleep":""},{"id":18,"productid":4,"rating":3,"customerid":null,"description":null,"created":"2021-07-01 00:13:01.665798","pg_sleep":""},{"id":19,"productid":4,"rating":3,"customerid":null,"description":null,"created":"2021-07-01 00:13:02.278934","pg_sleep":""}]}],"quantities":{"4":2},"total":350},"form":{"loading":false}}';
-        var requestOptions = {
-          method: "POST",
-          headers: {
-            "Content-Type": "text/plain",
-          },
-          body: raw,
-          redirect: "follow",
-        };
-
-        success = await this.makeCheckoutRequest(requestOptions);
-        return success;
-      })
-
-      if (!success) {
-        this.$router.push("/error");
-      }
+      this.$router.push("/checkout");
     },
 
     addToCartPrice: function () {
@@ -117,7 +95,7 @@ export default {
             :onClick="checkout"
             :disabled="disabledStatus"
           >
-            Checkout your cart ($ {{ checkoutCartPrice }})
+            Checkout ($ {{ checkoutCartPrice }})
           </button>
         </div>
         <div id="product-list">