NAV

Mô hình tích hợp

Chọn mô hình tích hợp ZaloPay phù hợp

Web in App

Giới thiệu Hướng dẫn tích hợp

Mô tả

Mô tả các API được hỗ trợ trong module WebApp của ZaloPay.

Regulations

  1. Chỉ các API có trong danh sách dưới đây mới được chính thức hỗ trợ từ app ZaloPay
  2. Các API name phân biệt hoa/thường
  3. Các API chỉ được sử dụng sau khi ZaloPayBridge được khởi tạo hoàn tất

API List

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

Cách tích hợp

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>

Initialization

ZaloPay.ready(() => {
  console.log("ZaloPayBridge is ready");
});

API List

API: payOrder

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.

Cú pháp


// 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
    }
  }
};

API: transferMoney

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ú.

Cú pháp

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

Ví dụ

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
  }
});

API: showLoading/hideLoading

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.

Cú pháp

ZaloPay.showLoading();
ZaloPay.hideLoading();

API: showDialog

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.

Cú pháp

ZaloPay.showDialog({
    title: "Hello",
    message: "Test",
    button: "OK"
  });
}

API: promotionEvent

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)

Cú pháp

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);

Trong đó

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

API: setProperty

setProperty là api dùng để thay đổi màu sắc của thanh navigation và màu tiêu đề của WebApp.

Cú pháp

ZaloPay.setProperty(
    {
       navigation : {
         backgroundColor: "#c7c7cc",
         titleColor: "#000000",
         pullToRefresh: false
       }
    }, cb);

Trong đó

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

API: setToolbarActions

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.

Cú pháp

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);

Trong đó

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)
Không tìm thấy kết quả phù hợp