有鑑於購物車的電商系統一直是前端工程師最常見的SideProject之一。
但是許多人對於訂單成立後的結帳付款，卻不了解後續要做哪些事，以及有哪些常用的付款方式。
因此寫了一系列的介紹文，帶各位一窺全貌，了解電商平台在使用信用卡刷卡結帳時如何進行金流串接的。
本篇教學以中國信託的信用卡刷卡為教學範例。
信用卡刷卡付款的方式，又細分為兩種開發方式:
-
URL授權方式
-
API授權方式
URL授權方式
這樣的方式我方不經手使用者信用卡刷卡的部分，所有卡號及到期日年月的輸入都在銀行的信用卡刷卡頁面操作，因此也就不會有儲存卡號的疑慮。
以中國信託刷卡為例:當進行信用卡刷卡結帳時，系統會自動跳轉到中信的刷卡介面，並在使用者輸入完卡號，授權碼以及手機的3D驗證後回傳刷卡結果。
因此整個流程會是這個樣子:
根據上圖的流程我們可以分為以下幾個步驟，以中國信託刷卡為例:
消費者刷卡結帳=>呼叫結帳API進行結帳=>產生刷卡頁URL給前端Redirect=>消費者填寫卡號與驗證碼=>驗證完成=>回傳成功/失敗結果。
產生刷卡頁URL
1. 前端將訂單提交至後端API，在處理完訂單後，會使用中國信託提供的加密library 將特店編號、訂單編號、金額、壓碼等資料進行加密，再將參數帶入中信所提供的SSLAuthUI.jsp內，最終回傳給前端url進行Redirect。
Encrypt enc = new Encrypt();
enc.MerchantID = MerchantID;
enc.TerminalID = TerminalID;
enc.OrderNo = OrderId;
enc.AuthAmt = price;// 刷卡金額
enc.TxType = "0"; // 交易方式 0 一般交易 1分期交易
enc.AuthResURL = $"{apiUrl}Order/Redirect/{phone}";//刷卡完 成後要導向的頁面
enc.Key = Key;
enc.MerchantName = "購物平台";
enc.AutoCap = "1";// 是否自動入請款檔
填寫卡號資訊
2. 在步驟一填完這些資訊後，會產生一組SSLAuthUI.jsp的URL，後面會帶上merID與URLEnc作為參數，返回給前端Redirect做卡號填寫。
回傳交易結果
3. 使用者輸入完刷卡資訊後，中國信託會根據步驟一所填寫的AuthResURL 參數，呼叫我們填寫的API，並將刷卡後的結果回傳至API內。此時就可以根據刷卡後的交易結果判斷判斷，返回給前端的刷卡成功或失敗的頁面。
到這裡刷卡交易的流程就結束了。
透過中國信託的信用卡授權頁，我們只需要判斷刷卡交易回傳的結果來決定要顯示給user成功/失敗的頁面就行了。
至於退款、取消請款的功能就無法透過url授權的方式來完成，必須要透過API授權的方式才能完成此交易。
下一篇我們將講到信用卡刷卡串接API授權的方式：
以上文章敘述如有錯誤及觀念不正確，請不吝嗇指教:)
有任何家教、案子 或技術相關問題 請都歡迎聯繫我