Báo cáo chuyên Đề học phần thực tập hệ thống thông tin tích hợp Đề tai tích hợp api Đối tác vnpay vao ứng dụng fin agent

Giới thiệu doanh nghiệpCông ty Cổ phần FinLife Việt Nam là công ty cung cấp đa dạng dịch vụ thuộc nhiều lĩnh vực: Bảo hiểm trực tuyến, nhân thọ, phi nhân thọ, giới thiệu người dùng tham

TRƯỜNG ĐẠI HỌC ĐIỆN LỰC

KHOA CÔNG NGHỆ THÔNG TIN

Sinh viên thực hiện : TAO NHẬT NINH

Giảng viên hướng dẫn : NGÔ NGỌC

MỤC LỤC

LỜI NÓI ĐẦU 1

CHƯƠNG 1: GIỚI THIỆU VỀ ĐƠN VỊ THỰC TẬP 2

1.1 Giới thiệu doanh nghiệp 2

1.1.1 Giới thiệu phòng công nghệ Error! Bookmark not defined. 1.2 Các sản phẩm công nghệ 3

CHƯƠNG 2: ĐẶC TẢ KẾT NỐI 4

2.1 Tổng quan chức năng 4

2.1.1 Phạm vi 4

2.1.2 Mục tiêu 4

2.1.3 Đối tác cung cấp 4

2.2 Đặc tả kết nối 5

2.2.1 Sơ đồ tuần tự 5

CHƯƠNG 3: CÀI ĐẶT 7

3.1 Cài đặt 7

3.1.1 React Native (Frontend) 7

3.1.2 Ruby on Rails (API) 9

3.2 Giao diện 11

3.2.1 Giao diện màn hình chính 11

3.2.2 Giao diện Ví Fin Agent 12

3.2.3 Giao diện cửa sổ chọn loại hình nạp tiền 13

3.2.4 Giao diện màn hình Nạp tiền 14

3.2.5 Giao diện cổng thanh toán VNPay 15

KẾT LUẬN 19

TÀI LIỆU THAM KHẢO 21

LỜI NÓI ĐẦU

Hiện nay công nghệ thông tin đang phát triển mạnh mẽ, nhanh chóng và xâm nhập vàonhiều lĩnh vực khoa học, kỹ thuật cũng như trong cuộc sống Nó trở thành công cụ đắc lực trongnhiều ngành nghề như giao thông, quân sự, y học, xã hội,… và đặc biệt hơn là trong dịch vụngân hàng số nói chung và giao dịch trực tuyến nội bộ nói riêng Việc sử dụng thiết bị di động vàdịch vụ ngân hàng số là một yêu cầu cần thiết nhằm xóa bỏ những phương pháp thanh toán lạchậu, lỗi thời gây tốn kém về nhiều mặt

Mặc dù đã rất cố gắng hoàn thiện đồ án với tất cả sự nỗ lực, tuy nhiên, do bước đầu đivào thực tế, tìm hiểu và xây dựng đồ án trong thời gian có hạn, và kiến thức còn hạn chế, nhiều

bỡ ngỡ, nên đồ án “Tích hợp API đối tác VNPay vào ứng dụng Fin Agent” chắc chắn sẽ khôngthể tránh khỏi những thiếu sót Chúng em rất mong nhận được sự quan tâm, thông cảm và nhữngđóng góp quý báu của các thầy cô và các bạn để đồ án này ngày càng hoàn thiện hơn

Em xin chân thành cám ơn thầy Ngô Ngọc Thành đã tận tâm hướng dẫn chúng em quatừng buổi học trên lớp cũng như những buổi nói chuyện, thảo luận về môn học Trong thời gianđược học tập và thực hành dưới sự hướng dẫn của thầy cô, chúng em không những thu được rất

nhiều kiến thức bổ ích, mà còn được truyền sự say mê và thích thú đối với bộ môn “Thực tập hệ

thống thông tin tích hợp” Nếu không có những lời hướng dẫn, dạy bảo của thầy cô thì chúng em

nghĩ đồ án này của chúng em rất khó có thể hoàn thành được!

