frontend/src/__tests__/GuestCheckoutPage.spec.ts

@@ -158,8 +158,9 @@ describe('GuestCheckoutPage', () => {
     await vi.waitFor(() => {
       expect(router.currentRoute.value.name).toBe('guest-payment')
       expect(router.currentRoute.value.params.orderId).toBe('order-123')
-      expect(router.currentRoute.value.query.token).toBe('token-abc')
+      expect(router.currentRoute.value.query.token).toBeUndefined()
       expect(router.currentRoute.value.query.plate).toBe('ABC123')
+      expect(sessionStorage.getItem('guestToken')).toBe('token-abc')
     })
   })
 

frontend/src/__tests__/GuestPaymentRedirect.spec.ts

@@ -67,13 +67,20 @@ async function mountPage(
   token = 'token-abc',
   plate = 'ABC123',
 ) {
+  // Store token in sessionStorage as GuestCheckoutPage and GuestOrderPage do
+  if (token) {
+    sessionStorage.setItem('guestToken', token)
+  } else {
+    sessionStorage.removeItem('guestToken')
+  }
+
   const pinia = createPinia()
   setActivePinia(pinia)
   const router = createTestRouter()
   await router.push({
     name: 'guest-payment',
     params: { orderId },
-    query: { token, plate },
+    query: { plate },
   })
   await router.isReady()
 
@@ -99,6 +106,7 @@ function setupDefaultMocks() {
 describe('GuestPaymentRedirect', () => {
   beforeEach(() => {
     vi.clearAllMocks()
+    sessionStorage.clear()
     setupDefaultMocks()
   })
 

frontend/src/pages/GuestCheckoutPage.vue

@@ -37,11 +37,14 @@ async function handleSubmit() {
       letterText.value,
       email.value.trim(),
     )
-    // Token rides in the query string so the payment page survives refresh.
+    // Store the guest token in sessionStorage so it does not leak via the URL
+    // query string (browser history, access logs, Referer). sessionStorage
+    // persists across page refreshes within the same tab.
+    sessionStorage.setItem('guestToken', order.guestToken)
     await router.push({
       name: 'guest-payment',
       params: { orderId: order.id },
-      query: { token: order.guestToken, plate: order.plate },
+      query: { plate: order.plate },
     })
   } catch {
     errorMessage.value = 'Kunde inte skapa beställningen. Försök igen senare.'

frontend/src/pages/GuestOrderPage.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import { ref, computed, onMounted } from 'vue'
-import { useRoute } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 import { fetchGuestOrder, type GuestOrder } from '@/api/guestOrders'
 
 const route = useRoute()
+const router = useRouter()
 const token = route.params.token as string
 
 const order = ref<GuestOrder | null>(null)
@@ -45,6 +46,18 @@ onMounted(async () => {
     loading.value = false
   }
 })
+
+function goToPayment() {
+  if (!order.value) return
+  // Store the guest token in sessionStorage so it does not leak via the URL
+  // query string on the payment page.
+  sessionStorage.setItem('guestToken', token)
+  router.push({
+    name: 'guest-payment',
+    params: { orderId: order.value.id },
+    query: { plate: order.value.plate },
+  })
+}
 </script>
 
 <template>
@@ -78,15 +91,7 @@ onMounted(async () => {
         </div>
 
         <p v-if="order.status === 'pending_payment'" class="guest-order__hint">
-          <RouterLink
+          <a href="#" @click.prevent="goToPayment"> Gå till betalningssidan </a>
-            :to="{
-              name: 'guest-payment',
-              params: { orderId: order.id },
-              query: { token, plate: order.plate },
-            }"
-          >
-            Gå till betalningssidan
-          </RouterLink>
         </p>
 
         <div class="guest-order__letter">

frontend/src/pages/GuestPaymentRedirect.vue

@@ -9,7 +9,11 @@ const router = useRouter()
 const route = useRoute()
 
 const orderId = route.params.orderId as string
-const token = (route.query.token as string) || ''
+// Read token from sessionStorage (set by the checkout/order pages) so it
+// does not leak via the URL query string. Fall back to query.token for
+// backward compatibility with any existing magic links.
+const token =
+  sessionStorage.getItem('guestToken') || (route.query.token as string) || ''
 
 const plate = ref((route.query.plate as string) || '')
 const swishNumber = ref('')