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..feb68a05
--- /dev/null
+++ b/frontend/app/components/modules/donate/components/donate-drawer.vue
@@ -0,0 +1,283 @@
+<!--
+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="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 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>
+        </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"
+          />
+          <donate-step-payment
+            v-else-if="step === 2"
+            ref="paymentStepRef"
+            :amount-cents="amountForm.amountCents"
+            :tier-name="amountForm.tierName"
+            :initiative-name="initiative.name"
+            @update:complete="paymentComplete = $event"
+          />
+        </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()"
+            />
+            <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>
+  </lfx-drawer>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+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 } 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 = 3;
+
+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 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);
+
+const amountForm = ref<DonateAmountForm>({
+  tierId: null,
+  tierName: null,
+  customAmountCents: null,
+  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;
+  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;
+  }
+  return paymentComplete.value;
+});
+
+const continueLabel = computed(() => {
+  if (step.value === 2) return 'Donate';
+  if (step.value === 1) return 'Continue to Payment';
+  return 'Continue';
+});
+
+const amountSummary = computed(() => {
+  if (!hasSelection.value) return null;
+  const dollars = amountForm.value.amountCents / 100;
+  const formatted = dollars >= 1_000 ? `$${(dollars / 1_000).toLocaleString()}K` : `$${dollars.toLocaleString()}`;
+  return amountForm.value.tierName ? `Amount: ${formatted} (${amountForm.value.tierName})` : `Amount: ${formatted}`;
+});
+
+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',
+    fullName: '',
+    companyName: '',
+    contactName: '',
+    email: '',
+    needsInvoice: false,
+    poNumber: '',
+  };
+};
+
+const previousStep = () => {
+  if (step.value === 2) paymentComplete.value = false;
+  if (step.value > 0) step.value--;
+};
+
+const handleContinue = async () => {
+  if (!hasSelection.value) return;
+
+  if (!isLastStep.value) {
+    if (step.value === 1 && contactStepRef.value?.$v) {
+      contactStepRef.value.$v.$touch();
+      if (contactStepRef.value.$v.$invalid) return;
+    }
+    step.value++;
+    return;
+  }
+
+  if (!paymentStepRef.value) return;
+
+  submitting.value = true;
+  try {
+    const paymentMethodId = await paymentStepRef.value.createPaymentMethod();
+    await $fetch('/api/donate', {
+      method: 'POST',
+      body: {
+        initiativeId: props.initiative.id,
+        tierId: amountForm.value.tierId,
+        tierName: amountForm.value.tierName,
+        amountCents: amountForm.value.amountCents,
+        contact: contactForm.value,
+        paymentMethodId,
+      },
+    });
+    submitted.value = true;
+    emit('submitted');
+  } catch {
+    // Payment step displays its own Stripe error; API errors surface via $fetch
+  } 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/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/modules/donate/components/donate-step-payment.vue b/frontend/app/components/modules/donate/components/donate-step-payment.vue
new file mode 100644
index 00000000..88ea5524
--- /dev/null
+++ b/frontend/app/components/modules/donate/components/donate-step-payment.vue
@@ -0,0 +1,259 @@
+<!--
+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"
+        >
+          <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 -->
+        <div class="grid grid-cols-3 gap-4">
+          <lfx-field
+            class="col-span-2"
+            label="Expiry"
+            :required="true"
+          >
+            <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"
+          >
+            <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>
+
+        <!-- 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>
+
+    <!-- Stripe general error -->
+    <lfx-field-message v-if="stripeError">{{ stripeError }}</lfx-field-message>
+
+    <!-- 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 { ref, computed, onMounted, onBeforeUnmount } from 'vue';
+import type { StripeCardNumberElement, StripeCardExpiryElement, StripeCardCvcElement } from '@stripe/stripe-js';
+import LfxField from '~/components/uikit/field/field.vue';
+import LfxFieldMessage from '~/components/uikit/field/field-message.vue';
+
+const props = defineProps<{
+  amountCents: number;
+  tierName: string | null;
+  initiativeName: string;
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:complete', value: boolean): void;
+}>();
+
+const { getStripe } = useStripe();
+
+// DOM refs for Stripe element mounts
+const cardNumberContainer = ref<HTMLElement | null>(null);
+const cardExpiryContainer = ref<HTMLElement | null>(null);
+const cardCvcContainer = ref<HTMLElement | null>(null);
+
+// Stripe element instances
+let cardNumberEl: StripeCardNumberElement | null = null;
+let cardExpiryEl: StripeCardExpiryElement | null = null;
+let cardCvcEl: StripeCardCvcElement | null = null;
+
+// 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 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()}`;
+});
+
+// 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',
+  },
+};
+
+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;
+  });
+});
+
+onBeforeUnmount(() => {
+  cardNumberEl?.destroy();
+  cardExpiryEl?.destroy();
+  cardCvcEl?.destroy();
+});
+
+const createPaymentMethod = async (): Promise<string> => {
+  const stripe = await getStripe();
+  if (!stripe || !cardNumberEl) throw new Error('Stripe not loaded');
+
+  stripeError.value = '';
+
+  const { paymentMethod, error } = await stripe.createPaymentMethod({
+    type: 'card',
+    card: cardNumberEl,
+  });
+
+  if (error) {
+    stripeError.value = error.message ?? 'Payment failed. Please try again.';
+    throw new Error(error.message);
+  }
+
+  return paymentMethod!.id;
+};
+
+defineExpose({ createPaymentMethod });
+</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/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/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/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/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/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/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/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
new file mode 100644
index 00000000..7990b71d
--- /dev/null
+++ b/frontend/server/api/donate/index.post.ts
@@ -0,0 +1,32 @@
+// 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 || !body.paymentMethodId) {
+    throw createError({
+      statusCode: 400,
+      statusMessage: 'initiativeId, a positive amountCents, and paymentMethodId are required',
+    });
+  }
+
+  const record: DonationRecord = {
+    id: crypto.randomUUID(),
+    initiativeId: body.initiativeId,
+    tierId: body.tierId ?? null,
+    tierName: body.tierName ?? null,
+    amountCents: body.amountCents,
+    contact: body.contact,
+    createdAt: new Date().toISOString(),
+  };
+
+  donations.push(record);
+
+  return { success: true, donation: record };
+});
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
new file mode 100644
index 00000000..36b9aa27
--- /dev/null
+++ b/frontend/shared/types/donate.types.ts
@@ -0,0 +1,42 @@
+// 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 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;
+  paymentMethodId: string;
+}
+
+export interface DonationRecord extends DonateSubmission {
+  id: string;
+  createdAt: string;
+}