Hà Nội, ngày 01 tháng 07 năm 2022

Sinh viên thực hiện

Tào Nhật Ninh

CHƯƠNG 1: GIỚI THIỆU VỀ ĐƠN VỊ THỰC TẬP 1.1 Giới thiệu doanh nghiệp

Công ty Cổ phần FinLife Việt Nam là công ty cung cấp đa dạng dịch vụ thuộc nhiều lĩnh vực: Bảo hiểm trực tuyến, nhân thọ, phi nhân thọ, giới thiệu người dùng tham gia hưởng thu nhập gián tiếp, giới thiệu khách hàng các sản phẩm đầu tư, vay vốn; giúp khách hàng tối ưu chi phí khi tham gia mua sắm bảo hiểm trực tuyến, hỗ trợ bồi thường bảo hiểm trực tiếp trên ứng dụng; giúp các cộng tác viên bảo hiểm có thể khai thác sản phẩm phi nhân thọ online từ các công ty bảo hiểm đã xây dựng sản phẩm bằng hình thức hợp đồng điện tử… Được thành lập năm 2017, Finlife hiện là đơn vị kinh doanh trong lĩnh vực xây dựng hệ thống môi giới bảo hiểm hàng đầu, ghi dấu ấn mạnh mẽ trên thị trường qua việc ký kết với các đối tác bảo hiểm công nghệ lớn như FWD, Fubon, VBI, PTI…

Hình 1.1: Logo công ty

Hướng tới mục tiêu tập trung phát triển mạng lưới, liên tục thay đổi làm mới mình, Finlife với hệ thống văn phòng trải dài từ Bắc vào Nam và hệ sinh thái FinGroup đa dạng trong lĩnh vực công nghệ, bảo hiểm, tài chính đem đến những sản phẩm dịch vụ với chất lượng vượt trội, những giá trị sống đích thực và trải nghiệm dịch vụ khách hàng tốt nhất Để khẳng định vị thế của mình và đáp lại sự cố gắng nỗ lực của các thành viên trong Finlife, sự đồng hành tin tưởng tuyệt đối của quý đối tác và khách hàng, Công ty CP Finlife Việt Nam đã suất xắc đạt giải

thưởng Sao Khuê năm 2022, một giải thưởng vinh dự cho việc là công ty hàng đầu trong việc

chuyển đổi số của ngành tài chính và bảo hiểm tại Việt Nam Công ty có trụ sở tại Số 88 Tô Vĩnh Diện, Quận Thanh Xuân, Hà Nội

Website: www.finlife.com.vn

1.1.1 Giới thiệu phòng công nghệ

Phòng công nghệ FinLife là phòng phát triển hệ thống website, ứng dụng, phần mềm phục vụ cho hệ thống tư vấn viên bảo hiểm của công ty

Mục tiêu: Nâng cấp, cải tiến và nâng cao nghiệp vụ của hệ thống ứng dụng Đưa ra các sản

phẩm liên quan đến tài chính công nghệ, bảo hiểm công nghệ giúp người dùng tiếp cận dễ dàngnhất với các dịch vụ công nghệ mới

Tầm nhìn: Phòng công nghệ FinLife nỗ lực đồng hành phát triển cùng hệ sinh thái FinGroup.

Trong 5 năm tiếp theo, phòng công nghệ FinLife cố gắng vươn mình và thành lập FinSoft

 Portal: là trang cổng thông tin của toàn bộ Hệ sinh thái FinGroup, trang web cung cấpthông tin đơn hàng, hồ sơ, hợp đồng, báo cáo hệ thống, vinh danh,

 HRMS: là trang web quản lý công việc nhân viên, quản lý công việc của hệ thống tư vấnviên 8 cấp

Các sản phẩm phục vụ cộng tác viên:

 FinMe: là ứng dụng xoay quanh các sản phẩm bảo hiểm phi nhân thọ Finme hướng tớiđối tượng người dùng trẻ Khi sử dụng ứng dựng Finme, người dùng sẽ là một cộng tácviên, họ có thể ứng tuyển lên tư vấn viên, hoặc chia sẻ các sản phẩm phi nhân thọ và ănhoa hồng từ đó Vào năm 2022, ứng dụng Finme và Công ty CP Finlife Việt Nam đã suất

