implemented stripe payment

README.md

@@ -6,4 +6,9 @@
 helm upgrade --install frontend-service ./helm/frontend-service \
 -n cloudshopt \ 
 -f helm/frontend-service/values.yaml
-```
+```
+
+## Test stripe checkout locally 
+```
+stripe listen --forward-to http://app.localhost/api/payments/webhooks/strip
+```

src/lib/api.ts

@@ -1,4 +1,3 @@
-// src/lib/api.ts
 const API_BASE = import.meta.env.VITE_API_BASE ?? "/api";
 const TOKEN_KEY = "cloudshopt_token";
 

src/router.ts

@@ -26,6 +26,9 @@ const router = createRouter({
         { path: "/cart", component: CartView, meta: { auth: true } },
         { path: "/orders", component: OrdersView, meta: { auth: true } },
         { path: "/orders/:id", component: OrderDetailView, meta: { auth: true } },
+
+        { path: "/checkout/success", component: CheckoutSuccessView, meta: { auth: true } },
+        { path: "/checkout/cancel", component: CheckoutCancelView, meta: { auth: true } },
     ],
 });
 

src/stores/auth.ts

@@ -1,4 +1,3 @@
-// src/stores/auth.ts
 import { defineStore } from "pinia";
 import { apiGet, apiPost, getToken, setToken } from "@/lib/api";
 

src/stores/cart.ts

@@ -1,4 +1,3 @@
-// src/stores/cart.ts
 import { defineStore } from "pinia";
 import { apiDel, apiGet, apiPatch, apiPost } from "@/lib/api";
 

src/style.css

@@ -1,5 +1,9 @@
 @import "tailwindcss";
 
+button:hover {
+    cursor: pointer;
+}
+
 /*:root {*/
 /*  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;*/
 /*  line-height: 1.5;*/

src/views/CartView.vue

@@ -38,6 +38,7 @@
 import { onMounted, ref } from "vue";
 import { useRouter } from "vue-router";
 import { useCartStore } from "@/stores/cart";
+import { apiPost } from "@/lib/api";
 
 const cart = useCartStore();
 const router = useRouter();
@@ -77,12 +78,19 @@ async function remove(itemId: number) {
 async function createOrder() {
   error.value = "";
   msg.value = "";
+
   try {
     const order = await cart.createOrderFromCart();
-    msg.value = `Order created (#${order.id}).`;
-    router.push(`/orders/${order.id}`);
+
+    const r = await apiPost<{ url: string }>(
+        "/payments/checkout-session",
+        { order_id: order.id },
+        true
+    );
+
+    window.location.href = r.url;
   } catch (e: any) {
-    error.value = e?.message ?? "Failed to create order";
+    error.value = e?.message ?? "Failed to create order / start payment";
   }
 }
 </script>

src/views/CheckoutCancelView.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <h1 class="text-2xl font-semibold">Payment cancelled</h1>
+    <p class="text-zinc-400 mt-2">You cancelled the payment.</p>
+
+    <RouterLink
+        class="inline-block mt-4 px-4 py-2 rounded bg-zinc-800 hover:bg-zinc-700"
+        :to="`/orders/${orderId}`"
+    >
+      Back to order
+    </RouterLink>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { RouterLink, useRoute } from "vue-router";
+
+const route = useRoute();
+const orderId = computed(() => route.query.order_id ?? "");
+</script>

src/views/CheckoutSuccessView.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <h1 class="text-2xl font-semibold">Payment success</h1>
+    <p class="text-zinc-400 mt-2">Your payment was successful. You can open the order.</p>
+
+    <RouterLink
+        class="inline-block mt-4 px-4 py-2 rounded bg-indigo-600 hover:bg-indigo-500"
+        :to="`/orders/${orderId}`"
+    >
+      Go to order
+    </RouterLink>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { RouterLink, useRoute } from "vue-router";
+
+const route = useRoute();
+const orderId = computed(() => route.query.order_id ?? "");
+</script>