Integrated Pre-Auth Demo - 07/04/2026

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>
<style>
    .myDiv {
        background-color: #ABBAEA;
    }    
</style>

<h2>Integrated Pre-Auth Demo</h2>

<p>Please select the pre-auth amount and press the <strong> "Open Pre-auth" </strong> button to secure the pre-auth first<br>Then please input  a auth completion amount and press the <strong>"Close Pre-auth"</strong> button to close the pre-auth.
</p>

<h4>Select Pre-Auth amount</h4>

<select class="form-control" id="tabLimitAmount">
    <option value="10200">$102.00 (Approved; swiped + credit + PIN; Visa card type)</option>
    <option value="10201">$102.01 (Declined; swiped + credit + PIN; Visa card type)</option>
    <option value="10208">$102.08 (Approved; swiped + credit + signature; Visa card type)</option>
    <option value="240000">$2400.00 (Approved; swiped + credit + PIN; Visa card type)</option>
    <option value="250000">$2500.00 (Approved; swiped + credit + PIN; Visa card type)</option>
</select>

<button id="openTabBtn" type="button" class="mt10 btn btn-primary" onclick="openTab()">Open Pre-auth</button> 
<button type="button" class="mt10 btn btn-primary" onclick="pairing()">Pairing</button>

<h4 class="mt10">
 <iframe id="iClientFrame" src="" 
       style="height: 400px; width: 400px;">
    </iframe>
    </h4>
<br>
<div class="myDiv" id="tabRef"></div>


<br>

<form>
<div>
<label>Pre-Auth Increment Amount (in cents)</label>
<input class="form-control" id="tabIncrementAmount">
<small id="tabHelp" class="form-text text-muted">Amount specified will be added onto the original pre-auth amount</small>

</div>

<button id="incrementTabBtn" type="button" class="mt10 btn btn-primary disabled" onclick="incrementTab()">Increment...

CSS

body {
    margin: 10px;
}
h3 {
    margin-top: 0;
}
td {
    padding: 3px;
}
.mt10 {
    margin-top: 10px;
}

.myDiv {
  margin-top: 10px;
  font-size: large;
  
}

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);
var completionRef;
var amount;
var tabCompletionAmount;
var tabIncrementAmount;
var messageString = "Pre-auth Completion Reference: "

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 to process the Open Tab request //
function openTab() {
    reset();
    //Setting the div colors back to original//
     var element = document.getElementById("tabRef");
  element.style.backgroundColor = "#ABBAEA";
  element.style.color = "black";
  
  var element2 = document.getElementById("result");
var color = element.style.color;
if (color == "red"){
toggleCrresult();
}
  
    amount = $("#tabLimitAmount").val();
    console.log(amount);
    doOpenTab(amount);
    console.log(amount);
}

function incrementTab(){
tabIncrementAmount =  $("#tabIncrementAmount").val();
var element = document.getElementById("tabRef");
  element.style.backgroundColor = "#ABBAEA";
  element.style.color = "black";
  doIncrementTab(completionRef, tabIncrementAmount);
  
}


//Function to process the Close Tab request//
function closeTab() { // no receipts are returned / printed for the close function
tabCompletionAmount = $("#tabCompletionAmount").val();

if (Number(tabCompletionAmount) > 0 &&
    Number(tabCompletionAmount) <= Number(amount)) {
toggleClrResult("black");
doCloseTab(completionRef, tabCompletionAmount);
}
else if(tabCompletionAmount > amount){
toggleClrResult("red");
//window.alert("Tab Completion Amount Cannot be greater than the tab...