xắc đạt giải thưởng Sao Khuê năm 2022, một giải thưởng vinh dự cho việc là công ty

hàng đầu trong việc chuyển đổi số của ngành tài chính và bảo hiểm tại Việt Nam

 Website finme.com.vn: là trang web tổng hợp và so sánh nhiều sản phẩm bảo hiểm tươngđương nhau, giúp người dùng lựa chọn sản phẩm phù hợp nhất cho khách hàng Trangweb hướng đến đối tượng khách vãng lai, người dùng tự mua sản phẩm mà không cầnqua tư vấn

 Fima PP: là ứng dụng cho vay ngang hàng giữa người với người

CHƯƠNG 2: ĐẶC TẢ KẾT NỐI 2.1 Tổng quan chức năng

2.1.1 Phạm vi

- Người dùng ứng dụng Fin Agent là tư vấn viên, cộng tác viên bảo hiểm của FinLife

- Người dùng có nhu cầu giao dịch với tài khoản VNPay

2.1.2 Mục tiêu

- VNPay là một giải pháp giao dịch trực tuyến nhanh chóng, tiện lợi và an toàn cho người dùng

- VNPay cho phép người dùng chủ động thanh toán với nhiều loại hình thanh toán, từ quét

QR code đến giao dịch với đa ngân hàng

- Thuận tiện và nhanh chóng cho người dùng

2.1.3 Đối tác cung cấp

Công ty CP Giải pháp Thanh toán Việt Nam - VNPAY

VNPay là công ty Fintech hàng đầu trong lĩnh vực thanh toán điện tử tại Việt Nam VNPay ứng dụng công nghệ hiện đại, đột phá trong lĩnh vực thanh toán điện tử nhằm xây dựng

hệ sinh thái dịch vụ đa dạng về sản phẩm, tiện ích, mang tới những trải nghiệm dịch vụ ưu việtphục vụ khách hàng và đối tác

Với lĩnh vực kinh doanh cốt lõi Tài chính - Ngân hàng, Công nghệ Thông tin - Viễnthông, VNPAY-QR, Mobile Banking, SMS Banking, VnTopup, VnPayBill, VnTicket, VnShop, (theo Báo Đầu Tư)

Hình 1.1: Dịch vụ VNPay

2.2 Đặc tả kết nối

2.2.1 Sơ đồ tuần tự

a App call app

Hình 2.2.1 a: Sơ đồ tuần tự app call app

Mô tả sơ đồ:

Bước 1: Khách hàng vào ứng dụng Fin Agent thực hiện nạp tiền vào Fin Agent và chọn “Thanh

toán qua VNPAY” Hệ thống Merchant lưu thông tin thanh toán của giao dịch khởi tạo

Bước 2: Ứng dụng Fin Agent gửi thông tin thanh toán và sử dụng SDK để chuyển hướng mở

URL thanh toán của VNPAY

Bước 3: Khách hàng chọn ngân hàng chuyển hướng thanh toán, mở ứng dụng thanh toán của

ngân hàng đăng nhập và xác thực thanh toán

Bước 4: Xác thực thanh toán thành công, ứng dụng của ngân hàng gọi và mở lại ứng dụng Fin

Agent Đồng thời hệ thống ngân hàng phản hồi lại kết quả thanh toán cho Cổng thanh toánVNPAY

Bước 5: Hệ thống Cổng thanh toán VNPAY gọi IPN Merchant trả kết quả thanh toán Hệ thống

Merchant cập nhật trạng thái thanh toán cho giao dịch

b ATM - Tài khoản - Thẻ quốc tế

Hình 2.2.1 b: Sơ đồ tuần tự thanh toán với tài khoản ATM

Mô tả sơ đồ:

Bước 1: Khách hàng truy cập ứng dụng Fin Agent đặt hàng hóa - dịch vụ và chọn thanh toán trựctuyến qua VNPAY

