Pairing and Multi-merchant 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>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            
<h3>Configuration</h3>

        </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">
            </div>
            <button type="button" class="btn btn-primary" onclick="pair()">Commence Pairing</button>
        </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>
    
    <h3 class="mt20">Pairing data</h3>

            <table style="width: 100%;">
                <tr valign="top">
                    <td style="width: 35%">
                        <div id="MID">Merchant IDs <br></div>
                    </td>
                    <td style="width: 35%">
                        <div id="TID">Terminal IDs <br></div>
                    </td>
                    <td style="width: 30%">
                        <div id="IntegrationKey">Integration Key <br></div>
                    </td>
                </tr>
      ...

CSS

body {
    margin: 10px;
}
h3 {
    margin-top: 0;
}
td {
    padding: 3px;
}
.mt10 {
    margin-top: 10px;
}
.mt15 {
    margin-top: 15px;
}
.mt20 {
    margin-top: 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 +=...