QA Test Iframe

HTML

<script src="https://qa-htp.corp.tokenex.com/Iframe/Iframe-v3.js"></script>
<!--update to value from here https://dotnetfiddle.net/OyuUM0-->
<input type="hidden" id="txAuthenticationKey" value="SOBlafL1ClLARIek4rO1Yg3FqUt2FFegMry68Z6k3AY=" />
<input type="hidden" id="txID" value="9186070989" />
<input type="hidden" id="txOrigin" value="https://fiddle.jshell.net" />
<!--update to value from here https://dotnetfiddle.net/OyuUM0-->
<input type="hidden" id="txTimeStamp" value="20180529174146" />
<div id="tokenExIframeDiv" style="width:200px; height:32px"></div>
<br />
<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="btnRemove">Remove</button>
<button type="button" id="btnLoad">Load</button>
<br />
<br />
    <h1>Event Logs:</h1>
    <div id="logs">

CSS

<style>
        p {
            font-size: small;
        }
        #data {
            overflow-y: auto;
            height:440px;
        }
        
    </style>

JavaScript

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);"
            },
            pci: true,
            inputType: "text", //number|tel|default is text",
            enablePrettyFormat: true,
            enableValidateOnBlur: true,
            debug: false,
            placeholder: "CC Number",
            //required
            origin: document.getElementById("txOrigin").value,
            timestamp: document.getElementById("txTimeStamp").value,
            tokenExID: document.getElementById("txID").value,
            tokenScheme: "fourTOKENfour",
            authenticationKey: document.getElementById("txAuthenticationKey").value,
            allowUnknownCardTypes: false
          };

          var ccIframe = new TokenEx.Iframe("tokenExIframeDiv", ccConfig);
          //add evet listeners
          ccIframe.on("load", function() {
            console.log("CC iFrame Loaded");
          });
          ccIframe.on("focus", function() {
            console.log("CC iFrame focus");
          });
          ccIframe.on("blur", function() {
            console.log("CC iFrame blur");
          });
          ccIframe.on("change", function() {
            console.log("CC iFrame Change:");
          });
          ccIframe.on("validate", function(data) {
            console.log("CC iFrame validate:" + JSON.stringify(data));
          });
          ccIframe.on("cardTypeChange", function(data) {
            console.log("CC iFrame cardTypeChange:" + JSON.stringify(data));
          });
          ccIframe.on("tokenize", function(data) {
        ...