Bước 2: Ứng dụng Fin Agent gửi yêu cầu thanh toán đến VNPAY

Bước 3: Khách hàng nhập thông tin thẻ ATM - Tài khoản tại VNPAY hoặc trang thanh toán củangân hàng VNPAY gửi yêu cầu xác thực thông tin ATM - tài khoản đến ngân hàng Nếu xácthực thực tài khoản thành công, ngân hàng sẽ gửi mã OTP cho khách hàng Khách hàng chuyểnsang bước 4

Bước 4: Khách hàng nhập mã OTP để hoàn tất giao dịch VNPAY gửi yêu cầu xác thực OTP đếnngân hàng Nếu xác thực OTP thành công, hệ thống của ngân hàng trừ tiền tài khoản của kháchhàng và phản hồi lại kết quả thành công cho VNPAY Chuyển sang Bước 5

Bước 5: VNPAY gửi phản hồi kết quả thanh toán đến ứng dụng Fin Agent thông qua 2 URL củamerchant:

- Return URL: VNPAY phản hồi kết quả thanh toán và chuyển hướng về giao diện thông báo kếtquả thanh toán của ứng dụng Fin Agent

- IPN URL(server call server): Nhận được kết quả thanh toán VNPAY phản hồi, IPN của FinAgent thực hiện cập nhật kết quả và phản hồi tình trạng cập nhật cho VNPAY

3.1 Cài đặt CHƯƠNG 3: CAI ĐẶT

3.1.1 React Native (Frontend)

Bước 1: thêm thư mục react-native-vnpay-merchant vào dự án

Bước 2: Thêm module react-native-vnpay-merchant từ package.json

Hình 3.1.1 b: Thêm packages vnpay vào packeage.json

Bước 3: Chạy lệnh “yarn install” hoặc “yarn”

Bước 4: Vào thư mục ios và chạy lệnh “pod install”

Bước 5: Tạo hooks useVnpay và EndPoint

Hình 3.1.1 c: Thêm EndPoint Vnpay

Bước 6: Thêm component “SelectPicker” chọn phương thức thanh toán và truyển giá trị

rechargeType và component NewRecharge

Hình 3.1.1 d: Thêm component

Bước 7: Gọi lại hook useVnpay ở component NewRecharge, đặt điều kiện ShowVnpayOption

Hình 3.1.1 e: Gọi lại hook useVnpay

3.1.2 Ruby on Rails (API)

Bước 1: Tạo class RechargeService

Bước 2: Tạo class PaymentService

Hình 3.1.2 b: Tạo class PaymentService

Bước 3: Tạo route vnpay_contracts

Hình 3.1.2 b: Tạo route vnpay_contracts

3.2 Giao diện

3.2.1 Giao diện màn hình chính

Hình 3.2.1: Giao diện màn hình chính

3.2.2 Giao diện Ví Fin Agent

Hình 3.2.2: Giao diện Ví Fin Agent

- Người dùng nhập số tiền muốn rút -> Rút tiền

- Người dùng nhấn chọn vào “Nhập số tiền bạn muốn nạp”

3.2.3 Giao diện cửa sổ chọn loại hình nạp tiền

Hình 3.2.3: Giao diện cửa sổ chọn loại hình nạp tiền

- Người dùng nhấn chọn “Chuyển khoản” -> ứng dụng chuyển sang màn thông tin chuyển khoản quay ngân hành

3.2.4 Giao diện màn hình Nạp tiền

Hình 3.2.4: Giao diện màn hình nạp tiền

- Người dùng nhập số tiền muốn nạp qua VNPay vào Ví Fin Agent hoặc chọn nhanh các lựachọn 200.000đ, 300.000đ,

- Người dùng nhấn chọn vào nút “Xác nhận” -> ứng dụng chuyển sang màn hình tích hợp cổng thanh toán VNPay

3.2.5 Giao diện cổng thanh toán VNPay

Hình 3.2.5 a: Giao diện cổng thanh toán VNPay

