Mobile Payment for

Department Services

Dec 19, 2019

Agenda

2

• Introduction

• Mobile Payment Process Flow

• HKU mPOS App

• HKU Desktop POS (mPOS web application)

• HKU uPay App for users

• Payment Flow

• Online Web Payment

• Live Demo

• Apportion of received payments

• Web Enquiry System

• Apply to use Mobile Payment for Department Services

• Services Charges

• What’s Next

• Q&A

Introduction

3

• Support university-wide “in-store” merchandising and “online” web payment via MPDS WEB API

– Offer different mobile payment methods

Apple Pay, Google Pay, AlipayHK, Alipay

• Handle payment category to streamline operation

– Reconcile payment transactions

– Apportion received payment to departments

Merchant and Customers

• Departments (“merchants” in mobile payment terminology)

• offer items (including services) to users

• collect a payment at mobile Point-of-Sales (mPOS)– Run HKU mPOS application – 2 versions:

» mPOS web version

» mPOS app version (mPOS app)

• collect a payment in web application via MPDS WEB API

• “Customers” – Staff/Students/non-HKU members

• pay via uPay app

• mobile payment methods:

4

5

Send transaction & Receive payment status

HKU Backend

servers

Mobile Payment Process Flow

HKU uPay App

Scan

HKU mPOS applications (web/app)MPDS WEB APIGenerate QR code

Departments

FEO

Payment reconciliation

Send transaction & Receive payment status

Apportion payments received

1. MPGS (Apple Pay, Google Pay)2. mPay (Alipay, AlipayHK)

Payment Gateways

Download Payment Data

HKU mPOS App

6

HKU mPOS App (1)

7

1. A department needs to register the device & staff UID for using HKU mPOSApp.

2. Staff uses mPOS App to generate QR code for users to use HKU uPay App to scan to pay.

Department Staff HKU mPOS App

1. Select the item/service 2. Change the unit price

/quantity of the

item/service if appropriate

3. Generate QR Code

HKU mPOS App (2)

HKU Desktop POS (mPOS)

9

1. Departments need to register the staff UID using HKU Desktop POS.

2. Staff uses Desktop POS to generate QR code for users to use HKU uPay App to scan to pay.

Department Staff HKU Desktop POS

Main Page of Desktop mPOS

10

Display QR Code for uPay App to scan to pay

11

Transaction Response

12

OR

HKD 400.00

Show Transaction History

13

HKD 200.00

HKD 200.00

HKD 400.00

Change Portal UID

File Restore

HKU uPay App

14

HKU uPay App (1)

15

1. Do not require customers to login to use HKU uPay App.

2. Customers scan the QR code generated by HKU mPOS (web/app) to process payment.

3. Customers can select the mobile payment method to pay.

CustomerHKU uPay App

1. Press the “Scan to

Pay” button to open

QR Code Scanner

2. Scan the QR code

generated from HKU

mPOS App to pay

3. Review the payment

amount and select the

payment method to

pay

HKU uPay App (2)

HKU uPay App (3)1. Choose a payment history record 2. The uPay app shows the details of

the payment history

17

Change UID

Restore Data

HKU uPay

HKD 200.00

HKD 200.00

HKD 400.00

HKD 400.00

Payment Flow

18

1. Start Payment Process

19

1. Press the “ReceivePayment” button to start the payment process

Department Staff mPOS App

2. Select an item

20

1. Select item(s) from the service list

2. The total charge is shown according to the items selected

3. Change the amount of the items if appropriate

Department Staff mPOS App

3. Save Payment Information

21

Press “Generate QR Code” button to save the payment details to the server and generate the QR code for the payment process

DB

Payment details

Transaction ID

Department Staff mPOS App

4. Generate QR Code

22

QR code is generated (ready for customer to scan)

QR Code information:

- Transaction Type: mPOS- Transaction Data: The

data to process the order in base64 encoded format

Department Staff mPOS App

5. Customer Opens uPay App

23

1. Press the “Scan to Pay” button of uPay app to open the QR Code Scanner of the phone

CustomeruPay App

6. Scan QR Code

24

1. Scan the QR code generated from mPOSapplication to pay

2. Payment details are retrieved from the server

DB

QR Code information

Payment details

CustomeruPay App

7. Review & Pay

25

Review the payment amount and select the payment method to pay

CustomeruPay App

8a. Authorize Payment (Apple Pay and Google Pay)

