Split-payment-Demo-Code

by IntegrationSupport

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="https://iclientsimulator.test.tyro.com/iclient-with-ui-v1.js"></script>
<style>
    .myDiv {
        background-color: #ABBAEA;
    }
    
  
</style>


<h2 font-weight="bolder;">Integrated Split-Payment Demo</h2>

<p>Please select the total amount, specify the split-payments and process the split-payment as an eftpos transaction by pressing the <strong>"Tyro EFTPOS"</strong> button or as a cash transction by pressing the <strong>"Cash"</strong> button.</p>
<br>


<p> Please select the <strong>total amount</strong></p>

<select class="form-control" id="amount">
    <option value="21500">$215.00 (Approved transaction; swiped + PIN; 2% surcharge; Visa card type)</option>
    <option value="30000">$300.00 (Approved transaction; swiped + PIN; 2% surcharge; Visa card type)</option>
    <option value="30000">$300.00 (Declined transaction; swiped + PIN; 2% surcharge; Visa card type)</option>
    <option value="20500">$205.00 (Approved transaction; swiped + PIN; 2% surcharge; Mastercard card type)</option>
    
</select>
<button type="button" class="mt10 btn btn-primary" onclick="setAmount()">Set Amount</button>

<br>
<br>

<p> Please specify the <strong>split-amount</strong> and process via cash or eftpos</p>

<select class="form-control" id="splitamount">
    <option value="10250">$102.50 (Approved transaction; swiped + PIN; 2% surcharge; Visa card type)</option>
        <option value="1000">$10.00 (Approved transaction; Cash ; cash; Payment method-Cash)</option>
    <option value="10000">$100.00 (Approved transaction; swiped + PIN; 2% surcharge; Visa card type)</option>
    <option value="10250">$102.50 (Declined transaction; swiped + PIN; 2% surcharge; Visa card type)</option>
        <option value="50000">$500.00 (Declined transaction; swiped + PIN; 2% surcharge;...

CSS

body {
  margin: 10px;
}

h3 {
  margin-top: 0;
}

td {
  padding: 3px;
}

.mt10 {
  margin-top: 10px;
}

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

JavaScript

// Before running this fiddle, you will need to pair your virtual terminal with the browser using this page:
// https://iclientsimulator.test.tyro.com/configuration.html

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 transactionType = "purchase";
var totalamount=0;
var outstandingAmount;
var splitAmount;
var integReceipt= "\tTAX INVOICE       \r\n\r\n      Merchant 1655650     \r\n      Address line 1       \r\n      Address line 2       \r\n\r\n\tAWESOME POS   \r\n\t\r\nItems\t\t\t";
var receipts= "\t-----------------------\n\n";

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";
  }
        }

// The Tyro simulator uses 'magic' amounts. Refer to this page for more details:
// https://integrationsimulator.test.tyro.com/docs/

function setAmount(){
reset();
var element = document.getElementById("outstandingAmount");
        element.style.backgroundColor = "#ABBAEA";
        element.style.color = "black"; 	

outstandingAmount=parseFloat($("#amount").val())/100;
 $("#outstandingAmount").html(outstandingAmount);
 integReceipt= "\tTAX INVOICE       \r\n\r\n      Merchant 1655650     \r\n      Address line 1       \r\n      Address line 2       \r\n\r\n\tAWESOME POS   \r\n\t\r\nItems\t\t\t";
receipts= "\t-----------------------\n\n";
}


function purchase() {
  reset();
  var element = document.getElementById("result");
  element.style.color = "black";
  splitAmount=parseFloat($("#splitamount").val())/100;
  if (splitAmount <=outstandingAmount){
  doPurchase($("#splitamount").val());
  console.log(outstandingAmount);
  }
  
  else if(splitAmount >...