- Người dùng chọn loại hình thanh toán muốn sử dụng

+ “Thanh toán qua ứng dụng hỗ trợ VNPAY QR” -> mở ứng dụng VNPAY (nếu đã càiđặt)

+ “Thanh toán quét mã VNPAY QR” -> hiển thị mã QR code thanh toán số tiền tươngứng

Hình 3.2.5 b: Giao diện quét mã QR code

- Người dùng quét mã QR code để thanh toán -> ứng dụng bật mở thông báo “Giao dịch thành công”

- Người dùng nhấn chọn nút “Hủy” -> ứng dụng bật mở yêu cầu xác nhận hủy thanh toán giao dịch

Hình 3.2.5 c: Giao diện xác nhận lại yêu cầu hủy thanh toán

Hình 3.2.5 d: Giao diện thông báo thanh toán không thành công

Kết quả đạt được KẾT LUẬN

Quá trình nghiên cứu và thực hiện cài đặt chức năng giao dịch trực tuyến qua Cổng thanhtoán VNPAY theo sự khảo sát và yêu cầu của người dùng đã hoàn thành và đạt một số kết quảsau:

- Hiểu được nghiệp vụ của quy trình giao dịch trực tuyến

- Thông qua nghiệp vụ kết hợp với mục đích thực hiện tin học hóa, mô tả chức năng củatính năng

- Xây dựng chức năng thông qua kết quả thu thập được qua quá trình khảo sát, phân tíchchức năng và đặc tả chức năng

Ưu nhược điểm của chức năng

Ưu điểm:

- Chức năng có giao diện thân thiện dễ sử dụng

- Quản trị thuận tiện

- Đã tối ưu với thiết bị người dùng

- Đã tối ưu giữa server Fin Agent và server VNPAY

Khuyết điểm

- Cần thực hiện quá nhiều bước để đi đến hoàn thành giao dịch

- Tốc độ chưa đạt hiệu quả tốt nhất

Hướng phát triển

- Giải pháp hoàn toàn có thể mở rộng dễ dàng theo lượng giao dịch và có thể tích hợp với

hệ thống IT và frontend của Fin Agent hiện tại

- Chức năng có thể mở rộng mà không làm gián đoạn dịch vụ

- Việc bổ sung thêm Server để san tải cũng ko làm ảnh hưởng đến dịch vụ

Tác động mạnh mẽ của Công nghệ thông tin đã tạo ra nhiều thay đổi trong đời sống kinh tế

xã hội Trong nền kinh tế thị trường, nền văn hóa xã hội Việt Nam, việc giảm thiểu tối đa nguồnlực và tối ưu hóa hiệu suất làm việc trở thành vấn đề sống còn, việc ứng dụng tin học vào công

Trong đề tài “Tích hợp API đối tác VNPAY và ứng dụng Fin Agent” mục đích để thựchiện giao dịch trực tuyến nhanh chóng và tiện lợi, giúp người dùng dễ dàng sử dụng dịch vụ giaodịch và có nhiều lựu chọn giao dịch trực tuyến.

Dù cố gắng hết sức tối ưu hóa, xong do khả năng còn có hạn, nên em không thể tránh khỏinhững hạn chế và thiếu sót khi thực hiên đề tài này Em kính mong nhận được ý kiến đóng gópcủa các thầy cô để có thể rút ra nhiều kinh nghiệm quý giá hơn

Một lần nữa em em xin chân thành cảm ơn các thầy, cô giáo, đặc biệt là thầy Ngô NgọcThành đã tận tình hướng dẫn, tạo điều kiện tối đa để em hoàn thành đề tài này!

TAI LIỆU THAM KHẢO

1 Tài liệu về Ruby: https://www.ruby- lang.org/en/documentation/

2 Tài liệu về React Native: https://reactnative.dev/docs/getting- started

3 Tài liệu kết nối VNPAY Payment Gateway - Đối tác VNPAY

4 Tài liệu đặc tả VNPAY Merchant - Đối tác VNPAY

5 Báo cáo test case và thay đổi API - Đối tác VNPAY