Capture Widget Response
Track the API requests made by the widget and the responses returned from Eko
Capture the widget API request/response to do the following to track successful and failed transactions and to manage your merchant's wallet.
Connect Widget exposes the following javascript events for tracking responses, network error, and requests:
eko-response
The event eko-response is fired when a response is returned after an Eko API call. It is called for both SUCCESSFUL and FAILED transactions. Get the details inside "e.detail" parameter in JSON format.
HOW TO CHECK TRANSACTION STATUS
Check e.detail.response.status to know whether the transaction was successful or failed
For successful transactions, the status is always 0. Any other status code means failure.
See the section Error Codes for a list of status codes.
{
"url": "https://staging.eko.in:25004/ekoapi/v1/transactions",
"client_ref_id": "1527072247040",
"http_method": "POST",
"http_status": 200,
"interaction_type_id": 221,
"response": {
"status": 0,
"response_status_id": 0,
"response_type_id": 325,
"message": "Transaction successful",
"data": {
"tx_status": "0",
"debit_user_id": "9910028267",
"txstatus_desc": "In Progress",
"channel": "2",
"tid": "12777102",
"bank": "Punjab National Bank",
"bank_ref_num": "814316777102",
"recipient_id": 10009966,
"timestamp": "2018-05-23T10:44:13.122Z",
"amount": "1000.00",
"channel_desc": "IMPS",
"customer_id": "8888888888",
"account": "2363654555555556"
}
}
}
eko-network-error
The event eko-network-error is fired when the request fails due to a network issue. Get the details inside "e.detail" parameter in JSON format.
IMPORTANT
If you get eko-network-error event in case of a financial transaction (eg: Money Transfer), you must call the Get Transaction Status API from your server to check the actual status of that transaction.
[Check Sample Code for usage example]
<html>
<body>
<!--
This code will go at the end of the same page where you have inserted the tf-eko-connect-widget from the "How to Integrate Widget?" step:
<tf-eko-connect-widget id="ekowidget" ... ></tf-eko-connect-widget>
-->
<script>
// CAPTURE EKO WIDGET RESPONSE...
document.querySelector('#ekowidget').addEventListener('eko-response', function(e) {
console.log(">> WIDGET RESPONSE: ", e.detail);
console.log("REQUEST Interaction-Type-ID: ", e.detail.interaction_type_id);
console.log("REQUEST Client-Ref-ID: ", e.detail.client_ref_id);
console.log("RESPONSE HTTP STATUS: ", e.detail.http_status);
console.log("RESPONSE data: ", e.detail.response);
// Update transaction response in your server database
// Note: Change MYTESTSITE.COM to your own server URL
// Note: The code below assumes that you are using jQuery
$.ajax({url: 'https://MYTESTSITE.COM/handleEkoResponse',
type: 'post',
dataType: 'json',
contentType: 'application/json',
timeout:60000,
data: { detail: JSON.stringify(e.detail) },
error: function(jqXHR, textStatus, errorThrown) {
console.error("ERROR: Eko-Response Update Failed: ", textStatus, errorThrown);
// Retry, if your server update fails due to network issues
}
});
});
// HANDLE NETWORK ERROR...
document.querySelector('#ekowidget').addEventListener('eko-network-error', function(e) {
console.warn("!! WIDGET NETWORK ERROR: ", e.detail);
console.log("REQUEST Interaction-Type-ID: ", e.detail.interaction_type_id);
console.log("RESPONSE HTTP STATUS: ", e.detail.http_status);
console.log("NETWORK TIME-OUT? ", e.detail.timed_out);
// Use the GET TRANSACTION STATUS API from your server to check actual transaction status and update your database
// Note: Change MYTESTSITE.COM to your own server URL
// Note: The code below assumes that you are using jQuery
$.ajax({url: 'https://MYTESTSITE.COM/handleEkoNetworkError',
type: 'post',
dataType: 'json',
contentType: 'application/json',
timeout:60000,
data: { detail: JSON.stringify(e.detail) },
error: function(jqXHR, textStatus, errorThrown) {
console.error("ERROR: Eko-Network-Error Update Failed: ", textStatus, errorThrown);
// Retry, if your server update fails due to network issues
}
});
});
// CAPTURE EKO WIDGET ANY REQUEST... [OPTIONAL]
document.querySelector('#ekowidget').addEventListener('eko-request', function(e) {
console.log("<< WIDGET REQUEST: ", e.detail);
console.log("REQUEST METHOD (GET/POST/etc): ", e.detail.http_method);
console.log("REQUEST URL: ", e.detail.url);
console.log("REQUEST Interaction-Type-ID: ", e.detail.interaction_type_id);
console.log("REQUEST PARAMETERS: ", e.detail.data);
});
</script>
</body>
</html>
eko-request [OPTIONAL]
The event eko-request is fired just before any API is called by the widget. So, you can use it to keep track of any transaction done by the widget (whether financial or non-financial). Get the details inside "e.detail" parameter in JSON format.
IMPORTANT
To track financial transactions; for example, Money Transfer or Recipient Bank-Account Validation; use the debit-hook event instead of eko-request.
Check e.detail.interaction_type_id to know which transaction it is. Every transaction has a unique interaction_type_id. For example: Send Money = 221
{
"url": "https://staging.eko.in:25004/ekoapi/v1/transactions",
"http_method": "POST",
"body": "client_ref_id=1527072247040&amount=1000&channel=2&recipient_id=10009966&customer_id=8888888888&initiator_id=9910028267",
"client_ref_id": "1527072247040",
"interaction_type_id": 221,
"interaction_label": "Send Cash",
"data": {
"amount": "1000",
"channel": "2",
"recipient_id": 10009966,
"customer_id": "8888888888"
}
}
Updated over 4 years ago