From 362233de56480cf441952d4271884827e929fb68 Mon Sep 17 00:00:00 2001
From: Efren Lim <elim@linuxfoundation.org>
Date: Thu, 14 May 2026 12:56:24 +0800
Subject: [PATCH 1/4] feat: added first step in the donate modal

Signed-off-by: Efren Lim <elim@linuxfoundation.org>
---
 .claude/skills/uikit/references/components.md |  24 ++-
 .../components/donate-drawer-global.vue       |  26 +++
 .../donate/components/donate-drawer.vue       | 174 +++++++++++++++
 .../donate/components/donate-step-amount.vue  | 203 ++++++++++++++++++
 .../donate/store/donate-drawer.store.ts       |  28 +++
 .../components/initiative-detail-header.vue   |   4 +
 .../app/components/uikit/drawer/drawer.scss   |  10 +-
 .../app/components/uikit/drawer/drawer.vue    |  11 +-
 frontend/app/layouts/default.vue              |   2 +
 frontend/server/api/donate/index.post.ts      |  31 +++
 frontend/shared/types/donate.types.ts         |  28 +++
 11 files changed, 535 insertions(+), 6 deletions(-)
 create mode 100644 frontend/app/components/modules/donate/components/donate-drawer-global.vue
 create mode 100644 frontend/app/components/modules/donate/components/donate-drawer.vue
 create mode 100644 frontend/app/components/modules/donate/components/donate-step-amount.vue
 create mode 100644 frontend/app/components/modules/donate/store/donate-drawer.store.ts
 create mode 100644 frontend/server/api/donate/index.post.ts
 create mode 100644 frontend/shared/types/donate.types.ts

diff --git a/.claude/skills/uikit/references/components.md b/.claude/skills/uikit/references/components.md
index 56a7d1b5..69c1de74 100644
--- a/.claude/skills/uikit/references/components.md
+++ b/.claude/skills/uikit/references/components.md
@@ -236,11 +236,31 @@ Wraps form inputs with label and validation messages.
 ## LfxDrawer
 
 ```vue
-<lfx-drawer v-model:visible="showDrawer" title="Filters">
-  <!-- drawer content -->
+<lfx-drawer
+  v-model="showDrawer"
+  position="right"
+  width="37.5rem"
+  :close-function="() => true"
+  :hide-close-button="false"
+>
+  <!-- default slot receives { close } -->
+  <template #default="{ close }">
+    <!-- drawer content -->
+  </template>
 </lfx-drawer>
 ```
 
+| Prop               | Type                        | Default      | Notes                                              |
+| ------------------ | --------------------------- | ------------ | -------------------------------------------------- |
+| `modelValue`       | `boolean`                   | —            | v-model open/closed state                          |
+| `position`         | `'left' \| 'right' \| 'bottom'` | `'right'`  | Slide direction                                    |
+| `width`            | `string`                    | `'37.5rem'`  | max-width for left/right positions                 |
+| `height`           | `string`                    | `'85vh'`     | max-height for bottom position                     |
+| `closeFunction`    | `() => boolean`             | `() => true` | Return false to veto close (e.g. unsaved changes)  |
+| `hideCloseButton`  | `boolean`                   | `false`      | Hide the built-in × button to add your own         |
+
+The `bottom` position adds `rounded-t-2xl` to the panel and fills the full viewport width.
+
 ---
 
 ## LfxTooltip
diff --git a/frontend/app/components/modules/donate/components/donate-drawer-global.vue b/frontend/app/components/modules/donate/components/donate-drawer-global.vue
new file mode 100644
index 00000000..4cdc6d0d
--- /dev/null
+++ b/frontend/app/components/modules/donate/components/donate-drawer-global.vue
@@ -0,0 +1,26 @@
+<!--
+Copyright (c) 2025 The Linux Foundation and each contributor.
+SPDX-License-Identifier: MIT
+-->
+<template>
+  <donate-drawer
+    v-if="isOpen && initiative"
+    v-model="isOpen"
+    :initiative="initiative"
+  />
+</template>
+
+<script setup lang="ts">
+import { storeToRefs } from 'pinia';
+import { useDonateDrawerStore } from '../store/donate-drawer.store';
+import DonateDrawer from './donate-drawer.vue';
+
+const donateDrawerStore = useDonateDrawerStore();
+const { isOpen, initiative } = storeToRefs(donateDrawerStore);
+</script>
+
+<script lang="ts">
+export default {
+  name: 'DonateDrawerGlobal',
+};
+</script>
diff --git a/frontend/app/components/modules/donate/components/donate-drawer.vue b/frontend/app/components/modules/donate/components/donate-drawer.vue
new file mode 100644
index 00000000..f8f81958
--- /dev/null
+++ b/frontend/app/components/modules/donate/components/donate-drawer.vue
@@ -0,0 +1,174 @@
+<!--
+Copyright (c) 2025 The Linux Foundation and each contributor.
+SPDX-License-Identifier: MIT
+-->
+<template>
+  <lfx-drawer
+    v-model="isOpen"
+    position="bottom"
+    hide-close-button
+  >
+    <div class="flex flex-col max-h-[85vh] w-[70vw] mx-auto">
+      <!-- Header -->
+      <div class="flex items-center justify-between border-b border-neutral-200 px-8 py-6">
+        <div class="flex items-center gap-4">
+          <div class="relative size-12 shrink-0 overflow-hidden rounded-full bg-neutral-100">
+            <img
+              v-if="initiative.logoUrl"
+              :src="initiative.logoUrl"
+              :alt="initiative.name"
+              class="size-full object-cover"
+            />
+            <div
+              v-else
+              class="flex size-full items-center justify-center"
+            >
+              <lfx-icon
+                name="hands-holding-dollar"
+                type="light"
+                :size="22"
+                class="text-neutral-400"
+              />
+            </div>
+          </div>
+
+          <div class="flex flex-col gap-0.5">
+            <div class="flex items-center gap-1.5 text-accent-500">
+              <lfx-icon
+                name="hands-holding-dollar"
+                type="light"
+                :size="13"
+              />
+              <span class="text-xs font-medium">Donate to</span>
+            </div>
+            <h2 class="text-2xl font-semibold text-neutral-900">
+              {{ initiative.name }}
+            </h2>
+          </div>
+        </div>
+
+        <lfx-icon-button
+          type="transparent"
+          icon="xmark"
+          @click="close()"
+        />
+      </div>
+
+      <!-- Body -->
+      <div class="flex-1 overflow-y-auto px-8 py-6">
+        <donate-step-amount
+          v-if="step === 0"
+          v-model="form"
+        />
+      </div>
+
+      <!-- Footer -->
+      <div class="flex items-center justify-between border-t border-neutral-200 px-8 py-4">
+        <lfx-button
+          type="ghost"
+          label="Cancel"
+          @click="close()"
+        />
+
+        <div class="flex items-center gap-4">
+          <span
+            v-if="amountSummary"
+            class="text-sm text-neutral-600"
+          >
+            {{ amountSummary }}
+          </span>
+          <lfx-button
+            type="primary"
+            label="Continue"
+            icon="chevron-right"
+            icon-position="right"
+            :disabled="!hasSelection"
+            :loading="submitting"
+            @click="handleContinue()"
+          />
+        </div>
+      </div>
+    </div>
+  </lfx-drawer>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import DonateStepAmount from './donate-step-amount.vue';
+import type { DonateAmountForm } from '#shared/types/donate.types';
+import LfxDrawer from '~/components/uikit/drawer/drawer.vue';
+import LfxIcon from '~/components/uikit/icon/icon.vue';
+import LfxIconButton from '~/components/uikit/icon-button/icon-button.vue';
+import LfxButton from '~/components/uikit/button/button.vue';
+
+const props = defineProps<{
+  modelValue: boolean;
+  initiative: {
+    id: string;
+    name: string;
+    logoUrl?: string;
+  };
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: boolean): void;
+  (e: 'submitted'): void;
+}>();
+
+const isOpen = computed({
+  get: () => props.modelValue,
+  set: (val: boolean) => emit('update:modelValue', val),
+});
+
+const step = ref(0);
+const submitting = ref(false);
+
+const form = ref<DonateAmountForm>({
+  tierId: null,
+  tierName: null,
+  customAmountCents: null,
+  amountCents: 0,
+});
+
+const hasSelection = computed(() => form.value.amountCents > 0);
+
+const amountSummary = computed(() => {
+  if (!hasSelection.value) return null;
+  const dollars = form.value.amountCents / 100;
+  const formatted = dollars >= 1_000 ? `$${(dollars / 1_000).toLocaleString()}K` : `$${dollars.toLocaleString()}`;
+  return form.value.tierName ? `Amount: ${formatted} (${form.value.tierName})` : `Amount: ${formatted}`;
+});
+
+const close = () => {
+  isOpen.value = false;
+  step.value = 0;
+  form.value = { tierId: null, tierName: null, customAmountCents: null, amountCents: 0 };
+};
+
+const handleContinue = async () => {
+  if (!hasSelection.value) return;
+
+  submitting.value = true;
+  try {
+    await $fetch('/api/donate', {
+      method: 'POST',
+      body: {
+        initiativeId: props.initiative.id,
+        tierId: form.value.tierId,
+        tierName: form.value.tierName,
+        amountCents: form.value.amountCents,
+      },
+    });
+    emit('submitted');
+    close();
+  } finally {
+    submitting.value = false;
+  }
+};
+</script>
+
+<script lang="ts">
+export default {
+  name: 'DonateDrawer',
+};
+</script>
diff --git a/frontend/app/components/modules/donate/components/donate-step-amount.vue b/frontend/app/components/modules/donate/components/donate-step-amount.vue
new file mode 100644
index 00000000..2f61d524
--- /dev/null
+++ b/frontend/app/components/modules/donate/components/donate-step-amount.vue
@@ -0,0 +1,203 @@
+<!--
+Copyright (c) 2025 The Linux Foundation and each contributor.
+SPDX-License-Identifier: MIT
+-->
+<template>
+  <div class="flex flex-col gap-6">
+    <!-- Sponsorship tiers -->
+    <div>
+      <p class="text-sm font-medium text-neutral-700 mb-4">Select a sponsorship tier</p>
+      <div class="grid grid-cols-4 rounded-xl border border-neutral-200 border-solid">
+        <div
+          v-for="tier in SPONSORSHIP_TIERS"
+          :key="tier.id"
+          class="flex flex-col gap-3 p-4 text-left transition-colors cursor-pointer border-neutral-200 border-solid first:rounded-l-xl last:rounded-r-xl border-r last:border-r-0"
+          :class="
+            form.tierId === tier.id
+              ? 'border-accent-500 bg-accent-50'
+              : 'border-neutral-200 bg-white hover:border-neutral-300'
+          "
+          @click="selectTier(tier)"
+        >
+          <div class="flex items-center justify-between">
+            <span
+              class="rounded-full px-2.5 py-0.5 text-xs font-semibold"
+              :class="TIER_BADGE_CLASSES[tier.id]"
+            >
+              {{ tier.name }}
+            </span>
+            <lfx-radio
+              :model-value="form.tierId ?? ''"
+              :value="tier.id"
+              @update:model-value="selectTier(tier)"
+            />
+          </div>
+
+          <p class="text-2xl font-bold text-neutral-900">${{ formatTierAmount(tier.amountCents) }}</p>
+
+          <ul class="flex flex-col gap-1.5">
+            <li
+              v-for="benefit in tier.benefits"
+              :key="benefit"
+              class="flex items-start gap-2 text-xs text-neutral-700"
+            >
+              <lfx-icon
+                name="check"
+                type="solid"
+                :size="10"
+                class="mt-0.5 shrink-0 text-positive-600"
+              />
+              <span>{{ benefit }}</span>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+
+    <!-- OR divider -->
+    <div class="flex items-center gap-4">
+      <hr class="flex-1 border-neutral-200" />
+      <span class="text-xs font-medium text-neutral-400">OR</span>
+      <hr class="flex-1 border-neutral-200" />
+    </div>
+
+    <!-- Custom amount -->
+    <div>
+      <p class="text-sm font-medium text-neutral-700 mb-4">Enter a custom amount</p>
+
+      <div class="flex flex-wrap items-center gap-2 mb-4">
+        <button
+          v-for="amount in QUICK_AMOUNTS"
+          :key="amount"
+          type="button"
+          class="rounded-full border px-4 py-1.5 text-sm font-medium transition-colors"
+          :class="
+            isQuickAmountSelected(amount)
+              ? 'border-accent-500 bg-accent-50 text-accent-600'
+              : 'border-neutral-300 text-neutral-700 hover:border-neutral-400'
+          "
+          @click="selectQuickAmount(amount)"
+        >
+          ${{ amount }}
+        </button>
+      </div>
+
+      <lfx-input
+        :model-value="customAmountDisplay"
+        placeholder="Enter amount"
+        type="number"
+        @update:model-value="onCustomAmountInput"
+      >
+        <template #prefix>$</template>
+      </lfx-input>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { DonateAmountForm, SponsorshipTier } from '#shared/types/donate.types';
+import LfxRadio from '~/components/uikit/radio/radio.vue';
+import LfxIcon from '~/components/uikit/icon/icon.vue';
+import LfxInput from '~/components/uikit/input/input.vue';
+
+const SPONSORSHIP_TIERS: SponsorshipTier[] = [
+  {
+    id: 'bronze',
+    name: 'Bronze',
+    amountCents: 50_000,
+    benefits: ['Name on supporters page', 'Quarterly newsletter'],
+  },
+  {
+    id: 'silver',
+    name: 'Silver',
+    amountCents: 500_000,
+    benefits: ['Bronze benefits', 'Logo on project page', 'Early access to audit reports'],
+  },
+  {
+    id: 'gold',
+    name: 'Gold',
+    amountCents: 2_500_000,
+    benefits: ['Silver benefits', 'Logo on homepage', 'Direct access to audit team', 'Custom briefing'],
+  },
+  {
+    id: 'platinum',
+    name: 'Platinum',
+    amountCents: 10_000_000,
+    benefits: ['Gold benefits', 'Advisory board seat', 'Co-branded announcements', 'Executive briefing'],
+  },
+];
+
+const TIER_BADGE_CLASSES: Record<string, string> = {
+  bronze: 'bg-warning-100 text-warning-800',
+  silver: 'bg-neutral-200 text-neutral-600',
+  gold: 'bg-warning-200 text-warning-700',
+  platinum: 'bg-neutral-100 text-neutral-500',
+};
+
+const QUICK_AMOUNTS = [5, 10, 25, 50, 150, 200];
+
+const props = defineProps<{
+  modelValue: DonateAmountForm;
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: DonateAmountForm): void;
+}>();
+
+const form = computed(() => props.modelValue);
+
+const customAmountDisplay = computed(() => {
+  if (form.value.tierId !== null) return '';
+  return form.value.customAmountCents ? String(form.value.customAmountCents / 100) : '';
+});
+
+const selectTier = (tier: SponsorshipTier) => {
+  emit('update:modelValue', {
+    tierId: tier.id,
+    tierName: tier.name,
+    customAmountCents: null,
+    amountCents: tier.amountCents,
+  });
+};
+
+const selectQuickAmount = (dollars: number) => {
+  const cents = dollars * 100;
+  emit('update:modelValue', {
+    tierId: null,
+    tierName: null,
+    customAmountCents: cents,
+    amountCents: cents,
+  });
+};
+
+const isQuickAmountSelected = (dollars: number) =>
+  form.value.tierId === null && form.value.customAmountCents === dollars * 100;
+
+const onCustomAmountInput = (val: string | number) => {
+  const dollars = parseFloat(String(val));
+  if (isNaN(dollars) || dollars <= 0) {
+    emit('update:modelValue', { ...form.value, tierId: null, tierName: null, customAmountCents: null, amountCents: 0 });
+    return;
+  }
+  const cents = Math.round(dollars * 100);
+  emit('update:modelValue', {
+    tierId: null,
+    tierName: null,
+    customAmountCents: cents,
+    amountCents: cents,
+  });
+};
+
+const formatTierAmount = (cents: number): string => {
+  const dollars = cents / 100;
+  if (dollars >= 1_000) return `${(dollars / 1_000).toLocaleString()}K`;
+  return dollars.toLocaleString();
+};
+</script>
+
+<script lang="ts">
+export default {
+  name: 'DonateStepAmount',
+};
+</script>
diff --git a/frontend/app/components/modules/donate/store/donate-drawer.store.ts b/frontend/app/components/modules/donate/store/donate-drawer.store.ts
new file mode 100644
index 00000000..9c7cad81
--- /dev/null
+++ b/frontend/app/components/modules/donate/store/donate-drawer.store.ts
@@ -0,0 +1,28 @@
+// Copyright The Linux Foundation and each contributor to LFX.
+// SPDX-License-Identifier: MIT
+
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+
+export interface DonateDrawerInitiative {
+  id: string;
+  name: string;
+  logoUrl?: string;
+}
+
+export const useDonateDrawerStore = defineStore('donateDrawer', () => {
+  const isOpen = ref(false);
+  const initiative = ref<DonateDrawerInitiative | null>(null);
+
+  const openDonateDrawer = (data: DonateDrawerInitiative) => {
+    initiative.value = data;
+    isOpen.value = true;
+  };
+
+  const closeDonateDrawer = () => {
+    isOpen.value = false;
+    initiative.value = null;
+  };
+
+  return { isOpen, initiative, openDonateDrawer, closeDonateDrawer };
+});
diff --git a/frontend/app/components/modules/initiatives/components/initiative-detail-header.vue b/frontend/app/components/modules/initiatives/components/initiative-detail-header.vue
index e54a11ea..b8486ee4 100644
--- a/frontend/app/components/modules/initiatives/components/initiative-detail-header.vue
+++ b/frontend/app/components/modules/initiatives/components/initiative-detail-header.vue
@@ -81,6 +81,7 @@ SPDX-License-Identifier: MIT
             icon="hand-heart"
             icon-position="left"
             class="!text-accent-500"
