Integrated Tipping 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 Tipping Demo</h2>

<p>Please select the amount and process a purchase transaction first<br>The <strong>"Refund Last Transaction"</strong> button can be clicked to initiate a refund of the previous transaction with the tip-inclusive amount.
</p>

<select class="form-control" id="amount">
    <option value="22000">$220.00 (EFTPOS Purchase + Tip transaction with APPROVED result)</option>
    <option value="22001">$220.01 (EFTPOS Purchase + Tip transaction with DECLINED result)</option>
    <option value="22011">$220.11 (EFTPOS Purchase + Tip transaction with VIP)</option>
    <option value="22200">$222.00 (VISA Purchase + Tip transaction with APPROVED result)</option>
    <option value="22201">$222.01 (VISA Purchase + Tip transaction with DECLINED result)</option>
    <option value="22208">$222.08 (VISA Purchase + Tip transaction with Signature)</option>
</select>


<button type="button" class="mt10 btn btn-primary" onclick="purchase()">Purchase</button>
<button type="button" class="mt10 btn btn-primary" onclick="refund()">Refund Last Transaction</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>



<h3 class="mt10">Transaction result</h3>

<table style="width: 100%;">
  <tr valign="top">
    <td style="width: 35%">
      <div id="merchantReceipt">Merchant Receipt</div>
    </td>
    <td style="width: 35%">
      <div id="customerReceipt">Customer Receipt</div>
    </td>
    <td style="width: 30%">
      <div id="result">Result</div>
    </td>
  </tr>
</table>

<script>
// When the user clicks on div, open the...

CSS

body {
  margin: 10px;
}

h3 {
  margin-top: 0;
}

td {
  padding: 3px;
}

.mt10 {
  margin-top: 10px;
}

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 transactionType = "purchase";
var totalamount=0;

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

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 purchase() {
  reset();
  doPurchase($("#amount").val());
}

function refund() {
    reset();
    console.log(totalamount);
    if (totalamount==0){
    alertFunction();
    }
    doRefund(String(totalamount*100));
}

function reset() {
  $("#merchantReceipt").html("Merchant Receipt");
  $("#customerReceipt").html("Customer Receipt");
  $("#result").html("Result");
  
  
}



var receiptCallbackImpl = function(receipt) {
  $("#merchantReceipt").html(formatReceipt(receipt.merchantReceipt));
};

var transactionCompleteCallbackImpl = function (response) {
    console.log("Response = " + JSON.stringify(response));
		var tip=response.tipAmount/100;
    if (response.customerReceipt) {

        console.log("Customer Receipt = " + JSON.stringify(response.customerReceipt));

//Compiling the integrated receipt:
if(transactionType=="purchase" && response.result=="APPROVED"){
    total = ($("#amount").val()/ 100);
		totalamount = total+tip;
    console.log(totalamount);
var posReceipt = formatReceipt("\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$\r\nCoffee\t\t\t" + "$"+total + "\r\n\t\r\nSub-total\t\t" + "$"+total + "\r\n\r\nTip\t\t\t"+ "$"+ tip +...