NAV

Website - ZaloPay Gateway

Overview Demo Integrated guide API

INTEGRATED GUIDE

PROCESSING FLOW
* NOTE
Giá trị Ghi chú
MerchantSite Merchant's web/app.
MerchantServer Merchant's back-end.
ZaloPayGateway ZaloPay Gateway's website.
ZaloPayServer ZaloPay's back-end.

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 bank_code parameter in create order API, corresponding to each form of payment model

2.1. 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 Ghi chú
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 ...) Hình ảnh mô tả 1
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 Hình ảnh mô tả 2
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 Hình ảnh mô tả 3
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 Hình ảnh mô tả 4
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 Hình ảnh mô tả 5
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 Hình ảnh mô tả 6
Mã ngân hàng ATM (VTB, VCB, ...) [] "bank_code": "specific bank code",
"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. (**) Use API to get list of all ZaloPay supported banks here Hình ảnh mô tả 7

2.1.1 Hình ảnh mô tả 1#

2.1.2 Hình ảnh mô tả 2#

2.1.3 Hình ảnh mô tả 3#

2.1.4 Hình ảnh mô tả 4#

2.1.5 Hình ảnh mô tả 5#

2.1.6 Hình ảnh mô tả 6#

2.1.7 Hình ảnh mô tả 7#

Ví dụ (Tạo đơn hàng thanh toán bằng VietQR)#

    {
      "app_id": 2553,
      "app_user": "ZaloPayDemo",
      "app_time": 1692808549757,
      "amount": 10000,
      "app_trans_id": "230823_1692808549757",
      "bank_code": "",
      "embed_data": "{\"preferred_payment_method\":[\"vietqr\"]}",
      "item": "[]",
      "callback_url": "https://example.com/zalopay-callback",
      "description": "ZaloPayDemo - Thanh toán cho đơn hàng #230823_1692808549757",
      "mac": "e5f54209e13398f9c0889c663bda7ec8a424c826a41750c787ec34b8e0becc73"
    }
    {
      "return_code": 1,
      "return_message": "Giao dịch thành công",
      "sub_return_code": 1,
      "sub_return_message": "Giao dịch thành công",
      "zp_trans_token": "ACyQpbxesWOnY1cCq-ThZHww",
      "order_url": "https://qcgateway.zalopay.vn/openinapp?order=eyJ6cHRyYW5zdG9rZW4iOiJBQ3lRcGJ4ZXNXT25ZMWNDcS1UaFpId3ciLCJhcHBpZCI6MjU1M30=",
      "order_token": "ACyQpbxesWOnY1cCq-ThZHww",
      "qr_code": "00020101021226520010vn.zalopay0203001010618000503173851346261102069938620010A00000072701320006970454011899ZP23235O000007950208QRIBFTTA5204739953037045405100005802VN622108173851346261102069963044149"
    }

2.2. Theo cấu trúc cũ#

bank_code 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

Ví dụ (Tạo đơn hàng thanh toán bằng Thẻ ATM trên ZaloPay Gateway)#

    {
      "app_id": 2553,
      "app_user": "ZaloPayDemo",
      "app_time": 1692811526592,
      "amount": 10000,
      "app_trans_id": "230824_1692811526592",
      "bank_code": "",
      "embed_data": "{\"bankgroup\":\"ATM\"}",
      "item": "[]",
      "callback_url": "https://example.com/zalopay-callback",
      "description": "ZaloPayDemo - Thanh toán cho đơn hàng #230824_1692811526592",
      "mac": "058d31a95d891821a58fb0577707ac614dd30d47f45e397c9e1cf9789ceda014"
    }
    {
      "return_code": 1,
      "return_message": "Giao dịch thành công",
      "sub_return_code": 1,
      "sub_return_message": "Giao dịch thành công",
      "zp_trans_token": "ACajRfciufEJ5JBMWk8-wlOQ",
      "order_url": "https://qcgateway.zalopay.vn/openinapp?order=eyJ6cHRyYW5zdG9rZW4iOiJBQ2FqUmZjaXVmRUo1SkJNV2s4LXdsT1EiLCJhcHBpZCI6MjU1M30=",
      "order_token": "ACajRfciufEJ5JBMWk8-wlOQ"
    }

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 order_url field, Merchant uses order_url to redirect users to ZaloPay Payment site

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 **Get order's status** is only valid for 48 hours since ZaloPay Server accept the order.
- API **Get order's status** can only be used after the Merchant system receives a callback or redirect or 15 minutes after creating order.'

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