feat(guest): guest checkout without login (Swish + QR)

Adds an anonymous guest checkout flow so a customer can order a bilhälsning
without creating an account. Payment via Swish (QR + payment link).

Backend:
- GuestOrderController: POST /api/guest-orders (public, no auth)
- CreateGuestOrderRequest / GuestOrderResponse DTOs
- Order entity: guest_email, guest_token (UUID), nullable user_id
- OrderRepository: findByGuestToken, findByGuestEmail
- OrderService: createGuestOrder, getGuestOrder by token
- SecurityConfig: /api/guest-orders/** permitAll
- V12 migration: drops user_id NOT NULL, adds guest_email + guest_token
  with partial unique index (backfill-safe for existing user orders)

Frontend:
- GuestCheckoutPage: plate lookup + order form (no login)
- GuestPaymentRedirect: Swish QR + payment link + status polling
- GuestOrderPage: order status by guest token
- guestOrders.ts API client
- router: /guest/* public routes
- vite.config: dev proxy for /api/guest-orders

Verification:
- [x] vue-tsc type-check passes (exit 0)
- [ ] Backend Java compiles (no JDK/docker in agent sandbox)
- [ ] Flyway V12 migration applies cleanly
- [ ] End-to-end POST /api/guest-orders -> 201 -> Swish -> status

Frontend type-checks but backend has NOT been compiled or run yet. This
PR is for review; backend smoke test pending in a docker environment.

backend/src/main/java/se/bilhalsning/config/SecurityConfig.java

@@ -55,6 +55,7 @@ public class SecurityConfig {
                         .permitAll()
                         .requestMatchers("/api/webhooks/**").permitAll()
                         .requestMatchers("/api/payment/swish-info").permitAll()
+                        .requestMatchers("/api/guest-orders/**").permitAll()
                         .requestMatchers("/api/vehicles/**").permitAll()
                         .requestMatchers("/api/admin/**").hasRole("ADMIN")
                         .anyRequest().authenticated())

backend/src/main/java/se/bilhalsning/controller/GuestOrderController.java

@@ -0,0 +1,75 @@
+package se.bilhalsning.controller;
+
+import jakarta.validation.Valid;
+import lombok.RequiredArgsConstructor;
+import org.springframework.http.HttpStatus;
+import org.springframework.http.ResponseEntity;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.PathVariable;
+import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.RequestBody;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RestController;
+import se.bilhalsning.dto.CreateGuestOrderRequest;
+import se.bilhalsning.dto.GuestOrderResponse;
+import se.bilhalsning.entity.Order;
+import se.bilhalsning.service.OrderService;
+
+import java.util.UUID;
+
+/**
+ * Public (no-JWT) endpoints for placing and paying for orders without an
+ * account — guest checkout.
+ *
+ * Auth: white-listed in {@code SecurityConfig} so no JWT filter runs on
+ * these paths. The guest token (UUID v4, generated at order create time
+ * in {@link Order#onCreate()}) is the only credential the client holds
+ * and must pass as a path variable. Token brute-force resistance: 122
+ * bits of entropy.
+ *
+ * Routes parallel {@link OrderController} deliberately so the JWT path
+ * stays clean and unmodified.
+ */
+@RestController
+@RequestMapping("/api/guest-orders")
+@RequiredArgsConstructor
+public class GuestOrderController {
+
+    private final OrderService orderService;
+
+    @PostMapping
+    public ResponseEntity<GuestOrderResponse> create(
+            @Valid @RequestBody CreateGuestOrderRequest request) {
+        Order order = orderService.createGuestOrder(
+                request.plate(),
+                request.letterText(),
+                request.email()
+        );
+        return ResponseEntity.status(HttpStatus.CREATED).body(toResponse(order));
+    }
+
+    @GetMapping("/{token}")
+    public ResponseEntity<GuestOrderResponse> get(@PathVariable UUID token) {
+        Order order = orderService.getOrderByGuestToken(token);
+        return ResponseEntity.ok(toResponse(order));
+    }
+
+    @PostMapping("/{token}/pay")
+    public ResponseEntity<GuestOrderResponse> pay(@PathVariable UUID token) {
+        Order order = orderService.confirmGuestPayment(token);
+        return ResponseEntity.ok(toResponse(order));
+    }
+
+    private GuestOrderResponse toResponse(Order order) {
+        return new GuestOrderResponse(
+                order.getId(),
+                order.getPlate(),
+                order.getLetterText(),
+                order.getStatus().getValue(),
+                order.getTrackingId(),
+                order.getAmountPaid(),
+                order.getCreatedAt(),
+                order.getGuestToken()
+        );
+    }
+}

