Problem to solve:

• Merchant's Customer Support wants to check transactions detail easily
• Right now, when Customer Support wants to see detailed transactions, they need to log in to Xendit dashboard,generate report, download report, then find detail of transactions

Solution

Main tools: Postman and Xendit API

• Merchants can use Postman to query transactions
• Postman collection is available for merchants to use immediately just by using their own API key generated from their Xendit dashboard (one time process)
• User can modify the script as per needed, giving flexibility for Merchant's Ops / CS team to check transactions easily and even build their own internal tools

How to use the tool?

• Define Information that User wants to see in the table by adjusting the "Test" script on Postman. Here's the script I'm using that can just easily copy paste on the "Tests" section on your Postman request:

  var template = `
      <style type="text/css">
          .tftable {font-size:14px;color:#333333;width:100%;border-width: 1px;border-color: #87ceeb;border-collapse: collapse;}
          .tftable th {font-size:18px;color:#ffffff;background-color:#4573ff;border-width: 1px;padding: 8px;border-style: solid;border-color: #4573ff;text-align:left;}
          .tftable tr {background-color:#ffffff;}
          .tftable td {font-size:14px;border-width: 1px;padding: 8px;border-style: solid;border-color: #4573ff;}
          .tftable tr:hover {background-color:#e0ffff;}
      </style>
      
      <table class="tftable" border="1">
          <tr>
              <th>Updated Date</th>
              <th>Reference ID</th>
              <th>Product ID</th>
              <th>Type</th>
              <th>Bank Destination</th>
              <th>Bank Account Number</th>
              <th>Amount</th>
              <th>Status</th>
          </tr>
          
          {{#each response.data}}
              <tr id=row_{{@key}} onClick="handleClick(this.id)">
                  <td id={{@key}}>{{updated}}</td>
                  <td>{{reference_id}}</td>
                  <td>{{product_id}}</td>
                  <td>{{type}}</td>
                  <td>{{channel_code}}</td>
                  <td>{{account_identifier}}</td>
                  <td>{{amount}}</td>
                  <td>{{status}}</td>
              </tr>
          {{/each}}
      </table>
  `;
  
  pm.visualizer.set(template, {
      response: pm.response.json()
  });
  

• Define query/transaction filter in the "Params"

• Send Transaction View API request using Postman

• Postman's Visualize feature will allow human friendly table with transactions details

Effort to build:

Low (~15mins to setup) - minimum knowledge on how API works

What's next?

• More advance visualization, instead of just showing, giving graph of transactions trend
• Option to generate transactions being shown into a CSV file
• Drag and drop tool, instead of having to adjust the script to change the table