Hướng dẫn tích hợp thanh toán WEB-IN-APP
Cài đặt SDK (Install)
npm install @mp/sdk
Nhúng SDK (Embed)
<script src="<https://sjs.zalopay.com.vn/mini-app/sdk/1.0.1/sdk.js>"></script>
Trong quá trình tích hợp phương thức thanh toán Web-in-App, ZaloPay chỉ sử dụng 2 môi trường phục vụ cho merchant tích hợp: sandbox và production
| STT | Môi trường | Giá trị | Chú thích |
|---|---|---|---|
| 1 | Sandbox | sandboxmc | Môi trường sandbox dành cho việc tích hợp và thử nghiệm thanh toán |
| 2 | Production | production | Môi trường production dành cho việc tích vợp và thanh toán thực tế |
Merchant tiến hành thực hiện hai bước để tích hợp phương thức thanh toán Web-in-App, bao gồm: khởi tạo SDK và thanh toán bằng SDK
API khởi tạo (Init) có 2 tham số truyền vào là AppID và Env, trong đó:
1.1. Phương thức khởi tạo (Init) khi sử dụng install SDK
import * as ZLP from "@mp/sdk";
ZLP.init('AppID', 'env').then(result => { console.log(result) }).catch(err => { console.log(err) })
Ví dụ:
import * as ZLP from "@mp/sdk";
ZLP.init('2553', 'sandboxmc').then(result => { console.log(result) }).catch(err => { console.log(err) })
1.2. Phương thức khởi tạo (Init) khi sử dụng embed SDK
<head>
<script src="<https://sjs.zalopay.com.vn/mini-app/sdk/1.0.1/sdk.js>"></script>
</head>
<body>
<script>
window.ZLP.init(AppID, env).then(result => { console.log(result) }).catch(e => console.error(e))
</script>
</body>
//===============================
Ví dụ:
<head>
<script src="<https://sjs.zalopay.com.vn/mini-app/sdk/1.0.1/sdk.js>"></script>
</head>
<body>
<script>
window.ZLP.init(2553, "sandboxmc").then(result => { console.log(result) }).catch(e => console.error(e))
</script>
</body>
SDK cho phép hai phương thức tạo và thanh toán đơn hàng
2.1. Tạo đơn hàng sau đó dùng zp_trans_token để thực hiện thanh toán bằng hàm payOrder
Merchant dùng API tạo đơn hàng, hệ thống ZaloPay sẽ trả vể thông tin zp_trans_token, merchant sử dụng hàm payOrder để tiến hành mở ứng dụng ZaloPay cho user thực hiện thanh toán đơn hàng
Function:
ZaloPay.Payment().payOrder(zp_trans_token: string, callbackURL?: string)
* Hỗ trợ cho cả hai platforms ZPA và ZPI
Parameters:
- zp_trans_token: string
- Optional callbackURL: string (for ZPI)
Ví dụ:
// After successfully calling to create an order, ZaloPay will return information to proceed with payment.
{
"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": "AC-YGb2kvGFAmLzTmQD-PdjA",
"order_url": "https://qcgateway.zalopay.vn/openinapp?order=eyJ6cHRyYW5zdG9rZW4iOiJBQy1ZR2Iya3ZHRkFtTHpUbVFELVBkakEiLCJhcHBpZCI6MjAwMDAwfQ==",
"order_token": "AC-YGb2kvGFAmLzTmQD-PdjA",
"qr_code": "00020101021226520010vn.zalopay0203001010627000503173916463214909530738620010A00000072701320006970454011899ZP23237O000015470208QRIBFTTA5204739953037045405690005802VN622108173916463214909530763043607"
}
<script>
// Call the Init function to authenticate with the ZaloPay system
window.ZLP.init(2553, "sandboxmc" ).then(result => {
console.log(result);
// Use the value of field zp_trans_token to open the payment screen of ZaloPay
window.ZLP.Payment().payOrder("220805000000337O4nWrYz").then(payment => {
// your code here
console.log("payment => " + JSON.stringify(payment));
}).catch( e => {
console.log(e);
});
});
}).catch( e => {
console.log(e);
})
</script>
2.2. Tạo đơn hàng trực tiếp và gọi thanh toán bằng hàm payOrderByOrderInfo
Merchant dùng SDK tạo đơn hàng bằng hàm payOrderByOrderInfo để tiến hành mở ứng dụng ZaloPay cho user thực hiện thanh toán đơn hàng
Function:
ZaloPay.Payment().payOrderByOrderInfo(orderInfo: object, callbackURL?: string, options?: Object)
* Hỗ trợ cho cả hai platforms ZPA và ZPI
Parameters
- orderInfo: object
- Optional callbackURL: string(for ZPI)
- Optional options: Object(for ZPI)
Ví dụ:
<script>
// Call the Init function to authenticate with the ZaloPay system
window.ZLP.init(2553, "sandboxmc" ).then(result => {
console.log(result);
// Directly call the information to create an order
window.ZLP.Payment().payOrderByOrderInfo({
"app_id": 2553,
"app_user": "ZaloPayDemo",
"app_time": 1659673356288,
"amount": 10000,
"app_trans_id": "220805_1659673356288",
"bank_code": "zalopayapp",
"embed_data": "{}",
"item": "[]",
"callback_url": "",
"description": "ZaloPayDemo - Thanh toán cho đơn hàng #220805_1659673356288",
"mac": "bc87b986229cb72971a5e9fe3a67b2722afa6e08d3fd4b7b6a3b083acd7170ee"
}).then(payment => {
// your code here
console.log("payment => " + JSON.stringify(payment));
}).catch( e => {
console.log(e);
});
});
}).catch( e => {
console.log(e);
})
</script>
Chú ý: Để lấy được thông tin Location, User; merchant cần phải đăng ký với ZaloPay để sử dụng hai hàm này
<script>
// Call the Init function to authenticate with the ZaloPay system
window.ZLP.init(2553, "sandboxmc" ).then(result => {
console.log(result);
// Get device location information
window.ZLP.Device().getCurLocation().then(location => {
// Your code here
console.log(JSON.stringify(location);
}).catch( e => {
// Your code here
console.log(e);
});
// Get basic information of User
window.ZLP.User().getUserInfo().then( data => {
// Your code here
console.log( data );
} ).catch( e => {
// Your code here
console.log( e )
} );
}).catch( e => {
console.log(e);
})
</script>
<script>
// Call the Init function to authenticate with the ZaloPay system
window.ZLP.init(2553, "sandboxmc" ).then(result => {
console.log(result);
// Open ZaloPay icon loading
window.ZLP.UI().showLoading().then(loading => {
// Your code here
}).catch( e => {
// Your code here
console.log(e);
});
// Hide ZaloPay icon loading
window.ZLP.UI().hideLoading().then(hideLoading => {
// Your code here
console.log(hideLoading);
}).catch( e => {
// Your code here
console.log(e);
});
// Close Web-in-App
window.ZLP.UI().closeWindow().then(close => {
// Your code here
console.log(close);
}).catch( e => {
// Your code here
console.log(e);
});
}).catch( e => {
console.log(e);
})
</script>