NAV

Integration Models

Select the appropriate model of ZaloPay integration

Website - ZaloPay Gateway

Overview Demo Integrated guide API

INTEGRATED GUIDE

PROCESSING FLOW
* NOTE

-
-
-
-

center my-5 maxw-80

1. Select payment model

When End-user pays the order, the Merchant Client's interface adds payment models which ZaloPay wallet, Visa/Master/JCB card, ATM card, following ways:

WAY 1
By this way, The bank list will be displayed on the ZaloPay Gateway interface in the following step
WAY 2
By this way, the bank list will be displayed on the Merchant Site interface

Download:

Download source HTML (way 1)
Download source HTML (way 2)

Following, End-user click "Payment" to send a request to create order (step 2)

2. Send a request to create order

After End-user click "Payment", Merchant Site sends a request to create order (createOrder) to Merchant Server.
Merchant Server call createOrder API of ZaloPay Server.

API: Create order (createOrder)

Note: Use the correct bankcode parameter in createOrder API, corresponding to each form of payment model

2.1 Theo cấu trúc cũ
bankcode Results are displayed on the ZaloPay Gateway page
Empty ("") (*) List of payment methods and banks supported (CC, ATM, zalopayapp, ...)
zalopayapp QR code to scan with ZaloPay App
CC Form to input credit card information
ATM bank code (VTB, VCB, ...) Form to input bank card information
2.2 Theo cấu trúc mới
bank_code preferred_payment_method Nội dung truyền thông tin Kết quả hiển thị trên trang cổng thanh toán
Rỗng ("") [] "bank_code": "",
"embed_data": { "preferred_payment_method": [] }
Danh sách tất cả các hình thức và ngân hàng được hỗ trợ (ATM, CC, ZaloPay, ZaloPay QR đa năng, Apple Pay ...)
Rỗng ("") [“domestic_card”, “account”] "bank_code": "",
"embed_data": { "preferred_payment_method": [“domestic_card”, “account”] }
Danh sách tất cả Ngân hàng hỗ trợ, người dùng chọn và nhập thông tin thẻ ATM hoặc tài khoản Ngân hàng tương ứng
Rỗng ("") [“zalopay_wallet”] "bank_code": "",
"embed_data": { "preferred_payment_method": [“zalopay_wallet”] }
Hiển thị ZaloPay QR code để thanh toán bằng Zalo/ZaloPay
Rỗng ("") [“vietqr”] "bank_code": "",
"embed_data": { "preferred_payment_method": [“vietqr”] }
Hiển thị ZaloPay QR đa năng để thanh toán bằng các ứng dụng Ngân hàng và Zalo/ZaloPay
Rỗng ("") [“international_card”] "bank_code": "",
"embed_data": { "preferred_payment_method": [“international_card”] }
Form hiển thị cho việc nhập thông tin thẻ tín dụng
Rỗng ("") [“applepay”] "bank_code": "",
"embed_data": { "preferred_payment_method": [“applepay”] }
Form hiển thị cho việc chọn phương thức Apple Pay
Mã ngân hàng ATM (VTB, VCB, ...) [] "bank_code": "specific bankcode",
"embed_data": { "preferred_payment_method": [] }
Form nhập thông tin thẻ của ngân hàng tương ứng Merchant sử dụng API Getlistmerchantbanks để lấy giá trị specific bankcode

4. Checking order status

After 15 minutes in step 2 (transaction's timeout is 15 minutes), if callback information has not been received, the Merchant Server sends a request to ZaloPay Server to get order's status.

{:API=>"Get order's status"}

Note:
- API getstatusbyapptransid is only valid for 48 hours since ZaloPay Server accept the order.
- API getstatusbyapptransid can only be used after the Merchant system receives a callback or redirect or 16 minutes after creating order.

3. Redirect to ZaloPay Gateway

Next, Merchant Site redirects to the ZaloPay Gateway, End-users process payment steps.

When Merchant Server sends a request to create order to ZaloPay Server (in step 2), ZaloPay server will response a redirect link in the orderurl field, Merchant uses orderurl to redirect users to ZaloPay Payment site

{
  "returncode": 1,
  "returnmessage": "Thành công",
  "orderurl":"https://qcgateway.zalopay.vn/openinapp?order=eyJ6cHRyYW5zdG9rZW4iOiJ4dGd1SEs1YnU0VDJkSHE3TUFwTFFnIiwiYXBwaWQiOjN9"
}

5. Handle callback from ZaloPay Server

After End-user completes the payment steps on ZaloPay Gateway, if ZaloPay successfully get money from user, then ZaloPay Server will callback (callback/notify) to Merchant Server by CallbackURL which had been registered with ZaloPay

API: callback

6. ZaloPay Gateway redirect to Merchant Site

- After End-user pays, ZaloPay Server will response the transaction status to ZaloPay Gateway.
- ZaloPay Gateway redirects to Merchant Site to display transaction results on the interface.

API: redirect

No matching results were found