From 135e92e1f0b84a90dbd1a674766fe1f549dc8d9e Mon Sep 17 00:00:00 2001
From: Timotej <timi.blazic@gmail.com>
Date: Thu, 29 Jan 2026 11:37:17 +0100
Subject: [PATCH] implemented stripe payment

---
 README.md                         |  7 ++++++-
 src/lib/api.ts                    |  1 -
 src/router.ts                     |  3 +++
 src/stores/auth.ts                |  1 -
 src/stores/cart.ts                |  1 -
 src/style.css                     |  4 ++++
 src/views/CartView.vue            | 14 +++++++++++---
 src/views/CheckoutCancelView.vue  | 21 +++++++++++++++++++++
 src/views/CheckoutSuccessView.vue | 21 +++++++++++++++++++++
 9 files changed, 66 insertions(+), 7 deletions(-)
 create mode 100644 src/views/CheckoutCancelView.vue
 create mode 100644 src/views/CheckoutSuccessView.vue

diff --git a/README.md b/README.md
index 0bfcc2d..cbc28cf 100644
--- a/README.md
+++ b/README.md
@@ -6,4 +6,9 @@
 helm upgrade --install frontend-service ./helm/frontend-service \
 -n cloudshopt \ 
 -f helm/frontend-service/values.yaml
-```
\ No newline at end of file
+```
+
+## Test stripe checkout locally 
+```
+stripe listen --forward-to http://app.localhost/api/payments/webhooks/strip
+```
diff --git a/src/lib/api.ts b/src/lib/api.ts
index e157687..d5bed7f 100644
--- a/src/lib/api.ts
+++ b/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";
 
diff --git a/src/router.ts b/src/router.ts
index 3c6f65c..b382f1c 100644
--- a/src/router.ts
+++ b/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 } },
     ],
 });
 
diff --git a/src/stores/auth.ts b/src/stores/auth.ts
index b4f514c..4b25501 100644
--- a/src/stores/auth.ts
+++ b/src/stores/auth.ts
@@ -1,4 +1,3 @@
-// src/stores/auth.ts
 import { defineStore } from "pinia";
 import { apiGet, apiPost, getToken, setToken } from "@/lib/api";
 
diff --git a/src/stores/cart.ts b/src/stores/cart.ts
index 9de89db..56baee1 100644
--- a/src/stores/cart.ts
+++ b/src/stores/cart.ts
@@ -1,4 +1,3 @@
-// src/stores/cart.ts
 import { defineStore } from "pinia";
 import { apiDel, apiGet, apiPatch, apiPost } from "@/lib/api";
 
diff --git a/src/style.css b/src/style.css
index ef63c5e..45a9b13 100644
--- a/src/style.css
+++ b/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;*/
diff --git a/src/views/CartView.vue b/src/views/CartView.vue
index 14848e4..c8e97f9 100644
--- a/src/views/CartView.vue
+++ b/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>
\ No newline at end of file
diff --git a/src/views/CheckoutCancelView.vue b/src/views/CheckoutCancelView.vue
new file mode 100644
index 0000000..92c6bdf
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/views/CheckoutSuccessView.vue b/src/views/CheckoutSuccessView.vue
new file mode 100644
index 0000000..018157d
--- /dev/null
+++ b/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>
\ No newline at end of file