PCI Mode Iframe

https://docs.tokenex.com/?page=iframe#pci-configuration

by jakeburcham

HTML

<html>

  <head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
  </head>

  <h2>TokenEx IFrame Demo</h2>

  <form action="/" id="iframeform" method="post" name="iframeform">
    <!--update txHMAC and txTimestamp from here https://dotnetfiddle.net/bsByKO-->
    <input type="hidden" id="txHMAC" value="LfmUbvhvQD9SrIr3FZwRX2wvPGJCvNqo9wea3ZGpmT0=" />
    <input type="hidden" id="txTimestamp" value="20200313152821" />
    <input type="hidden" id="txID" value="8234765746453902" />
    <input type="hidden" id="txOrigin" value="https://fiddle.jshell.net,https://jsfiddle.net" />
    <input type="hidden" id="txTokenScheme" value="PCI" />
    <input id="iframeData" name="IframeData" type="hidden" value="" />
    <input data-val="true" data-val-required="The Token field is required." id="token" name="Token" type="hidden" value="" />
    <input data-val="true" data-val-required="The HMAC field is required." id="hmac" name="HMAC" type="hidden" value="" />
    <div class="row">
      <div class="half">
        <label for="FirstName">First Name</label>
        <input class="" data-val="true" data-val-required="The First Name field is required." id="firstName" name="FirstName" type="text" value="" />
      </div>
      <div class="half">
        <label for="LastName">Last Name</label>
        <input class="" data-val="true" data-val-required="The Last Name field is required." id="lastName" name="LastName" type="text" value="" />
      </div>
    </div>
    <hr />
    <label>Credit Card Number</label>
    <div id="tokenExIframeDiv"></div>
    <div class="row">
      <label>Security Code</label>
      <input class="" data-val="true" data-val-required="The CVV field is required." id="cvv" name="cvv" type="text" value="" />
    </div>
    <label>Expiration Date</label>
    <div class="row">
      <div class="half">
        <select data-val="False" data-val-number="The field ExpMonth must be a number." data-val-required="The ExpMonth field is...

JavaScript

var iframeConfig = {
  origin: document.getElementById("txOrigin").value,
  timestamp: document.getElementById("txTimestamp").value,
  tokenExID: document.getElementById("txID").value,
  tokenScheme: document.getElementById("txTokenScheme").value,
  authenticationKey: document.getElementById("txHMAC").value
}

var iframe = new TokenEx.Iframe("tokenExIframeDiv", iframeConfig);

iframe.on("load", function() {
  console.log("iFrame Loaded");
});
iframe.on("focus", function() {
  console.log("iFrame Focus");
});
iframe.on("blur", function() {
  console.log("iFrame blur");
  iframe.validate();
});
iframe.on("validate", function(data) {
  console.log("iFrame validate:" + JSON.stringify(data));
});
iframe.on("cardTypeChange", function(data) {
  console.log("iFrame cardTypeChange:" + JSON.stringify(data));
});
iframe.on("tokenize", function(data) {
  console.log("iFrame Tokenize:" + JSON.stringify(data));
});
iframe.on("error", function(data) {
  console.log("iFrame error:" + JSON.stringify(data));
});

document.getElementById('btnSubmit').addEventListener("click", function(event) {
  event.preventDefault();
  iframe.tokenize();
});

iframe.load();