Integrated Manual Settlement Demo

by IntegrationSupport

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="https://iclientsimulator.test.tyro.com/iclient-with-ui-v1.js"></script>
<h2>Integrated Manual Settlement Demo</h2>

<p>Please process the manual settlement request by clicking on the <strong> "Tyro Manual Settlement" </strong> button<br>Please pair using the MID and TID <strong>200</strong> for an approved request and one of the relevant error-inducing terminal IDs for a failed request.
</p>

<br>

<button id="closeTabBtn" type="button" class="mt10 btn btn-primary" onclick="doManualSettlement()">Tyro Manual Settlement</button>
 <button type="button" class="mt10 btn btn-primary" onclick="pairing()">pairing</button>

  <h6 class="mt10">
 <iframe id="iClientFrame" src="" 
       style="height: 400px; width: 400px;">
    </iframe>
    </h6>

<br>

<div>
<div class="row">
    <h3 class="mt20">Response</h3>
  </div>
  
  <div class="row">
    <div class="col-xs-2">
      Result:
    </div>
    <div class="col-xs-10">
      <div id="result"></div>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-2">
      Message:
    </div>
    <div class="col-xs-10">
      <div id="Message"></div>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-2">
      Terminal Business Day:
    </div>
    <div class="col-xs-10">
      <div id="TerminalBusinessDay"></div>
    </div>
  </div>
</div>

CSS

body {
  padding: 15px;
}

td {
  padding: 3px;
}

.ml10 {
  margin-left: 5px;
}

.mt10 {
  margin-top: 10px;
}

.mt20 {
  margin-top: 20px;
}

#date {
  width: 200px;
}

.row div {
  display: inline;
 padding: 5px;
}

.radio-inline {
  padding-right: 15px;
}
/* Popup container */
.popup {
  animation-name: spin;
  animation-duration: 4s;
  position: relative;
  display: inline-block;
  cursor: pointer;
}

/* The actual popup (appears on top) */
.popup .popuptext {
  
  animation-name: spin;
  animation-duration: 2s;
  visibility: hidden;
  width: 260px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 8px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: 200px;
}

/* Popup arrow */
.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;

}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}

@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}

.lds-ripple {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-ripple div {
  position: absolute;
  border: 4px solid #fff;
  opacity: 1;
  border-radius: 50%;
  animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.lds-ripple div:nth-child(2) {
  animation-delay: -0.5s;
}
@keyframes lds-ripple {
  0% {
    top: 36px;
    left: 36px;
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    top: 0px;
    left: 0px;
    width: 72px;
    height: 72px;
    opacity: 0;
  }
}

JavaScript

var apiKey = "Test API Key"; // API Key not validated test environments
var posProductInfo = {
  posProductVendor: "Acme Co",
  posProductName: "Acme Cloud POS",
  posProductVersion: "1.0.0"
};
var iclient = new TYRO.IClientWithUI(apiKey, posProductInfo);

function pairing() {
   var x = document.getElementById("iClientFrame")
   x.src
   = "https://iclientsimulator.test.tyro.com/configuration.html";
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}


function doManualSettlement() {
reset();
iclient.manualSettlement(responseReceivedCallback);
}

function reset() {
  $("#result").html("");
  $("#data").html("");
  $("#error").html("");
}

var responseReceivedCallback = function(response) {
console.log(JSON.stringify(response));
$("#result").html(response.result);
$("#Message").html(response.message);
$("#TerminalBusinessDay").html(response.currentTerminalBusinessDay);

}