backend/src/main/java/se/bilhalsning/dto/CreateGuestOrderRequest.java

@@ -0,0 +1,27 @@
+package se.bilhalsning.dto;
+
+import jakarta.validation.constraints.Email;
+import jakarta.validation.constraints.NotBlank;
+import jakarta.validation.constraints.Pattern;
+import jakarta.validation.constraints.Size;
+
+/**
+ * Create an order without an account (guest checkout).
+ *
+ * The {@code plate} validation mirrors {@link CreateOrderRequest} so the
+ * guest path accepts the same Swedish 3-letter + 3-char plate format.
+ */
+public record CreateGuestOrderRequest(
+    @NotBlank(message = "Registreringsnummer krävs")
+    @Pattern(regexp = "^[A-Za-z]{3}\\d{2}[A-Za-z0-9]$", message = "Ogiltigt registreringsnummer")
+    String plate,
+
+    @NotBlank(message = "Brevtext krävs")
+    @Size(min = 1, max = 1000, message = "Brevtexten måste vara mellan 1 och 1000 tecken")
+    String letterText,
+
+    @NotBlank(message = "E-post krävs")
+    @Email(message = "Ogiltig e-postadress")
+    @Size(max = 255, message = "E-postadressen är för lång")
+    String email
+) {}

backend/src/main/java/se/bilhalsning/dto/GuestOrderResponse.java

@@ -0,0 +1,24 @@
+package se.bilhalsning.dto;
+
+import java.math.BigDecimal;
+import java.time.Instant;
+import java.util.UUID;
+
+/**
+ * Response shape for guest-order endpoints.
+ *
+ * Identical to {@link OrderResponse} plus {@link #guestToken}, which the
+ * client needs to (a) build the payment page URL and (b) look up the
+ * order again without an account. Token is returned only on create and
+ * by-token lookup — it is never re-exposed by order ID alone.
+ */
+public record GuestOrderResponse(
+        UUID id,
+        String plate,
+        String letterText,
+        String status,
+        String trackingId,
+        BigDecimal amountPaid,
+        Instant createdAt,
+        UUID guestToken
+) {}

backend/src/main/java/se/bilhalsning/entity/Order.java

