Instructions for integrating payment via ZaloPay - WEB-IN-APP
Install SDK
npm install @mp/sdk
Embed SDK
<script src="<https://sjs.zalopay.com.vn/mini-app/sdk/1.0.1/sdk.js>"></script>
In the process of integrating Web-in-App payment method, ZaloPay only uses 2 environments, serving the integrated merchant: sandbox and production
| No. | Environments | Value | Description |
|---|---|---|---|
| 1 | Sandbox | sandboxmc | Sandbox environment for payment integration and testing |
| 2 | Production | production | Production environment for actual accumulation and payment |
Merchant takes two steps to integrate Web-in-App payment method, including: initializing the SDK and paying with the SDK
Initialization API has 2 parameters passed in, AppID and Env, in which:
1.1. Initialization method when using install SDK
import * as ZLP from "@mp/sdk";
ZLP.init('AppID', 'env').then(result => { console.log(result) }).catch(err => { console.log(err) })
Example:
import * as ZLP from "@mp/sdk";
ZLP.init('2553', 'sandboxmc').then(result => { console.log(result) }).catch(err => { console.log(err) })
1.2. Initialization method (Init) when using 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>
//===============================
Example:
<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>
The SDK allows two methods of order creation and payment
2.1. Create an order then use zp_trans_token to make payment using the payOrder function
Merchant uses API to create orders, ZaloPay system will return zp_trans_token information, merchant uses payOrder function to proceed to open ZaloPay application for users to make order payments
Function:
ZaloPay.Payment().payOrder(zp_trans_token: string, callbackURL?: string)
* Support for both ZPA and ZPI platforms
Parameters:
- zp_trans_token: string
- Optional callbackURL: string (for ZPI)
Example:
// 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. Create an order directly and call payment using function payOrderByOrderInfo
Merchant uses the SDK to create orders using the payOrderByOrderInfo function to open the ZaloPay application for the user to pay for the order.
Function:
ZaloPay.Payment().payOrderByOrderInfo(orderInfo: object, callbackURL?: string, options?: Object)
* Support for both ZPA and ZPI platforms
Parameters
- orderInfo: object
- Optional callbackURL: string(for ZPI)
- Optional options: Object(for ZPI)
Example:
<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>
Note: To get Location information, User; merchant needs to register with ZaloPay to use these two functions
<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>