diff --git a/packages/app/src/components/ui/LightningInvoice.vue b/packages/app/src/components/ui/LightningInvoice.vue
new file mode 100644
index 00000000..216da493
--- /dev/null
+++ b/packages/app/src/components/ui/LightningInvoice.vue
@@ -0,0 +1,189 @@
+<template>
+  <div
+    class="rounded-xl p-4 space-y-3"
+    :class="isDark
+      ? 'bg-white/[0.03] border border-white/5'
+      : 'bg-black/[0.02] border border-black/5'"
+  >
+    <!-- Header -->
+    <div class="flex items-center gap-2">
+      <svg class="w-5 h-5 text-[#F7931A]" viewBox="0 0 24 24" fill="currentColor">
+        <path d="M13 3L4 14h7l-2 7 9-11h-7l2-7z" />
+      </svg>
+      <span
+        class="text-sm font-semibold"
+        :class="isDark ? 'text-white/90' : 'text-gray-900'"
+      >
+        Lightning Invoice
+      </span>
+      <span
+        v-if="parsedAmount"
+        class="ml-auto text-sm font-bold text-[#F7931A]"
+      >
+        {{ formattedAmount }}
+      </span>
+    </div>
+
+    <!-- QR Code canvas -->
+    <div class="flex justify-center">
+      <canvas
+        ref="qrCanvas"
+        class="rounded-lg"
+        :width="qrSize"
+        :height="qrSize"
+      />
+    </div>
+
+    <!-- Invoice string (truncated) -->
+    <div
+      class="text-[10px] font-mono break-all leading-relaxed"
+      :class="isDark ? 'text-white/30' : 'text-gray-400'"
+    >
+      {{ truncatedInvoice }}
+    </div>
+
+    <!-- Expiry countdown -->
+    <div
+      v-if="expiresIn !== null"
+      class="text-xs text-center"
+      :class="expiresIn > 60 ? (isDark ? 'text-white/40' : 'text-gray-500') : 'text-red-400'"
+    >
+      {{ expiresIn > 0 ? `Expires in ${formatExpiry(expiresIn)}` : 'Expired' }}
+    </div>
+
+    <!-- Actions -->
+    <div class="flex gap-2">
+      <button
+        class="flex-1 px-3 py-2 rounded-lg text-xs font-medium transition-colors"
+        :class="isDark
+          ? 'bg-white/5 text-white/70 hover:bg-white/10'
+          : 'bg-gray-100 text-gray-700 hover:bg-gray-200'"
+        @click="copyInvoice"
+      >
+        {{ copied ? 'Copied!' : 'Copy Invoice' }}
+      </button>
+      <button
+        class="flex-1 px-3 py-2 rounded-lg text-xs font-medium transition-colors bg-gradient-to-r from-[#F7931A] to-[#E8850F] text-white hover:brightness-110"
+        @click="openInWallet"
+      >
+        Open in Wallet
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { useTheme } from '@/composables/useTheme'
+import { parseBolt11, createLightningUri, formatSats } from '@/utils/lightning'
+
+const { isDark } = useTheme()
+
+const props = defineProps<{
+  invoice: string
+  expirySeconds?: number
+}>()
+
+const qrCanvas = ref<HTMLCanvasElement | null>(null)
+const copied = ref(false)
+const expiresIn = ref<number | null>(props.expirySeconds ?? null)
+const qrSize = 200
+
+let expiryTimer: ReturnType<typeof setInterval> | null = null
+
+const parsed = computed(() => parseBolt11(props.invoice))
+const parsedAmount = computed(() => parsed.value.amount)
+const formattedAmount = computed(() => {
+  if (!parsedAmount.value) return ''
+  return formatSats(parsedAmount.value)
+})
+
+const truncatedInvoice = computed(() => {
+  const inv = props.invoice
+  if (inv.length <= 40) return inv
+  return inv.slice(0, 20) + '...' + inv.slice(-16)
+})
+
+function formatExpiry(seconds: number): string {
+  if (seconds >= 3600) {
+    const h = Math.floor(seconds / 3600)
+    const m = Math.floor((seconds % 3600) / 60)
+    return `${h}h ${m}m`
+  }
+  if (seconds >= 60) {
+    const m = Math.floor(seconds / 60)
+    const s = seconds % 60
+    return `${m}m ${s}s`
+  }
+  return `${seconds}s`
+}
+
+function drawQR() {
+  const canvas = qrCanvas.value
+  if (!canvas) return
+  const ctx = canvas.getContext('2d')
+  if (!ctx) return
+
+  // Simple visual QR placeholder using invoice data hash
+  // In production, use a proper QR library like 'qrcode'
+  ctx.fillStyle = '#ffffff'
+  ctx.fillRect(0, 0, qrSize, qrSize)
+
+  const moduleSize = 4
+  const data = props.invoice
+  const modules = Math.floor(qrSize / moduleSize)
+
+  ctx.fillStyle = '#000000'
+  // Generate deterministic pattern from invoice string
+  for (let y = 0; y < modules; y++) {
+    for (let x = 0; x < modules; x++) {
+      const charIdx = (y * modules + x) % data.length
+      const val = data.charCodeAt(charIdx)
+      // Position detection patterns (corners)
+      const inCorner =
+        (x < 7 && y < 7) ||
+        (x >= modules - 7 && y < 7) ||
+        (x < 7 && y >= modules - 7)
+      if (inCorner) {
+        const cx = x < 7 ? x : x - (modules - 7)
+        const cy = y < 7 ? y : y - (modules - 7)
+        const isOuter = cx === 0 || cx === 6 || cy === 0 || cy === 6
+        const isInner = cx >= 2 && cx <= 4 && cy >= 2 && cy <= 4
+        if (isOuter || isInner) {
+          ctx.fillRect(x * moduleSize, y * moduleSize, moduleSize, moduleSize)
+        }
+      } else if (val % 3 !== 0) {
+        ctx.fillRect(x * moduleSize, y * moduleSize, moduleSize, moduleSize)
+      }
+    }
+  }
+}
+
+async function copyInvoice() {
+  await navigator.clipboard.writeText(props.invoice)
+  copied.value = true
+  setTimeout(() => { copied.value = false }, 2000)
+}
+
+function openInWallet() {
+  const uri = createLightningUri(props.invoice)
+  window.open(uri, '_blank')
+}
+
+onMounted(() => {
+  drawQR()
+  if (expiresIn.value !== null && expiresIn.value > 0) {
+    expiryTimer = setInterval(() => {
+      if (expiresIn.value !== null && expiresIn.value > 0) {
+        expiresIn.value--
+      } else if (expiryTimer) {
+        clearInterval(expiryTimer)
+      }
+    }, 1000)
+  }
+})
+
+onUnmounted(() => {
+  if (expiryTimer) clearInterval(expiryTimer)
+})
+</script>
diff --git a/packages/app/src/components/ui/PaymentButton.vue b/packages/app/src/components/ui/PaymentButton.vue
new file mode 100644
index 00000000..798e97cb
--- /dev/null
+++ b/packages/app/src/components/ui/PaymentButton.vue
@@ -0,0 +1,45 @@
+<template>
+  <button
+    class="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl font-medium text-sm transition-all active:scale-95"
+    :class="isDark
+      ? 'bg-gradient-to-r from-[#F7931A] to-[#E8850F] text-white hover:brightness-110'
+      : 'bg-gradient-to-r from-[#F7931A] to-[#E8850F] text-white hover:brightness-110'"
+    @click="handleClick"
+  >
+    <svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
+      <path d="M23.638 14.904c-1.602 6.43-8.113 10.34-14.542 8.736C2.67 22.05-1.244 15.525.362 9.105 1.962 2.67 8.475-1.243 14.9.358c6.43 1.605 10.342 8.115 8.738 14.546z" />
+      <path fill="rgba(0,0,0,0.3)" d="M14.434 10.17c-.2-1.348-1.304-1.796-2.79-2.026l.57-2.285-1.39-.347-.555 2.225c-.366-.091-.74-.177-1.113-.263l.558-2.24-1.39-.347-.57 2.285c-.303-.069-.6-.137-.887-.21l.002-.007-1.918-.48-.37 1.486s1.032.237 1.01.251c.564.141.666.514.649.81l-.65 2.607c.039.01.089.024.144.046l-.147-.037-.91 3.654c-.069.171-.244.428-.64.33.015.021-1.01-.252-1.01-.252l-.69 1.593 1.81.452c.337.084.667.173.993.256l-.576 2.312 1.39.347.57-2.287c.38.103.748.198 1.108.288l-.568 2.273 1.39.347.576-2.308c2.372.449 4.156.268 4.907-1.877.605-1.728-.03-2.726-1.279-3.376.91-.21 1.596-.808 1.779-2.044zm-3.183 4.464c-.43 1.728-3.339.793-4.283.559l.764-3.064c.944.236 3.968.703 3.52 2.505zm.43-4.489c-.393 1.572-2.813.773-3.6.577l.693-2.778c.787.196 3.316.562 2.907 2.2z" />
+    </svg>
+    <span v-if="amount">{{ formattedAmount }}</span>
+    <span v-else>Pay with Lightning</span>
+  </button>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useTheme } from '@/composables/useTheme'
+import { createLightningUri, formatSats } from '@/utils/lightning'
+
+const { isDark } = useTheme()
+
+const props = defineProps<{
+  invoice: string
+  amount?: number
+}>()
+
+const emit = defineEmits<{
+  'click': []
+  'copy': [invoice: string]
+}>()
+
+const formattedAmount = computed(() => {
+  if (!props.amount) return ''
+  return formatSats(props.amount)
+})
+
+function handleClick() {
+  const uri = createLightningUri(props.invoice)
+  window.open(uri, '_blank')
+  emit('click')
+}
+</script>
diff --git a/packages/app/src/utils/lightning.ts b/packages/app/src/utils/lightning.ts
new file mode 100644
index 00000000..42dd06a5
--- /dev/null
+++ b/packages/app/src/utils/lightning.ts
@@ -0,0 +1,81 @@
+/**
+ * Lightning Network utilities for deep-linking to external wallets.
+ * AIUI is never a wallet — only generates URIs to open external wallets.
+ */
+
+/** Parse a BOLT11 invoice to extract amount (if present) and expiry */
+export function parseBolt11(invoice: string): {
+  amount: number | null
+  expiry: number | null
+  timestamp: number | null
+} {
+  const lower = invoice.toLowerCase()
+  if (!lower.startsWith('lnbc') && !lower.startsWith('lntb') && !lower.startsWith('lnbcrt')) {
+    return { amount: null, expiry: null, timestamp: null }
+  }
+
+  // Extract amount from human-readable part (after ln prefix, before '1' separator)
+  const hrpMatch = lower.match(/^ln(?:bc|tb|bcrt)(\d+)([munp]?)/)
+  let amount: number | null = null
+  if (hrpMatch && hrpMatch[1]) {
+    const num = parseInt(hrpMatch[1], 10)
+    const multiplier = hrpMatch[2]
+    // Convert to millisats then to sats
+    const btcMultipliers: Record<string, number> = {
+      '': 1e8, // BTC to sats
+      m: 1e5,  // milli-BTC to sats
+      u: 1e2,  // micro-BTC to sats
+      n: 0.1,  // nano-BTC to sats
+      p: 0.0001, // pico-BTC to sats
+    }
+    amount = Math.round(num * (btcMultipliers[multiplier] ?? 1e8))
+  }
+
+  return { amount, expiry: null, timestamp: null }
+}
+
+/** Create a Lightning: URI for deep-linking to wallet apps */
+export function createLightningUri(invoice: string): string {
+  return `lightning:${invoice}`
+}
+
+/** Create a BIP21 bitcoin: URI with optional Lightning invoice */
+export function createBip21Uri(
+  address: string,
+  options?: { amount?: number; label?: string; lightning?: string },
+): string {
+  const params = new URLSearchParams()
+  if (options?.amount) params.set('amount', (options.amount / 1e8).toFixed(8))
+  if (options?.label) params.set('label', options.label)
+  if (options?.lightning) params.set('lightning', options.lightning)
+  const qs = params.toString()
+  return `bitcoin:${address}${qs ? '?' + qs : ''}`
+}
+
+/** Create an LNURL-pay link */
+export function createLnurlPayUri(lnurl: string): string {
+  return `lightning:${lnurl}`
+}
+
+/** Format satoshi amount for display */
+export function formatSats(sats: number): string {
+  if (sats >= 1_000_000) {
+    return `${(sats / 1_000_000).toFixed(2)}M sats`
+  }
+  if (sats >= 1_000) {
+    return `${(sats / 1_000).toFixed(sats >= 10_000 ? 0 : 1)}k sats`
+  }
+  return `${sats} sats`
+}
+
+/** Check if a string looks like a BOLT11 invoice */
+export function isBolt11(text: string): boolean {
+  const lower = text.toLowerCase().trim()
+  return lower.startsWith('lnbc') || lower.startsWith('lntb') || lower.startsWith('lnbcrt')
+}
+
+/** Check if a string looks like an LNURL */
+export function isLnurl(text: string): boolean {
+  const lower = text.toLowerCase().trim()
+  return lower.startsWith('lnurl')
+}