Select the appropriate model of ZaloPay integration
AppServer submit the transaction to ZaloPay Server for payment
| API Name | Available from | Short Description |
|---|---|---|
payOrder |
2.12 | Initialize the order process |
showLoading |
2.12 | Display the loading screen of ZaloPay |
hideLoading |
2.12 | Hide the loading screen of ZaloPay |
In webapp, add the following code to the html header. Download zalopay.js
<html>
<header>
<!-- other headers -->
<script src="/js/zalopay.js?ver=1494921725335" type="text/javascript"></script>
</header>
<body>
<!-- html body -->
</body>
</html>
ZaloPay - the connection between javascript in webapp with ZaloPay App. If webapp is not loaded from the ZaloPay App, or loaded from the old version ZaloPay App, ZaloPay.isZaloPay field will be false. Else, it will be true.ZaloPay.appVersion fieldZaloPay.ready(() => {
console.log("ZaloPayBridge is ready");
});
payOrder - API is used to activate the payment of orders provided by merchant. This API is called when End-Users scan QR Code of the order. Therefore, payOrder accepts the same parameters as when generating the QR code for the merchant order payment. Details of the parameters can refer to the Integrating ZaloPay documents for merchants.
// Activate the payment of order, order < 2 KB
ZaloPay.payOrder({
appid: 3,
subappid: "demo",
subappuser: "user123",
appuser: "pmqc",
apptime: 1486713401300,
amount: 20000,
apptransid: 170210144922653,
embeddata: "embeddata123",
item: "item123",
description: "description123",
mac: "5815251181fcf7d80d056ec8298f81dcc1654eb9edb3c19a961ef43eb129c307"
}, cb);
// Activate the payment of order, order >= 2 KB
ZaloPay.payOrder({
appid: 3,
zptranstoken: "gOAWGD_NK4DFoq0mTA0iTw"
}, cb);
// Callback function (cb)
var cb = function (data) {
if (typeof data === "object") {
if (data.error === 1) {
alert("Thanh toán đơn hàng thành công");
// Merchant Server should query for order's status to get order's final result
} else if (data.error === 4) {
alert("Người dùng huỷ việc thanh toán đơn hàng");
} else {
alert("Thanh toán đơn hàng thất bại với mã lỗi " + data.errorCode);
// Khi thanh toán thất bại, có thể xem nguyên nhân chi tiết trong bảng mã lỗi
}
}
};
mac = HMAC(hmac_algorihtm, key1, hmac_input)
With:
HmacSHA256appid +”|”+ apptransid +”|”+ appuser +”|”+ amount +"|"+ apptime +”|”+ embeddata +"|"+ itemshowLoading andhideLoading are 2 APIs used to display and hide the loading screen of ZaloPay. WebApp can use its loading screen.
ZaloPay.showLoading();
ZaloPay.hideLoading();