iClient Embedded Paing and IClient logs_updatedDemo using Tyro UI with purchase and refund-01

Shows how to use Tyro iClient to make a purchase or refund. Uses the Tyro UI.

by IntegrationSupport

HTML

<script src="https://iclientsimulator.test.tyro.com/iclient-with-ui-v1.js"></script>

<h5>
    <a>Click on the pairing button before doing the transactions</a>
</h5>
<select class="form-control" id="amount">
    <option value="10000">$100.00 (Approved; swiped + cheque + PIN; EFTPOS card type)</option>
     <option value="10250">$102.50 (Approved transaction; swiped + PIN; 2% surcharge; Visa 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 type)</option>
    <option value="10300">$103.00 (Approved; swiped + PIN; Mastercard card type)</option>
    <option value="10301">$103.01 (Declined; swiped + PIN; Mastercard card type)</option>
    <option value="10308">$103.08 (Approved; swiped + signature; Mastercard card type)</option>
    <option value="10400">$104.00 (Approved; swiped + PIN; AMEX card type)</option>
    <option value="10401">$104.01 (Declined; swiped + PIN; AMEX card type)</option>
    <option value="10408">$104.08 (Approved; swiped + signature; AMEX card type)</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</button>
<button type="button" class="mt10 btn btn-primary" onclick="continueLastTransaction()">Continue Last Transaction</button>
<button type="button" class="mt10 btn btn-primary" onclick="pairing()">pairing</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",
    siteReference: "E.g. my customer ID or address"
};
var iclient = new TYRO.IClientWithUI(apiKey, posProductInfo);
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 iClientlogs() {
   var x=document.getElementById("iClientFrame")
       x.src
   = "https://iclientsimulator.test.tyro.com/logs.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();
    doRefund($("#amount").val());
}

function continueLastTransaction() {
    reset();
    doContinueLastTransaction($("#amount").val());
}

function reset() {
    $("#merchantReceipt").html("Merchant Receipt");
    $("#customerReceipt").html("Customer Receipt");
    $("#result").html("Result");
}
var receiptCallbackImpl = function (receipt) {
    console.log("Merchant Receipt = " + JSON.stringify(receipt));
    $("#merchantReceipt").html(formatReceipt(receipt.merchantReceipt));
};
var transactionCompleteCallbackImpl = function (response) {
    console.log("Response = " + JSON.stringify(response));
    if (response.customerReceipt) {
        console.log("Customer Receipt = " +...