two iframes
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 id="tokenExIframe1" width="30%" height="20%" scrolling="no" frameborder="0" src="https://test-htp.tokenex.com/iframe/v2/gVoFuexvtD5KKBzjlralBYBUY6ZusB4g0MkHdEbi"></iframe>
<br/>
<iframe id="tokenExIframe2" width="30%" height="20%" scrolling="no" frameborder="0" src="https://test-htp.tokenex.com/iframe/v2/3ff5a4f4655e4743983d9b89db6391cb"></iframe>
<button type="button" id="bthTokenize1">Tokenize1</button>
<button type="button" id="bthTokenize2">Tokenize2</button>
JavaScript
document.getElementById('bthTokenize1').onclick = tokenize1;
document.getElementById('bthTokenize2').onclick = tokenize2;
var iframe1 = document.getElementById("tokenExIframe1");
var iframe2 = document.getElementById("tokenExIframe2");
//add event listener for postmessage
if (window.addEventListener) {
addEventListener("message", listener, false)
} else {
attachEvent("onmessage", listener)
}
function tokenize1() {
iframe1.contentWindow.postMessage('tokenize', 'https://test-htp.tokenex.com');
}
function tokenize2() {
iframe2.contentWindow.postMessage('tokenize', '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;
}
log("iframe message:" + event.data)
} else {
log("Oops! Origin: " + event.origin + " isn't allowed")
}
}
function log(message) {
document.getElementById("data").innerHTML += '<em>'+ message+ '</em>' + "<br /><br />";
}