Payment Page

一個現代化的付款展示網頁，支援台灣本地和國際付款方式，具備自動生成台灣支付 QR Code (TWQRP) 功能。

✨ 特色功能

• 💳 多種付款方式：台灣銀行轉帳、電子支付、國際付款
• 🇹🇼 TWQRP 自動生成：符合台灣金管會標準的支付 QR Code
• 📱 PWA 支援：可安裝為手機應用程式
• 🎨 現代化設計：深色主題、響應式佈局
• 🔄 即時功能：一鍵複製、動態 QR Code 生成

💳 支援的付款方式

類型	說明
台灣銀行轉帳	自動生成 TWQRP
電子支付	LINE Pay、悠遊付、街口支付
國際付款	PayPal、Wise
FPS 數轉快	香港快速支付系統

⚙️ 配置說明

付款方式配置 (payment.json)

{
  "payment_methods": [
    {
      "name": "銀行名稱",
      "type": "tw_bank_transfer",
      "bank_code": "013",
      "bank_account": "123456789012",
      "description": "付款說明"
    },
    {
      "name": "PayPal",
      "type": "external_link",
      "link": "https://paypal.me/username"
    },
    {
      "name": "FPS 數轉快",
      "type": "fps",
      "id": "123456789"
    }
  ]
}

付款類型說明

類型	必填欄位	說明
tw_bank_transfer	bank_code, bank_account	台灣銀行轉帳/電子支付
external_link	link	外部付款連結
fps	id	香港 FPS 數轉快

🇹🇼 TWQRP 功能

TWQRP（Taiwan QR Code Payment）是台灣金管會推動的統一支付 QR Code 標準。

自動生成特色

• ✅ 標準合規：完全符合台灣金管會 TWQRP 標準
• ✅ 自動補零：帳號自動補零到16位
• ✅ 訊息支援：可包含自訂付款訊息

TWQRP 格式

TWQRP://TW/158/02/V1?D5=銀行代碼&D6=帳號&D1=金額&D9=訊息

🎨 設計特色

• 深色主題：現代化漸層背景設計
• 響應式佈局：完美支援桌面、平板、手機
• 互動效果：卡片懸停動畫、模態框效果

📱 PWA 功能

• 可安裝：可安裝到手機主畫面
• 離線支援：Service Worker 快取
• 原生體驗：全螢幕模式

🛠 技術架構

• HTML5：語義化標籤，PWA 支援
• CSS3：Grid、Flexbox、動畫、響應式設計
• JavaScript ES6+：模組化、非同步處理
• QRCode.js：QR Code 生成
• Font Awesome：圖示系統

📊 瀏覽器支援

瀏覽器	版本	支援狀態
Chrome	60+	✅ 完整支援
Firefox	55+	✅ 完整支援
Safari	12+	✅ 完整支援
Edge	79+	✅ 完整支援

🔧 自訂開發

修改主題色彩

:root {
    --primary-color: #60a5fa;    /* 主色調 */
    --primary-dark: #3b82f6;     /* 深色調 */
    --gradient-background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
}

新增付款方式

1. 編輯 payment.json
2. 根據類型填入必要欄位
3. 重新載入頁面即可生效

📁 專案結構

├── index.html                    # 主要網頁檔案
├── styles.css                    # 深色主題 CSS 樣式
├── script.js                     # 主要 JavaScript 功能
├── twqr-generator.js             # 台灣支付 QR Code 生成器
├── payment.json.template         # 配置範本
└── README.md                     # 專案說明文件

🤝 貢獻

1. Fork 本專案
2. 改完之後發 PR 讓這個東西變得更好

📄 授權

本專案採用 GNU Affero General Public License v3.0 (AGPL-3.0) 授權條款 - 詳見 LICENSE 檔案

🙏 致謝

• TWQR 產生器 - TWQR 製作
• QRCode.js - QR Code 生成
• Font Awesome - 圖示系統
• Google Fonts - 字體支援

---

注意: 本專案僅供展示用途，實際付款請確認收款方資訊的正確性。