From 8a8c84756d4e324fc7c1f2b013a2b04f8312e713 Mon Sep 17 00:00:00 2001
From: mrjvs <jellevs@gmail.com>
Date: Wed, 12 Aug 2026 20:06:01 +0200
Subject: [PATCH] feat: add functional data for donation page

---
 README.md                     |  2 +-
 src/pages/account/upgrade.vue | 53 +++++++++++++++++++++++++++++++++++
 2 files changed, 54 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/account/upgrade.vue

diff --git a/README.md b/README.md
index e823706..70b1b00 100644
--- a/README.md
+++ b/README.md
@@ -108,7 +108,7 @@ Miscellanous tasks:
   - [x] Discourse SSO
   - [x] HCaptcha
   - [x] RSS feed
-  - [ ] Stripe checkout
+  - [x] Stripe checkout
   - [ ] Stripe donation progress
   - [ ] Stripe webhooks (+ mailing)
   - [x] Forgot password flow
diff --git a/src/pages/account/upgrade.vue b/src/pages/account/upgrade.vue
new file mode 100644
index 0000000..f9f74ba
--- /dev/null
+++ b/src/pages/account/upgrade.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import type { ApiAccountCheckoutRequest } from '~~/shared/api-types';
+
+definePageMeta({
+	needsAuth: true
+});
+
+const { data: tierData } = await useApiFetch('/api/account/tiers');
+const sortedTiers = computed(() => [...tierData.value?.tiers ?? []].sort((a, b) => a.tierLevel - b.tierLevel));
+
+async function checkout(priceId: string) {
+	try {
+		const result = await apiFetch('/api/account/checkout', {
+			method: 'POST',
+			body: {
+				priceId
+			} satisfies ApiAccountCheckoutRequest
+		});
+		await navigateTo(result.url, { external: true });
+	} catch (error: unknown) {
+		const err = getApiError(error);
+		alert(err.code);
+	}
+}
+</script>
+
+<template>
+  <div>
+    <h1>Tiers</h1>
+    <div
+      v-for="tier of sortedTiers"
+      :key="tier.priceId"
+      :style="{ border: '1px solid white'}"
+    >
+      <h2>{{ tier.name }}</h2>
+      <p>{{ tier.description }}</p>
+      <p v-if="tier.perks.beta">
+        Perk: Beta access
+      </p>
+      <p v-if="tier.perks.discordRead">
+        Perk: Read discord channels
+      </p>
+      <img
+        v-if="tier.thumbnailUrl"
+        :src="tier.thumbnailUrl"
+      >
+      <p>Cost: {{ tier.priceCents }} cents</p>
+      <button @click="checkout(tier.priceId)">
+        Checkout
+      </button>
+    </div>
+  </div>
+</template>