WebAPI串接金流

2018-08-17

2004
0

台灣金流選擇，這篇(2018-01)有個大概介紹為什麼需要金流公司。這篇介紹台灣有哪幾家可用的第三方金流公司。最後選定智付通，因為他免年費免設定費這篇比較，這篇有教學怎麼設定智付通帳號。

此篇主要紀錄串接智付通，前端: 使用Vue.js 製作SPA頁，後端用.Net framework WebAPI。雲端採用GCP，不得不說VM真貴，平均1天15塊美金 (包含IIS，MSSQL)。
測試VISA卡串接智付通(測試版)，以下為設定步驟:

先使用智付通的測試網站註冊，完全測試完再去正式網站註冊。
註冊完後開立商店
點選商店資料設定 → 詳細資料
進入詳細資料後，點選啟用信用卡一次付清，由於是測試機他很快就會開啟，正式機的話要提供商品頁面，付款方式，購物車等等，會審核。
將API串接的金鑰，複製到專案內的config，後續使用
填寫你要回傳的網址: ，這兩個方法的Authentication拿掉。
1. Notify URL: 填寫要觸發後端更新訂單為已付款的，裡面會做金流傳過來的驗證
2. Return URL: 金流完成要顯示給使用者的頁面
注意: 網站後台的模擬交易(WebATM)跟我要測試的信用卡(Credit)傳送參數跟方式是不同的。雖然我兩個都有實測了。
這是智付通提供的串接程式碼: (不得不說很攏長)
後來我還找到Demo這篇，他整理得很完整，大家可以參考他的，他連物件都建好了。
由於我前端是採用Vue CLI模式去接，所以在我的訂單完成頁，在取得訂單資料時，會製作需要往金流傳的aes跟sha。
1. 後端:
2. 前端:
接著前端就可以form-post送出到測試機位置，正式機。
送出後會出現:
1. 一次付清測試用卡號: 4000-2211-1111-1111
2. 有效日期跟末三碼隨便填即可
接著使用fiddler查看，轉傳到，裡面參數
成功頁:信用卡一次付清
失敗頁: 我超過時間後回傳結果
在fiddler內看不到傳到notify的Url，以防有人一直試，背景處理了，但會有Return Url的網址，建議別使用Return Url做為驗證跟更新資料的事
最後到後端頁面查看是否更新了。