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 |
transferMoney |
2.12 | Khởi tạo quá trình chuyển tiền từ cá nhân tới cá nhân trong ZaloPay |
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 |
showDialog |
2.12 | Hiển thị dialog theo style của ZaloPay cho người dùng |
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="https://sandbox.zalopay.com.vn/qrcode/public/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,
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");
} 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
}
}
};
transferMoney là api cho phép webapp kích hoạt flow chuyển tiền cá nhân. Flow chuyển tiền cá nhân này không cho phép người dùng thực hiện sửa đổi các tham số như người nhận, số tiền, ghi chú.
ZaloPay.transferMoney(param_object, cb);
Trong đó, param_object cần chứa các key trong bảng sau
| keyName | keyType | Description |
|---|---|---|
| zpid | String | ZaloPay ID của người nhận tiền |
| amount | int64 | Giá trị tiền sẽ nhận được |
| message | String | Ghi chú cho giao dịch chuyển tiền |
ZaloPay.transferMoney({
zpid: "hoanh",
amount: 100000,
message: "Transaction_170316_0001"
}, data => {
if (data.code === 1) {
console.log("Chuyển tiền thành công");
} else if (data.code === 4) {
console.log("Người dùng huỷ việc chuyển tiền");
} else {
console.log("Lỗi xảy ra trong quá trình chuyển tiền.");
// Chi tiết xem trong bảng mã lỗi
}
});
showLoading 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();
showDialog dùng để hiển thị hộp thoại của ZaloPay cho người dùng. WebApp có thể quy định nội dung hộp thoại, title của hộp thoại, các button hiển thị trên hộp thoại.
ZaloPay.showDialog({
title: "Hello",
message: "Test",
button: "OK"
});
}
promotionEvent là api trong mục Ưu đãi, xử lý các event (mở ứng dụng nội bộ trong ZaloPay, mở ứng dụng ngoài ZaloPay hoặc trên google play store)
ZaloPay.promotionEvent({
url: 'zalo://launch?params=1', // use on iOS
packageId: 'com.zing.zalo', // use on Android, if url is not available
internalApp: 12, // Recharge phone
alternateUrl: 'https://vng.com.vn', // URL open in case the App is not installed
campaignId: 1 // campaign id from Backend - for write log
}, callback);
| keyName | keyType | Description |
|---|---|---|
url |
String | url mở app ngoài ZaloPay (sử dụng cho iOS) |
packageId |
String | id của app để mở hoặc tìm kiếm trên google play store (sử dụng cho Android) |
internalApp |
int | id để mở app nội bộ trong ZaloPay |
alternateUrl |
String | url dự phòng để mở browser trong hợp trường "url" không hợp lệ (sử dụng cho iOS) |
campaignId |
int | từ backend, dùng để ghi log |
setProperty là api dùng để thay đổi màu sắc của thanh navigation và màu tiêu đề của WebApp.
ZaloPay.setProperty(
{
navigation : {
backgroundColor: "#c7c7cc",
titleColor: "#000000",
pullToRefresh: false
}
}, cb);
| keyName | keyType | Description |
|---|---|---|
backgroundColor |
String | Màu của thanh navigation |
titleColor |
String | Màu của tiêu đề và các thành phần trên thanh navigation của WebApp |
pullToRefresh |
Boolean | Bật/tắt setting kéo thả để refresh lại web |
setToolbarActions là api dùng để hiển thị danh sách các icon bên góc phải thanh navigation và thiết lập các đặc tính như: hình ảnh, callback action tương ứng.
ZaloPay.setToolbarActions([
{
iconId: "clickIcon1",
iconLink: "",
iconName: "general_question",
iconColor: "#000000"
},
{
iconId: "clickIcon2",
iconLink: "https://cdn0.iconfinder.com/data/icons/entypo/92/button2-48.png",
iconName: "",
iconColor: ""
}]
, cb);
| keyName | keyType | Description |
|---|---|---|
iconId |
String | Action khi click vào icon (js function) |
iconLink |
String | Link ảnh của icon |
iconName |
String | Tên icon font của icon (trường hợp sử dụng iconfont) |
iconColor |
String | Màu icon font của icon (trường hợp sử dụng iconfont) |