feat(events): Add Lightning Network ticket purchase flow with QR code generation

- Integrate QRCode library for Lightning payment QR code generation - Create PurchaseTicketDialog component for ticket purchase workflow - Implement dynamic ticket purchase API integration with error handling - Add Lightning wallet payment QR code and deep linking support - Update events page to trigger ticket purchase dialog - Configure environment variables for ticket purchase API endpoint
2025-03-09 18:24:35 +01:00 · 2025-03-09 18:24:35 +01:00 · c3a8abb252
commit c3a8abb252
parent 933b2f3af1
4 changed files with 410 additions and 13 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -8,6 +8,7 @@
      "name": "aio-shadcn-vite",
      "version": "0.0.0",
      "dependencies": {
+        "@types/qrcode": "^1.5.5",
        "@vueuse/components": "^12.5.0",
        "@vueuse/core": "^12.5.0",
        "@vueuse/head": "^2.0.0",
@ -18,6 +19,7 @@
        "lucide-vue-next": "^0.474.0",
        "nostr-tools": "^2.10.4",
        "pinia": "^2.3.1",
+        "qrcode": "^1.5.4",
        "radix-vue": "^1.9.13",
        "reka-ui": "^2.0.2",
        "tailwind-merge": "^2.6.0",
@ -3343,12 +3345,20 @@
      "version": "22.13.10",
      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.13.10.tgz",
      "integrity": "sha512-I6LPUvlRH+O6VRUqYOcMudhaIdUVWfsjnZavnsraHvpBwaEyMN29ry+0UVJhImYL16xsscu0aske3yA+uPOWfw==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "undici-types": "~6.20.0"
      }
    },
+    "node_modules/@types/qrcode": {
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/@types/qrcode/-/qrcode-1.5.5.tgz",
+      "integrity": "sha512-CdfBi/e3Qk+3Z/fXYShipBT13OJ2fDO2Q2w5CIP5anLTLIndQG9z6P1cnm+8zCWSpm5dnxMFd/uREtb0EXuQzg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
    "node_modules/@types/resolve": {
      "version": "1.20.2",
      "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz",
@ -3812,7 +3822,6 @@
      "version": "5.0.1",
      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">=8"
@ -3822,7 +3831,6 @@
      "version": "4.3.0",
      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "color-convert": "^2.0.1"
@ -4093,6 +4101,15 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/camelcase": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+      "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
    "node_modules/caniuse-lite": {
      "version": "1.0.30001699",
      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001699.tgz",
@ -4185,7 +4202,6 @@
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "color-name": "~1.1.4"
@ -4198,7 +4214,6 @@
      "version": "1.1.4",
      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true,
      "license": "MIT"
    },
    "node_modules/color-string": {
@ -4375,6 +4390,15 @@
        }
      }
    },
+    "node_modules/decamelize": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
+      "integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
    "node_modules/deepmerge": {
      "version": "4.3.1",
      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
@ -4480,6 +4504,12 @@
        "node": ">=0.10"
      }
    },
+    "node_modules/dijkstrajs": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/dijkstrajs/-/dijkstrajs-1.0.3.tgz",
+      "integrity": "sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA==",
+      "license": "MIT"
+    },
    "node_modules/dunder-proto": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
@ -4522,7 +4552,6 @@
      "version": "8.0.0",
      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-      "dev": true,
      "license": "MIT"
    },
    "node_modules/enhanced-resolve": {
@ -4829,6 +4858,19 @@
        "node": ">=10"
      }
    },