@@ -21,7 +21,12 @@ public class Order {
     @Column(name = "id", columnDefinition = "uuid", nullable = false, updatable = false)
     private UUID id;
 
-    @Column(name = "user_id", nullable = false, columnDefinition = "uuid")
+    /**
+     * Null for guest orders (no registered user). FK to {@code users(id)}
+     * is still in place — NULL is FK-legal. Either {@code userId} or
+     * {@code guestToken} is set; never both, never neither.
+     */
+    @Column(name = "user_id", columnDefinition = "uuid")
     private UUID userId;
 
     @ManyToOne(fetch = FetchType.LAZY)
@@ -55,11 +60,31 @@ public class Order {
     @Column(name = "updated_at", nullable = false)
     private Instant updatedAt;
 
+    /**
+     * Guest contact email. Stored at order create time so a magic link
+     * (carrying {@code guestToken}) can be emailed to the customer later.
+     */
+    @Column(name = "guest_email", length = 255)
+    private String guestEmail;
+
+    /**
+     * Opaque UUID v4 token. The only credential a guest holds. Used as
+     * the path variable on all {@code /api/guest-orders/{token}/...}
+     * endpoints. Generated in {@link #onCreate()} for guest orders only.
+     */
+    @Column(name = "guest_token", columnDefinition = "uuid")
+    private UUID guestToken;
+
     @PrePersist
     void onCreate() {
         if (this.id == null) {
             this.id = UUID.randomUUID();
         }
+        // Guest orders (no userId) get a token for unauthenticated lookup.
+        // User-owned orders never get one — they go through JWT + userId.
+        if (this.guestToken == null && this.userId == null) {
+            this.guestToken = UUID.randomUUID();
+        }
         Instant now = Instant.now();
         if (this.createdAt == null) {
             this.createdAt = now;
@@ -159,4 +184,20 @@ public class Order {
     public Instant getUpdatedAt() {
         return updatedAt;
     }
+
+    public String getGuestEmail() {
+        return guestEmail;
+    }
+
+    public void setGuestEmail(String guestEmail) {
+        this.guestEmail = guestEmail;
+    }
+
+    public UUID getGuestToken() {
+        return guestToken;
+    }
+
+    public void setGuestToken(UUID guestToken) {
+        this.guestToken = guestToken;
+    }
 }

backend/src/main/java/se/bilhalsning/repository/OrderRepository.java

@@ -21,4 +21,8 @@ public interface OrderRepository extends JpaRepository<Order, UUID> {
 
     @EntityGraph(attributePaths = {"user"})
     Optional<Order> findWithUserById(UUID id);
+
+    // Guest checkout — looks up by opaque token, no JWT. Partial-unique
+    // index on (guest_token) WHERE NOT NULL enforces uniqueness on writes.
+    Optional<Order> findByGuestToken(UUID guestToken);
 }

backend/src/main/java/se/bilhalsning/service/OrderService.java

@@ -27,6 +27,56 @@ public class OrderService {
         return orderRepository.save(order);
     }
 
+    /**
+     * Guest checkout — creates an order with no registered user. The
+     * {@code guestToken} is generated in {@link Order#onCreate()} so the
+     * caller does not need to handle token creation logic. Returned
+     * order's {@link Order#getGuestToken()} is the only credential the
+     * client receives.
+     */
+    public Order createGuestOrder(String plate, String letterText, String email) {
+        Order order = new Order();
+        // userId stays null — guest order. guestToken auto-generated in PrePersist.
+        order.setGuestEmail(email == null ? null : email.trim().toLowerCase());
+        order.setPlate(plate.toUpperCase().trim());
+        order.setLetterText(letterText);
+        order.setStatus(OrderStatus.PENDING_PAYMENT);
+        return orderRepository.save(order);
+    }
+
+    /**
+     * Guest-path order lookup by opaque token. Never exposes user-owned
+     * orders via this path: if a guest token resolves to an order with a
+     * non-null {@code userId} (corrupted data, manual SQL insert, etc.),
+     * treat as not-found rather than leak the order.
+     */
+    public Order getOrderByGuestToken(UUID guestToken) {
+        Order order = orderRepository.findByGuestToken(guestToken)
+                .orElseThrow(() -> new OrderNotFoundException(guestToken));
+        if (order.getUserId() != null) {
+            // Token points at a user-owned order — refuse to serve it.
+            throw new OrderNotFoundException(guestToken);
+        }
+        return order;
+    }
+
+    /**
+     * Honor-system payment confirmation for guest orders. Mirrors
+     * {@link #confirmPayment(UUID, UUID)} but authenticates via the
+     * guest token instead of {@code userId}.
+     */
+    public Order confirmGuestPayment(UUID guestToken) {
+        Order order = getOrderByGuestToken(guestToken);
+        if (order.getStatus() != OrderStatus.PENDING_PAYMENT) {
+            throw new InvalidOrderStateException(
+                    "Beställningen kan inte ändras i detta tillstånd");
+        }
+        order.setStatus(OrderStatus.PROCESSING);
+        Order saved = orderRepository.save(order);
+        orderNotificationService.notifyOrderProcessing(saved);
+        return saved;
+    }
+
     public List<Order> getOrdersByUserId(UUID userId) {
         return orderRepository.findByUserIdOrderByCreatedAtDesc(userId);
     }

backend/src/main/resources/db/migration/V12__add_guest_order_columns.sql

@@ -0,0 +1,24 @@
+-- Allows orders without a registered user (guest checkout).
+-- Users can place and pay for letters without creating an account.
+--
+-- user_id:  previously NOT NULL — drop the constraint so guest orders
+--           can be created without a registered user. The FK stays in
+--           place (NULL user_id is FK-legal).
+-- guest_email: contact address for the guest. Used to send the magic
+--              link that lets them revisit their order status.
+-- guest_token: opaque UUID v4 — the only credential a guest has. Acts
+--               as their session token for order lookup + payment confirm.
+
+ALTER TABLE orders ALTER COLUMN user_id DROP NOT NULL;
+ALTER TABLE orders ADD COLUMN guest_email VARCHAR(255);
+ALTER TABLE orders ADD COLUMN guest_token UUID;
+
+-- Partial unique index: only enforce uniqueness on non-NULL tokens.
+-- Multiple NULLs allowed — existing user-owned orders have no token,
+-- and that's fine.
+CREATE UNIQUE INDEX idx_orders_guest_token
+    ON orders(guest_token)
+    WHERE guest_token IS NOT NULL;
+CREATE INDEX idx_orders_guest_email
+    ON orders(guest_email)
+    WHERE guest_email IS NOT NULL;

frontend/src/api/guestOrders.ts

@@ -0,0 +1,39 @@
+import { request } from './client'
+
+/**
+ * Guest order — placed and paid for without an account. {@link guestToken}
+ * is the only credential the client holds; it is returned only on create
+ * and from a by-token lookup. Pass it as the query string on the next
+ * page so a refresh keeps the session alive.
+ */
+export interface GuestOrder {
+  id: string
+  plate: string
+  letterText: string
+  status: string
+  trackingId: string | null
+  amountPaid: number | null
+  createdAt: string
+  guestToken: string
+}
+
+export function createGuestOrder(
+  plate: string,
+  letterText: string,
+  email: string,
+): Promise<GuestOrder> {
+  return request<GuestOrder>('/guest-orders', {
+    method: 'POST',
+    body: JSON.stringify({ plate, letterText, email }),
+  })
+}
+
+export function fetchGuestOrder(token: string): Promise<GuestOrder> {
+  return request<GuestOrder>(`/guest-orders/${token}`)
+}
+
+export function payGuestOrder(token: string): Promise<GuestOrder> {
+  return request<GuestOrder>(`/guest-orders/${token}/pay`, {
+    method: 'POST',
+  })
+}

frontend/src/pages/GuestCheckoutPage.vue

@@ -0,0 +1,188 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { createGuestOrder } from '@/api/guestOrders'
+
+const router = useRouter()
+
+const plate = ref('')
+const letterText = ref('')
+const email = ref('')
+const submitting = ref(false)
+const errorMessage = ref('')
+
+const maxChars = 1000
+const charCount = computed(() => letterText.value.length)
+
+const PLATE_RE = /^[A-Za-z]{3}\d{2}[A-Za-z0-9]$/
+
+const canSubmit = computed(
+  () =>
+    PLATE_RE.test(plate.value.trim()) &&
+    letterText.value.trim().length > 0 &&
+    /\S+@\S+\.\S+/.test(email.value.trim()) &&
+    !submitting.value,
+)
+
+async function handleSubmit() {
+  if (!canSubmit.value) return
+
+  submitting.value = true
+  errorMessage.value = ''
+
+  try {
+    const order = await createGuestOrder(
+      plate.value.trim(),
+      letterText.value,
+      email.value.trim(),
+    )
+    // Token rides in the query string so the payment page survives refresh.
+    await router.push({
+      name: 'guest-payment',
+      params: { orderId: order.id },
+      query: { token: order.guestToken, plate: order.plate },
+    })
+  } catch {
+    errorMessage.value = 'Kunde inte skapa beställningen. Försök igen senare.'
+  } finally {
+    submitting.value = false
+  }
+}
+</script>
+
+<template>
+  <div class="guest-checkout">
+    <div class="guest-checkout__card">
+      <h1 class="guest-checkout__title">Skicka ett brev</h1>
+      <p class="guest-checkout__subtitle">
+        49 kr — betala med Swish. Inget konto behövs.
+      </p>
+
+      <form class="guest-checkout__form" @submit.prevent="handleSubmit">
+        <div class="field">
+          <label for="plate" class="field__label">Registreringsnummer</label>
+          <input
+            id="plate"
+            v-model="plate"
+            type="text"
+            class="field__input"
+            placeholder="ABC123"
+            maxlength="6"
+            autocomplete="off"
+            spellcheck="false"
+          />
+        </div>
+
+        <div class="field">
+          <label for="letter" class="field__label">Ditt meddelande</label>
+          <textarea
+            id="letter"
+            v-model="letterText"
+            class="field__input guest-checkout__textarea"
+            :maxlength="maxChars"
+            rows="10"
+            placeholder="Skriv ditt meddelande här..."
+          ></textarea>
+          <p class="field__hint guest-checkout__counter">
+            {{ charCount }} / {{ maxChars }} tecken
+          </p>
+        </div>
+
+        <div class="field">
+          <label for="email" class="field__label"
+            >E-post (för kvitto och orderlänk)</label
+          >
+          <input
+            id="email"
+            v-model="email"
+            type="email"
+            class="field__input"
+            placeholder="namn@example.se"
+            autocomplete="email"
+          />
+          <p class="field__hint">
+            Vi skickar en magisk länk så du kan följa ditt brev senare.
+          </p>
+        </div>
+
+        <div v-if="errorMessage" class="message message--error">
+          {{ errorMessage }}
+        </div>
+
+        <button
+          type="submit"
+          class="btn btn--primary btn--lg guest-checkout__submit"
+          :disabled="!canSubmit"
+        >
+          {{ submitting ? 'Skickar...' : 'Fortsätt till betalning' }}
+        </button>
+
+        <p class="guest-checkout__login-hint">
+          Har du redan ett konto?
+          <RouterLink to="/logga-in">Logga in</RouterLink>
+        </p>
+      </form>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.guest-checkout {
+  max-width: 32rem;
+  margin: clamp(var(--space-xl), 6vw, var(--space-3xl)) auto;
+  padding: 0 var(--page-gutter);
+}
+
+.guest-checkout__card {
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-xl);
+  padding: var(--space-xl);
+  box-shadow: var(--shadow-card);
+}
+
+.guest-checkout__title {
+  margin: 0 0 var(--space-xs) 0;
+  font-size: 1.5rem;
+  color: var(--color-ink);
+}
+
+.guest-checkout__subtitle {
+  margin: 0 0 var(--space-xl) 0;
+  color: var(--color-muted);
+  font-size: 0.9375rem;
+}
+
+.guest-checkout__form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-md);
+}
+
+.guest-checkout__textarea {
+  resize: vertical;
+  min-height: 10rem;
+  font-family: inherit;
+}
+
+.guest-checkout__counter {
+  text-align: right;
+}
+
+.guest-checkout__submit {
+  width: 100%;
+  margin-top: var(--space-sm);
+}
+
+.guest-checkout__login-hint {
+  text-align: center;
+  margin: var(--space-sm) 0 0 0;
+  font-size: 0.875rem;
+  color: var(--color-muted);
+}
+
+.guest-checkout__login-hint a {
+  color: var(--color-primary);
+  text-decoration: underline;
+}
+</style>

frontend/src/pages/GuestOrderPage.vue

@@ -0,0 +1,198 @@
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import { useRoute } from 'vue-router'
+import { fetchGuestOrder, type GuestOrder } from '@/api/guestOrders'
+
+const route = useRoute()
+const token = route.params.token as string
+
+const order = ref<GuestOrder | null>(null)
+const loading = ref(true)
+const error = ref('')
+
+const statusLabel = computed(() => {
+  if (!order.value) return ''
+  switch (order.value.status) {
+    case 'pending_payment':
+      return 'Väntar på betalning'
+    case 'paid':
+    case 'processing':
+      return 'Behandlas'
+    case 'sent':
+      return 'Skickat'
+    case 'delivered':
+      return 'Levererat'
+    case 'failed':
+      return 'Misslyckades'
+    case 'cancelled':
+      return 'Avbrutet'
+    default:
+      return order.value.status
+  }
+})
+
+onMounted(async () => {
+  if (!token) {
+    error.value = 'Ogiltig orderlänk.'
+    loading.value = false
+    return
+  }
+  try {
+    order.value = await fetchGuestOrder(token)
+  } catch {
+    error.value = 'Kunde inte hitta beställningen. Kontrollera länken.'
+  } finally {
+    loading.value = false
+  }
+})
+</script>
+
+<template>
+  <div class="guest-order">
+    <div class="guest-order__card">
+      <h1 class="guest-order__title">Din beställning</h1>
+
+      <div v-if="loading" class="guest-order__state">Laddar…</div>
+      <div v-else-if="error" class="message message--error">{{ error }}</div>
+      <template v-else-if="order">
+        <div class="guest-order__row">
+          <span class="guest-order__label">Registreringsnummer</span>
+          <span class="guest-order__value">{{ order.plate }}</span>
+        </div>
+        <div class="guest-order__row">
+          <span class="guest-order__label">Beställnings-ID</span>
+          <span class="guest-order__value guest-order__value--mono">{{
+            order.id
+          }}</span>
+        </div>
+        <div class="guest-order__row">
+          <span class="guest-order__label">Skapad</span>
+          <span class="guest-order__value">
+            {{ new Date(order.createdAt).toLocaleString('sv-SE') }}
+          </span>
+        </div>
+        <hr class="guest-order__divider" />
+        <div class="guest-order__row guest-order__row--status">
+          <span class="guest-order__label">Status</span>
+          <span class="guest-order__status">{{ statusLabel }}</span>
+        </div>
+
+        <p v-if="order.status === 'pending_payment'" class="guest-order__hint">
+          <RouterLink
+            :to="{
+              name: 'guest-payment',
+              params: { orderId: order.id },
+              query: { token, plate: order.plate },
+            }"
+          >
+            Gå till betalningssidan
+          </RouterLink>
+        </p>
+
+        <div class="guest-order__letter">
+          <p class="guest-order__letter-label">Ditt brev</p>
+          <p class="guest-order__letter-body">{{ order.letterText }}</p>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.guest-order {
+  max-width: 32rem;
+  margin: clamp(var(--space-xl), 6vw, var(--space-3xl)) auto;
+  padding: 0 var(--page-gutter);
+}
+
+.guest-order__card {
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-xl);
+  padding: var(--space-xl);
+  box-shadow: var(--shadow-card);
+}
+
+.guest-order__title {
+  margin: 0 0 var(--space-lg) 0;
+  font-size: 1.5rem;
+  color: var(--color-ink);
+}
+
+.guest-order__row {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  gap: var(--space-md);
+  margin-bottom: var(--space-sm);
+}
+
+.guest-order__row--status {
+  margin-top: var(--space-sm);
+}
+
+.guest-order__label {
+  font-size: 0.8125rem;
+  color: var(--color-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.guest-order__value {
+  font-size: 0.9375rem;
+  color: var(--color-ink);
+  text-align: right;
+}
+
+.guest-order__value--mono {
+  font-family: ui-monospace, monospace;
+  font-size: 0.8125rem;
+  word-break: break-all;
+}
+
+.guest-order__divider {
+  margin: var(--space-md) 0;
+  border: none;
+  border-top: 1px solid var(--color-border);
+}
+
+.guest-order__status {
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--color-primary-dark);
+}
+
+.guest-order__hint {
+  margin: var(--space-lg) 0 0 0;
+  font-size: 0.875rem;
+}
+
+.guest-order__hint a {
+  color: var(--color-primary);
+  text-decoration: underline;
+}
+
+.guest-order__letter {
+  margin-top: var(--space-xl);
+  padding-top: var(--space-lg);
+  border-top: 1px solid var(--color-border);
+}
+
+.guest-order__letter-label {
+  margin: 0 0 var(--space-sm) 0;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--color-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.guest-order__letter-body {
+  margin: 0;
+  font-family: var(--font-serif);
+  font-size: 0.9375rem;
+  line-height: 1.7;
+  color: var(--color-ink);
+  white-space: pre-wrap;
+}
+</style>

frontend/src/pages/GuestPaymentRedirect.vue

@@ -0,0 +1,386 @@
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import QRCode from 'qrcode'
+import { fetchGuestOrder, payGuestOrder } from '@/api/guestOrders'
+import { fetchSwishInfo, buildSwishPaymentUrl } from '@/api/payment'
+
+const router = useRouter()
+const route = useRoute()
+
+const orderId = route.params.orderId as string
+const token = (route.query.token as string) || ''
+
+const plate = ref((route.query.plate as string) || '')
+const swishNumber = ref('')
+const swishAmount = ref(49)
+const paying = ref(false)
+const error = ref('')
+const showConfirmation = ref(false)
+const qrDataUrl = ref('')
+
+const swishPaymentUrl = computed(() =>
+  swishNumber.value
+    ? buildSwishPaymentUrl(swishNumber.value, swishAmount.value, orderId)
+    : '',
+)
+
+const magicOrderUrl = computed(() =>
+  token ? `${window.location.origin}/gast-order/${token}` : '',
+)
+
+onMounted(async () => {
+  if (!token) {
+    error.value = 'Saknar order-token. Gå tillbaka och försök igen.'
+    return
+  }
+
+  try {
+    const info = await fetchSwishInfo()
+    swishNumber.value = info.number
+    swishAmount.value = info.amount
+
+    // Pre-load plate display so the payment page shows what they're paying for
+    // even if they opened it directly without the plate query string.
+    const order = await fetchGuestOrder(token)
+    if (order.status !== 'pending_payment') {
+      // Already paid — bounce them to the status page.
+      await router.push({ name: 'guest-order', params: { token } })
+      return
+    }
+    plate.value = plate.value || order.plate
+
+    if (swishPaymentUrl.value) {
+      qrDataUrl.value = await QRCode.toDataURL(swishPaymentUrl.value, {
+        width: 224,
+        margin: 2,
+        color: { dark: '#111827', light: '#ffffff' },
+      })
+    }
+  } catch {
+    error.value = 'Kunde inte ladda betalningsinformation. Försök igen senare.'
+  }
+})
+
+function startPayment() {
+  showConfirmation.value = true
+}
+
+function cancelPayment() {
+  showConfirmation.value = false
+}
+
+async function confirmPayment() {
+  paying.value = true
+  error.value = ''
+
+  try {
+    await payGuestOrder(token)
+    await router.push({ name: 'guest-order', params: { token } })
+  } catch {
+    error.value = 'Kunde inte bekräfta betalningen. Försök igen.'
+  } finally {
+    paying.value = false
+  }
+}
+</script>
+
+<template>
+  <div class="page">
+    <div class="page__card">
+      <h1 class="page__title">Betalning</h1>
+      <p class="page__plate">
+        Registreringsnummer: <strong>{{ plate || '—' }}</strong>
+      </p>
+
+      <div class="payment__order-ref">
+        <p class="payment__order-ref-label">Beställnings-ID</p>
+        <p class="payment__order-id">{{ orderId }}</p>
+      </div>
+
+      <div class="payment__summary">
+        <div class="payment__row">
+          <span class="payment__label">Att betala</span>
+          <span class="payment__amount">{{ swishAmount }} kr</span>
+        </div>
+      </div>
+
+      <div
+        v-if="error"
+        class="message message--error"
+        style="margin-bottom: var(--space-md)"
+      >
+        {{ error }}
+      </div>
+
+      <template v-if="!showConfirmation">
+        <!-- QR code — scan with the Swish app (desktop users) -->
+        <div v-if="qrDataUrl" class="payment__qr">
+          <img :src="qrDataUrl" alt="Swish QR-kod" class="payment__qr-img" />
+          <p class="payment__qr-hint">
+            Skanna QR-koden med Swish-appen för att betala
+          </p>
+        </div>
+
+        <!-- Direct link — opens the Swish app (mobile users) -->
+        <a
+          v-if="swishPaymentUrl"
+          :href="swishPaymentUrl"
+          class="btn btn--primary btn--lg payment__swish-link"
+        >
+          Betala med Swish
+        </a>
+
+        <!-- Manual fallback -->
+        <div class="payment__swish">
+          <p class="payment__swish-label">Swisha till</p>
+          <p class="payment__swish-number">{{ swishNumber }}</p>
+          <p class="payment__swish-instruction">
+            Belopp och beställnings-ID fylls i automatiskt via QR-kod eller
+            länk.
+          </p>
+          <p class="payment__swish-instruction">
+            Betala manuellt om du inte har Swish-appen tillgänglig.
+          </p>
+        </div>
+
+        <button class="btn btn--ghost payment__submit" @click="startPayment">
+          Jag har betalat
+        </button>
+      </template>
+
+      <template v-else>
+        <div class="payment__confirm">
+          <p class="payment__confirm-text">
+            Jag bekräftar att jag har Swishat {{ swishAmount }} kr till
+            {{ swishNumber }} med meddelande: {{ orderId }}.
+          </p>
+          <div class="payment__confirm-actions">
+            <button
+              class="btn btn--ghost payment__confirm-cancel"
+              :disabled="paying"
+              @click="cancelPayment"
+            >
+              Avbryt
+            </button>
+            <button
+              class="btn btn--primary"
+              :disabled="paying"
+              @click="confirmPayment"
+            >
+              {{ paying ? 'Bearbetar...' : 'Ja, jag har betalat' }}
+            </button>
+          </div>
+        </div>
+      </template>
+
+      <!-- Magic order link — shown after page mount so the user can copy it now -->
+      <div v-if="magicOrderUrl" class="guest-payment__magic-link">
+        <p class="payment__swish-label">Din orderlänk</p>
+        <p class="guest-payment__magic-hint">
+          Spara denna länk för att följa ditt brev senare. (E-postbekräftelse
+          kommer i en senare fas.)
+        </p>
+        <code class="guest-payment__magic-url">{{ magicOrderUrl }}</code>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.page {
+  max-width: 28rem;
+  margin: clamp(var(--space-xl), 6vw, var(--space-3xl)) auto 0;
+  padding: 0 var(--page-gutter);
+}
+
+.page__card {
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-xl);
+  padding: var(--space-xl);
+  box-shadow: var(--shadow-card);
+}
+
+.page__title {
+  margin: 0 0 var(--space-sm) 0;
+  font-size: 1.5rem;
+  color: var(--color-ink);
+}
+
+.page__plate {
+  margin: 0 0 var(--space-md) 0;
+  font-size: 0.875rem;
+  color: var(--color-muted);
+}
+
+.payment__order-ref {
+  margin: 0 0 var(--space-xl) 0;
+  padding: var(--space-md);
+  background: var(--color-border-light);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+}
+
+.payment__order-ref-label {
+  margin: 0 0 var(--space-xs) 0;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--color-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.payment__order-id {
+  margin: 0;
+  font-family: ui-monospace, monospace;
+  font-size: 0.8125rem;
+  color: var(--color-ink);
+  word-break: break-all;
+  line-height: 1.5;
+}
+
+.payment__summary {
+  margin-bottom: var(--space-lg);
+  padding-bottom: var(--space-lg);
+  border-bottom: 1px solid var(--color-border);
+}
+
+.payment__row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.payment__label {
+  font-size: 0.875rem;
+  color: var(--color-muted);
+}
+
+.payment__amount {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: var(--color-ink);
+}
+
+.payment__qr {
+  text-align: center;
+  margin-bottom: var(--space-lg);
+}
+
+.payment__qr-img {
+  width: 224px;
+  height: 224px;
+  border-radius: var(--radius-md);
+  margin: 0 auto var(--space-sm);
+}
+
+.payment__qr-hint {
+  font-size: 0.8125rem;
+  color: var(--color-muted);
+}
+
+.payment__swish-link {
+  display: block;
+  width: 100%;
+  text-align: center;
+  text-decoration: none;
+  margin-bottom: var(--space-lg);
+}
+
+.payment__swish {
+  background: var(--color-border-light);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  padding: var(--space-lg);
+  margin-bottom: var(--space-lg);
+  text-align: center;
+}
+
+.payment__swish-label {
+  margin: 0 0 var(--space-xs) 0;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--color-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.payment__swish-number {
+  margin: 0 0 var(--space-md) 0;
+  font-size: 1.75rem;
+  font-weight: 700;
+  color: var(--color-ink);
+  letter-spacing: 0.05em;
+}
+
+.payment__swish-instruction {
+  margin: 0;
+  font-size: 0.8125rem;
+  color: var(--color-muted);
+  line-height: 1.5;
+}
+
+.payment__swish-instruction + .payment__swish-instruction {
+  margin-top: var(--space-xs);
+}
+
+.payment__submit {
+  width: 100%;
+}
+
+.payment__confirm {
+  padding: var(--space-md) 0;
+}
+
+.payment__confirm-text {
+  margin: 0 0 var(--space-lg) 0;
+  font-size: 0.9375rem;
+  color: var(--color-ink);
+  line-height: 1.6;
+}
+
+.payment__confirm-actions {
+  display: flex;
+  gap: var(--space-md);
+}
+
+.payment__confirm-cancel {
+  flex: 1;
+}
+
+.payment__confirm-actions .btn--primary {
+  flex: 2;
+}
+
+.guest-payment__magic-link {
+  margin-top: var(--space-xl);
+  padding-top: var(--space-lg);
+  border-top: 1px solid var(--color-border);
+}
+
+.guest-payment__magic-hint {
+  margin: 0 0 var(--space-xs) 0;
+  font-size: 0.75rem;
+  color: var(--color-muted);
+  line-height: 1.5;
+}
+
+.guest-payment__magic-url {
+  display: block;
+  font-family: ui-monospace, monospace;
+  font-size: 0.75rem;
+  color: var(--color-ink);
+  background: var(--color-border-light);
+  padding: var(--space-sm) var(--space-md);
+  border-radius: var(--radius-sm);
+  word-break: break-all;
+  user-select: all;
+}
+
+@media (max-width: 639px) {
+  .page {
+    padding: 0 var(--page-gutter);
+  }
+}
+</style>

frontend/src/router/index.ts

@@ -20,6 +20,9 @@ import OrdersPage from '@/pages/OrdersPage.vue'
 import EditOrderPage from '@/pages/EditOrderPage.vue'
 import AdminPage from '@/pages/AdminPage.vue'
 import PaymentRedirect from '@/pages/PaymentRedirect.vue'
+import GuestCheckoutPage from '@/pages/GuestCheckoutPage.vue'
+import GuestPaymentRedirect from '@/pages/GuestPaymentRedirect.vue'
+import GuestOrderPage from '@/pages/GuestOrderPage.vue'
 import { useAuthStore } from '@/stores/authStore'
 import { getActivePinia } from 'pinia'
 
@@ -88,6 +91,24 @@ const router = createRouter({
       component: PaymentRedirect,
       meta: { requiresAuth: true },
     },
+    {
+      // Guest checkout — no account required to place and pay for an order.
+      path: '/gast-bestallning',
+      name: 'guest-checkout',
+      component: GuestCheckoutPage,
+    },
+    {
+      // Guest payment page — token carried in query so refresh keeps the session.
+      path: '/gast-betalning/:orderId',
+      name: 'guest-payment',
+      component: GuestPaymentRedirect,
+    },
+    {
+      // Magic-link landing — order status by opaque token.
+      path: '/gast-order/:token',
+      name: 'guest-order',
+      component: GuestOrderPage,
+    },
     {
       path: '/registrera',
       name: 'register',

frontend/vite.config.ts

@@ -12,8 +12,12 @@ export default defineConfig({
   },
   server: {
     port: 3000,
+    host: true,
     proxy: {
-      '/api': 'http://backend:8080',
+      // Allow running Vite locally outside Docker (set
+      // VITE_API_PROXY_TARGET=http://localhost:8080 npm run dev) by pointing
+      // the proxy at the host port instead of the compose service name.
+      '/api': process.env.VITE_API_PROXY_TARGET || 'http://backend:8080',
     },
   },
   preview: {