目錄
▲ 程式碼與使用技術
▲ 特別參數解說
廠商訂單編號 MerchantTradeNo
檢查碼 CheckMacValue
▲ 逐步示範建立訂單與確認付款
▲ 先理解，再應用
▲ 延伸閱讀程式碼與使用技術
需要用的是 Node.js 的 crypto 功能計算出檢查碼的雜湊值、fs 建立 index.html 檔案，並用 open (需要 npm i open 安裝)自動打開 index.html。
總之就是把一堆參數(payload) 以 POST 的方式送到 API 網址就好了。其實產生出來的內容也不過如下，只要把各參數貼到 <input> 內就好。
<!DOCTYPE html>
<html>
<head>
<title>全方位金流測試</title>
</head>
<body>
<form method="post" action="${API網址}">
<input name=${各種參數} value="${各種參數值}"><br/>
<input type ="submit" value = "送出參數">
</form>
</body>
</html>特別參數解說
廠商訂單編號 MerchantTradeNo
每一個帳號的廠商訂單編號都是獨一無二的，假設我用測試帳號 3002607 建立了訂單 od20240427195248587，其他的使用者就無法以 3002607 建立同樣編號的訂單。那麼該如何避免重複？應自訂一套最能避免重複的訂單產生邏輯，最好的方式就是用時間點表達。
const MerchantTradeNo = `od${new Date().getFullYear()}${(
new Date().getMonth() + 1
)
.toString()
.padStart(2, "0")}${new Date()
.getDate()
.toString()
.padStart(2, "0")}${new Date()
.getHours()
.toString()
.padStart(2, "0")}${new Date()
.getMinutes()
.toString()
.padStart(2, "0")}${new Date()
.getSeconds()
.toString()
.padStart(2, "0")}${new Date()
.getMilliseconds()
.toString()
.padStart(2, "0")}`;我從 new Date.() 中取得當今時間點的年/月/日/時/分/毫秒，加上前墜詞 (“od”)，如此一來除非在同樣毫秒的剎那也有人以同樣的訂單編號建立訂單，否則很難重複。
如果覺得以上的程式碼龐大又醜陋，那也可以一行解決：
const now = `od${Date.now()}`這樣的寫法產生的 MerchantTradeNo 數字會以 timestamp 的方式呈現。
檢查碼 CheckMacValue
要知道檢查碼是什麼請參閱：
用 Node.js 輕鬆實現雜湊演算法 — — Hash 與 Hmac
在發送的參數中，檢查碼自身也是參數之一，而檢查碼又是從其他參數計算出來的，因此要收集完整所有參數後，計算出檢查碼成為另一個新參數，最後把所有參數連帶檢查碼作為 payload 發送至 API 網址。
逐步示範建立訂單與確認付款
1. 修改參數
app.sj 中，「一、選擇帳號，是否為測試環境」可改可不改。3002607 是綠界提供的測試帳號，要使用其他測試帳號可看這裡。
主要要改的，就是在「二、輸入參數」修改參數。這些是成功建立訂單最基本的必填參數，實際上還有很多其他參數，更多參數與說明請參閱技術文件。
2. 送出參數
執行本檔案，例如於 VS Code 就是按下 F5。這時瀏覽器會自動打開 index.html 頁面。按下按鈕送出參數。
3. 導轉到全方位金流付款頁面
這時順利來到付款頁面了，可以輸入測試用信用卡號完成付款：
4311–9522–2222–2222 安全碼 222
信用卡的有效期限只要晚於現在即可。持卡人資料隨便填。
按下「立即付款」，並依指示輸入 3D 驗證密碼。
4. 付款成功
付款成功，但還沒結束，複製訂單編號。
5. 到廠商管理後台查詢訂單
測試帳號的登入帳號密碼：https://developers.ecpay.com.tw/?p=2856
到訂單查詢輸入廠商訂單編號，確認訂單有建立並付款成功：
恭喜！串接金流到確認付款全部完成了！
先理解，再應用
本範例檔只是簡單展示如何串接金流，但不該應用於實務上，例如金鑰 HashKey/Hash IV 是機密，不該放在前端而是後端，避免外洩。要應用於實際的電商頁面還需要做很多調整。本文作為開端，希望能夠以最簡單的方式幫助讀者對於串接綠界金流建立初步的了解，經過理解後，都能夠自行串接，並應用於實務上。
延伸閱讀
我之前撰寫與綠界有關的示範程式：
