diff --git a/package.json b/package.json
index a471fef8..1dae1e8b 100644
--- a/package.json
+++ b/package.json
@@ -25,12 +25,12 @@
"@stripe/stripe-js": "^8.9.0",
"@vercel/blob": "^2.3.1",
"mermaid": "^11.12.2",
- "mppx": "https://pkg.pr.new/mppx@231",
+ "mppx": "https://pkg.pr.new/mppx@283",
"react": "^19",
"react-dom": "^19",
"stripe": "^20.4.1",
"tailwindcss": "^4.1.18",
- "viem": "^2.46.2",
+ "viem": "^2.47.5",
"vocs": "https://pkg.pr.new/wevm/vocs@319c55c",
"wagmi": "^3.4.2",
"waku": "^1.0.0-alpha.4"
@@ -54,6 +54,7 @@
"typescript": "^5",
"unplugin-icons": "^23.0.1",
"vite": "^7",
+ "vite-plugin-mkcert": "^1.17.10",
"vitest": "^4.0.18"
},
"packageManager": "pnpm@10.22.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 04c29ae5..c012a244 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -24,8 +24,8 @@ importers:
specifier: ^11.12.2
version: 11.12.2
mppx:
- specifier: https://pkg.pr.new/mppx@231
- version: https://pkg.pr.new/mppx@231(@modelcontextprotocol/sdk@1.27.1(zod@4.3.6))(express@5.2.1)(hono@4.11.9)(openapi-types@12.1.3)(typescript@5.9.3)(viem@2.46.2(typescript@5.9.3)(zod@4.3.6))
+ specifier: https://pkg.pr.new/mppx@283
+ version: https://pkg.pr.new/mppx@283(@modelcontextprotocol/sdk@1.27.1(zod@4.3.6))(express@5.2.1)(hono@4.11.9)(openapi-types@12.1.3)(typescript@5.9.3)(viem@2.47.6(typescript@5.9.3)(zod@4.3.6))
react:
specifier: ^19
version: 19.2.4
@@ -39,14 +39,14 @@ importers:
specifier: ^4.1.18
version: 4.1.18
viem:
- specifier: ^2.46.2
- version: 2.46.2(typescript@5.9.3)(zod@4.3.6)
+ specifier: ^2.47.5
+ version: 2.47.6(typescript@5.9.3)(zod@4.3.6)
vocs:
specifier: https://pkg.pr.new/wevm/vocs@319c55c
version: https://pkg.pr.new/wevm/vocs@319c55c(@types/react@19.2.14)(mermaid@11.12.2)(react-dom@19.2.4(react@19.2.4))(react-server-dom-webpack@19.2.4(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(webpack@5.105.2))(react@19.2.4)(rollup@4.57.1)(typescript@5.9.3)(vite@7.3.1(@types/node@22.19.11)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))(waku@1.0.0-alpha.5(@types/node@22.19.11)(jiti@2.6.1)(lightningcss@1.30.2)(react-dom@19.2.4(react@19.2.4))(react-server-dom-webpack@19.2.4(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(webpack@5.105.2))(react@19.2.4)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))
wagmi:
specifier: ^3.4.2
- version: 3.5.0(@tanstack/query-core@5.90.20)(@tanstack/react-query@5.90.21(react@19.2.4))(@types/react@19.2.14)(ox@0.14.2(typescript@5.9.3)(zod@4.3.6))(react@19.2.4)(typescript@5.9.3)(viem@2.46.2(typescript@5.9.3)(zod@4.3.6))
+ version: 3.5.0(@tanstack/query-core@5.90.20)(@tanstack/react-query@5.90.21(react@19.2.4))(@types/react@19.2.14)(ox@0.14.7(typescript@5.9.3)(zod@4.3.6))(react@19.2.4)(typescript@5.9.3)(viem@2.47.6(typescript@5.9.3)(zod@4.3.6))
waku:
specifier: ^1.0.0-alpha.4
version: 1.0.0-alpha.5(@types/node@22.19.11)(jiti@2.6.1)(lightningcss@1.30.2)(react-dom@19.2.4(react@19.2.4))(react-server-dom-webpack@19.2.4(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(webpack@5.105.2))(react@19.2.4)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2)
@@ -105,6 +105,9 @@ importers:
vite:
specifier: ^7
version: 7.3.1(@types/node@22.19.11)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2)
+ vite-plugin-mkcert:
+ specifier: ^1.17.10
+ version: 1.17.10(vite@7.3.1(@types/node@22.19.11)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))
vitest:
specifier: ^4.0.18
version: 4.0.18(@edge-runtime/vm@3.2.0)(@types/node@22.19.11)(happy-dom@20.7.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2)
@@ -253,24 +256,28 @@ packages:
engines: {node: '>=14.21.3'}
cpu: [arm64]
os: [linux]
+ libc: [musl]
'@biomejs/cli-linux-arm64@2.4.1':
resolution: {integrity: sha512-nlGO5KzoEKhGj2i3QXyyNCeFk8SVwyes0wo0/X9w943darnlAHfi8MYYunPf8lsz5C0JaH6pJYB6D9HnDwUPQA==}
engines: {node: '>=14.21.3'}
cpu: [arm64]
os: [linux]
+ libc: [glibc]
'@biomejs/cli-linux-x64-musl@2.4.1':
resolution: {integrity: sha512-kz1QpA+PXouNyWw2VzeoMlzMn99hlyOC/El2uSy+DS8gcb6tOsKEeZ5e2onnFIfZKe9AeKMFbTowDNLXwjwGjw==}
engines: {node: '>=14.21.3'}
cpu: [x64]
os: [linux]
+ libc: [musl]
'@biomejs/cli-linux-x64@2.4.1':
resolution: {integrity: sha512-Rmhm/mQ/3pejy1WtWLKurV1fN6zvCrqKz/ART2ZzgqY4ozL07uys5R9jA0A+yLjA79JTkcpIe85ygXv0FnSPRg==}
engines: {node: '>=14.21.3'}
cpu: [x64]
os: [linux]
+ libc: [glibc]
'@biomejs/cli-win32-arm64@2.4.1':
resolution: {integrity: sha512-e+PrlbQ/tez7W9EAzzCGUH1ovq31kR5r8sfCDzasrmoADLnDafet8pA8LdXnt0GwkeOem5Hz6WHCVZPRmaXiXw==}
@@ -726,66 +733,79 @@ packages:
resolution: {integrity: sha512-F8sWbhZ7tyuEfsmOxwc2giKDQzN3+kuBLPwwZGyVkLlKGdV1nvnNwYD0fKQ8+XS6hp9nY7B+ZeK01EBUE7aHaw==}
cpu: [arm]
os: [linux]
+ libc: [glibc]
'@rollup/rollup-linux-arm-musleabihf@4.57.1':
resolution: {integrity: sha512-rGfNUfn0GIeXtBP1wL5MnzSj98+PZe/AXaGBCRmT0ts80lU5CATYGxXukeTX39XBKsxzFpEeK+Mrp9faXOlmrw==}
cpu: [arm]
os: [linux]
+ libc: [musl]
'@rollup/rollup-linux-arm64-gnu@4.57.1':
resolution: {integrity: sha512-MMtej3YHWeg/0klK2Qodf3yrNzz6CGjo2UntLvk2RSPlhzgLvYEB3frRvbEF2wRKh1Z2fDIg9KRPe1fawv7C+g==}
cpu: [arm64]
os: [linux]
+ libc: [glibc]
'@rollup/rollup-linux-arm64-musl@4.57.1':
resolution: {integrity: sha512-1a/qhaaOXhqXGpMFMET9VqwZakkljWHLmZOX48R0I/YLbhdxr1m4gtG1Hq7++VhVUmf+L3sTAf9op4JlhQ5u1Q==}
cpu: [arm64]
os: [linux]
+ libc: [musl]
'@rollup/rollup-linux-loong64-gnu@4.57.1':
resolution: {integrity: sha512-QWO6RQTZ/cqYtJMtxhkRkidoNGXc7ERPbZN7dVW5SdURuLeVU7lwKMpo18XdcmpWYd0qsP1bwKPf7DNSUinhvA==}
cpu: [loong64]
os: [linux]
+ libc: [glibc]
'@rollup/rollup-linux-loong64-musl@4.57.1':
resolution: {integrity: sha512-xpObYIf+8gprgWaPP32xiN5RVTi/s5FCR+XMXSKmhfoJjrpRAjCuuqQXyxUa/eJTdAE6eJ+KDKaoEqjZQxh3Gw==}
cpu: [loong64]
os: [linux]
+ libc: [musl]
'@rollup/rollup-linux-ppc64-gnu@4.57.1':
resolution: {integrity: sha512-4BrCgrpZo4hvzMDKRqEaW1zeecScDCR+2nZ86ATLhAoJ5FQ+lbHVD3ttKe74/c7tNT9c6F2viwB3ufwp01Oh2w==}
cpu: [ppc64]
os: [linux]
+ libc: [glibc]
'@rollup/rollup-linux-ppc64-musl@4.57.1':
resolution: {integrity: sha512-NOlUuzesGauESAyEYFSe3QTUguL+lvrN1HtwEEsU2rOwdUDeTMJdO5dUYl/2hKf9jWydJrO9OL/XSSf65R5+Xw==}
cpu: [ppc64]
os: [linux]
+ libc: [musl]
'@rollup/rollup-linux-riscv64-gnu@4.57.1':
resolution: {integrity: sha512-ptA88htVp0AwUUqhVghwDIKlvJMD/fmL/wrQj99PRHFRAG6Z5nbWoWG4o81Nt9FT+IuqUQi+L31ZKAFeJ5Is+A==}
cpu: [riscv64]
os: [linux]
+ libc: [glibc]
'@rollup/rollup-linux-riscv64-musl@4.57.1':
resolution: {integrity: sha512-S51t7aMMTNdmAMPpBg7OOsTdn4tySRQvklmL3RpDRyknk87+Sp3xaumlatU+ppQ+5raY7sSTcC2beGgvhENfuw==}
cpu: [riscv64]
os: [linux]
+ libc: [musl]
'@rollup/rollup-linux-s390x-gnu@4.57.1':
resolution: {integrity: sha512-Bl00OFnVFkL82FHbEqy3k5CUCKH6OEJL54KCyx2oqsmZnFTR8IoNqBF+mjQVcRCT5sB6yOvK8A37LNm/kPJiZg==}
cpu: [s390x]
os: [linux]
+ libc: [glibc]
'@rollup/rollup-linux-x64-gnu@4.57.1':
resolution: {integrity: sha512-ABca4ceT4N+Tv/GtotnWAeXZUZuM/9AQyCyKYyKnpk4yoA7QIAuBt6Hkgpw8kActYlew2mvckXkvx0FfoInnLg==}
cpu: [x64]
os: [linux]
+ libc: [glibc]
'@rollup/rollup-linux-x64-musl@4.57.1':
resolution: {integrity: sha512-HFps0JeGtuOR2convgRRkHCekD7j+gdAuXM+/i6kGzQtFhlCtQkpwtNzkNj6QhCDp7DRJ7+qC/1Vg2jt5iSOFw==}
cpu: [x64]
os: [linux]
+ libc: [musl]
'@rollup/rollup-openbsd-x64@4.57.1':
resolution: {integrity: sha512-H+hXEv9gdVQuDTgnqD+SQffoWoc0Of59AStSzTEj/feWTBAnSfSD3+Dql1ZruJQxmykT/JVY0dE8Ka7z0DH1hw==}
@@ -977,24 +997,28 @@ packages:
engines: {node: '>= 10'}
cpu: [arm64]
os: [linux]
+ libc: [glibc]
'@tailwindcss/oxide-linux-arm64-musl@4.1.18':
resolution: {integrity: sha512-1px92582HkPQlaaCkdRcio71p8bc8i/ap5807tPRDK/uw953cauQBT8c5tVGkOwrHMfc2Yh6UuxaH4vtTjGvHg==}
engines: {node: '>= 10'}
cpu: [arm64]
os: [linux]
+ libc: [musl]
'@tailwindcss/oxide-linux-x64-gnu@4.1.18':
resolution: {integrity: sha512-v3gyT0ivkfBLoZGF9LyHmts0Isc8jHZyVcbzio6Wpzifg/+5ZJpDiRiUhDLkcr7f/r38SWNe7ucxmGW3j3Kb/g==}
engines: {node: '>= 10'}
cpu: [x64]
os: [linux]
+ libc: [glibc]
'@tailwindcss/oxide-linux-x64-musl@4.1.18':
resolution: {integrity: sha512-bhJ2y2OQNlcRwwgOAGMY0xTFStt4/wyU6pvI6LSuZpRgKQwxTec0/3Scu91O8ir7qCR3AuepQKLU/kX99FouqQ==}
engines: {node: '>= 10'}
cpu: [x64]
os: [linux]
+ libc: [musl]
'@tailwindcss/oxide-wasm32-wasi@4.1.18':
resolution: {integrity: sha512-LffYTvPjODiP6PT16oNeUQJzNVyJl1cjIebq/rWWBF+3eDst5JGEFSc5cWxyRCJ0Mxl+KyIkqRxk1XPEs9x8TA==}
@@ -1046,24 +1070,28 @@ packages:
engines: {node: '>= 12.22.0 < 13 || >= 14.17.0 < 15 || >= 15.12.0 < 16 || >= 16.0.0'}
cpu: [arm64]
os: [linux]
+ libc: [glibc]
'@takumi-rs/core-linux-arm64-musl@0.62.8':
resolution: {integrity: sha512-qR04H4DQfFsKmkl2kq/fh48zTC3QqBdvHjmHzJUckIktvJPKk1aK+jERIXeARkH6pfQuq+NI5Kbl1t9//qb8nQ==}
engines: {node: '>= 12.22.0 < 13 || >= 14.17.0 < 15 || >= 15.12.0 < 16 || >= 16.0.0'}
cpu: [arm64]
os: [linux]
+ libc: [musl]
'@takumi-rs/core-linux-x64-gnu@0.62.8':
resolution: {integrity: sha512-/LouBAUVqK5/H3pwzOnitRz4JEJNrGJEN/L3TU0375M+uXFewWAl2iSwFqgMt9vCtKPrKa/oK+Iy3pdvFAnX2w==}
engines: {node: '>= 12.22.0 < 13 || >= 14.17.0 < 15 || >= 15.12.0 < 16 || >= 16.0.0'}
cpu: [x64]
os: [linux]
+ libc: [glibc]
'@takumi-rs/core-linux-x64-musl@0.62.8':
resolution: {integrity: sha512-FIt0fpowyh9dse8F29cYBPVhrdc7Zzjz1pEyJunNzIzCIpC0yG3eUwFnK0wsoYoyzbgVZkbLRFRRAFmUORLvDg==}
engines: {node: '>= 12.22.0 < 13 || >= 14.17.0 < 15 || >= 15.12.0 < 16 || >= 16.0.0'}
cpu: [x64]
os: [linux]
+ libc: [musl]
'@takumi-rs/core-win32-arm64-msvc@0.62.8':
resolution: {integrity: sha512-ucQmG2bp6yH+7oNQUev+0re+6FBHUOUcee4mwpQa+BKCtUSgkgQuw3ZAGdyXBQEfr3NrNsMqfc47b3Ljv3bIWA==}
@@ -1552,6 +1580,12 @@ packages:
async-retry@1.3.3:
resolution: {integrity: sha512-wfr/jstw9xNi/0teMHrRW7dsz3Lt5ARhYNZ2ewpadnhaIp5mbALhOAP+EAdsC7t4Z6wqsDVv9+W6gm1Dk9mEyw==}
+ asynckit@0.4.0:
+ resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
+
+ axios@1.14.0:
+ resolution: {integrity: sha512-3Y8yrqLSwjuzpXuZ0oIYZ/XGgLwUIBU3uLvbcpb0pidD9ctpShJd43KSlEEkVQg6DS0G9NKyzOvBfUtDKEyHvQ==}
+
bail@2.0.2:
resolution: {integrity: sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==}
@@ -1648,6 +1682,10 @@ packages:
collapse-white-space@2.1.0:
resolution: {integrity: sha512-loKTxY1zCOuG4j9f6EPnuyyYkf58RnhhWTvRoZEokgB+WbdXehfjFviyOVYkqzEWz1Q5kRiZdBYS5SwxbQYwzw==}
+ combined-stream@1.0.8:
+ resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
+ engines: {node: '>= 0.8'}
+
comma-separated-tokens@2.0.3:
resolution: {integrity: sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==}
@@ -1898,6 +1936,10 @@ packages:
delaunator@5.0.1:
resolution: {integrity: sha512-8nvh+XBe96aCESrGOqMp/84b13H9cdKbG5P2ejQCh4d4sK9RL4371qou9drQjMhvnPmhWl5hnmqbEE0fXr9Xnw==}
+ delayed-stream@1.0.0:
+ resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
+ engines: {node: '>=0.4.0'}
+
depd@2.0.0:
resolution: {integrity: sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==}
engines: {node: '>= 0.8'}
@@ -1977,6 +2019,10 @@ packages:
resolution: {integrity: sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==}
engines: {node: '>= 0.4'}
+ es-set-tostringtag@2.1.0:
+ resolution: {integrity: sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==}
+ engines: {node: '>= 0.4'}
+
es5-ext@0.10.64:
resolution: {integrity: sha512-p2snDhiLaXe6dahss1LddxqEm+SkuDvV8dnIQG0MWjyHpcMNfXKPE+/Cc0y+PhxJX3A4xGNeFCj5oc0BUh6deg==}
engines: {node: '>=0.10'}
@@ -2127,6 +2173,19 @@ packages:
resolution: {integrity: sha512-S8KoZgRZN+a5rNwqTxlZZePjT/4cnm0ROV70LedRHZ0p8u9fRID0hJUZQpkKLzro8LfmC8sx23bY6tVNxv8pQA==}
engines: {node: '>= 18.0.0'}
+ follow-redirects@1.15.11:
+ resolution: {integrity: sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==}
+ engines: {node: '>=4.0'}
+ peerDependencies:
+ debug: '*'
+ peerDependenciesMeta:
+ debug:
+ optional: true
+
+ form-data@4.0.5:
+ resolution: {integrity: sha512-8RipRLol37bNs2bhoV67fiTEvdTrbMUYcFTiy3+wuuOnUog2QBHCZWXDRijWQfAkhBj2Uf5UnVaiWwA5vdd82w==}
+ engines: {node: '>= 6'}
+
format@0.2.2:
resolution: {integrity: sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww==}
engines: {node: '>=0.4.x'}
@@ -2195,6 +2254,10 @@ packages:
resolution: {integrity: sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==}
engines: {node: '>= 0.4'}
+ has-tostringtag@1.0.2:
+ resolution: {integrity: sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==}
+ engines: {node: '>= 0.4'}
+
hasown@2.0.2:
resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
engines: {node: '>= 0.4'}
@@ -2420,24 +2483,28 @@ packages:
engines: {node: '>= 12.0.0'}
cpu: [arm64]
os: [linux]
+ libc: [glibc]
lightningcss-linux-arm64-musl@1.30.2:
resolution: {integrity: sha512-5Vh9dGeblpTxWHpOx8iauV02popZDsCYMPIgiuw97OJ5uaDsL86cnqSFs5LZkG3ghHoX5isLgWzMs+eD1YzrnA==}
engines: {node: '>= 12.0.0'}
cpu: [arm64]
os: [linux]
+ libc: [musl]
lightningcss-linux-x64-gnu@1.30.2:
resolution: {integrity: sha512-Cfd46gdmj1vQ+lR6VRTTadNHu6ALuw2pKR9lYq4FnhvgBc4zWY1EtZcAc6EffShbb1MFrIPfLDXD6Xprbnni4w==}
engines: {node: '>= 12.0.0'}
cpu: [x64]
os: [linux]
+ libc: [glibc]
lightningcss-linux-x64-musl@1.30.2:
resolution: {integrity: sha512-XJaLUUFXb6/QG2lGIW6aIk6jKdtjtcffUT0NKvIqhSBY3hh9Ch+1LCeH80dR9q9LBjG3ewbDjnumefsLsP6aiA==}
engines: {node: '>= 12.0.0'}
cpu: [x64]
os: [linux]
+ libc: [musl]
lightningcss-win32-arm64-msvc@1.30.2:
resolution: {integrity: sha512-FZn+vaj7zLv//D/192WFFVA0RgHawIcHqLX9xuWiQt7P0PtdFEVaxgF9rjM/IRYHQXNnk61/H/gb2Ei+kUQ4xQ==}
@@ -2713,9 +2780,9 @@ packages:
mlly@1.8.0:
resolution: {integrity: sha512-l8D9ODSRWLe2KHJSifWGwBqpTZXIXTeo8mlKjY+E2HAakaTeNpqAyBZ8GSqLzHgw4XmHmC8whvpjJNMbFZN7/g==}
- mppx@https://pkg.pr.new/mppx@231:
- resolution: {tarball: https://pkg.pr.new/mppx@231}
- version: 0.4.11
+ mppx@https://pkg.pr.new/mppx@283:
+ resolution: {tarball: https://pkg.pr.new/mppx@283}
+ version: 0.5.3
hasBin: true
peerDependencies:
'@modelcontextprotocol/sdk': '>=1.25.0'
@@ -2811,16 +2878,8 @@ packages:
outvariant@1.4.0:
resolution: {integrity: sha512-AlWY719RF02ujitly7Kk/0QlV+pXGFDHrHf9O2OKqyqgBieaPOIeuSkL8sRK6j2WK+/ZAURq2kZsY0d8JapUiw==}
- ox@0.12.4:
- resolution: {integrity: sha512-+P+C7QzuwPV8lu79dOwjBKfB2CbnbEXe/hfyyrff1drrO1nOOj3Hc87svHfcW1yneRr3WXaKr6nz11nq+/DF9Q==}
- peerDependencies:
- typescript: '>=5.4.0'
- peerDependenciesMeta:
- typescript:
- optional: true
-
- ox@0.14.2:
- resolution: {integrity: sha512-GIWAW+7WEf2y9Neejf5lcsezhxl9ZezRdLA/n4/rzuPvAWUziEVbRuDAS8nFI+YuIJL0aKoHNRPq3O6LmShbYQ==}
+ ox@0.14.7:
+ resolution: {integrity: sha512-zSQ/cfBdolj7U4++NAvH7sI+VG0T3pEohITCgcQj8KlawvTDY4vGVhDT64Atsm0d6adWfIYHDpu88iUBMMp+AQ==}
peerDependencies:
typescript: '>=5.4.0'
peerDependenciesMeta:
@@ -2917,6 +2976,10 @@ packages:
resolution: {integrity: sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==}
engines: {node: '>= 0.10'}
+ proxy-from-env@2.1.0:
+ resolution: {integrity: sha512-cJ+oHTW1VAEa8cJslgmUZrc+sjRKgAKl3Zyse6+PV38hZe/V6Z14TbCuXcan9F9ghlz4QrFr2c92TNF82UkYHA==}
+ engines: {node: '>=10'}
+
qs@6.15.0:
resolution: {integrity: sha512-mAZTtNCeetKMH+pSjrb76NAM8V9a05I9aBZOHztWy/UqcJdQYNsf59vrRKWnojAT9Y+GbIvoTBC++CPHqpDBhQ==}
engines: {node: '>=0.6'}
@@ -3445,8 +3508,8 @@ packages:
vfile@6.0.3:
resolution: {integrity: sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==}
- viem@2.46.2:
- resolution: {integrity: sha512-w8Qv5Vyo7TfXcH3vgmxRa1NRvzJCDy2aSGSRsJn3503nC/qVbgEQ+n3aj/CkqWXbloudZh97h5o5aQrQSVGy0w==}
+ viem@2.47.6:
+ resolution: {integrity: sha512-zExmbI99NGvMdYa7fmqSTLgkwh48dmhgEqFrUgkpL4kfG4XkVefZ8dZqIKVUhZo6Uhf0FrrEXOsHm9LUyIvI2Q==}
peerDependencies:
typescript: '>=5.0.4'
peerDependenciesMeta:
@@ -3456,6 +3519,12 @@ packages:
vite-plugin-arraybuffer@0.1.4:
resolution: {integrity: sha512-Ubfsw/g4PhdjlgsKYDm2Hlc0qmNJheX8VCeOMayq1k9fMVB1nNuqtWjDH1fj9hSlhlSnlndz/ehMKIuXpB0SeA==}
+ vite-plugin-mkcert@1.17.10:
+ resolution: {integrity: sha512-703hecAoGZYgNrkY76OIbo0M9j0tfGIIM6n7c0sYvhaczQMPwD0nFi+bS44d8kwdbCtV7885FYBWnTzhsaC7QQ==}
+ engines: {node: '>=v16.7.0'}
+ peerDependencies:
+ vite: '>=3'
+
vite-plugin-wasm@3.5.0:
resolution: {integrity: sha512-X5VWgCnqiQEGb+omhlBVsvTfxikKtoOgAzQ95+BZ8gQ+VfMHIjSHr0wyvXFQCa0eKQ0fKyaL0kWcEnYqBac4lQ==}
peerDependencies:
@@ -5011,22 +5080,22 @@ snapshots:
'@vitest/pretty-format': 4.0.18
tinyrainbow: 3.0.3
- '@wagmi/connectors@7.2.1(@wagmi/core@3.4.0(@tanstack/query-core@5.90.20)(@types/react@19.2.14)(ox@0.14.2(typescript@5.9.3)(zod@4.3.6))(react@19.2.4)(typescript@5.9.3)(use-sync-external-store@1.4.0(react@19.2.4))(viem@2.46.2(typescript@5.9.3)(zod@4.3.6)))(typescript@5.9.3)(viem@2.46.2(typescript@5.9.3)(zod@4.3.6))':
+ '@wagmi/connectors@7.2.1(@wagmi/core@3.4.0(@tanstack/query-core@5.90.20)(@types/react@19.2.14)(ox@0.14.7(typescript@5.9.3)(zod@4.3.6))(react@19.2.4)(typescript@5.9.3)(use-sync-external-store@1.4.0(react@19.2.4))(viem@2.47.6(typescript@5.9.3)(zod@4.3.6)))(typescript@5.9.3)(viem@2.47.6(typescript@5.9.3)(zod@4.3.6))':
dependencies:
- '@wagmi/core': 3.4.0(@tanstack/query-core@5.90.20)(@types/react@19.2.14)(ox@0.14.2(typescript@5.9.3)(zod@4.3.6))(react@19.2.4)(typescript@5.9.3)(use-sync-external-store@1.4.0(react@19.2.4))(viem@2.46.2(typescript@5.9.3)(zod@4.3.6))
- viem: 2.46.2(typescript@5.9.3)(zod@4.3.6)
+ '@wagmi/core': 3.4.0(@tanstack/query-core@5.90.20)(@types/react@19.2.14)(ox@0.14.7(typescript@5.9.3)(zod@4.3.6))(react@19.2.4)(typescript@5.9.3)(use-sync-external-store@1.4.0(react@19.2.4))(viem@2.47.6(typescript@5.9.3)(zod@4.3.6))
+ viem: 2.47.6(typescript@5.9.3)(zod@4.3.6)
optionalDependencies:
typescript: 5.9.3
- '@wagmi/core@3.4.0(@tanstack/query-core@5.90.20)(@types/react@19.2.14)(ox@0.14.2(typescript@5.9.3)(zod@4.3.6))(react@19.2.4)(typescript@5.9.3)(use-sync-external-store@1.4.0(react@19.2.4))(viem@2.46.2(typescript@5.9.3)(zod@4.3.6))':
+ '@wagmi/core@3.4.0(@tanstack/query-core@5.90.20)(@types/react@19.2.14)(ox@0.14.7(typescript@5.9.3)(zod@4.3.6))(react@19.2.4)(typescript@5.9.3)(use-sync-external-store@1.4.0(react@19.2.4))(viem@2.47.6(typescript@5.9.3)(zod@4.3.6))':
dependencies:
eventemitter3: 5.0.1
mipd: 0.0.7(typescript@5.9.3)
- viem: 2.46.2(typescript@5.9.3)(zod@4.3.6)
+ viem: 2.47.6(typescript@5.9.3)(zod@4.3.6)
zustand: 5.0.0(@types/react@19.2.14)(react@19.2.4)(use-sync-external-store@1.4.0(react@19.2.4))
optionalDependencies:
'@tanstack/query-core': 5.90.20
- ox: 0.14.2(typescript@5.9.3)(zod@4.3.6)
+ ox: 0.14.7(typescript@5.9.3)(zod@4.3.6)
typescript: 5.9.3
transitivePeerDependencies:
- '@types/react'
@@ -5184,6 +5253,16 @@ snapshots:
dependencies:
retry: 0.13.1
+ asynckit@0.4.0: {}
+
+ axios@1.14.0(debug@4.4.3):
+ dependencies:
+ follow-redirects: 1.15.11(debug@4.4.3)
+ form-data: 4.0.5
+ proxy-from-env: 2.1.0
+ transitivePeerDependencies:
+ - debug
+
bail@2.0.2: {}
base64-js@1.5.1: {}
@@ -5277,6 +5356,10 @@ snapshots:
collapse-white-space@2.1.0: {}
+ combined-stream@1.0.8:
+ dependencies:
+ delayed-stream: 1.0.0
+
comma-separated-tokens@2.0.3: {}
commander@2.20.3: {}
@@ -5536,6 +5619,8 @@ snapshots:
dependencies:
robust-predicates: 3.0.2
+ delayed-stream@1.0.0: {}
+
depd@2.0.0: {}
dequal@2.0.3: {}
@@ -5598,6 +5683,13 @@ snapshots:
dependencies:
es-errors: 1.3.0
+ es-set-tostringtag@2.1.0:
+ dependencies:
+ es-errors: 1.3.0
+ get-intrinsic: 1.3.0
+ has-tostringtag: 1.0.2
+ hasown: 2.0.2
+
es5-ext@0.10.64:
dependencies:
es6-iterator: 2.0.3
@@ -5814,6 +5906,18 @@ snapshots:
transitivePeerDependencies:
- supports-color
+ follow-redirects@1.15.11(debug@4.4.3):
+ optionalDependencies:
+ debug: 4.4.3
+
+ form-data@4.0.5:
+ dependencies:
+ asynckit: 0.4.0
+ combined-stream: 1.0.8
+ es-set-tostringtag: 2.1.0
+ hasown: 2.0.2
+ mime-types: 2.1.35
+
format@0.2.2: {}
forwarded@0.2.0: {}
@@ -5878,6 +5982,10 @@ snapshots:
has-symbols@1.1.0: {}
+ has-tostringtag@1.0.2:
+ dependencies:
+ has-symbols: 1.1.0
+
hasown@2.0.2:
dependencies:
function-bind: 1.1.2
@@ -6700,13 +6808,13 @@ snapshots:
pkg-types: 1.3.1
ufo: 1.6.3
- mppx@https://pkg.pr.new/mppx@231(@modelcontextprotocol/sdk@1.27.1(zod@4.3.6))(express@5.2.1)(hono@4.11.9)(openapi-types@12.1.3)(typescript@5.9.3)(viem@2.46.2(typescript@5.9.3)(zod@4.3.6)):
+ mppx@https://pkg.pr.new/mppx@283(@modelcontextprotocol/sdk@1.27.1(zod@4.3.6))(express@5.2.1)(hono@4.11.9)(openapi-types@12.1.3)(typescript@5.9.3)(viem@2.47.6(typescript@5.9.3)(zod@4.3.6)):
dependencies:
'@remix-run/fetch-proxy': 0.7.1
'@remix-run/node-fetch-server': 0.13.0
incur: 0.3.1(openapi-types@12.1.3)
- ox: 0.14.2(typescript@5.9.3)(zod@4.3.6)
- viem: 2.46.2(typescript@5.9.3)(zod@4.3.6)
+ ox: 0.14.7(typescript@5.9.3)(zod@4.3.6)
+ viem: 2.47.6(typescript@5.9.3)(zod@4.3.6)
zod: 4.3.6
optionalDependencies:
'@modelcontextprotocol/sdk': 1.27.1(zod@4.3.6)
@@ -6772,22 +6880,7 @@ snapshots:
outvariant@1.4.0: {}
- ox@0.12.4(typescript@5.9.3)(zod@4.3.6):
- dependencies:
- '@adraffy/ens-normalize': 1.11.1
- '@noble/ciphers': 1.3.0
- '@noble/curves': 1.9.1
- '@noble/hashes': 1.8.0
- '@scure/bip32': 1.7.0
- '@scure/bip39': 1.6.0
- abitype: 1.2.3(typescript@5.9.3)(zod@4.3.6)
- eventemitter3: 5.0.1
- optionalDependencies:
- typescript: 5.9.3
- transitivePeerDependencies:
- - zod
-
- ox@0.14.2(typescript@5.9.3)(zod@4.3.6):
+ ox@0.14.7(typescript@5.9.3)(zod@4.3.6):
dependencies:
'@adraffy/ens-normalize': 1.11.1
'@noble/ciphers': 1.3.0
@@ -6897,6 +6990,8 @@ snapshots:
forwarded: 0.2.0
ipaddr.js: 1.9.1
+ proxy-from-env@2.1.0: {}
+
qs@6.15.0:
dependencies:
side-channel: 1.1.0
@@ -7525,7 +7620,7 @@ snapshots:
'@types/unist': 3.0.3
vfile-message: 4.0.3
- viem@2.46.2(typescript@5.9.3)(zod@4.3.6):
+ viem@2.47.6(typescript@5.9.3)(zod@4.3.6):
dependencies:
'@noble/curves': 1.9.1
'@noble/hashes': 1.8.0
@@ -7533,7 +7628,7 @@ snapshots:
'@scure/bip39': 1.6.0
abitype: 1.2.3(typescript@5.9.3)(zod@4.3.6)
isows: 1.0.7(ws@8.18.3)
- ox: 0.12.4(typescript@5.9.3)(zod@4.3.6)
+ ox: 0.14.7(typescript@5.9.3)(zod@4.3.6)
ws: 8.18.3
optionalDependencies:
typescript: 5.9.3
@@ -7544,6 +7639,15 @@ snapshots:
vite-plugin-arraybuffer@0.1.4: {}
+ vite-plugin-mkcert@1.17.10(vite@7.3.1(@types/node@22.19.11)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2)):
+ dependencies:
+ axios: 1.14.0(debug@4.4.3)
+ debug: 4.4.3
+ picocolors: 1.1.1
+ vite: 7.3.1(@types/node@22.19.11)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2)
+ transitivePeerDependencies:
+ - supports-color
+
vite-plugin-wasm@3.5.0(vite@7.3.1(@types/node@22.19.11)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2)):
dependencies:
vite: 7.3.1(@types/node@22.19.11)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2)
@@ -7722,14 +7826,14 @@ snapshots:
w3c-keyname@2.2.8: {}
- wagmi@3.5.0(@tanstack/query-core@5.90.20)(@tanstack/react-query@5.90.21(react@19.2.4))(@types/react@19.2.14)(ox@0.14.2(typescript@5.9.3)(zod@4.3.6))(react@19.2.4)(typescript@5.9.3)(viem@2.46.2(typescript@5.9.3)(zod@4.3.6)):
+ wagmi@3.5.0(@tanstack/query-core@5.90.20)(@tanstack/react-query@5.90.21(react@19.2.4))(@types/react@19.2.14)(ox@0.14.7(typescript@5.9.3)(zod@4.3.6))(react@19.2.4)(typescript@5.9.3)(viem@2.47.6(typescript@5.9.3)(zod@4.3.6)):
dependencies:
'@tanstack/react-query': 5.90.21(react@19.2.4)
- '@wagmi/connectors': 7.2.1(@wagmi/core@3.4.0(@tanstack/query-core@5.90.20)(@types/react@19.2.14)(ox@0.14.2(typescript@5.9.3)(zod@4.3.6))(react@19.2.4)(typescript@5.9.3)(use-sync-external-store@1.4.0(react@19.2.4))(viem@2.46.2(typescript@5.9.3)(zod@4.3.6)))(typescript@5.9.3)(viem@2.46.2(typescript@5.9.3)(zod@4.3.6))
- '@wagmi/core': 3.4.0(@tanstack/query-core@5.90.20)(@types/react@19.2.14)(ox@0.14.2(typescript@5.9.3)(zod@4.3.6))(react@19.2.4)(typescript@5.9.3)(use-sync-external-store@1.4.0(react@19.2.4))(viem@2.46.2(typescript@5.9.3)(zod@4.3.6))
+ '@wagmi/connectors': 7.2.1(@wagmi/core@3.4.0(@tanstack/query-core@5.90.20)(@types/react@19.2.14)(ox@0.14.7(typescript@5.9.3)(zod@4.3.6))(react@19.2.4)(typescript@5.9.3)(use-sync-external-store@1.4.0(react@19.2.4))(viem@2.47.6(typescript@5.9.3)(zod@4.3.6)))(typescript@5.9.3)(viem@2.47.6(typescript@5.9.3)(zod@4.3.6))
+ '@wagmi/core': 3.4.0(@tanstack/query-core@5.90.20)(@types/react@19.2.14)(ox@0.14.7(typescript@5.9.3)(zod@4.3.6))(react@19.2.4)(typescript@5.9.3)(use-sync-external-store@1.4.0(react@19.2.4))(viem@2.47.6(typescript@5.9.3)(zod@4.3.6))
react: 19.2.4
use-sync-external-store: 1.4.0(react@19.2.4)
- viem: 2.46.2(typescript@5.9.3)(zod@4.3.6)
+ viem: 2.47.6(typescript@5.9.3)(zod@4.3.6)
optionalDependencies:
typescript: 5.9.3
transitivePeerDependencies:
diff --git a/src/components/PaymentLinkDemo.tsx b/src/components/PaymentLinkDemo.tsx
new file mode 100644
index 00000000..d71f46d9
--- /dev/null
+++ b/src/components/PaymentLinkDemo.tsx
@@ -0,0 +1,30 @@
+"use client";
+
+const PAYMENT_LINK_URL = "/api/payment-link/photo";
+
+export function PaymentLinkDemo() {
+ return (
+
+ );
+}
diff --git a/src/components/cards.tsx b/src/components/cards.tsx
index 263b0c6b..8a2af144 100644
--- a/src/components/cards.tsx
+++ b/src/components/cards.tsx
@@ -77,6 +77,17 @@ export function PayAsYouGoCard() {
);
}
+export function PaymentLinksCard() {
+ return (
+
+ );
+}
+
export function ProxyExistingServiceCard() {
return (
+
+
+
+
+ Photo — MPP Demo
+
+
+
+ 
+ Paid via MPP — $0.01
+
+ `;
+
+ return result.withReceipt(
+ new Response(html, {
+ headers: {
+ "Cache-Control": "no-store",
+ "Content-Type": "text/html; charset=utf-8",
+ },
+ }),
+ );
+}
diff --git a/src/pages/_api/api/sessions/poem.ts b/src/pages/_api/api/sessions/poem.ts
index 6ca80424..715a90db 100644
--- a/src/pages/_api/api/sessions/poem.ts
+++ b/src/pages/_api/api/sessions/poem.ts
@@ -69,11 +69,11 @@ export default async function handler(request: Request) {
const poem = poems[Math.floor(Math.random() * poems.length)];
const words = poem.lines.flatMap((line) => [...line.split(" "), "\\n"]);
- return result.withReceipt(async function* (stream) {
+ return result.withReceipt(async function* (stream: any) {
yield JSON.stringify({ title: poem.title, author: poem.author });
for (const word of words) {
await stream.charge();
yield word;
}
- });
+ } as any);
}
diff --git a/src/pages/guides/payment-links.mdx b/src/pages/guides/payment-links.mdx
new file mode 100644
index 00000000..a8872ba4
--- /dev/null
+++ b/src/pages/guides/payment-links.mdx
@@ -0,0 +1,370 @@
+---
+description: "Create a payment link for any API endpoint. Share it anywhere—users pay directly from the page, no integration required."
+imageDescription: "Create a payment link. Sell anywhere."
+---
+
+import { Cards, Tabs, Tab } from 'vocs'
+import { OneTimePaymentsCard, PayAsYouGoCard, ServerQuickstartCard } from '../../components/cards'
+import { PaymentLinkDemo } from '../../components/PaymentLinkDemo'
+import { PromptBlock } from '../../components/PromptBlock'
+
+# Create a payment link [Share a link. Get paid.]
+
+Create a full payment page for any API endpoint—no frontend required. Share the link anywhere and users pay directly from the page.
+
+## Supported methods
+
+| Method | `html` type | What renders |
+| --- | --- | --- |
+| [`tempo.charge`](/payment-methods/tempo/charge#payment-links) | `boolean` | "Continue with Tempo" wallet UI |
+| [`stripe.charge`](/payment-methods/stripe/charge#payment-links) | `{ publishableKey, createTokenUrl }` | Full Stripe Elements card form |
+
+## Demo
+
+This is a live payment link. Click "Continue with Tempo" to pay $0.01 and receive a random photo from [Picsum](https://picsum.photos).
+
+
+
+## Prompt mode
+
+Paste this into your coding agent to create a payment link in one prompt:
+
+
+{`Use https://mpp.dev/guides/payment-links.md as reference.
+Add mppx to my app with a payment-gated photo endpoint
+that charges $0.01 per request using the Tempo payment method with
+PathUSD. Enable payment links so browsers can pay directly
+from the page by setting html: true on the tempo.charge() method.
+When payment is verified, fetch a random photo from
+https://picsum.photos/1024/1024 and return the URL as JSON.`}
+
+
+## Manual mode
+
+Select your framework to follow a step-by-step guide. If your framework isn't listed, choose **Other** for a generic [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) approach compatible with most TypeScript server frameworks.
+
+
+
+::::steps
+
+#### Install `mppx`
+
+:::code-group
+```bash [npm]
+npm install mppx viem
+```
+```bash [pnpm]
+pnpm add mppx viem
+```
+```bash [bun]
+bun add mppx viem
+```
+:::
+
+#### Set up `Mppx` instance with `html: true`
+
+```ts [app/api/photo/route.ts]
+import crypto from 'crypto'
+import { Mppx, tempo } from 'mppx/nextjs'
+
+export const mppx = Mppx.create({
+ methods: [tempo.charge({
+ currency: '0x20c0000000000000000000000000000000000000',
+ html: true, // [!code hl]
+ recipient: '0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266',
+ testnet: true,
+ })],
+ secretKey: process.env.MPP_SECRET_KEY || crypto.randomBytes(32).toString('base64'),
+})
+```
+
+#### Create the `/api/photo` route
+
+Create the photo route with `mppx.charge`. Browsers see a payment page; programmatic clients get the standard `402` flow.
+
+```ts [app/api/photo/route.ts]
+import crypto from 'crypto'
+import { Mppx, tempo } from 'mppx/nextjs'
+
+export const mppx = Mppx.create({
+ methods: [tempo.charge({
+ currency: '0x20c0000000000000000000000000000000000000',
+ html: true,
+ recipient: '0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266',
+ testnet: true,
+ })],
+ secretKey: process.env.MPP_SECRET_KEY || crypto.randomBytes(32).toString('base64'),
+})
+
+// [!code focus:start]
+export const GET =
+ mppx.charge({ amount: '0.01', description: 'Random stock photo' })
+ (async () => {
+ const res = await fetch('https://picsum.photos/1024/1024')
+ return Response.json({ url: res.url })
+ })
+// [!code focus:end]
+```
+
+#### Test in the browser
+
+Open `http://localhost:3000/api/photo` in your browser. The server returns a payment page with a "Continue with Tempo" button. After payment, the page reloads with the photo URL.
+
+Programmatic clients work the same way:
+
+```bash [terminal]
+$ npx mppx http://localhost:3000/api/photo
+```
+
+::::
+
+
+::::steps
+
+#### Install `mppx` and `hono`
+
+:::code-group
+```bash [npm]
+npm install mppx hono viem
+```
+```bash [pnpm]
+pnpm add mppx hono viem
+```
+```bash [bun]
+bun add mppx hono viem
+```
+:::
+
+#### Set up `Mppx` instance with `html: true`
+
+```ts [server.ts]
+import crypto from 'crypto'
+import { Hono } from 'hono'
+import { Mppx, tempo } from 'mppx/hono'
+
+const app = new Hono()
+
+const mppx = Mppx.create({
+ methods: [tempo.charge({
+ currency: '0x20c0000000000000000000000000000000000000',
+ html: true, // [!code hl]
+ recipient: '0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266',
+ testnet: true,
+ })],
+ secretKey: process.env.MPP_SECRET_KEY || crypto.randomBytes(32).toString('base64'),
+})
+```
+
+#### Create the `/api/photo` route
+
+```ts [server.ts]
+import crypto from 'crypto'
+import { Hono } from 'hono'
+import { Mppx, tempo } from 'mppx/hono'
+
+const app = new Hono()
+
+const mppx = Mppx.create({
+ methods: [tempo.charge({
+ currency: '0x20c0000000000000000000000000000000000000',
+ html: true,
+ recipient: '0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266',
+ testnet: true,
+ })],
+ secretKey: process.env.MPP_SECRET_KEY || crypto.randomBytes(32).toString('base64'),
+})
+
+// [!code focus:start]
+app.get(
+ '/api/photo',
+ mppx.charge({ amount: '0.01', description: 'Random stock photo' }),
+ async (c) => {
+ const res = await fetch('https://picsum.photos/1024/1024')
+ return c.json({ url: res.url })
+ },
+)
+// [!code focus:end]
+```
+
+#### Test in the browser
+
+Open `http://localhost:3000/api/photo` in your browser.
+
+```bash [terminal]
+$ npx mppx http://localhost:3000/api/photo
+```
+
+::::
+
+
+::::steps
+
+#### Install `mppx` and `express`
+
+:::code-group
+```bash [npm]
+npm install mppx express viem
+```
+```bash [pnpm]
+pnpm add mppx express viem
+```
+```bash [bun]
+bun add mppx express viem
+```
+:::
+
+#### Set up `Mppx` instance with `html: true`
+
+```ts [server.ts]
+import crypto from 'crypto'
+import express from 'express'
+import { Mppx, tempo } from 'mppx/express'
+
+const app = express()
+
+const mppx = Mppx.create({
+ methods: [tempo.charge({
+ currency: '0x20c0000000000000000000000000000000000000',
+ html: true, // [!code hl]
+ recipient: '0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266',
+ testnet: true,
+ })],
+ secretKey: process.env.MPP_SECRET_KEY || crypto.randomBytes(32).toString('base64'),
+})
+```
+
+#### Create the `/api/photo` route
+
+```ts [server.ts]
+import crypto from 'crypto'
+import express from 'express'
+import { Mppx, tempo } from 'mppx/express'
+
+const app = express()
+
+const mppx = Mppx.create({
+ methods: [tempo.charge({
+ currency: '0x20c0000000000000000000000000000000000000',
+ html: true,
+ recipient: '0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266',
+ testnet: true,
+ })],
+ secretKey: process.env.MPP_SECRET_KEY || crypto.randomBytes(32).toString('base64'),
+})
+
+// [!code focus:start]
+app.get(
+ '/api/photo',
+ mppx.charge({ amount: '0.01', description: 'Random stock photo' }),
+ async (req, res) => {
+ const response = await fetch('https://picsum.photos/1024/1024')
+ res.json({ url: response.url })
+ },
+)
+// [!code focus:end]
+```
+
+#### Test in the browser
+
+Open `http://localhost:3000/api/photo` in your browser.
+
+```bash [terminal]
+$ npx mppx http://localhost:3000/api/photo
+```
+
+::::
+
+
+
+This guide walks through using `mppx/server` directly with any [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)-compatible framework: [Bun](https://bun.sh), [Deno](https://deno.com), [Cloudflare Workers](https://workers.dev), and others.
+
+
+
+::::steps
+
+#### Install `mppx`
+
+:::code-group
+```bash [npm]
+npm install mppx viem
+```
+```bash [pnpm]
+pnpm add mppx viem
+```
+```bash [bun]
+bun add mppx viem
+```
+:::
+
+#### Set up `Mppx` instance with `html: true`
+
+```ts [server.ts]
+import crypto from 'crypto'
+import { Mppx, tempo } from 'mppx/server'
+
+const mppx = Mppx.create({
+ methods: [tempo.charge({
+ currency: '0x20c0000000000000000000000000000000000000',
+ html: true, // [!code hl]
+ recipient: '0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266',
+ testnet: true,
+ })],
+ secretKey: process.env.MPP_SECRET_KEY || crypto.randomBytes(32).toString('base64'),
+})
+```
+
+#### Create the handler
+
+The server detects the `Accept` header and returns a payment page for browsers. Programmatic clients get the standard `402` flow.
+
+```ts [server.ts]
+import crypto from 'crypto'
+import { Mppx, tempo } from 'mppx/server'
+
+const mppx = Mppx.create({
+ methods: [tempo.charge({
+ currency: '0x20c0000000000000000000000000000000000000',
+ html: true,
+ recipient: '0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266',
+ testnet: true,
+ })],
+ secretKey: process.env.MPP_SECRET_KEY || crypto.randomBytes(32).toString('base64'),
+})
+
+// [!code focus:start]
+Bun.serve({
+ async fetch(request) {
+ const result = await mppx.charge({
+ amount: '0.01',
+ description: 'Random stock photo',
+ })(request)
+
+ if (result.status === 402) return result.challenge
+
+ const res = await fetch('https://picsum.photos/1024/1024')
+ return result.withReceipt(Response.json({ url: res.url }))
+ },
+})
+// [!code focus:end]
+```
+
+#### Test in the browser
+
+Open `http://localhost:3000` in your browser.
+
+```bash [terminal]
+$ npx mppx http://localhost:3000
+```
+
+::::
+
+
+
+
+## Next steps
+
+
+
+
+
+
diff --git a/src/pages/payment-methods/stripe/charge.mdx b/src/pages/payment-methods/stripe/charge.mdx
index 3eef8371..45330857 100644
--- a/src/pages/payment-methods/stripe/charge.mdx
+++ b/src/pages/payment-methods/stripe/charge.mdx
@@ -115,6 +115,48 @@ const mppx = Mppx.create({
})
```
+### Payment links
+
+Set `html` on the method to render a Stripe Elements payment form when a browser visits the endpoint.
+
+```ts twoslash
+
+import Stripe from 'stripe'
+import { Mppx, stripe } from 'mppx/server'
+
+const stripeClient = new Stripe(process.env.STRIPE_SECRET_KEY!)
+
+const mppx = Mppx.create({
+ methods: [
+ stripe.charge({
+ client: stripeClient,
+ html: { // [!code hl]
+ createTokenUrl: '/api/create-spt', // [!code hl]
+ publishableKey: process.env.STRIPE_PUBLISHABLE_KEY!, // [!code hl]
+ }, // [!code hl]
+ networkId: 'internal',
+ paymentMethodTypes: ['card'],
+ }),
+ ],
+})
+```
+
+#### html.createTokenUrl
+
+- **Type:** `string`
+
+A same-origin URL on your server that accepts a `POST` with `{ paymentMethod, amount, currency, expiresAt }` and returns `{ spt: string }`. This is the same endpoint used by the [client-side `createToken` callback](#client).
+
+#### html.publishableKey
+
+- **Type:** `string`
+
+Your Stripe publishable key (`pk_live_...` or `pk_test_...`), embedded in the payment page for Stripe.js initialization.
+
+Programmatic clients with `Authorization` headers are unaffected.
+
+See the [payment links guide](/guides/payment-links) for a full walkthrough and live demo.
+
### Server parameters
| Parameter | Type | Required | Description |
diff --git a/src/pages/payment-methods/tempo/charge.mdx b/src/pages/payment-methods/tempo/charge.mdx
index 2df69d0a..34980c9e 100644
--- a/src/pages/payment-methods/tempo/charge.mdx
+++ b/src/pages/payment-methods/tempo/charge.mdx
@@ -126,6 +126,32 @@ const result = await mppx.charge({
Up to 10 splits per charge. Each split must have a positive amount, and the sum of all splits must be less than the total `amount`. See the [split payments guide](/guides/split-payments) for more details.
+### Payment links
+
+Set `html: true` on the method to render a payment page when a browser navigates to the endpoint. The page shows a "Continue with Tempo" button—after the user pays, the page reloads with the paid resource. Programmatic clients with `Authorization` headers are unaffected.
+
+```ts twoslash
+import { Mppx, tempo } from "mppx/server";
+
+const mppx = Mppx.create({
+ methods: [
+ tempo.charge({
+ html: true, // [!code hl]
+ }),
+ ],
+});
+
+declare const request: Request;
+// ---cut---
+const result = await mppx.charge({
+ amount: "0.1",
+ currency: "0x20c0000000000000000000000000000000000000",
+ recipient: "0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266",
+})(request);
+```
+
+See the [payment links guide](/guides/payment-links) for a full walkthrough with framework examples and a live demo.
+
### With Stripe
```ts twoslash
diff --git a/vite.config.ts b/vite.config.ts
index d817722e..3fd5b749 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -3,6 +3,7 @@ import react from "@vitejs/plugin-react";
import Icons from "unplugin-icons/vite";
import type { Plugin } from "vite";
import { defineConfig, loadEnv } from "vite";
+import mkcert from "vite-plugin-mkcert";
import { configDefaults } from "vitest/config";
import { vocs } from "vocs/vite";
@@ -86,6 +87,9 @@ export default defineConfig(({ mode }) => {
Icons({ compiler: "jsx", jsx: "react" }),
react(),
vocs(),
+ ...(mode !== "production"
+ ? [mkcert({ force: true, hosts: ["localhost"] })]
+ : []),
],
// Prevent the TypeScript compiler (used by twoslash) from being bundled into
// the server output. TypeScript uses `__filename` which doesn't exist in ESM.
diff --git a/vocs.config.ts b/vocs.config.ts
index 7d7d18a7..aa1d92cc 100644
--- a/vocs.config.ts
+++ b/vocs.config.ts
@@ -4,7 +4,7 @@ const baseUrl = (() => {
if (process.env.VERCEL_ENV === "production")
return `https://${process.env.VERCEL_PROJECT_PRODUCTION_URL}`;
if (process.env.VERCEL_URL) return `https://${process.env.VERCEL_URL}`;
- if (process.env.NODE_ENV !== "production") return "http://localhost:5173";
+ if (process.env.NODE_ENV !== "production") return "https://localhost:5173";
return "";
})();
@@ -311,6 +311,10 @@ export default defineConfig({
text: "Accept multiple payment methods",
link: "/guides/multiple-payment-methods",
},
+ // {
+ // text: "Create a payment link",
+ // link: "/guides/payment-links",
+ // },
{
text: "Proxy an existing service",
link: "/guides/proxy-existing-service",