+            @click="openDonateDrawer({ id: initiative.id, name: initiative.name, logoUrl: initiative.logoUrl })"
           />
         </div>
       </div>
@@ -122,12 +123,15 @@ import LfxAvatar from '~/components/uikit/avatar/avatar.vue';
 import LfxIcon from '~/components/uikit/icon/icon.vue';
 import LfxChip from '~/components/uikit/chip/chip.vue';
 import LfxButton from '~/components/uikit/button/button.vue';
+import { useDonateDrawerStore } from '~/components/modules/donate/store/donate-drawer.store';
 
 const props = defineProps<{
   initiative: InitiativeDetail;
   activeTab?: string;
 }>();
 
+const { openDonateDrawer } = useDonateDrawerStore();
+
 defineEmits<{ (e: 'update:activeTab', value: string): void }>();
 
 const tabs = [
diff --git a/frontend/app/components/uikit/drawer/drawer.scss b/frontend/app/components/uikit/drawer/drawer.scss
index b8754822..1566f02c 100644
--- a/frontend/app/components/uikit/drawer/drawer.scss
+++ b/frontend/app/components/uikit/drawer/drawer.scss
@@ -16,8 +16,16 @@
     @apply justify-end;
   }
 
+  &--bottom {
+    @apply items-end;
+
+    .c-drawer__content {
+      @apply h-auto rounded-t-2xl #{!important};
+    }
+  }
+
   &__content {
-    @apply w-full bg-white shadow-xl h-full;
+    @apply relative w-full bg-white shadow-xl h-full;
 
     .c-card {
       @apply shadow-none border-0;
diff --git a/frontend/app/components/uikit/drawer/drawer.vue b/frontend/app/components/uikit/drawer/drawer.vue
index a752f5ea..b96a72d3 100644
--- a/frontend/app/components/uikit/drawer/drawer.vue
+++ b/frontend/app/components/uikit/drawer/drawer.vue
@@ -7,16 +7,17 @@ SPDX-License-Identifier: MIT
     <teleport to="body">
       <div
         class="c-drawer"
-        :class="props.position === 'left' ? 'c-drawer--left' : 'c-drawer--right'"
+        :class="`c-drawer--${props.position}`"
         @click="clickOutsideClose()"
       >
         <div
           class="c-drawer__content"
-          :style="{ 'max-width': props.width }"
+          :style="props.position === 'bottom' ? { 'max-height': props.height } : { 'max-width': props.width }"
           v-bind="$attrs"
           @click.stop
         >
           <lfx-icon-button
+            v-if="!props.hideCloseButton"
             type="transparent"
             icon="xmark"
             class="absolute top-0 right-0 mr-5 mt-5 z-[999]"
@@ -37,13 +38,17 @@ const props = withDefaults(
   defineProps<{
     modelValue: boolean;
     width?: string;
+    height?: string;
     closeFunction?: () => boolean;
-    position?: 'left' | 'right';
+    position?: 'left' | 'right' | 'bottom';
+    hideCloseButton?: boolean;
   }>(),
   {
     width: '37.5rem',
+    height: '85vh',
     closeFunction: () => true,
     position: 'right',
+    hideCloseButton: false,
   },
 );
 
diff --git a/frontend/app/layouts/default.vue b/frontend/app/layouts/default.vue
index 6bb31fa6..a8cf460e 100644
--- a/frontend/app/layouts/default.vue
+++ b/frontend/app/layouts/default.vue
@@ -9,10 +9,12 @@ SPDX-License-Identifier: MIT
       <slot />
     </main>
     <crowdfunding-footer />
+    <donate-drawer-global />
   </div>
 </template>
 
 <script setup lang="ts">
 import CrowdfundingHeader from '~/components/shared/layout/header.vue';
 import CrowdfundingFooter from '~/components/shared/layout/footer.vue';
+import DonateDrawerGlobal from '~/components/modules/donate/components/donate-drawer-global.vue';
 </script>
diff --git a/frontend/server/api/donate/index.post.ts b/frontend/server/api/donate/index.post.ts
new file mode 100644
index 00000000..36dfc2d8
--- /dev/null
+++ b/frontend/server/api/donate/index.post.ts
@@ -0,0 +1,31 @@
+// Copyright The Linux Foundation and each contributor to LFX.
+// SPDX-License-Identifier: MIT
+
+import { defineEventHandler, readBody, createError } from 'h3';
+import type { DonateSubmission, DonationRecord } from '#shared/types/donate.types';
+
+const donations: DonationRecord[] = [];
+
+export default defineEventHandler(async (event) => {
+  const body = await readBody<DonateSubmission>(event);
+
+  if (!body.initiativeId || !body.amountCents || body.amountCents <= 0) {
+    throw createError({
+      statusCode: 400,
+      statusMessage: 'initiativeId and a positive amountCents are required',
+    });
+  }
+
+  const record: DonationRecord = {
+    id: crypto.randomUUID(),
+    initiativeId: body.initiativeId,
+    tierId: body.tierId ?? null,
+    tierName: body.tierName ?? null,
+    amountCents: body.amountCents,
+    createdAt: new Date().toISOString(),
+  };
+
+  donations.push(record);
+
+  return { success: true, donation: record };
+});
diff --git a/frontend/shared/types/donate.types.ts b/frontend/shared/types/donate.types.ts
new file mode 100644
index 00000000..5842ddfe
--- /dev/null
+++ b/frontend/shared/types/donate.types.ts
@@ -0,0 +1,28 @@
+// Copyright The Linux Foundation and each contributor to LFX.
+// SPDX-License-Identifier: MIT
+
+export interface SponsorshipTier {
+  id: string;
+  name: string;
+  amountCents: number;
+  benefits: string[];
+}
+
+export interface DonateAmountForm {
+  tierId: string | null;
+  tierName: string | null;
+  customAmountCents: number | null;
+  amountCents: number;
+}
+
+export interface DonateSubmission {
+  initiativeId: string;
+  tierId: string | null;
+  tierName: string | null;
+  amountCents: number;
+}
+
+export interface DonationRecord extends DonateSubmission {
+  id: string;
+  createdAt: string;
+}

From b97c14fac2e3303e6508869b602391e5d3def91c Mon Sep 17 00:00:00 2001
From: Efren Lim <elim@linuxfoundation.org>
Date: Thu, 14 May 2026 13:12:05 +0800
Subject: [PATCH 2/4] feat: step 2 of the donate modal

Signed-off-by: Efren Lim <elim@linuxfoundation.org>
---
 .../donate/components/donate-drawer.vue       |  85 +++++++--
 .../donate/components/donate-step-contact.vue | 169 ++++++++++++++++++
 .../components/uikit/checkbox/checkbox.scss   |  15 +-
 .../components/uikit/checkbox/checkbox.vue    |  30 ++--
 .../components/uikit/field/field-messages.vue |   4 +-
 frontend/server/api/donate/index.post.ts      |   1 +
 frontend/shared/types/donate.types.ts         |  13 ++
 7 files changed, 282 insertions(+), 35 deletions(-)
 create mode 100644 frontend/app/components/modules/donate/components/donate-step-contact.vue

diff --git a/frontend/app/components/modules/donate/components/donate-drawer.vue b/frontend/app/components/modules/donate/components/donate-drawer.vue
index f8f81958..c8474b2e 100644
--- a/frontend/app/components/modules/donate/components/donate-drawer.vue
+++ b/frontend/app/components/modules/donate/components/donate-drawer.vue
@@ -58,7 +58,12 @@ SPDX-License-Identifier: MIT
       <div class="flex-1 overflow-y-auto px-8 py-6">
         <donate-step-amount
           v-if="step === 0"
-          v-model="form"
+          v-model="amountForm"
+        />
+        <donate-step-contact
+          v-else-if="step === 1"
+          ref="contactStepRef"
+          v-model="contactForm"
         />
       </div>
 
@@ -70,7 +75,13 @@ SPDX-License-Identifier: MIT
           @click="close()"
         />
 
-        <div class="flex items-center gap-4">
+        <div class="flex items-center gap-3">
+          <lfx-icon-button
+            v-if="step > 0"
+            type="outline"
+            icon="chevron-left"
+            @click="previousStep()"
+          />
           <span
             v-if="amountSummary"
             class="text-sm text-neutral-600"
@@ -79,10 +90,10 @@ SPDX-License-Identifier: MIT
           </span>
           <lfx-button
             type="primary"
-            label="Continue"
+            :label="isLastStep ? 'Continue to Payment' : 'Continue'"
             icon="chevron-right"
             icon-position="right"
-            :disabled="!hasSelection"
+            :disabled="!isCurrentStepValid"
             :loading="submitting"
             @click="handleContinue()"
           />
@@ -95,12 +106,15 @@ SPDX-License-Identifier: MIT
 <script setup lang="ts">
 import { computed, ref } from 'vue';
 import DonateStepAmount from './donate-step-amount.vue';
-import type { DonateAmountForm } from '#shared/types/donate.types';
+import DonateStepContact from './donate-step-contact.vue';
+import type { DonateAmountForm, DonateContactForm } from '#shared/types/donate.types';
 import LfxDrawer from '~/components/uikit/drawer/drawer.vue';
 import LfxIcon from '~/components/uikit/icon/icon.vue';
 import LfxIconButton from '~/components/uikit/icon-button/icon-button.vue';
 import LfxButton from '~/components/uikit/button/button.vue';
 
+const TOTAL_STEPS = 2;
+
 const props = defineProps<{
   modelValue: boolean;
   initiative: {
@@ -121,42 +135,87 @@ const isOpen = computed({
 });
 
 const step = ref(0);
+const isLastStep = computed(() => step.value === TOTAL_STEPS - 1);
 const submitting = ref(false);
 
-const form = ref<DonateAmountForm>({
+const contactStepRef = ref<InstanceType<typeof DonateStepContact> | null>(null);
+
+const amountForm = ref<DonateAmountForm>({
   tierId: null,
   tierName: null,
   customAmountCents: null,
   amountCents: 0,
 });
 
-const hasSelection = computed(() => form.value.amountCents > 0);
+const contactForm = ref<DonateContactForm>({
+  donorType: 'individual',
+  fullName: '',
+  companyName: '',
+  contactName: '',
+  email: '',
+  needsInvoice: false,
+  poNumber: '',
+});
+
+const hasSelection = computed(() => amountForm.value.amountCents > 0);
+
+const isCurrentStepValid = computed(() => {
+  if (step.value === 0) return hasSelection.value;
+  const f = contactForm.value;
+  if (f.donorType === 'individual') return f.fullName.trim().length > 0 && f.email.trim().length > 0;
+  return f.companyName.trim().length > 0 && f.contactName.trim().length > 0 && f.email.trim().length > 0;
+});
 
 const amountSummary = computed(() => {
   if (!hasSelection.value) return null;
-  const dollars = form.value.amountCents / 100;
+  const dollars = amountForm.value.amountCents / 100;
   const formatted = dollars >= 1_000 ? `$${(dollars / 1_000).toLocaleString()}K` : `$${dollars.toLocaleString()}`;
-  return form.value.tierName ? `Amount: ${formatted} (${form.value.tierName})` : `Amount: ${formatted}`;
+  return amountForm.value.tierName ? `Amount: ${formatted} (${amountForm.value.tierName})` : `Amount: ${formatted}`;
 });
 
 const close = () => {
   isOpen.value = false;
   step.value = 0;
-  form.value = { tierId: null, tierName: null, customAmountCents: null, amountCents: 0 };
+  amountForm.value = { tierId: null, tierName: null, customAmountCents: null, amountCents: 0 };
+  contactForm.value = {
+    donorType: 'individual',
+    fullName: '',
+    companyName: '',
+    contactName: '',
+    email: '',
+    needsInvoice: false,
+    poNumber: '',
+  };
+};
+
+const previousStep = () => {
+  if (step.value > 0) step.value--;
 };
 
 const handleContinue = async () => {
   if (!hasSelection.value) return;
 
+  if (!isLastStep.value) {
+    step.value++;
+    return;
+  }
+
+  // Validate contact step before submitting
+  if (contactStepRef.value?.$v) {
+    contactStepRef.value.$v.$touch();
+    if (contactStepRef.value.$v.$invalid) return;
+  }
+
   submitting.value = true;
   try {
     await $fetch('/api/donate', {
       method: 'POST',
       body: {
         initiativeId: props.initiative.id,
-        tierId: form.value.tierId,
-        tierName: form.value.tierName,
-        amountCents: form.value.amountCents,
+        tierId: amountForm.value.tierId,
+        tierName: amountForm.value.tierName,
+        amountCents: amountForm.value.amountCents,
+        contact: contactForm.value,
       },
     });
     emit('submitted');
diff --git a/frontend/app/components/modules/donate/components/donate-step-contact.vue b/frontend/app/components/modules/donate/components/donate-step-contact.vue
new file mode 100644
index 00000000..300c0b32
--- /dev/null
+++ b/frontend/app/components/modules/donate/components/donate-step-contact.vue
@@ -0,0 +1,169 @@
+<!--
+Copyright (c) 2025 The Linux Foundation and each contributor.
+SPDX-License-Identifier: MIT
+-->
+<template>
+  <div class="flex flex-col gap-6">
+    <!-- Donor type toggle -->
+    <div>
+      <p class="text-sm font-medium text-neutral-700 mb-3">I'm donating as</p>
+      <div class="flex gap-2">
+        <lfx-button
+          :type="form.donorType === 'individual' ? 'primary' : 'outline'"
+          button-style="pill"
+          size="small"
+          icon="user"
+          label="Individual"
+          @click="setDonorType('individual')"
+        />
+        <lfx-button
+          :type="form.donorType === 'company' ? 'primary' : 'outline'"
+          button-style="pill"
+          size="small"
+          icon="building"
+          label="Company"
+          @click="setDonorType('company')"
+        />
+      </div>
+    </div>
+
+    <!-- Individual fields -->
+    <template v-if="form.donorType === 'individual'">
+      <lfx-field
+        label="Full name"
+        :required="true"
+      >
+        <lfx-input
+          v-model="form.fullName"
+          placeholder=""
+          :invalid="$v.fullName.$error"
+          @blur="$v.fullName.$touch()"
+        />
+        <lfx-field-messages :validation="$v.fullName" />
+      </lfx-field>
+
+      <lfx-field
+        label="Email"
+        :required="true"
+      >
+        <lfx-input
+          v-model="form.email"
+          type="email"
+          placeholder=""
+          :invalid="$v.email.$error"
+          @blur="$v.email.$touch()"
+        />
+        <lfx-field-messages :validation="$v.email" />
+      </lfx-field>
+    </template>
+
+    <!-- Company fields -->
+    <template v-else>
+      <div class="grid grid-cols-2 gap-4">
+        <lfx-field
+          label="Company name"
+          :required="true"
+        >
+          <lfx-input
+            v-model="form.companyName"
+            placeholder=""
+            :invalid="$v.companyName.$error"
+            @blur="$v.companyName.$touch()"
+          />
+          <lfx-field-messages :validation="$v.companyName" />
+        </lfx-field>
+
+        <lfx-field
+          label="Contact name"
+          :required="true"
+        >
+          <lfx-input
+            v-model="form.contactName"
+            placeholder=""
+            :invalid="$v.contactName.$error"
+            @blur="$v.contactName.$touch()"
+          />
+          <lfx-field-messages :validation="$v.contactName" />
+        </lfx-field>
+      </div>
+
+      <lfx-field
+        label="Email"
+        :required="true"
+      >
+        <lfx-input
+          v-model="form.email"
+          type="email"
+          placeholder=""
+          :invalid="$v.email.$error"
+          @blur="$v.email.$touch()"
+        />
+        <lfx-field-messages :validation="$v.email" />
+      </lfx-field>
+
+      <lfx-checkbox v-model="form.needsInvoice"> I need an invoice for this donation </lfx-checkbox>
+
+      <lfx-field
+        v-if="form.needsInvoice"
+        label="PO Number"
+      >
+        <lfx-input
+          v-model="form.poNumber"
+          placeholder=""
+        />
+      </lfx-field>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, watch, computed } from 'vue';
+import { useVuelidate } from '@vuelidate/core';
+import { required, email as emailValidator } from '@vuelidate/validators';
+import type { DonateContactForm, DonorType } from '#shared/types/donate.types';
+import LfxButton from '~/components/uikit/button/button.vue';
+import LfxField from '~/components/uikit/field/field.vue';
+import LfxFieldMessages from '~/components/uikit/field/field-messages.vue';
+import LfxInput from '~/components/uikit/input/input.vue';
+import LfxCheckbox from '~/components/uikit/checkbox/checkbox.vue';
+
+const props = defineProps<{
+  modelValue: DonateContactForm;
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: DonateContactForm): void;
+}>();
+
+const form = reactive<DonateContactForm>({ ...props.modelValue });
+
+watch(
+  () => props.modelValue,
+  (val) => Object.assign(form, val),
+  { deep: true },
+);
+
+watch(form, (val) => emit('update:modelValue', { ...val }), { deep: true });
+
+const rules = computed(() => ({
+  email: { required, email: emailValidator },
+  ...(form.donorType === 'individual'
+    ? { fullName: { required } }
+    : { companyName: { required }, contactName: { required } }),
+}));
+
+const $v = useVuelidate(rules, form);
+
+const setDonorType = (type: DonorType) => {
+  form.donorType = type;
+  $v.value.$reset();
+};
+
+defineExpose({ $v });
+</script>
+
+<script lang="ts">
+export default {
+  name: 'DonateStepContact',
+};
+</script>
diff --git a/frontend/app/components/uikit/checkbox/checkbox.scss b/frontend/app/components/uikit/checkbox/checkbox.scss
index f9bc6a70..a80f1e53 100644
--- a/frontend/app/components/uikit/checkbox/checkbox.scss
+++ b/frontend/app/components/uikit/checkbox/checkbox.scss
@@ -1,11 +1,11 @@
 // Copyright The Linux Foundation and each contributor to LFX.
 // SPDX-License-Identifier: MIT
 .c-checkbox {
-  @apply inline-flex items-center flex-wrap relative;
+  @apply inline-flex items-center flex-wrap relative gap-2;
 
   input {
-    @apply h-3.5 w-3.5 border border-solid border-neutral-300 rounded-sm bg-white;
-    @apply transition-all appearance-none p-0 my-0 ml-0 inline-block cursor-pointer;
+    @apply absolute inset-0 h-full w-full border border-solid border-neutral-300 rounded-sm bg-white;
+    @apply transition-all appearance-none p-0 m-0 cursor-pointer;
 
     // Checked
     &:checked {
@@ -42,8 +42,11 @@
     }
   }
 
-  // Icon
-  i.c-icon {
-    @apply absolute top-0.5 left-0.5;
+  &__box {
+    @apply relative flex items-center justify-center shrink-0 h-3.5 w-3.5;
+  }
+
+  &__check {
+    @apply absolute pointer-events-none;
   }
 }
diff --git a/frontend/app/components/uikit/checkbox/checkbox.vue b/frontend/app/components/uikit/checkbox/checkbox.vue
index 76cad42a..fc0ce6cd 100644
--- a/frontend/app/components/uikit/checkbox/checkbox.vue
+++ b/frontend/app/components/uikit/checkbox/checkbox.vue
@@ -4,20 +4,22 @@ SPDX-License-Identifier: MIT
 -->
 <template>
   <label class="c-checkbox">
-    <input
-      v-model="checked"
-      type="checkbox"
-      :value="props.value"
-      :disabled="props.disabled"
-    />
-    <lfx-icon
-      v-if="checked"
-      name="check"
-      type="regular"
-      :size="10"
-      class="text-white"
-      @click.stop
-    />
+    <span class="c-checkbox__box">
+      <input
+        v-model="checked"
+        type="checkbox"
+        :value="props.value"
+        :disabled="props.disabled"
+      />
+      <lfx-icon
+        v-if="checked"
+        name="check"
+        type="solid"
+        :size="9"
+        class="c-checkbox__check text-white"
+        @click.stop
+      />
+    </span>
     <span class="flex flex-col">
       <slot />
     </span>
diff --git a/frontend/app/components/uikit/field/field-messages.vue b/frontend/app/components/uikit/field/field-messages.vue
index d2e88bfc..e3228add 100644
--- a/frontend/app/components/uikit/field/field-messages.vue
+++ b/frontend/app/components/uikit/field/field-messages.vue
@@ -24,12 +24,12 @@ SPDX-License-Identifier: MIT
 
 <script setup lang="ts">
 import { computed } from 'vue';
-import type { ErrorObject, Validation } from '@vuelidate/core';
+import type { BaseValidation, ErrorObject } from '@vuelidate/core';
 import LfxFieldMessage from '~/components/uikit/field/field-message.vue';
 
 const props = withDefaults(
   defineProps<{
-    validation: Validation;
+    validation: BaseValidation;
     errorMessages?: Record<string, string>;
     hideDefault?: boolean;
   }>(),
diff --git a/frontend/server/api/donate/index.post.ts b/frontend/server/api/donate/index.post.ts
index 36dfc2d8..095eca82 100644
--- a/frontend/server/api/donate/index.post.ts
+++ b/frontend/server/api/donate/index.post.ts
@@ -22,6 +22,7 @@ export default defineEventHandler(async (event) => {
     tierId: body.tierId ?? null,
     tierName: body.tierName ?? null,
     amountCents: body.amountCents,
+    contact: body.contact,
     createdAt: new Date().toISOString(),
   };
 
diff --git a/frontend/shared/types/donate.types.ts b/frontend/shared/types/donate.types.ts
index 5842ddfe..aa8d1f41 100644
--- a/frontend/shared/types/donate.types.ts
+++ b/frontend/shared/types/donate.types.ts
@@ -15,11 +15,24 @@ export interface DonateAmountForm {
   amountCents: number;
 }
 
+export type DonorType = 'individual' | 'company';
+
+export interface DonateContactForm {
+  donorType: DonorType;
+  fullName: string;
+  companyName: string;
+  contactName: string;
+  email: string;
+  needsInvoice: boolean;
+  poNumber: string;
+}
+
 export interface DonateSubmission {
   initiativeId: string;
   tierId: string | null;
   tierName: string | null;
   amountCents: number;
+  contact: DonateContactForm;
 }
 
 export interface DonationRecord extends DonateSubmission {

From ba13e69d941663ca04abc3822317d98ba11dc7e3 Mon Sep 17 00:00:00 2001
From: Efren Lim <elim@linuxfoundation.org>
Date: Thu, 14 May 2026 16:17:16 +0800
Subject: [PATCH 3/4] feat: added payment and thank you steps

Signed-off-by: Efren Lim <elim@linuxfoundation.org>
---
 .../donate/components/donate-drawer.vue       | 235 ++++++++++-------
 .../donate/components/donate-step-payment.vue | 241 ++++++++++++++++++
 .../donate/components/donate-step-success.vue | 117 +++++++++
 frontend/shared/types/donate.types.ts         |   7 +
 4 files changed, 511 insertions(+), 89 deletions(-)
 create mode 100644 frontend/app/components/modules/donate/components/donate-step-payment.vue
 create mode 100644 frontend/app/components/modules/donate/components/donate-step-success.vue

diff --git a/frontend/app/components/modules/donate/components/donate-drawer.vue b/frontend/app/components/modules/donate/components/donate-drawer.vue
index c8474b2e..791606ca 100644
--- a/frontend/app/components/modules/donate/components/donate-drawer.vue
+++ b/frontend/app/components/modules/donate/components/donate-drawer.vue
@@ -8,95 +8,124 @@ SPDX-License-Identifier: MIT
     position="bottom"
     hide-close-button
   >
-    <div class="flex flex-col max-h-[85vh] w-[70vw] mx-auto">
-      <!-- Header -->
-      <div class="flex items-center justify-between border-b border-neutral-200 px-8 py-6">
-        <div class="flex items-center gap-4">
-          <div class="relative size-12 shrink-0 overflow-hidden rounded-full bg-neutral-100">
-            <img
-              v-if="initiative.logoUrl"
-              :src="initiative.logoUrl"
-              :alt="initiative.name"
-              class="size-full object-cover"
-            />
-            <div
-              v-else
-              class="flex size-full items-center justify-center"
-            >
-              <lfx-icon
-                name="hands-holding-dollar"
-                type="light"
-                :size="22"
-                class="text-neutral-400"
+    <div class="relative">
+      <lfx-icon-button
+        class="absolute top-0 right-0 mr-5 mt-5 z-[999]"
+        type="transparent"
+        icon="xmark"
+        @click="close()"
+      />
+
+      <!-- Success state -->
+      <div
+        v-if="submitted"
+        class="flex flex-col max-h-[85vh] w-[70vw] mx-auto"
+      >
+        <div class="flex-1 overflow-y-auto px-8 py-6">
+          <donate-step-success
+            :initiative-name="initiative.name"
+            :amount-cents="amountForm.amountCents"
+            :tier-name="amountForm.tierName"
+          />
+        </div>
+      </div>
+
+      <!-- Multi-step layout -->
+      <div
+        v-else
+        class="flex flex-col max-h-[85vh] w-[70vw] mx-auto"
+      >
+        <!-- Header -->
+        <div class="flex items-center justify-between border-b border-neutral-200 px-8 py-6">
+          <div class="flex items-center gap-4">
+            <div class="relative size-12 shrink-0 overflow-hidden rounded-full bg-neutral-100">
+              <img
+                v-if="initiative.logoUrl"
+                :src="initiative.logoUrl"
+                :alt="initiative.name"
+                class="size-full object-cover"
               />
+              <div
+                v-else
+                class="flex size-full items-center justify-center"
+              >
+                <lfx-icon
+                  name="hands-holding-dollar"
+                  type="light"
+                  :size="22"
+                  class="text-neutral-400"
+                />
+              </div>
             </div>
-          </div>
 
-          <div class="flex flex-col gap-0.5">
-            <div class="flex items-center gap-1.5 text-accent-500">
-              <lfx-icon
-                name="hands-holding-dollar"
-                type="light"
-                :size="13"
-              />
-              <span class="text-xs font-medium">Donate to</span>
+            <div class="flex flex-col gap-0.5">
+              <div class="flex items-center gap-1.5 text-accent-500">
+                <lfx-icon
+                  name="hands-holding-dollar"
+                  type="light"
+                  :size="13"
+                />
+                <span class="text-xs font-medium">Donate to</span>
+              </div>
+              <h2 class="text-2xl font-semibold text-neutral-900">
+                {{ initiative.name }}
+              </h2>
             </div>
-            <h2 class="text-2xl font-semibold text-neutral-900">
-              {{ initiative.name }}
-            </h2>
           </div>
         </div>
 
-        <lfx-icon-button
-          type="transparent"
-          icon="xmark"
-          @click="close()"
-        />
-      </div>
-
-      <!-- Body -->
-      <div class="flex-1 overflow-y-auto px-8 py-6">
-        <donate-step-amount
-          v-if="step === 0"
-          v-model="amountForm"
-        />
-        <donate-step-contact
-          v-else-if="step === 1"
-          ref="contactStepRef"
-          v-model="contactForm"
-        />
-      </div>
-
-      <!-- Footer -->
-      <div class="flex items-center justify-between border-t border-neutral-200 px-8 py-4">
-        <lfx-button
-          type="ghost"
-          label="Cancel"
-          @click="close()"
-        />
-
-        <div class="flex items-center gap-3">
-          <lfx-icon-button
-            v-if="step > 0"
-            type="outline"
-            icon="chevron-left"
-            @click="previousStep()"
+        <!-- Body -->
+        <div class="flex-1 overflow-y-auto px-8 py-6">
+          <donate-step-amount
+            v-if="step === 0"
+            v-model="amountForm"
+          />
+          <donate-step-contact
+            v-else-if="step === 1"
+            ref="contactStepRef"
+            v-model="contactForm"
           />
-          <span
-            v-if="amountSummary"
-            class="text-sm text-neutral-600"
-          >
-            {{ amountSummary }}
-          </span>
+          <donate-step-payment
+            v-else-if="step === 2"
+            ref="paymentStepRef"
+            v-model="paymentForm"
+            :amount-cents="amountForm.amountCents"
+            :tier-name="amountForm.tierName"
+            :initiative-name="initiative.name"
+          />
+        </div>
+
+        <!-- Footer -->
+        <div class="flex items-center justify-between border-t border-neutral-200 px-8 py-4">
           <lfx-button
-            type="primary"
-            :label="isLastStep ? 'Continue to Payment' : 'Continue'"
-            icon="chevron-right"
-            icon-position="right"
-            :disabled="!isCurrentStepValid"
-            :loading="submitting"
-            @click="handleContinue()"
+            type="ghost"
+            label="Cancel"
+            @click="close()"
           />
+
+          <div class="flex items-center gap-3">
+            <lfx-icon-button
+              v-if="step > 0"
+              type="outline"
+              icon="chevron-left"
+              @click="previousStep()"
+            />
+            <span
+              v-if="amountSummary"
+              class="text-sm text-neutral-600"
+            >
+              {{ amountSummary }}
+            </span>
+            <lfx-button
+              type="primary"
+              :label="continueLabel"
+              icon="chevron-right"
+              icon-position="right"
+              :disabled="!isCurrentStepValid"
+              :loading="submitting"
+              @click="handleContinue()"
+            />
+          </div>
         </div>
       </div>
     </div>
@@ -107,13 +136,15 @@ SPDX-License-Identifier: MIT
 import { computed, ref } from 'vue';
 import DonateStepAmount from './donate-step-amount.vue';
 import DonateStepContact from './donate-step-contact.vue';
-import type { DonateAmountForm, DonateContactForm } from '#shared/types/donate.types';
+import DonateStepPayment from './donate-step-payment.vue';
+import DonateStepSuccess from './donate-step-success.vue';
+import type { DonateAmountForm, DonateContactForm, DonatePaymentForm } from '#shared/types/donate.types';
 import LfxDrawer from '~/components/uikit/drawer/drawer.vue';
 import LfxIcon from '~/components/uikit/icon/icon.vue';
 import LfxIconButton from '~/components/uikit/icon-button/icon-button.vue';
 import LfxButton from '~/components/uikit/button/button.vue';
 
-const TOTAL_STEPS = 2;
+const TOTAL_STEPS = 3;
 
 const props = defineProps<{
   modelValue: boolean;
@@ -137,8 +168,10 @@ const isOpen = computed({
 const step = ref(0);
 const isLastStep = computed(() => step.value === TOTAL_STEPS - 1);
 const submitting = ref(false);
+const submitted = ref(false);
 
 const contactStepRef = ref<InstanceType<typeof DonateStepContact> | null>(null);
+const paymentStepRef = ref<InstanceType<typeof DonateStepPayment> | null>(null);
 
 const amountForm = ref<DonateAmountForm>({
   tierId: null,
@@ -157,13 +190,29 @@ const contactForm = ref<DonateContactForm>({
   poNumber: '',
 });
 
+const paymentForm = ref<DonatePaymentForm>({
+  cardNumber: '',
+  expiry: '',
+  cvc: '',
+});
+
 const hasSelection = computed(() => amountForm.value.amountCents > 0);
 
 const isCurrentStepValid = computed(() => {
   if (step.value === 0) return hasSelection.value;
-  const f = contactForm.value;
-  if (f.donorType === 'individual') return f.fullName.trim().length > 0 && f.email.trim().length > 0;
-  return f.companyName.trim().length > 0 && f.contactName.trim().length > 0 && f.email.trim().length > 0;
+  if (step.value === 1) {
+    const f = contactForm.value;
+    if (f.donorType === 'individual') return f.fullName.trim().length > 0 && f.email.trim().length > 0;
+    return f.companyName.trim().length > 0 && f.contactName.trim().length > 0 && f.email.trim().length > 0;
+  }
+  const p = paymentForm.value;
+  return p.cardNumber.trim().length > 0 && p.expiry.trim().length > 0 && p.cvc.trim().length > 0;
+});
+
+const continueLabel = computed(() => {
+  if (step.value === 2) return 'Donate';
+  if (step.value === 1) return 'Continue to Payment';
+  return 'Continue';
 });
 
 const amountSummary = computed(() => {
@@ -176,6 +225,7 @@ const amountSummary = computed(() => {
 const close = () => {
   isOpen.value = false;
   step.value = 0;
+  submitted.value = false;
   amountForm.value = { tierId: null, tierName: null, customAmountCents: null, amountCents: 0 };
   contactForm.value = {
     donorType: 'individual',
@@ -186,6 +236,7 @@ const close = () => {
     needsInvoice: false,
     poNumber: '',
   };
+  paymentForm.value = { cardNumber: '', expiry: '', cvc: '' };
 };
 
 const previousStep = () => {
@@ -196,14 +247,19 @@ const handleContinue = async () => {
   if (!hasSelection.value) return;
 
   if (!isLastStep.value) {
+    // Validate contact step before advancing to payment
+    if (step.value === 1 && contactStepRef.value?.$v) {
+      contactStepRef.value.$v.$touch();
+      if (contactStepRef.value.$v.$invalid) return;
+    }
     step.value++;
     return;
   }
 
-  // Validate contact step before submitting
-  if (contactStepRef.value?.$v) {
-    contactStepRef.value.$v.$touch();
-    if (contactStepRef.value.$v.$invalid) return;
+  // Validate payment step before submitting
+  if (paymentStepRef.value?.$v) {
+    paymentStepRef.value.$v.$touch();
+    if (paymentStepRef.value.$v.$invalid) return;
   }
 
   submitting.value = true;
@@ -216,10 +272,11 @@ const handleContinue = async () => {
         tierName: amountForm.value.tierName,
         amountCents: amountForm.value.amountCents,
         contact: contactForm.value,
+        payment: paymentForm.value,
       },
     });
+    submitted.value = true;
     emit('submitted');
-    close();
   } finally {
     submitting.value = false;
   }
diff --git a/frontend/app/components/modules/donate/components/donate-step-payment.vue b/frontend/app/components/modules/donate/components/donate-step-payment.vue
new file mode 100644
index 00000000..a45ccf15
--- /dev/null
+++ b/frontend/app/components/modules/donate/components/donate-step-payment.vue
@@ -0,0 +1,241 @@
+<!--
+Copyright (c) 2025 The Linux Foundation and each contributor.
+SPDX-License-Identifier: MIT
+-->
+<template>
+  <div class="flex flex-col gap-6">
+    <div>
+      <p class="text-sm font-medium text-neutral-700 mb-3">Payment method</p>
+      <div class="rounded-xl border border-neutral-200 p-5 flex flex-col gap-4">
+        <!-- Card number -->
+        <lfx-field
+          label="Card number"
+          :required="true"
+        >
+          <lfx-input
+            :model-value="form.cardNumber"
+            placeholder="1234 5678 9123 4567"
+            :invalid="$v.cardNumber.$error"
+            @update:model-value="onCardNumberInput"
+            @keydown="onCardNumberKeydown"
+            @paste="onCardNumberPaste"
+            @blur="$v.cardNumber.$touch()"
+          />
+          <lfx-field-messages :validation="$v.cardNumber" />
+        </lfx-field>
+
+        <!-- Expiry + CVC -->
+        <div class="grid grid-cols-3 gap-4">
+          <lfx-field
+            class="col-span-2"
+            label="Expiry"
+            :required="true"
+          >
+            <lfx-input
+              :model-value="form.expiry"
+              placeholder="MM/YY"
+              :invalid="$v.expiry.$error"
+              @update:model-value="onExpiryInput"
+              @keydown="onExpiryKeydown"
+              @paste="onExpiryPaste"
+              @blur="$v.expiry.$touch()"
+            />
+            <lfx-field-messages :validation="$v.expiry" />
+          </lfx-field>
+
+          <lfx-field
+            label="CVC"
+            :required="true"
+          >
+            <lfx-input
+              :model-value="form.cvc"
+              placeholder="123"
+              :invalid="$v.cvc.$error"
+              @update:model-value="onCvcInput"
+              @keydown="onCvcKeydown"
+              @paste="onCvcPaste"
+              @blur="$v.cvc.$touch()"
+            />
+            <lfx-field-messages :validation="$v.cvc" />
+          </lfx-field>
+        </div>
+
+        <!-- Order summary -->
+        <div class="border-t border-neutral-200 pt-4 flex flex-col gap-2.5">
+          <div class="flex items-center justify-between">
+            <span class="text-sm text-neutral-500">Donation to {{ initiativeName }}</span>
+            <span class="text-sm text-neutral-900">{{ formattedAmount }}</span>
+          </div>
+          <div class="flex items-center justify-between">
+            <span class="text-sm text-neutral-500">Fees (LF underwrites)</span>
+            <span class="text-sm text-positive-600">$0.00</span>
+          </div>
+          <div class="flex items-center justify-between border-t border-neutral-200 pt-2.5 mt-0.5">
+            <span class="text-sm font-semibold text-neutral-900">Total</span>
+            <span class="text-sm font-bold text-neutral-900">{{ formattedAmount }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Tier note -->
+    <div
+      v-if="tierName"
+      class="flex items-center gap-2 text-sm text-neutral-600"
+    >
+      <span class="size-2 rounded-full bg-warning-500 shrink-0" />
+      <span>{{ tierName }} tier benefits included</span>
+    </div>
+
+    <!-- Legal -->
+    <p class="text-xs text-neutral-400 leading-relaxed">
+      All donations are processed by the Linux Foundation, a 501(c)(6) nonprofit. 100% of your contribution goes
+      directly to the initiative. LF underwrites all platform and payment fees until $10M.
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, watch, computed } from 'vue';
+import { useVuelidate } from '@vuelidate/core';
+import { required } from '@vuelidate/validators';
+import type { DonatePaymentForm } from '#shared/types/donate.types';
+import LfxField from '~/components/uikit/field/field.vue';
+import LfxFieldMessages from '~/components/uikit/field/field-messages.vue';
+import LfxInput from '~/components/uikit/input/input.vue';
+
+const props = defineProps<{
+  modelValue: DonatePaymentForm;
+  amountCents: number;
+  tierName: string | null;
+  initiativeName: string;
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: DonatePaymentForm): void;
+}>();
+
+const form = reactive<DonatePaymentForm>({ ...props.modelValue });
+
+watch(
+  () => props.modelValue,
+  (val) => Object.assign(form, val),
+  { deep: true },
+);
+
+watch(form, (val) => emit('update:modelValue', { ...val }), { deep: true });
+
+const rules = {
+  cardNumber: { required },
+  expiry: { required },
+  cvc: { required },
+};
+
+const $v = useVuelidate(rules, form);
+
+const formattedAmount = computed(() => {
+  const dollars = props.amountCents / 100;
+  return dollars >= 1_000 ? `$${(dollars / 1_000).toLocaleString()}K` : `$${dollars.toLocaleString()}`;
+});
+
+// Keys that are always allowed regardless of field type
+const PASSTHROUGH_KEYS = new Set([
+  'Backspace',
+  'Delete',
+  'Tab',
+  'Enter',
+  'ArrowLeft',
+  'ArrowRight',
+  'ArrowUp',
+  'ArrowDown',
+  'Home',
+  'End',
+]);
+
+const isNumericKey = (e: KeyboardEvent) => PASSTHROUGH_KEYS.has(e.key) || e.ctrlKey || e.metaKey || /^\d$/.test(e.key);
+
+// --- Card number ---
+
+const formatCardNumber = (digits: string) => digits.replace(/(.{4})(?=.)/g, '$1 ');
+
+const onCardNumberKeydown = (e: KeyboardEvent) => {
+  if (!isNumericKey(e)) {
+    e.preventDefault();
+    return;
+  }
+  if (/^\d$/.test(e.key) && form.cardNumber.replace(/\D/g, '').length >= 16) {
+    e.preventDefault();
+  }
+};
+
+const onCardNumberInput = (val: string | number) => {
+  const digits = String(val).replace(/\D/g, '').slice(0, 16);
+  form.cardNumber = formatCardNumber(digits);
+};
+
+const onCardNumberPaste = (e: ClipboardEvent) => {
+  e.preventDefault();
+  const digits = (e.clipboardData?.getData('text') ?? '').replace(/\D/g, '').slice(0, 16);
+  form.cardNumber = formatCardNumber(digits);
+};
+
+// --- Expiry ---
+
+const applyExpiryFormat = (digits: string, isDeleting: boolean): string => {
+  if (digits.length >= 3) return `${digits.slice(0, 2)}/${digits.slice(2)}`;
+  if (digits.length === 2 && !isDeleting) return `${digits}/`;
+  return digits;
+};
+
+const onExpiryKeydown = (e: KeyboardEvent) => {
+  if (!isNumericKey(e)) {
+    e.preventDefault();
+    return;
+  }
+  if (/^\d$/.test(e.key) && form.expiry.replace(/\D/g, '').length >= 4) {
+    e.preventDefault();
+  }
+};
+
+const onExpiryInput = (val: string | number) => {
+  const raw = String(val);
+  const isDeleting = raw.length < form.expiry.length;
+  const digits = raw.replace(/\D/g, '').slice(0, 4);
+  form.expiry = applyExpiryFormat(digits, isDeleting);
+};
+
+const onExpiryPaste = (e: ClipboardEvent) => {
+  e.preventDefault();
+  const digits = (e.clipboardData?.getData('text') ?? '').replace(/\D/g, '').slice(0, 4);
+  form.expiry = applyExpiryFormat(digits, false);
+};
+
+// --- CVC ---
+
+const onCvcKeydown = (e: KeyboardEvent) => {
+  if (!isNumericKey(e)) {
+    e.preventDefault();
+    return;
+  }
+  if (/^\d$/.test(e.key) && form.cvc.length >= 4) {
+    e.preventDefault();
+  }
+};
+
+const onCvcInput = (val: string | number) => {
+  form.cvc = String(val).replace(/\D/g, '').slice(0, 4);
+};
+
+const onCvcPaste = (e: ClipboardEvent) => {
+  e.preventDefault();
+  form.cvc = (e.clipboardData?.getData('text') ?? '').replace(/\D/g, '').slice(0, 4);
+};
+
+defineExpose({ $v });
+</script>
+
+<script lang="ts">
+export default {
+  name: 'DonateStepPayment',
+};
+</script>
diff --git a/frontend/app/components/modules/donate/components/donate-step-success.vue b/frontend/app/components/modules/donate/components/donate-step-success.vue
new file mode 100644
index 00000000..abc7cbe1
--- /dev/null
+++ b/frontend/app/components/modules/donate/components/donate-step-success.vue
@@ -0,0 +1,117 @@
+<!--
+Copyright (c) 2025 The Linux Foundation and each contributor.
+SPDX-License-Identifier: MIT
+-->
+<template>
+  <div class="flex flex-col items-center gap-6 py-10 text-center">
+    <!-- Heart icon -->
+    <div class="flex size-16 items-center justify-center rounded-full bg-accent-500">
+      <lfx-icon
+        name="heart"
+        type="solid"
+        :size="28"
+        class="text-white"
+      />
+    </div>
+
+    <!-- Title + message -->
+    <div class="flex flex-col gap-2">
+      <h2 class="text-2xl font-semibold text-neutral-900">Thank you for your donation!</h2>
+      <p class="text-sm text-neutral-600">
+        Your {{ formattedAmount }} donation to
+        <span class="font-semibold text-accent-600">{{ initiativeName }}</span>
+        has been processed.
+      </p>
+    </div>
+
+    <!-- Tier badge -->
+    <span
+      v-if="tierName"
+      class="rounded-full px-3 py-1 text-xs font-semibold"
+      :class="tierBadgeClass"
+    >
+      {{ tierName }} Sponsor
+    </span>
+
+    <!-- Share card -->
+    <div class="w-full rounded-xl border border-neutral-200 p-5 flex flex-col items-center gap-4">
+      <p class="text-sm font-medium text-neutral-700">Share your contribution</p>
+      <div class="flex gap-3">
+        <lfx-button
+          type="outline"
+          label="Post on X"
+          icon="x-twitter"
+          icon-type="brands"
+          @click="shareOnX()"
+        />
+        <lfx-button
+          type="outline"
+          label="Share on LinkedIn"
+          icon="linkedin-in"
+          icon-type="brands"
+          @click="shareOnLinkedIn()"
+        />
+      </div>
+      <p class="text-xs text-neutral-400">Help {{ initiativeName }} reach its goal by spreading the word</p>
+    </div>
+
+    <!-- Manage donations link -->
+    <a
+      href="#"
+      class="flex items-center gap-1.5 text-sm font-medium text-accent-600 hover:text-accent-700 transition-colors"
+      @click.prevent
+    >
+      Manage your Donations
+      <lfx-icon
+        name="arrow-up-right-from-square"
+        type="light"
+        :size="13"
+      />
+    </a>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import LfxIcon from '~/components/uikit/icon/icon.vue';
+import LfxButton from '~/components/uikit/button/button.vue';
+
+const TIER_BADGE_CLASSES: Record<string, string> = {
+  bronze: 'bg-warning-100 text-warning-800',
+  silver: 'bg-neutral-200 text-neutral-600',
+  gold: 'bg-warning-200 text-warning-700',
+  platinum: 'bg-neutral-100 text-neutral-500',
+};
+
+const props = defineProps<{
+  amountCents: number;
+  tierName: string | null;
+  initiativeName: string;
+}>();
+
+const formattedAmount = computed(() => {
+  const dollars = props.amountCents / 100;
+  return dollars >= 1_000 ? `$${(dollars / 1_000).toLocaleString()}K` : `$${dollars.toLocaleString()}`;
+});
+
+const tierBadgeClass = computed(() => {
+  if (!props.tierName) return '';
+  return TIER_BADGE_CLASSES[props.tierName.toLowerCase()] ?? 'bg-neutral-100 text-neutral-600';
+});
+
+const shareOnX = () => {
+  const text = encodeURIComponent(`I just donated to ${props.initiativeName} on LFX Crowdfunding!`);
+  window.open(`https://twitter.com/intent/tweet?text=${text}`, '_blank');
+};
+
+const shareOnLinkedIn = () => {
+  const url = encodeURIComponent(window.location.href);
+  window.open(`https://www.linkedin.com/sharing/share-offsite/?url=${url}`, '_blank');
+};
+</script>
+
+<script lang="ts">
+export default {
+  name: 'DonateStepSuccess',
+};
+</script>
diff --git a/frontend/shared/types/donate.types.ts b/frontend/shared/types/donate.types.ts
index aa8d1f41..566bdd77 100644
--- a/frontend/shared/types/donate.types.ts
+++ b/frontend/shared/types/donate.types.ts
@@ -27,12 +27,19 @@ export interface DonateContactForm {
   poNumber: string;
 }
 
+export interface DonatePaymentForm {
+  cardNumber: string;
+  expiry: string;
+  cvc: string;
+}
+
 export interface DonateSubmission {
   initiativeId: string;
   tierId: string | null;
   tierName: string | null;
   amountCents: number;
   contact: DonateContactForm;
+  payment: DonatePaymentForm;
 }
 
 export interface DonationRecord extends DonateSubmission {

From b580567179bfd309f56e368c415ee6d988f8ceda Mon Sep 17 00:00:00 2001
From: Efren Lim <elim@linuxfoundation.org>
Date: Thu, 14 May 2026 16:48:11 +0800
Subject: [PATCH 4/4] feat: added stripe to store payment methods

Signed-off-by: Efren Lim <elim@linuxfoundation.org>
---
 .../donate/components/donate-drawer.vue       |  29 +-
 .../donate/components/donate-step-payment.vue | 286 ++++++++++--------
 frontend/app/composables/useStripe.ts         |  38 +++
 frontend/package.json                         |   1 +
 frontend/pnpm-lock.yaml                       |  12 +
 frontend/server/api/donate/index.post.ts      |   4 +-
 frontend/setup/runtime-config.ts              |   1 +
 frontend/shared/types/donate.types.ts         |   8 +-
 8 files changed, 218 insertions(+), 161 deletions(-)
 create mode 100644 frontend/app/composables/useStripe.ts

diff --git a/frontend/app/components/modules/donate/components/donate-drawer.vue b/frontend/app/components/modules/donate/components/donate-drawer.vue
index 791606ca..feb68a05 100644
--- a/frontend/app/components/modules/donate/components/donate-drawer.vue
+++ b/frontend/app/components/modules/donate/components/donate-drawer.vue
@@ -88,10 +88,10 @@ SPDX-License-Identifier: MIT
           <donate-step-payment
             v-else-if="step === 2"
             ref="paymentStepRef"
-            v-model="paymentForm"
             :amount-cents="amountForm.amountCents"
             :tier-name="amountForm.tierName"
             :initiative-name="initiative.name"
+            @update:complete="paymentComplete = $event"
           />
         </div>
 
@@ -138,7 +138,7 @@ import DonateStepAmount from './donate-step-amount.vue';
 import DonateStepContact from './donate-step-contact.vue';
 import DonateStepPayment from './donate-step-payment.vue';
 import DonateStepSuccess from './donate-step-success.vue';
-import type { DonateAmountForm, DonateContactForm, DonatePaymentForm } from '#shared/types/donate.types';
+import type { DonateAmountForm, DonateContactForm } from '#shared/types/donate.types';
 import LfxDrawer from '~/components/uikit/drawer/drawer.vue';
 import LfxIcon from '~/components/uikit/icon/icon.vue';
 import LfxIconButton from '~/components/uikit/icon-button/icon-button.vue';
@@ -169,6 +169,7 @@ const step = ref(0);
 const isLastStep = computed(() => step.value === TOTAL_STEPS - 1);
 const submitting = ref(false);
 const submitted = ref(false);
+const paymentComplete = ref(false);
 
 const contactStepRef = ref<InstanceType<typeof DonateStepContact> | null>(null);
 const paymentStepRef = ref<InstanceType<typeof DonateStepPayment> | null>(null);
@@ -190,12 +191,6 @@ const contactForm = ref<DonateContactForm>({
   poNumber: '',
 });
 
-const paymentForm = ref<DonatePaymentForm>({
-  cardNumber: '',
-  expiry: '',
-  cvc: '',
-});
-
 const hasSelection = computed(() => amountForm.value.amountCents > 0);
 
 const isCurrentStepValid = computed(() => {
@@ -205,8 +200,7 @@ const isCurrentStepValid = computed(() => {
     if (f.donorType === 'individual') return f.fullName.trim().length > 0 && f.email.trim().length > 0;
     return f.companyName.trim().length > 0 && f.contactName.trim().length > 0 && f.email.trim().length > 0;
   }
-  const p = paymentForm.value;
-  return p.cardNumber.trim().length > 0 && p.expiry.trim().length > 0 && p.cvc.trim().length > 0;
+  return paymentComplete.value;
 });
 
 const continueLabel = computed(() => {
@@ -226,6 +220,7 @@ const close = () => {
   isOpen.value = false;
   step.value = 0;
   submitted.value = false;
+  paymentComplete.value = false;
   amountForm.value = { tierId: null, tierName: null, customAmountCents: null, amountCents: 0 };
   contactForm.value = {
     donorType: 'individual',
@@ -236,10 +231,10 @@ const close = () => {
     needsInvoice: false,
     poNumber: '',
   };
-  paymentForm.value = { cardNumber: '', expiry: '', cvc: '' };
 };
 
 const previousStep = () => {
+  if (step.value === 2) paymentComplete.value = false;
   if (step.value > 0) step.value--;
 };
 
@@ -247,7 +242,6 @@ const handleContinue = async () => {
   if (!hasSelection.value) return;
 
   if (!isLastStep.value) {
-    // Validate contact step before advancing to payment
     if (step.value === 1 && contactStepRef.value?.$v) {
       contactStepRef.value.$v.$touch();
       if (contactStepRef.value.$v.$invalid) return;
@@ -256,14 +250,11 @@ const handleContinue = async () => {
     return;
   }
 
-  // Validate payment step before submitting
-  if (paymentStepRef.value?.$v) {
-    paymentStepRef.value.$v.$touch();
-    if (paymentStepRef.value.$v.$invalid) return;
-  }
+  if (!paymentStepRef.value) return;
 
   submitting.value = true;
   try {
+    const paymentMethodId = await paymentStepRef.value.createPaymentMethod();
     await $fetch('/api/donate', {
       method: 'POST',
       body: {
@@ -272,11 +263,13 @@ const handleContinue = async () => {
         tierName: amountForm.value.tierName,
         amountCents: amountForm.value.amountCents,
         contact: contactForm.value,
-        payment: paymentForm.value,
+        paymentMethodId,
       },
     });
     submitted.value = true;
     emit('submitted');
+  } catch {
+    // Payment step displays its own Stripe error; API errors surface via $fetch
   } finally {
     submitting.value = false;
   }
diff --git a/frontend/app/components/modules/donate/components/donate-step-payment.vue b/frontend/app/components/modules/donate/components/donate-step-payment.vue
index a45ccf15..88ea5524 100644
--- a/frontend/app/components/modules/donate/components/donate-step-payment.vue
+++ b/frontend/app/components/modules/donate/components/donate-step-payment.vue
@@ -12,16 +12,18 @@ SPDX-License-Identifier: MIT
           label="Card number"
           :required="true"
         >
-          <lfx-input
-            :model-value="form.cardNumber"
-            placeholder="1234 5678 9123 4567"
-            :invalid="$v.cardNumber.$error"
-            @update:model-value="onCardNumberInput"
-            @keydown="onCardNumberKeydown"
-            @paste="onCardNumberPaste"
-            @blur="$v.cardNumber.$touch()"
-          />
-          <lfx-field-messages :validation="$v.cardNumber" />
+          <div
+            class="flex items-center border transition-all rounded-md shadow-xs"
+            :class="
+              cardNumberFocused ? 'border-neutral-900' : cardNumberError ? 'border-negative-600' : 'border-neutral-200'
+            "
+          >
+            <div
+              ref="cardNumberContainer"
+              class="w-full py-2 px-2"
+            />
+          </div>
+          <lfx-field-message v-if="cardNumberError">{{ cardNumberError }}</lfx-field-message>
         </lfx-field>
 
         <!-- Expiry + CVC -->
@@ -31,32 +33,40 @@ SPDX-License-Identifier: MIT
             label="Expiry"
             :required="true"
           >
-            <lfx-input
-              :model-value="form.expiry"
-              placeholder="MM/YY"
-              :invalid="$v.expiry.$error"
-              @update:model-value="onExpiryInput"
-              @keydown="onExpiryKeydown"
-              @paste="onExpiryPaste"
-              @blur="$v.expiry.$touch()"
-            />
-            <lfx-field-messages :validation="$v.expiry" />
+            <div
+              class="flex items-center border transition-all rounded-md shadow-xs"
+              :class="
+                cardExpiryFocused
+                  ? 'border-neutral-900'
+                  : cardExpiryError
+                    ? 'border-negative-600'
+                    : 'border-neutral-200'
+              "
+            >
+              <div
+                ref="cardExpiryContainer"
+                class="w-full py-2 px-2"
+              />
+            </div>
+            <lfx-field-message v-if="cardExpiryError">{{ cardExpiryError }}</lfx-field-message>
           </lfx-field>
 
           <lfx-field
             label="CVC"
             :required="true"
           >
-            <lfx-input
-              :model-value="form.cvc"
-              placeholder="123"
-              :invalid="$v.cvc.$error"
-              @update:model-value="onCvcInput"
-              @keydown="onCvcKeydown"
-              @paste="onCvcPaste"
-              @blur="$v.cvc.$touch()"
-            />
-            <lfx-field-messages :validation="$v.cvc" />
+            <div
+              class="flex items-center border transition-all rounded-md shadow-xs"
+              :class="
+                cardCvcFocused ? 'border-neutral-900' : cardCvcError ? 'border-negative-600' : 'border-neutral-200'
+              "
+            >
+              <div
+                ref="cardCvcContainer"
+                class="w-full py-2 px-2"
+              />
+            </div>
+            <lfx-field-message v-if="cardCvcError">{{ cardCvcError }}</lfx-field-message>
           </lfx-field>
         </div>
 
@@ -78,6 +88,9 @@ SPDX-License-Identifier: MIT
       </div>
     </div>
 
+    <!-- Stripe general error -->
+    <lfx-field-message v-if="stripeError">{{ stripeError }}</lfx-field-message>
+
     <!-- Tier note -->
     <div
       v-if="tierName"
@@ -96,142 +109,147 @@ SPDX-License-Identifier: MIT
 </template>
 
 <script setup lang="ts">
-import { reactive, watch, computed } from 'vue';
-import { useVuelidate } from '@vuelidate/core';
-import { required } from '@vuelidate/validators';
-import type { DonatePaymentForm } from '#shared/types/donate.types';
+import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
+import type { StripeCardNumberElement, StripeCardExpiryElement, StripeCardCvcElement } from '@stripe/stripe-js';
 import LfxField from '~/components/uikit/field/field.vue';
-import LfxFieldMessages from '~/components/uikit/field/field-messages.vue';
-import LfxInput from '~/components/uikit/input/input.vue';
+import LfxFieldMessage from '~/components/uikit/field/field-message.vue';
 
 const props = defineProps<{
-  modelValue: DonatePaymentForm;
   amountCents: number;
   tierName: string | null;
   initiativeName: string;
 }>();
 
 const emit = defineEmits<{
-  (e: 'update:modelValue', value: DonatePaymentForm): void;
+  (e: 'update:complete', value: boolean): void;
 }>();
 
-const form = reactive<DonatePaymentForm>({ ...props.modelValue });
+const { getStripe } = useStripe();
 
-watch(
-  () => props.modelValue,
-  (val) => Object.assign(form, val),
-  { deep: true },
-);
+// DOM refs for Stripe element mounts
+const cardNumberContainer = ref<HTMLElement | null>(null);
+const cardExpiryContainer = ref<HTMLElement | null>(null);
+const cardCvcContainer = ref<HTMLElement | null>(null);
 
-watch(form, (val) => emit('update:modelValue', { ...val }), { deep: true });
+// Stripe element instances
+let cardNumberEl: StripeCardNumberElement | null = null;
+let cardExpiryEl: StripeCardExpiryElement | null = null;
+let cardCvcEl: StripeCardCvcElement | null = null;
 
-const rules = {
-  cardNumber: { required },
-  expiry: { required },
-  cvc: { required },
-};
+// Per-field state
+const cardNumberFocused = ref(false);
+const cardExpiryFocused = ref(false);
+const cardCvcFocused = ref(false);
+
+const cardNumberError = ref('');
+const cardExpiryError = ref('');
+const cardCvcError = ref('');
 
-const $v = useVuelidate(rules, form);
+const cardNumberComplete = ref(false);
+const cardExpiryComplete = ref(false);
+const cardCvcComplete = ref(false);
+
+const stripeError = ref('');
+
+const allComplete = computed(() => cardNumberComplete.value && cardExpiryComplete.value && cardCvcComplete.value);
 
 const formattedAmount = computed(() => {
   const dollars = props.amountCents / 100;
   return dollars >= 1_000 ? `$${(dollars / 1_000).toLocaleString()}K` : `$${dollars.toLocaleString()}`;
 });
 
-// Keys that are always allowed regardless of field type
-const PASSTHROUGH_KEYS = new Set([
-  'Backspace',
-  'Delete',
-  'Tab',
-  'Enter',
-  'ArrowLeft',
-  'ArrowRight',
-  'ArrowUp',
-  'ArrowDown',
-  'Home',
-  'End',
-]);
-
-const isNumericKey = (e: KeyboardEvent) => PASSTHROUGH_KEYS.has(e.key) || e.ctrlKey || e.metaKey || /^\d$/.test(e.key);
-
-// --- Card number ---
-
-const formatCardNumber = (digits: string) => digits.replace(/(.{4})(?=.)/g, '$1 ');
-
-const onCardNumberKeydown = (e: KeyboardEvent) => {
-  if (!isNumericKey(e)) {
-    e.preventDefault();
-    return;
-  }
-  if (/^\d$/.test(e.key) && form.cardNumber.replace(/\D/g, '').length >= 16) {
-    e.preventDefault();
-  }
+// Stripe element style — matches LfxInput: text-sm text-neutral-900, placeholder text-neutral-400
+const STRIPE_STYLE = {
+  base: {
+    color: '#0F172A',
+    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+    fontSize: '14px',
+    lineHeight: '20px',
+    '::placeholder': { color: '#94A3B8' },
+  },
+  invalid: {
+    // Let the container border convey the error; keep text colour neutral
+    color: '#0F172A',
+  },
 };
 
-const onCardNumberInput = (val: string | number) => {
-  const digits = String(val).replace(/\D/g, '').slice(0, 16);
-  form.cardNumber = formatCardNumber(digits);
-};
-
-const onCardNumberPaste = (e: ClipboardEvent) => {
-  e.preventDefault();
-  const digits = (e.clipboardData?.getData('text') ?? '').replace(/\D/g, '').slice(0, 16);
-  form.cardNumber = formatCardNumber(digits);
-};
-
-// --- Expiry ---
-
-const applyExpiryFormat = (digits: string, isDeleting: boolean): string => {
-  if (digits.length >= 3) return `${digits.slice(0, 2)}/${digits.slice(2)}`;
-  if (digits.length === 2 && !isDeleting) return `${digits}/`;
-  return digits;
-};
+onMounted(async () => {
+  const stripe = await getStripe();
+  if (!stripe || !cardNumberContainer.value || !cardExpiryContainer.value || !cardCvcContainer.value) return;
+
+  const elements = stripe.elements();
+
+  cardNumberEl = elements.create('cardNumber', { style: STRIPE_STYLE, placeholder: '1234 5678 9012 3456' });
+  cardExpiryEl = elements.create('cardExpiry', { style: STRIPE_STYLE });
+  cardCvcEl = elements.create('cardCvc', { style: STRIPE_STYLE });
+
+  cardNumberEl.mount(cardNumberContainer.value);
+  cardExpiryEl.mount(cardExpiryContainer.value);
+  cardCvcEl.mount(cardCvcContainer.value);
+
+  cardNumberEl.on('change', (e) => {
+    cardNumberComplete.value = e.complete;
+    cardNumberError.value = e.error?.message ?? '';
+    emit('update:complete', allComplete.value);
+  });
+  cardNumberEl.on('focus', () => {
+    cardNumberFocused.value = true;
+  });
+  cardNumberEl.on('blur', () => {
+    cardNumberFocused.value = false;
+  });
+
+  cardExpiryEl.on('change', (e) => {
+    cardExpiryComplete.value = e.complete;
+    cardExpiryError.value = e.error?.message ?? '';
+    emit('update:complete', allComplete.value);
+  });
+  cardExpiryEl.on('focus', () => {
+    cardExpiryFocused.value = true;
+  });
+  cardExpiryEl.on('blur', () => {
+    cardExpiryFocused.value = false;
+  });
+
+  cardCvcEl.on('change', (e) => {
+    cardCvcComplete.value = e.complete;
+    cardCvcError.value = e.error?.message ?? '';
+    emit('update:complete', allComplete.value);
+  });
+  cardCvcEl.on('focus', () => {
+    cardCvcFocused.value = true;
+  });
+  cardCvcEl.on('blur', () => {
+    cardCvcFocused.value = false;
+  });
+});
 
-const onExpiryKeydown = (e: KeyboardEvent) => {
-  if (!isNumericKey(e)) {
-    e.preventDefault();
-    return;
-  }
-  if (/^\d$/.test(e.key) && form.expiry.replace(/\D/g, '').length >= 4) {
-    e.preventDefault();
-  }
-};
+onBeforeUnmount(() => {
+  cardNumberEl?.destroy();
+  cardExpiryEl?.destroy();
+  cardCvcEl?.destroy();
+});
 
-const onExpiryInput = (val: string | number) => {
-  const raw = String(val);
-  const isDeleting = raw.length < form.expiry.length;
-  const digits = raw.replace(/\D/g, '').slice(0, 4);
-  form.expiry = applyExpiryFormat(digits, isDeleting);
-};
+const createPaymentMethod = async (): Promise<string> => {
+  const stripe = await getStripe();
+  if (!stripe || !cardNumberEl) throw new Error('Stripe not loaded');
 
-const onExpiryPaste = (e: ClipboardEvent) => {
-  e.preventDefault();
-  const digits = (e.clipboardData?.getData('text') ?? '').replace(/\D/g, '').slice(0, 4);
-  form.expiry = applyExpiryFormat(digits, false);
-};
+  stripeError.value = '';
 
-// --- CVC ---
+  const { paymentMethod, error } = await stripe.createPaymentMethod({
+    type: 'card',
+    card: cardNumberEl,
+  });
 
-const onCvcKeydown = (e: KeyboardEvent) => {
-  if (!isNumericKey(e)) {
-    e.preventDefault();
-    return;
-  }
-  if (/^\d$/.test(e.key) && form.cvc.length >= 4) {
-    e.preventDefault();
+  if (error) {
+    stripeError.value = error.message ?? 'Payment failed. Please try again.';
+    throw new Error(error.message);
   }
-};
-
-const onCvcInput = (val: string | number) => {
-  form.cvc = String(val).replace(/\D/g, '').slice(0, 4);
-};
 
-const onCvcPaste = (e: ClipboardEvent) => {
-  e.preventDefault();
-  form.cvc = (e.clipboardData?.getData('text') ?? '').replace(/\D/g, '').slice(0, 4);
+  return paymentMethod!.id;
 };
 
-defineExpose({ $v });
+defineExpose({ createPaymentMethod });
 </script>
 
 <script lang="ts">
diff --git a/frontend/app/composables/useStripe.ts b/frontend/app/composables/useStripe.ts
new file mode 100644
index 00000000..aaaa04fc
--- /dev/null
+++ b/frontend/app/composables/useStripe.ts
@@ -0,0 +1,38 @@
+// Copyright The Linux Foundation and each contributor to LFX.
+// SPDX-License-Identifier: MIT
+
+import { loadStripe } from '@stripe/stripe-js';
+import type { Stripe } from '@stripe/stripe-js';
+
+// Module-level singleton — Stripe.js is only loaded once per page.
+// Keyed by publishable key so a config change (e.g. test → live) gets a fresh instance.
+let stripePromise: Promise<Stripe | null> | null = null;
+let loadedKey: string | null = null;
+
+export const useStripe = () => {
+  const {
+    public: { stripePublishableKey },
+  } = useRuntimeConfig();
+
+  const getStripe = (): Promise<Stripe | null> => {
+    const key = stripePublishableKey as string | undefined;
+
+    if (!key) {
+      if (import.meta.dev) {
+        console.warn(
+          '[useStripe] NUXT_PUBLIC_STRIPE_PUBLISHABLE_KEY is not set — did you restart the dev server after adding it to .env?',
+        );
+      }
+      return Promise.resolve(null);
+    }
+
+    if (!stripePromise || loadedKey !== key) {
+      loadedKey = key;
+      stripePromise = loadStripe(key);
+    }
+
+    return stripePromise;
+  };
+
+  return { getStripe };
+};
diff --git a/frontend/package.json b/frontend/package.json
index 57f0c878..cf2152f4 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -24,6 +24,7 @@
     "@popperjs/core": "^2.11.8",
     "@primevue/nuxt-module": "^4.5.4",
     "@primevue/themes": "^4.5.4",
+    "@stripe/stripe-js": "^9.5.0",
     "@tanstack/vue-query": "^5.92.8",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
index 0e230bcc..8ef0abab 100644
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@@ -28,6 +28,9 @@ importers:
       "@primevue/themes":
         specifier: ^4.5.4
         version: 4.5.4
+      "@stripe/stripe-js":
+        specifier: ^9.5.0
+        version: 9.5.0
       "@tanstack/vue-query":
         specifier: ^5.92.8
         version: 5.100.9(vue@3.5.34(typescript@5.9.3))
@@ -2848,6 +2851,13 @@ packages:
         integrity: sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==,
       }
 
+  "@stripe/stripe-js@9.5.0":
+    resolution:
+      {
+        integrity: sha512-dTQWkJRw5lhcQipPuw6qZRBK2zY5eWWZ1Srw9mSjhIXSLdsNYO3uaIV+YRMkI0/tB/D7yQdHYStrcZrbeHI5Jg==,
+      }
+    engines: { node: ">=12.16" }
+
   "@stylistic/eslint-plugin@5.10.0":
     resolution:
       {
@@ -11927,6 +11937,8 @@ snapshots:
 
   "@standard-schema/spec@1.1.0": {}
 
+  "@stripe/stripe-js@9.5.0": {}
+
   "@stylistic/eslint-plugin@5.10.0(eslint@9.39.4(jiti@2.7.0))":
     dependencies:
       "@eslint-community/eslint-utils": 4.9.1(eslint@9.39.4(jiti@2.7.0))
diff --git a/frontend/server/api/donate/index.post.ts b/frontend/server/api/donate/index.post.ts
index 095eca82..7990b71d 100644
--- a/frontend/server/api/donate/index.post.ts
+++ b/frontend/server/api/donate/index.post.ts
@@ -9,10 +9,10 @@ const donations: DonationRecord[] = [];
 export default defineEventHandler(async (event) => {
   const body = await readBody<DonateSubmission>(event);
 
-  if (!body.initiativeId || !body.amountCents || body.amountCents <= 0) {
+  if (!body.initiativeId || !body.amountCents || body.amountCents <= 0 || !body.paymentMethodId) {
     throw createError({
       statusCode: 400,
-      statusMessage: 'initiativeId and a positive amountCents are required',
+      statusMessage: 'initiativeId, a positive amountCents, and paymentMethodId are required',
     });
   }
 
diff --git a/frontend/setup/runtime-config.ts b/frontend/setup/runtime-config.ts
index d05bcf6a..f3daa842 100644
--- a/frontend/setup/runtime-config.ts
+++ b/frontend/setup/runtime-config.ts
@@ -45,5 +45,6 @@ export default {
     auth0ClientId: process.env.NUXT_PUBLIC_AUTH0_CLIENT_ID || '',
     auth0RedirectUri: `${appUrl}/auth/callback`,
     auth0Audience: `${appUrl}/api/`,
+    stripePublishableKey: '', // populated from NUXT_PUBLIC_STRIPE_PUBLISHABLE_KEY
   },
 };
diff --git a/frontend/shared/types/donate.types.ts b/frontend/shared/types/donate.types.ts
index 566bdd77..36b9aa27 100644
--- a/frontend/shared/types/donate.types.ts
+++ b/frontend/shared/types/donate.types.ts
@@ -27,19 +27,13 @@ export interface DonateContactForm {
   poNumber: string;
 }
 
-export interface DonatePaymentForm {
-  cardNumber: string;
-  expiry: string;
-  cvc: string;
-}
-
 export interface DonateSubmission {
   initiativeId: string;
   tierId: string | null;
   tierName: string | null;
   amountCents: number;
   contact: DonateContactForm;
-  payment: DonatePaymentForm;
+  paymentMethodId: string;
 }
 
 export interface DonationRecord extends DonateSubmission {