Format Take 2

HTML

<script src="https://test-htp.tokenex.com/Iframe/Iframe-v3.min.js"></script>
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/rollups/hmac-sha256.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/components/enc-base64-min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
  </head>

  <body>
<input type="hidden" id="txAuthenticationKey" value="S6B5DkVxMmo32J1yP/H44MUeZ6iyNVTO/tG645rtb+M=" />
  <input type="hidden" id="txID" value="6516214927" />
  <input type="hidden" id="txOrigin" value="https://jsfiddle.net/" />
  <input type="hidden" id="txTimeStamp" value="20180525174931" />
  <br />
  <div id="tokenExIframeDiv" style="width:200px; height:32px"></div>
  <div id="tokenExIframeCVVDiv" style="width:60px; height:32px"></div>
  <button type="button" id="bthTokenize">Tokenize</button>
  <button type="button" id="bthValidate">Validate</button>
  <button type="button" id="btnReset">Reset</button>
  <button type="button" id="btnFocus">focus</button>
  <button type="button" id="btnBlur">Blur</button>
  <button type="button" id="btnCvvFocus">cvvfocus</button>
  <button type="button" id="btnCvvBlur">cvvBlur</button>
  <button type="button" id="btnRemove">Remove</button>
  <button type="button" id="btnLoad">Load</button>
    <br />
    <br />
    <h1>Event Logs:</h1>
    <div id="logs"> </div>
  </body>
</html>

CSS

/* Styles go here */
p {
    font-size: small;
}

#data {
    overflow-y: auto;
    height: 440px;
}

JavaScript

// Code goes here
function ready(fn) {
    if (document.addEventListener) {
        document.addEventListener("DOMContentLoaded", fn);
    } else {
        document.attachEvent("onreadystatechange", function () {
            if (document.readyState === "complete") {
                fn();
            }
        });
    }
}
ready(function () {


var tid = document.getElementById("txID").value;
var origin = document.getElementById("txOrigin").value;
//(tokenexid+"|"+origin+"|"+time+"|fourTOKENfour", apiKey));
var timestamp = moment().utc().format("YYYYMMDDHHmmss")
var hash = CryptoJS.HmacSHA256(tid + "|" + origin + "|" + timestamp + "|fourTOKENfour", "New4You!!");
var hashInBase64 = CryptoJS.enc.Base64.stringify(hash);

document.getElementById("txAuthenticationKey").value = hashInBase64;
document.getElementById("txTimeStamp").value = timestamp;

console.log(document.getElementById("txAuthenticationKey").value);
console.log(document.getElementById("txTimeStamp").value);


var ccConfig = {
    styles: {
        base: "font-family: Arial, sans-serif;padding: 0 8px;border: 1px solid rgba(0, 0, 0, 0.2);margin: 0;width: 100%;font-size: 13px;line-height: 30px;height: 32px;box-sizing: border-box;-moz-box-sizing: border-box;",
        focus: "box-shadow: 0 0 6px 0 rgba(0, 132, 255, 0.5);border: 1px solid rgba(0, 132, 255, 0.5);outline: 0;",
        error: "box-shadow: 0 0 6px 0 rgba(224, 57, 57, 0.5);border: 1px solid rgba(224, 57, 57, 0.5);",
        cvv: {

            base: "font-family: Arial, sans-serif;padding: 0 8px;border: 1px solid rgba(0, 0, 0, 0.2);margin: 0;width: 100%;font-size: 13px;line-height: 30px;height: 32px;box-sizing: border-box;-moz-box-sizing: border-box;",
            focus: "box-shadow: 0 0 6px 0 rgba(0, 132, 255, 0.5);border: 1px solid rgba(0, 132, 255, 0.5);outline: 0;",
            error: "box-shadow: 0 0 6px 0 rgba(224, 57, 57, 0.5);border: 1px solid rgba(224, 57, 57, 0.5);"
        }
    },
    pci: true,
    inputType: "text",...