Headless Pairing - Demo

Headless Pairing - Demo

by IntegrationSupport

HTML

<script src="https://iclientsimulator.test.tyro.com/iclient-with-ui-v1.js"></script>
<div class="container">
  <div class="row">
    <div class="col-md-12">

      <h3>Configuration </h3>
<h4>Please complete the pairing process (Authorise POS) before initiating a transaction </h4>
    </div>
    <div class="col-xs-6">
      <div class="form-group">
        <label for="merchantId">Merchant ID:</label>
        <input class="form-control" id="merchantId" placeholder="Merchant ID">
      </div>
      <div class="form-group">
        <label for="merchantId">Terminal ID:</label>
        <input class="form-control" id="terminalId" placeholder="Terminal ID">
     <br>   <br> 
      </div>

<button type="button"  class="button_class" onclick="pair()"><b>Authorise POS</b></button>
       <br>   <br> 
    </div>
    <div class="col-xs-6">
      <div>
        <label for="status">Status:</label>
        <div id="status"></div>
      </div>
      <div class="mt20">
        <label for="message">Message:</label>
        <div id="message"></div>
      </div>
      <div class="mt20">
        <label for="key">Integration Key:</label>
        <div id="key"></div>
      </div>
    </div>
  </div>
 <div class="col-md-12">
      <h3 class="mt20">Select transaction</h3>

      <select class="form-control" id="amount">
        <option value="10000">$100.00 (Approved; swiped + cheque + PIN; EFTPOS card type)</option>
        <option value="10001">$100.01 (Declined; swiped + cheque + PIN; EFTPOS card type)</option>
        <option value="10100">$101.00 (Approved; swiped + savings + PIN; EFTPOS card type)</option>
        <option value="10101">$101.01 (Declined; swiped + savings + PIN; EFTPOS card type)</option>
        <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...

CSS

body {
    margin: 10px;
}
h3 {
    margin-top: 0;
}
td {
    padding: 3px;
}
.mt10 {
    margin-top: 10px;
}
.mt15 {
    margin-top: 15px;
}
.mt20 {
    margin-top: 20px;
}
.button_class
{
	background-color: gray;
	color: white;
	width: 120px;
	height: 20px;
}

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 merchantId = undefined;
var terminalId = undefined;
var integrationKey = undefined;
var merchantIdTransact = $("#merchantIdTransaction").val();
var terminalIdTransact = $("#terminalIdTransaction").val();
var integrationKeyTransact = $("#integKeyTransaction").val();
var i = 0;

let text = '{"terminals":[' +
'{"mid":"","tid":"", "integrationKey":"" }]}';

const obj = JSON.parse(text);
console.log(obj.terminals[0].mid + " " + obj.terminals[0].tid);

var pairingCallback = function (response) {
    console.log(JSON.stringify(response));
    $("#status").html(response.status);
    $("#message").html(response.message);
    $("#key").html(response.integrationKey);
    
    if ("success" == response.status) {
        integrationKey = response.integrationKey;
        $("#transaction").show();
        
        if (i==0){
        obj.terminals[i].mid= merchantId;
        obj.terminals[i].tid= terminalId;
        obj.terminals[i].integrationKey= response.integrationKey;
        console.log(obj.terminals[i].mid + " " + obj.terminals[i].tid+" "+obj.terminals[i].integrationKey);
       
        console.log(i);
        }
      
        if(i>0){
   			var array = {"mid":merchantId, "tid":terminalId, "integrationKey":response.integrationKey};
        
         obj["terminals"].push(array);
         console.log(obj);
        }
          i = i + 1;
       formatPairingResult();
    }
};

function formatPairingResult(response) {
console.log("You are in this function");
console.log(merchantId);
console.log(terminalId);
    document.getElementById("MID").innerHTML += merchantId + "<br>";
    document.getElementById("TID").innerHTML += terminalId + "<br>";
    document.getElementById("IntegrationKey").innerHTML +=...