26

Use Touch ID or passcode to pay

Change UID

Restore Data

Change UID

Restore Data

HKD 200.00

HKD 400.00

HKD 200.00

HKD 200.00

HKD 200.00

HK$400.00

CustomeruPay App

8b. Authorize Payment (Alipay/AlipayHK)

27

Login Alipay/AlipayHK to pay

CustomeruPay App

HKD 400.00

HK$ 400.00

HK$ 400.00

9. Process Payment Transaction

29

1. Payment transaction is sent to HKU server and payment information is captured

2. HKU server sends transaction to Payment Gateway

Payment transaction

Payment transaction

HKU server Payment GatewayDBCapturePayment

Information

CustomeruPay AppChange UID

Restore Data

HKD 200.00

HKD 400.00

HKD 200.00

HK$400.00

Loading …

10. Complete Payment Transaction

30

1. Payment Gateway returns payment result to HKU server and the result is stored

2. HKU server returns payment result to uPay App which shows the transaction completed acknowledgementPayment

resultPayment

result

HKU server Payment GatewayDBStore

PaymentResult

CustomeruPay AppHKU uPay

11. Record Receipt Number (optional)

31

Department Staff mPOS App

Optional:When the payment is completed & the department’s application prints a receipt, staff inputs the receipt number to complete the payment process

DBRecord receipt number

12. Hand Over Receipt

32

Department Staff Customer

Staff hands over the receipt to the customer

Online web payment

33

ShowQR Code

ScanQR Code to pay

Open uPay App to pay

Department’sweb application/online shop

• Support online web payment for direct integration with department software/web application

• After registered to use MPDS for online payment, web application/online shop can be enhanced to create order in MPDS and generate QR code for uPay App to scan to make payment

Online Web Payment

Desktop web application

35

ApplicationMPDS

DesktopWeb Application

1. Send payment details to MPDS

3. Show Pay Button

HKU uPay App

5. Scan QR Code

6. Process payment

Payment Gateway

7. Submit payment toPayment Gateway

8. Receive response fromPayment Gateway

9a. Send payment response to HKU uPay App

9b. Send payment response

10. Show payment result

4. Press Pay Button andThe application shows payment QR Code

2. Return order number

Mobile web application

36

ApplicationMPDS

Mobile Web Application

1. Send payment details to MPDS

3. Show Pay Button

HKU uPay App

5. Open HKU uPay App

6. Process payment

Payment Gateway

7. Submit payment toPayment Gateway

8. Receive response fromPayment Gateway

9a. Send payment response to HKU uPay App

9b. Send payment response

4. Press Pay Button

2. Return order number

10. Show payment result

MPDS WEB API

37

• Centralized mobile payment handling platform

• Web API

• JSON

• HTTPS

• Access control by API Key

• Restricted for authorised servers access only

Registration• Department:

– Register to use MPDS

– Register the application to use online mobile payment service with providing the name of the application and the IP address of the server

– Register the items to accept online payment

– Provide the backend URL for receiving the payment result acknowledge

– Provide the payment result URL to display the payment result

– Provide a recent virus scan report of the application server

• ITS– API Key

38

Live Demo

39

40

Web Enquiry SystemMSS > IT Services > Mobile Payment Txn Enquiry

41

Web Enquiry SystemMain Page

42

Web Enquiry SystemMenu: Transaction Enquiry

43

Web Enquiry SystemInput Search Criteria (1/2)

44

Web Enquiry SystemInput Search Criteria (2/2)

45

Web Enquiry SystemSample Output

Service Charges

46

Payment Method

PaymentGateway

Charge

MPGS2.35%

2.35%

mPay2.3%

1.7%

Apply to use Mobile Payment for Department Services (1)

47

Apply to use Mobile Payment (2)

48

Apply to use Mobile Payment (3)

49

HKU Mobile Payment – Future

• Direct Mobile Payment API– Facilitate faculties to integrate mobile payment channels into

their own grown mobile app via MPDS without calling HKU uPay App

–Department mobile app can complete the mobile payment process within their own app

– Support both Android and iOS implemenations

– Flexible for department to opt-in only to some of the mobile payment methods

• Centralized payment categorization processing– Same as in “in-store” merchandising mobile payment

50

HKU mPOS App & HKU uPay Appavailable in Apple Store & Google Store

51

HKU mPOS HKU uPay

Q & A

52

Thank you

53