文档介绍了国内金流商的服务，包括移动支付、在线刷卡和实体刷卡服务以及不同会员类型的收费结构。描述了后端API的测试和前后端整合的开发环境搭建过程，涉及技术使用如Python和Vue.js。提供了注册金流会员的链接和详细的开发指引。

1. redhung@hung.red
前後端串接⾦流API開發
⾦融科技與實務

2. >_ ECHO `WHOAMI`
Major in Cyber Security
Reversing & Pwning
C/C++, ASM, Java, Python

3. >_ CAT ./OVERVIEW
國內⾦流商
簡介
0x0
0x1
後端串接API測試
0x2
前後端整合
串接API
0x3
建置開發環境

4. 國內⾦流商介紹

5. >_ 國內⾦流商介紹

6. >_ 國內⾦流商介紹
服務項⽬包含有⾏動⽀付 Swipy 收付便、e’safe 實
體刷卡(無設備)、BuySafe 線上刷卡機制、
BuySafe EZ 無購物⾞官網、EDC POS 實體無限刷卡
機、mPOS ⾏動刷卡機制 。
⼀年型年費為 $12,000，需要收取徵信費 $800，
⾸次設定費為 $4,000

7. >_ 國內⾦流商介紹
有線上⾦流也有實體刷卡機服務，加值服務有 ⽀
付寶 串接、Apple Pay、Android Pay 設定。ezPay
台灣⽀付 是⽬前唯⼀以綜合⾦流⽀付產業基礎，
取得電⼦⽀付專營的服務公司。
會員分成「⼀般會員」、「進階會員」、「商務
會員」等，⼀般會員僅有提領與轉帳的功能；進
階會員擁有基本線上⾦流服務；商務會員需繳年
費 $18,000，且有保證⾦ $30,000。

8. >_ 國內⾦流商介紹
個⼈會員僅需註冊即能收款，不⽤額外收費，僅
需付⼿續費，此⽅案對於個⼈賣家、部落客或直
直播主即為適⽤。服務包含有實況主收款、個⼈
賣家 收款連結、⼀址付 等。
會員分成「個⼈會員」、「商務會員」、「特約
會員」，每⽉的收款額度分別為：信⽤卡-30萬 /
非信⽤卡-無上限、信⽤卡-50萬 / 非信⽤卡-無上
限、信⽤卡-議定 / 非信⽤卡-無上限。

9. >_ 註冊⾦流會員
• https://cwww.newebpay.com/ (測試環境)

10. >_ 註冊⾦流會員
• https://cwww.newebpay.com/ (測試環境)

11. >_ 註冊⾦流會員
• https://cwww.newebpay.com/ (測試環境)

12. >_ 註冊⾦流會員
• https://cwww.newebpay.com/ (測試環境)

13. >_ 註冊⾦流會員
• https://cwww.newebpay.com/ (測試環境)

14. 建置開發環境

15. >_ 建置開發環境

16. >_ 建置開發環境
• Python3
• pip3 install Flask
• pip3 install flask-CORS
• pip3 install pycryptodome

17. >_ 建置開發環境
• Vue.js 3
• https://nodejs.org/en/download/
• npm install -g @vue/cli
• vue init webpack frontend
• npm install axios --save
• npm install bootstrap --save
• npm run serve

18. 後端串接API測試

19. >_ 後端串接API測試
• https://github.com/r3dhun9/Newebpay_API

20. >_ 後端串接API測試
• Project架構
Fintech_API
backend
frontend
main.py
templates
utils
Directory
File

21. >_ 後端串接API測試
• main.py — 後端server的進入點

22. >_ 後端串接API測試
• utils => Crypto.py — 處理加密訊息

23. >_ 後端串接API測試
• python3 main.py — 開啟後端伺服器

24. >_ 後端串接API測試
• python3 main.py — 開啟後端伺服器

25. >_ 後端串接API測試
• python3 main.py — 開啟後端伺服器

26. 前後端整合串接API

27. >_ 前後端整合串接API
• vue init webpack frontend — 使⽤vue-cli創建新的project

28. >_ 前後端整合串接API
• App.vue — 根元件，所有元件的渲染起始點

29. >_ 前後端整合串接API
• main.js — 核⼼進入點，與根元件⼀起載入並初始化vue

30. >_ 前後端整合串接API
• components => 新增Checkout.vue

31. >_ 前後端整合串接API
• router => index.js — 更改根路徑導向Checkout.vue元件

32. >_ 前後端整合串接API
• npm run dev — 開啟前端測試伺服器與後端互動看看

33. >_ 前後端整合串接API
• npm run dev — 開啟前端測試伺服器與後端互動看看

34. >_ 前後端整合串接API
• npm run dev — 開啟前端測試伺服器與後端互動看看

35. >_ 前後端整合串接API
• npm run dev — 開啟前端測試伺服器與後端互動看看

36. >_ 前後端整合串接API
• npm run dev — 開啟前端測試伺服器與後端互動看看

37. THANK YOU!
redhung@hung.red
r3dhun9 @r3dhun9 Philip Chen