+    "node_modules/find-up": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+      "license": "MIT",
+      "dependencies": {
+        "locate-path": "^5.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
    "node_modules/for-each": {
      "version": "0.3.4",
      "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.4.tgz",
@ -4947,7 +4989,6 @@
      "version": "2.0.5",
      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
-      "dev": true,
      "license": "ISC",
      "engines": {
        "node": "6.* || 8.* || >= 10.*"
@ -5439,7 +5480,6 @@
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">=8"
@ -6106,6 +6146,18 @@
        "url": "https://opencollective.com/parcel"
      }
    },
+    "node_modules/locate-path": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+      "license": "MIT",
+      "dependencies": {
+        "p-locate": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
    "node_modules/lodash": {
      "version": "4.17.21",
      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
@ -6389,6 +6441,42 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/p-limit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+      "license": "MIT",
+      "dependencies": {
+        "p-try": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/p-locate": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+      "license": "MIT",
+      "dependencies": {
+        "p-limit": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/p-try": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
    "node_modules/packrup": {
      "version": "0.1.2",
      "resolved": "https://registry.npmjs.org/packrup/-/packrup-0.1.2.tgz",
@ -6405,6 +6493,15 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/path-exists": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
    "node_modules/path-is-absolute": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
@ -6477,6 +6574,15 @@
        }
      }
    },
+    "node_modules/pngjs": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-5.0.0.tgz",
+      "integrity": "sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
    "node_modules/possible-typed-array-names": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.1.0.tgz",
@ -6552,6 +6658,89 @@
        "node": ">=6"
      }
    },
+    "node_modules/qrcode": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/qrcode/-/qrcode-1.5.4.tgz",
+      "integrity": "sha512-1ca71Zgiu6ORjHqFBDpnSMTR2ReToX4l1Au1VFLyVeBTFavzQnv5JxMFr3ukHVKpSrSA2MCk0lNJSykjUfz7Zg==",
+      "license": "MIT",
+      "dependencies": {
+        "dijkstrajs": "^1.0.1",
+        "pngjs": "^5.0.0",
+        "yargs": "^15.3.1"
+      },
+      "bin": {
+        "qrcode": "bin/qrcode"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/qrcode/node_modules/cliui": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
+      "integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==",
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0",
+        "wrap-ansi": "^6.2.0"
+      }
+    },
+    "node_modules/qrcode/node_modules/wrap-ansi": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
+      "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/qrcode/node_modules/y18n": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
+      "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==",
+      "license": "ISC"
+    },
+    "node_modules/qrcode/node_modules/yargs": {
+      "version": "15.4.1",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz",
+      "integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==",
+      "license": "MIT",
+      "dependencies": {
+        "cliui": "^6.0.0",
+        "decamelize": "^1.2.0",
+        "find-up": "^4.1.0",
+        "get-caller-file": "^2.0.1",
+        "require-directory": "^2.1.1",
+        "require-main-filename": "^2.0.0",
+        "set-blocking": "^2.0.0",
+        "string-width": "^4.2.0",
+        "which-module": "^2.0.0",
+        "y18n": "^4.0.0",
+        "yargs-parser": "^18.1.2"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/qrcode/node_modules/yargs-parser": {
+      "version": "18.1.3",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz",
+      "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
+      "license": "ISC",
+      "dependencies": {
+        "camelcase": "^5.0.0",
+        "decamelize": "^1.2.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
    "node_modules/radix-vue": {
      "version": "1.9.13",
      "resolved": "https://registry.npmjs.org/radix-vue/-/radix-vue-1.9.13.tgz",
@ -6795,7 +6984,6 @@
      "version": "2.1.1",
      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
-      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">=0.10.0"
@ -6811,6 +6999,12 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/require-main-filename": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
+      "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==",
+      "license": "ISC"
+    },
    "node_modules/resolve": {
      "version": "1.22.10",
      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz",
@ -7021,6 +7215,12 @@
        "randombytes": "^2.1.0"
      }
    },
+    "node_modules/set-blocking": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
+      "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==",
+      "license": "ISC"
+    },
    "node_modules/set-function-length": {
      "version": "1.2.2",
      "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
@ -7296,7 +7496,6 @@
      "version": "4.2.3",
      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "emoji-regex": "^8.0.0",
@ -7413,7 +7612,6 @@
      "version": "6.0.1",
      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "ansi-regex": "^5.0.1"
@ -7735,7 +7933,6 @@
      "version": "6.20.0",
      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.20.0.tgz",
      "integrity": "sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg==",
-      "dev": true,
      "license": "MIT"
    },
    "node_modules/unhead": {
@ -8282,6 +8479,12 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/which-module": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.1.tgz",
+      "integrity": "sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==",
+      "license": "ISC"
+    },
    "node_modules/which-typed-array": {
      "version": "1.1.18",
      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.18.tgz",
--- a/package.json
+++ b/package.json
@ -10,6 +10,7 @@
    "analyze": "vite build --mode analyze"
  },
  "dependencies": {
+    "@types/qrcode": "^1.5.5",
    "@vueuse/components": "^12.5.0",
    "@vueuse/core": "^12.5.0",
    "@vueuse/head": "^2.0.0",
@ -20,6 +21,7 @@
    "lucide-vue-next": "^0.474.0",
    "nostr-tools": "^2.10.4",
    "pinia": "^2.3.1",
+    "qrcode": "^1.5.4",
    "radix-vue": "^1.9.13",
    "reka-ui": "^2.0.2",
    "tailwind-merge": "^2.6.0",
--- a/src/components/events/PurchaseTicketDialog.vue
+++ b/src/components/events/PurchaseTicketDialog.vue
@ -0,0 +1,162 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from '@/components/ui/dialog'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import QRCode from 'qrcode'
+
+interface Props {
+  event: {
+    id: string
+    name: string
+    price_per_ticket: number
+    currency: string
+  }
+  isOpen: boolean
+}
+
+interface Emits {
+  (e: 'update:isOpen', value: boolean): void
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<Emits>()
+
+const name = ref('')
+const email = ref('')
+const isLoading = ref(false)
+const paymentHash = ref('')
+const paymentRequest = ref('')
+const qrCode = ref('')
+const error = ref('')
+
+async function generateQRCode(bolt11: string) {
+  try {
+    qrCode.value = await QRCode.toDataURL(`lightning:${bolt11}`)
+  } catch (err) {
+    console.error('Failed to generate QR code:', err)
+  }
+}
+
+async function handleSubmit() {
+  if (!name.value || !email.value) {
+    error.value = 'Please fill out all fields'
+    return
+  }
+
+  isLoading.value = true
+  error.value = ''
+
+  const apiUrl = `${import.meta.env.VITE_API_BASE_URL}/events/api/v1/tickets/${props.event.id}/${encodeURIComponent(name.value)}/${encodeURIComponent(email.value)}`
+  console.log('Calling API:', apiUrl)
+
+  try {
+    const response = await fetch(apiUrl, {
+      headers: {
+        'Accept': 'application/json',
+        'X-API-KEY': import.meta.env.VITE_API_KEY
+      }
+    })
+
+    console.log('Response status:', response.status)
+    const responseText = await response.text()
+    console.log('Response body:', responseText)
+
+    if (!response.ok) {
+      let errorMessage = 'Failed to generate payment request'
+      try {
+        const errorData = JSON.parse(responseText)
+        errorMessage = errorData.detail || errorMessage
+      } catch (e) {
+        console.error('Failed to parse error response:', e)
+      }
+      throw new Error(errorMessage)
+    }
+
+    let data
+    try {
+      data = JSON.parse(responseText)
+    } catch (e) {
+      console.error('Failed to parse response as JSON:', e)
+      throw new Error('Invalid response format from server')
+    }
+
+    if (!data.payment_hash || !data.payment_request) {
+      console.error('Invalid response data:', data)
+      throw new Error('Invalid payment data received')
+    }
+
+    paymentHash.value = data.payment_hash
+    paymentRequest.value = data.payment_request
+    await generateQRCode(data.payment_request)
+  } catch (err) {
+    console.error('Error generating ticket:', err)
+    error.value = err instanceof Error ? err.message : 'An error occurred while processing your request'
+  } finally {
+    isLoading.value = false
+  }
+}
+
+function handleOpenLightningWallet() {
+  if (paymentRequest.value) {
+    window.location.href = `lightning:${paymentRequest.value}`
+  }
+}
+
+function handleClose() {
+  emit('update:isOpen', false)
+  // Reset form state
+  name.value = ''
+  email.value = ''
+  paymentHash.value = ''
+  paymentRequest.value = ''
+  qrCode.value = ''
+  error.value = ''
+}
+</script>
+
+<template>
+  <Dialog :open="isOpen" @update:open="handleClose">
+    <DialogContent class="sm:max-w-[425px]">
+      <DialogHeader>
+        <DialogTitle>Purchase Ticket</DialogTitle>
+        <DialogDescription>
+          Purchase a ticket for {{ event.name }} for {{ event.price_per_ticket }} {{ event.currency }}
+        </DialogDescription>
+      </DialogHeader>
+
+      <div v-if="!paymentHash" class="grid gap-4 py-4">
+        <div class="grid gap-2">
+          <Label for="name">Name</Label>
+          <Input id="name" v-model="name" placeholder="Enter your name" :disabled="isLoading" />
+        </div>
+        <div class="grid gap-2">
+          <Label for="email">Email</Label>
+          <Input id="email" v-model="email" type="email" placeholder="Enter your email" :disabled="isLoading" />
+        </div>
+        <div v-if="error" class="text-sm text-destructive">
+          {{ error }}
+        </div>
+      </div>
+
+      <div v-else class="py-4 flex flex-col items-center gap-4">
+        <img :src="qrCode" alt="Lightning payment QR code" class="w-64 h-64" />
+        <div class="text-center space-y-2">
+          <p class="text-sm text-muted-foreground">Scan with your Lightning wallet to pay</p>
+          <Button variant="outline" @click="handleOpenLightningWallet">
+            Open in Lightning Wallet
+          </Button>
+        </div>
+      </div>
+
+      <div v-if="!paymentHash" class="flex justify-end">
+        <Button type="submit" :disabled="isLoading" @click="handleSubmit">
+          <span v-if="isLoading" class="animate-spin mr-2">⚡</span>
+          Continue to Payment
+        </Button>
+      </div>
+    </DialogContent>
+  </Dialog>
+</template> 
--- a/src/pages/events.vue
+++ b/src/pages/events.vue
@ -1,17 +1,36 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <script setup lang="ts">
+import { ref } from 'vue'
 import { useEvents } from '@/composables/useEvents'
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
 import { ScrollArea } from '@/components/ui/scroll-area'
 import { Button } from '@/components/ui/button'
 import { format } from 'date-fns'
+import PurchaseTicketDialog from '@/components/events/PurchaseTicketDialog.vue'

 const { upcomingEvents, pastEvents, isLoading, error, refresh } = useEvents()
+const showPurchaseDialog = ref(false)
+const selectedEvent = ref<{
+  id: string
+  name: string
+  price_per_ticket: number
+  currency: string
+} | null>(null)

 function formatDate(dateStr: string) {
  return format(new Date(dateStr), 'PPP')
 }
+
+function handlePurchaseClick(event: {
+  id: string
+  name: string
+  price_per_ticket: number
+  currency: string
+}) {
+  selectedEvent.value = event
+  showPurchaseDialog.value = true
+}
 </script>

 <template>
@ -63,7 +82,12 @@ function formatDate(dateStr: string) {
                </div>
              </CardContent>
              <CardFooter>
-                <Button class="w-full" variant="default" :disabled="event.amount_tickets <= event.sold">
+                <Button 
+                  class="w-full" 
+                  variant="default" 
+                  :disabled="event.amount_tickets <= event.sold"
+                  @click="handlePurchaseClick(event)"
+                >
                  Buy Ticket
                </Button>
              </CardFooter>
@ -111,5 +135,11 @@ function formatDate(dateStr: string) {
        </div>
      </TabsContent>
    </Tabs>
+
+    <PurchaseTicketDialog
+      v-if="selectedEvent"
+      :event="selectedEvent"
+      v-model:is-open="showPurchaseDialog"
+    />
  </div>
 </template>