universal payment

Universal Payment

由靜態頁面構成的萬能支付網頁。

Demo: pay.cnily.top

部署

1. 生成並保存各支付平台的收款碼並掃描得到的原始內容。

   • 建議使用微信讚賞碼而非收款碼。
   • 微信支付和QQ 支付存在限制，不能自動跳轉到支付頁面。

2. 將倉庫拉取至本地並在src/template.js中配置各支付平台的收款碼。

   • 在對應的支付平台後填入收款碼掃描得到的原始內容來自動生成圖片。
   • 若要使用自定義的收款碼圖片，可以將圖片置於src/images/目錄中並填入"[!img]" + require("./images/wechatpay.webp") ，或者填入"[!img] https://图片链接.example.com/"來使用指定網址的圖片。

3. 安裝Node.js 和npm 並執行下列命令

   npm install
   npm run build

   來構建頁面。

   • 最小化字體文件的功能僅在Windows 上構建時可用，在其他平台上構建將會產生較大的字體文件。
   • 構建得到的靜態頁面位於dist/目錄。

4. 將構建得到的靜態頁面部署於網站上，訪問/index.html即顯示支付頁面。

開發

src/template.js僅為模板，更多文本和鏈接配置（詳細配置）詳見src/scripts/config.ts文件

圖標和相應配置位於src/icon文件夾

其它樣式設置位於src/stylesheets/config.scss文件

URL 參數

• auto是否開啟自動識別UserAgent 並跳轉相應支付平台的網頁
• platform顯示指定支付平台，可選值為詳細配置中正則匹配的常量名，區分大小寫
• type顯示指定支付平台顯示的方式，具有以下可選值icon | logo | select