Integration steps
Step 1: Select payment model
Step 2: Send a request to create order
Step 4: Request to ZaloPay Gateway
Step 3: Checking order status
Step 5: CallBack from ZaloPay Server
Giá trị | Ghi chú |
---|---|
MerchantSite | Merchant's web/app. |
MerchantServer | Merchant's back-end. |
ZaloPayGateway | ZaloPay Gateway's website. |
ZaloPayServer | ZaloPay's back-end. |
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:
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)
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
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 |
{
"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"
}
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 |
{
"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"
}
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
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.
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.'
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
- 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