Chọn mô hình tích hợp ZaloPay phù hợp
Mô tả các API được hỗ trợ trong module WebApp của ZaloPay.
| API Name | Available from | Short Description |
|---|---|---|
payOrder |
2.12 | Khởi tạo quá trình thanh toán đơn hàng |
showLoading |
2.12 | Hiển thị màn hình loading mặc định của ZaloPay |
hideLoading |
2.12 | Ẩn màn hình loading mặc định của ZaloPay |
Trong webapp, thêm dòng sau đây vào phần header của html. Download zalopay.js tại đây
<html>
<header>
<!-- other headers -->
<script src="/js/zalopay.js?ver=1494921725335" type="text/javascript"></script>
</header>
<body>
<!-- html body -->
</body>
</html>
ZaloPay - là cầu nối liên lạc giữa javascript trong webapp với app ZaloPay ở client. Nếu webapp không được load từ app ZaloPay, hoặc được load từ app ZaloPay với phiên bản cũ, field ZaloPay.isZaloPay sẽ mang giá trị false. Ngược lại, nó sẽ mang giá trị true.ZaloPay.appVersionZaloPay.ready(() => {
console.log("ZaloPayBridge is ready");
});
payOrder là API dùng để kích hoạt việc thanh toán đơn hàng do merchant cung cấp. Việc gọi api này tương đương với việc User thực hiện quét QR code đơn hàng. Do vậy payOrder chấp nhận các tham số giống như các tham số dùng để sinh mã QR cho việc thanh toán đơn hàng của merchant. Chi tiết các tham số, có thể tham khảo tài liệu tích hợp ZaloPay dành cho merchant.
// kích hoạt quá trình thanh toán với trường hợp hoá đơn < 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);
// kích hoạt quá trình thanh toán đối với trường hợp hoá đơn >= 2 KB
ZaloPay.payOrder({
appid: 3,
zptranstoken: "gOAWGD_NK4DFoq0mTA0iTw"
}, cb);
// kích hoạt quá trình thanh toán đối với trường hợp hoá đơn >= 2 KB
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 gọi truy vấn trạng thái đơn hàng để lấy kết quả thanh toán.
} 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)
Trong đó:
HmacSHA256appid +”|”+ apptransid +”|”+ appuser +”|”+ amount +"|"+ apptime +”|”+ embeddata +"|"+ itemshowLoading và hideLoading là 2 API dùng để hiển thị và ẩn đi màn hình loading của ZaloPay. WebApp có thể sử dụng loading view của riêng mình. Trường hợp nếu muốn sử dụng loading view của ZaloPay thì sử dụng cặp API này để điều khiển.
ZaloPay.showLoading();
ZaloPay.hideLoading();