JSFiddle - React, Tailwind, and code Playground

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>Tyro iClient Demo</h2>
<h5>
    <a target="_blank" href="">Complete the pairing process by clicking the pairing button</a>
    <br>
    <br>
    <h4>Transaction Amount</h4>
    <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; swiped + PIN; 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>

<br>
<h4>Cashout Amount</h4>
<select class="form-control" id="cashout">
    <option value="0">No Cashout</option>
    <option value="1000">$10.00</option>
    <option value="2000">$20.00</option>
   ...

CSS

body {
    margin: 10px;
}
h3 {
    margin-top: 0;
}
h5 {
    margin-top: 20px;
}
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);

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();
    var transactId = $("#transactionId").val();
    doPurchase($("#amount").val(), $("#cashout").val(), transactId);
}

function refund() {
    reset();
    doRefund($("#amount").val(), $("#transactionId").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) {
        $("#customerReceipt").html(formatReceipt(response.customerReceipt));
    }
    $("#result").html(formatResult(response));
};

function doPurchase(amount, cashout, transactId) {
  
    iclient.initiatePurchase({
        amount: amount,
        cashout: cashout,
        enableSurcharge: true,
        integratedReceipt: true,
        transactionId: transactId
    }, {
        receiptCallback: receiptCallbackImpl,
        transactionCompleteCallback: transactionCompleteCallbackImpl
    });
}

function doRefund(amount, transactionId) {
    iclient.initiateRefund({
    ...