mirror of
https://github.com/tiennm99/payos-playground.git
synced 2026-05-31 06:11:54 +00:00
tiennm99
2642ef2dc4
createRedis() now returns a { client, prefix } handle. Accepts
both UPSTASH_REDIS_REST_* and KV_REST_API_* (Vercel Marketplace
alias) env vars via ?? fallback. KEY_PREFIX env (default
'payos-playground:') namespaces every physical key through the
new pkey() helper.
store.js routes all reads/writes through pkey(handle, ...) so
generic logical keys ('payments:recent', 'payment:{code}') can
no longer collide on a shared Upstash DB. Aligns with the
portfolio pattern in vngeoguessr/store-scraper-bot.
Locals typing updated to RedisHandle in app.d.ts; consumers pass
the handle through unchanged.
PayOS Playground
A SvelteKit demo that lets you create PayOS payment links, scan a QR code, and receive webhook status updates — all persisted in Upstash Redis.
Tech Stack
| Layer | Package | Version |
|---|---|---|
| Framework | SvelteKit | ^2.x |
| UI | Svelte (runes API) | ^5.x |
| Adapter | @sveltejs/adapter-vercel | ^6.x |
| Build | Vite | ^6.x |
| Payment | @payos/node | ^2.x |
| Storage | @upstash/redis | ^1.38.x |
| Runtime | Node.js | 24.x |
| Package manager | pnpm | 11.x |
Prerequisites
- Node.js 24 (
node --versionshould printv24.x.x) - pnpm 11 (
pnpm --versionshould print11.x.x) - A PayOS merchant account — sign up at payos.vn and obtain your Client ID, API Key, and Checksum Key from the dashboard
- An Upstash Redis database — create a free one at console.upstash.com and copy the REST URL and token
Setup
# 1. Clone
git clone https://github.com/your-username/payos-playground.git
cd payos-playground
# 2. Install dependencies
pnpm install
# 3. Configure environment
cp .env.example .env
Edit .env and fill in all six values:
PAYOS_CLIENT_ID=...
PAYOS_API_KEY=...
PAYOS_CHECKSUM_KEY=...
UPSTASH_REDIS_REST_URL=https://...
UPSTASH_REDIS_REST_TOKEN=...
PUBLIC_BASE_URL=http://localhost:5173 # change to your Vercel URL after deploy
Development
pnpm dev
Open http://localhost:5173. Create a payment — the checkout URL and QR code are returned immediately.
PayOS Webhook Setup
PayOS requires a publicly reachable URL to send payment status updates.
- Deploy to Vercel first (see below)
- Go to the PayOS dashboard → Developer → Webhook
- Set the webhook URL to:
https://<your-deploy>.vercel.app/api/webhook - Save — PayOS will send a verification ping, which the app handles automatically
Deploy to Vercel
- Push this repository to GitHub
- Import the repo in Vercel
- Add these Environment Variables in the Vercel project settings:
PAYOS_CLIENT_IDPAYOS_API_KEYPAYOS_CHECKSUM_KEYUPSTASH_REDIS_REST_URLUPSTASH_REDIS_REST_TOKENPUBLIC_BASE_URL(set to yourhttps://<deploy>.vercel.app)
- Deploy — Vercel detects SvelteKit automatically via
@sveltejs/adapter-vercel
CI
GitHub Actions runs on every push and pull request:
pnpm install --frozen-lockfilepnpm run lint(ESLint flat config)pnpm run check(svelte-check + JSDoc types)pnpm run build(no env vars required — lazy singletons)
Notes
- No sandbox: PayOS does not provide a public sandbox environment. Use small real VND amounts (minimum 1,000 VND) for testing.
- Order codes: Generated from
Date.now()(millisecond timestamp) — unique per payment within a session. - Payment descriptions: Limited to 25 characters by PayOS.
- Redis is optional for browsing: The
/paymentspage degrades gracefully if Upstash env vars are not set.