Local Host Iframe

by TokenEx Support

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/rollups/hmac-sha256.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/components/enc-base64-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://test-htp.tokenex.com/Iframe/iframe-v3.js"></script>
<!--update to value from here https://dotnetfiddle.net/OyuUM0-->
<input type="hidden" id="txAuthenticationKey" value="S6B5DkVxMmo32J1yP/H44MUeZ6iyNVTO/tG645rtb+M=" />
<input type="hidden" id="txID" value="9186070989" />
<input type="hidden" id="txOrigin" value="https://jsfiddle.net,http://fiddle.jshell.net" />
<!--update to value from here https://dotnetfiddle.net/OyuUM0-->
<input type="hidden" id="txTimeStamp" value="20180525174931" />
<div id="tokenExIframeDiv" style="width:200px; height:32px"></div>
<br />
<div id="tokenExIframeCVVDiv" style="width:50px; 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="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

console.log("Asdf");

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", //number|tel|default is text",
  enablePrettyFormat: true,
  enableValidateOnBlur: true,
  debug: true,
  placeholder: "CC Number",
  //required
  origin: "https://jsfiddle.net,http://fiddle.jshell.net",
  timestamp: "",
  tokenExID: "9186070989",
  tokenScheme: "PCI",
  authenticationKey: "",
  allowUnknownCardTypes: false,
   cvv: true,
  cvvOnly: false,
  //token: "5454545454545454",
  cvvInputType: "number",
  cvvElement: "tokenExIframeCVVDiv",
  cvvPlaceholder: "PCI"
};

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

ccConfig.authenticationKey = hashInBase64;
console.log(ccConfig);

var ccIframe = new...