Iframve v2

HTML

<p id="data"></p>

<!--update the src of this iframe to the HTPURL you obtained from the https://test-htp.tokenex.com/api/v1 call -->
<iframe src="https://test-htp.tokenex.com/iframe/v3?AuthenticationKey=U9QiHItb7m4nayd8B4BwNxNFtWH7Q4oUSsE3uhkOtvs%3D&amp;Origin=http%3A%2F%2Flocalhost%2Ftest&amp;TokenExID=8304032339458072&amp;Timestamp=20180806072425&amp;Container=tokenExIframeDiv&amp;Mode=Data&amp;PCI=true&amp;TokenScheme=sixANTOKENfour" id="tx_iframe_tokenExIframeDiv" name="tx_iframe_tokenExIframeDiv" width="100%" height="100%" frameborder="0"></iframe>
<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="btnPretty">Enable Pretty</button>
<button type="button" id="btnFocus">focus</button>

JavaScript

document.getElementById('bthTokenize').onclick = tokenize;
document.getElementById('btnReset').onclick = reset;
document.getElementById('btnPretty').onclick = pretty;
document.getElementById('btnFocus').onclick = focus;
var iframe = docdocument.getElementById('bthValidate').onclick = validate;ument.getElementById("tokenExIframe");

//add event listener for postmessage
if (window.addEventListener) {
  addEventListener("message", listener, false)
} else {
  attachEvent("onmessage", listener)
}

//send the tokenize command to the iframe
function pretty() {
  iframe.contentWindow.postMessage('enablePrettyFormat', 'https://test-htp.tokenex.com');
}
function focus() {
  iframe.contentWindow.postMessage('focus', 'https://test-htp.tokenex.com');
}
//enable pretty formated pan
function tokenize() {
  iframe.contentWindow.postMessage('tokenize', 'https://test-htp.tokenex.com');
}
//send the validate command to the iframe
function validate() {
  
  iframe.contentWindow.postMessage('validate', 'https://test-htp.tokenex.com');
}
//send the reset command to the iframe
function reset() {
  var iframe = document.getElementById("tokenExIframe");
  iframe.contentWindow.postMessage('reset', 'https://test-htp.tokenex.com');
}

//handle the message from the iframe
function listener(event) {
  if (event.origin === 'https://test-htp.tokenex.com') {
    var message = JSON.parse(event.data);
    switch (message.event) {
      case 'focus':
        if (message.data.value) {
          //field has focus
        } else {
          //field does not have focus(blur)
        }
      case 'change':
        // field changed
        break;
      case 'validation':
        if (!message.data.isValid) {
          //field failed validation
        } else {
          //validation valid!
        }
        break;
      case 'post':
        if (!message.data.success) {
          // use message.data.error 
        } else {
          //get token! message.data.token
        }
        break;
    }
   ...