Surcharge 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 Surcharge Demo</h2>

<p> Please click on the pairing button to complete the pairing process before commencing a transaction. 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 surcharge-inclusive amount.

</p>

<select class="form-control" id="amount">
    <option value="10250">$102.50 (Approved transaction; swiped + PIN; 2% surcharge; Visa card type)</option>
    <option value="10251">$102.51 (Declined transaction; swiped + PIN; 2% surcharge; Visa card type)</option>
    <option value="10350">$103.50 (Approved transaction; swiped + PIN; 2% surcharge; Mastercard card type)</option>
    <option value="10351">$103.51 (Declined transaction; swiped + PIN; 2% surcharge; Mastercard card type)</option>
    <option value="10450">$104.50 (Approved transaction; swiped + PIN; 2% surcharge; AMEX card type)</option>
    <option value="10451">$104.51 (Declined transaction; swiped + PIN; 2% surcharge; AMEX card type)</option>
    <option value="10550">$105.50 (Approved transaction; swiped + PIN; 2% surcharge; Diners card type)</option>
    <option value="10551">$105.51 (Declined transaction; swiped + PIN; 2% surcharge; Diners card type)</option>
</select>

<div class="radio"><label><input type="radio" name="enableSurcharge" value="true" checked="true"> Enable surcharge</label></div>
<div class="radio"><label><input type="radio" name="enableSurcharge" value="false"> Disable surcharge</label></div>
<button type="button" class="mt10 btn btn-primary" onclick="purchase()">Purchase</button>
<button type="button" class="mt10 btn btn-primary"...

CSS

body {
  margin: 10px;
}

h3 {
  margin-top: 0;
}

td {
  padding: 3px;
}

.mt10 {
  margin-top: 10px;
}

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;

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 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));

  if (response.customerReceipt) {

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

    //Compiling the integrated receipt:
    if (transactionType == "purchase" && response.result == "APPROVED") {
      var surcharge = parseFloat(response.surchargeAmount);
      total = ($("#amount").val() / 100) + surcharge;
      totalamount = total;
      console.log(totalamount);
      var posReceipt = formatReceipt("\tTAX INVOICE       \r\n\r\n      Merchant 1655650   ...