Secure Overlay API

<script type="text/javascript">
    ... 
    window.addEventListener('message', receiveMessage, false);
    const remoteDomain = 'https://wsdemo.pdc4u.com';
    let preType = 'CCN';

    //These are used to set up and communicate through the dedicated channel
    const channel1 = new MessageChannel();
    let port1 = channel1.port1;

    /*
     * This function will be used once, to handle the PRELOAD function
     * On the PRELOAD function, we will set up a dedicated MessageChannel to converse between iFrame and parent page
     */
    function receiveMessage(event) {
      if(event.origin !== remoteDomain) {
        console.log('remote origin: ' + event.origin);
        return;
      }

      if (event.data.function === 'PRELOAD') {
          //Establish the MessageChannel and handle any preload data (if you already have a token, pass it here)
      }
    }

    function receivedPortMessage(e) {
      //Once the MessageChannel is established, any communication from the overlay will be received here
    }

    function sendMessage(data) {
      port1.postMessage(data);
    }

    function tokenizeData() {
      var requiredData = {};
      ...
      sendMessage(data);
    }
    ...
</script>

{
  "function": "PRELOAD",
  "backgroundColor": "#fff",
  "fontSize": "12",
  "token": "thisIsAToken1234",
  "focus": "false",
  "shouldNotify": "true",
  "clearFieldOnFocus": "true",
  "dataType": "CCN",
  "placeholder": "Card Number"
}

{
  "function": "PROCESS",
  "companyId": 1234,
  "apiKey": "yourApiKeyHere",
  "dataType": "CCN",
  "ccExpMonth": "12",
  "ccExpYear": "2024",
  "routingNumber": "",
  "bankAccountType": "",
  "authorizedForFutureUse": "true",
  "secondName": ""
}

{
  "function": "PATCH",
  "companyId": 1234,
  "apiKey": "yourApiKeyHere",
  "dataType": "CCN",
  "ccExpMonth": "12",
  "ccExpYear": "2024",
  "routingNumber": "",
  "bankAccountType": "",
  "existingToken": "ThisIsAToken1234",
  "authorizedForFutureUse": "true",
  "secondName": ""
}

{
  "function": "BULK_UPLOAD",
  "companyId": 1234,
  "apiKey": "yourApiKeyHere",
  "dataType": "CCN",
  "bulkType": "TRANSACTION"
}

Header row (card):
FIRST_NAME, LAST_NAME, STREET_ADDRESS_ONE, CITY, STATE, ZIP, COUNTRY, PAYMENT_AMOUNT, FEE_AMOUNT, ACCOUNT_NUMBER, EMAIL_ADDRESS, PHONE_NUMBER, MEMO, CARD_NUMBER, CARD_MONTH, CARD_YEAR, CARD_CODE, POST_AUTHORIZATION

Header row (check):
FIRST_NAME, LAST_NAME, STREET_ADDRESS_ONE, CITY, STATE, ZIP, COUNTRY, PAYMENT_AMOUNT, FEE_AMOUNT, ACCOUNT_NUMBER, EMAIL_ADDRESS, PHONE_NUMBER, MEMO, BANK_ACCOUNT_NUMBER, BANK_ROUTING_NUMBER, BANK_ACCOUNT_TYPE

{
  "function": "CLEAR"
}

{
  "function": "PRELOAD",
  "id": "secondIframeId"
}

{
  "function": "NOTIFY",
  "code": "001",
  "message": "Data in field changed to valid.",
  "cardType": "VISA"
}

{
  "function": "RESULT",
  "result": "ERROR",
  "token": "",
  "cardType": "VISA",
  "mask": "4444441111",
  "errorList": [
    {
      "code": "10003",
      "description": "Field invalid",
      "fieldName": "ccExpYear"
    }
  ]
}

{
  "function": "RESPONSE",
  "result": "OK",
  "bulk": [
    {
      "firstName": "Monster",
      "lastName": "Mash",
      "paymentAmount": "125",
      "feeAmount": "3.00",
      "accountNumber": "123451",
      "emailAddress": "test@test.com",
      "memo": "Part of bulk transactions",
      "cardMonth": "12",
      "cardYear": "2025",
      "token": "thisIsAToken1234",
      "mask": "4000111234",
      "cardType": "VISA"
    },
    {
      "firstName": "November",
      "lastName": "Rain",
      "paymentAmount": "125",
      "feeAmount": "3.00",
      "accountNumber": "11111",
      "emailAddress": "test2@test.com",
      "memo": "Part of bulk transactions",
      "cardMonth": "4",
      "cardYear": "2023",
      "token": "thisIsAToken2222",
      "mask": "4000112222",
      "cardType": "VISA"
    }
  ]
}

Bank csv
FIRST_NAME *, LAST_NAME *, PAYMENT_AMOUNT *, FEE_AMOUNT *, ACCOUNT_NUMBER *, BANK_ACCOUNT_NUMBER, BANK_ROUTING_NUMBER, BANK_ACCOUNT_TYPE
Crazy, Bob, 125, 3.5, 123444, 123456789, 124000054, CHECKING
Lard, McGoo, 125, 3.5, 123444, 987654321, 124000054, SAVINGS

Card csv
FIRST_NAME *, LAST_NAME *, STREET_ADDRESS_ONE, CITY, STATE, ZIP, COUNTRY, PAYMENT_AMOUNT *, FEE_AMOUNT *, ACCOUNT_NUMBER *, EMAIL_ADDRESS, PHONE_NUMBER, MEMO, CARD_NUMBER *, CARD_MONTH *, CARD_YEAR *, CARD_CODE, POST_AUTHORIZATION
Crazy, Bob, here, there, UT, 84067, US, 125, 3.5, 123444, , , memo, 4000100011112224, 12, 2025, 444, postAuth

{
  "firstName": "Monster",
  "lastName": "Mash",
  "city": "here",
  "state": "CA",
  "zip": "90210",
  "country": "US",
  "paymentAmount": "125",
  "feeAmount": "3.00",
  "accountNumber": "123451",
  "emailAddress": "test@test.com",
  "memo": "Part of bulk transactions",
  "cardMonth": "12",
  "cardYear": "2025",
  "token": "thisIsAToken1234",
  "mask": "4000111234",
  "cardType": "VISA",
  "errorList": []
}

{
  "code": "10003",
  "description": "Field invalid",
  "fieldName": "ccExpYear"
}

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
  <title>Payment</title>
  <meta charset="utf-8" />
</head>
<body>
<div class="container">
  <div class="ccPayment">
    <iframe id="iframeId" src="https://wsdemo.pdc4u.com/SecureOverlay/v2_0"></iframe><br />
    <input type="tel" id="expMonth" placeholder="Expiration Month" /><br />
    <input type="tel" id="expYear" placeholder="Expiration Year" /><br />
    <p>Authorized for Future Use:</p>
    <div>
      <label for="authYes">Yes</label>
      <input type="radio" id="authYes" name="authorizedForFutureUse" value="Yes" checked>
    </div>
    <div>
      <label for="authNo">No</label>
      <input type="radio" id="authNo" name="authorizedForFutureUse" value="No">
    </div>
    <br/>
    <button id="nextButton" onclick="tokenizeData()">Tokenize</button>
  </div>
</div>

<script type="text/javascript">

  window.addEventListener('message', receiveMessage, false);
  const remoteDomain = 'https://wsdemo.pdc4u.com';
  let preType = 'CCN';

  //These are used to set up and communicate through the dedicated channel
  const channel1 = new MessageChannel();
  let port1 = channel1.port1;
  //We will use this to prevent submitting a PRELOAD request a second time in the case that a second PRELOAD message is received from SecureOverlay
  let alreadyPreloading = false; 

  /*
   * This function will be used once, to handle the PRELOAD function
   * On the PRELOAD function, we will set up a dedicated MessageChannel to converse between iFrame and parent page
   */
  function receiveMessage(event) {
    if(event.origin !== remoteDomain) {
      console.log('remote origin: ' + event.origin);
      return;
    }

    switch(event.data.function) {
      case 'PRELOAD':
        if (alreadyPreloading) {
          return;
        }
        alreadyPreloading = true;
        //First we set up the dedicated channel
        initiatePort();
        break;
    }
  }


  function initiatePort() {
    //receivedMessage function will be called when a postMessage from the iframe through this port comes through
    port1.onmessage = receivedMessage;
    //Each MessageChannel has 2 ports. One is used on the parent side (channel1.port1) and one is passed to the iframe to establish the connection (channel1.port2)
    document.getElementById("iframeId").contentWindow.postMessage('init', '*', [channel1.port2]);
  }


  function receivedMessage(e) {
    //Notice there is no needs to validate the event.origin when receiving a message as this is a dedicated channel directly from the parent page to the iframe
    console.log(e.data);
    //It is recommended here to listen for the NOTIFY 008 message, which signifies the port connection is established. Then we can remove our generic message listener and also send our PRELOAD data through the port
    if (e.data.function === 'NOTIFY' && e.data.code === '008') {
      window.removeEventListener('message', receiveMessage);
      const preloadData = {};
      preloadData.function = 'PRELOAD';
      // styleOptions.token = 'thisIsAToken1234';
      preloadData.focus = false;
      preloadData.clearFieldOnClick = false;
      preloadData.backgroundColor = "RED";
      preloadData.shouldNotify = true;
      preloadData.dataType = preType;
      sendMessage(preloadData);
    }
    else {
      //handle other communication here (notifications/tokenization response, etc.)
    }
  }

  function sendMessage(data) {
    //All that is required to do to send a message is use the port1.postMessage();
    port1.postMessage(data);
  }

  function tokenizeData() {
    const data = {};
    data.dataType = 'CCN';
    data.ccExpMonth = document.getElementById('expMonth').value;
    data.ccExpYear = document.getElementById('expYear').value;
    data.apiKey = 'replaceWithRealApiKeyForTest';
    data.companyId = 'replaceWithRealCompanyId';
    data.function = 'PROCESS';

    let radio = document.getElementsByName('authorizedForFutureUse');

    for(let i = 0; i < radio.length; i++) {
      if(radio[i].checked) {
        data.authorizedForFutureUse = radio[i].value === 'Yes';
      }
    }

    sendMessage(data);
  }

</script>

</body>
</html>

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
  <title>Payment</title>
  <meta charset="utf-8" />
</head>
<body>
<div class="container">
  <div class="achPayment">
    <iframe id="iframeId" src="https://wsdemo.pdc4u.com/SecureOverlay/v2_0"></iframe>
    <br/>
    <input type="tel" id="routingNumber" placeholder="Routing Number" />
    <br/>
    <label for="bankAccountType">Bank account type</label>
    <select name="bankAccountType" id="bankAccountType" >
      <option value="CHECKING" selected="selected">Checking</option>
      <option value="SAVINGS">Savings</option>
    </select>
    <br/>
    <p>Authorized for Future Use:</p>
    <div>
      <label for="authYes">Yes</label>
      <input type="radio" id="authYes" name="authorizedForFutureUse" value="Yes" checked>
    </div>
    <div>
      <label for="authNo">No</label>
      <input type="radio" id="authNo" name="authorizedForFutureUse" value="No">
    </div>
    <br/>
    <button id="nextButton" onclick="tokenizeData()">Tokenize</button>
  </div>
</div>


<script type="text/javascript">
  window.addEventListener('message', receiveMessage, false);
  const remoteDomain = 'https://wsdemo.pdc4u.com';
  let preType = 'BAN';

  //These are used to set up and communicate through the dedicated channel
  const channel1 = new MessageChannel();
  let port1 = channel1.port1;
  //We will use this to prevent submitting a PRELOAD request a second time in the case that a second PRELOAD message is received from SecureOverlay
  let alreadyPreloading = false;

  /*
   * This function will be used once, to handle the PRELOAD function
   * On the PRELOAD function, we will set up a dedicated MessageChannel to converse between iFrame and parent page
   */
  function receiveMessage(event) {
    if(event.origin !== remoteDomain) {
      console.log('remote origin: ' + event.origin);
      return;
    }

    switch(event.data.function) {
      case 'PRELOAD':
        if (alreadyPreloading) {
          return;
        }
        alreadyPreloading = true;
        //First we set up the dedicated channel
        initiatePort();
        break;
    }
  }


  function initiatePort() {
    //receivedMessage function will be called when a postMessage from the iframe through this port comes through
    port1.onmessage = receivedMessage;
    //Each MessageChannel has 2 ports. One is used on the parent side (channel1.port1) and one is passed to the iframe to establish the connection (channel1.port2)
    document.getElementById("iframeId").contentWindow.postMessage('init', '*', [channel1.port2]);
  }


  function receivedMessage(e) {
    //Notice there is no needs to validate the event.origin when receiving a message as this is a dedicated channel directly from the parent page to the iframe
    console.log(e.data);
    //It is recommended here to listen for the NOTIFY 008 message, which signifies the port connection is established. Then we can remove our generic message listener and also send our PRELOAD data through the port
    if (e.data.function === 'NOTIFY' && e.data.code === '008') {
      window.removeEventListener('message', receiveMessage);
      const preloadData = {};
      preloadData.function = 'PRELOAD';
      // styleOptions.token = 'thisIsAToken1234';
      preloadData.focus = false;
      preloadData.clearFieldOnClick = false;
      preloadData.backgroundColor = "RED";
      preloadData.shouldNotify = true;
      preloadData.dataType = preType;
      sendMessage(preloadData);
    }
    else {
      //handle other communication here (notifications/tokenization response, etc.)
    }
  }

  function sendMessage(data) {
    //All that is required to do to send a message is use the port1.postMessage();
    port1.postMessage(data);
  }

  function tokenizeData() {
    console.log("tokenizing");
    const data = {};
    data.dataType = 'BAN';
    data.routingNumber = document.getElementById('routingNumber').value;
    data.bankAccountType = document.getElementById('bankAccountType').value;

    let radio = document.getElementsByName('authorizedForFutureUse');

    for(let i = 0; i < radio.length; i++) {
      if(radio[i].checked) {
        data.authorizedForFutureUse = radio[i].value === 'Yes';
      }
    }

    data.apiKey = 'replaceWithRealApiKeyForTest';
    data.companyId = 'replaceWithRealCompanyId';
    data.function = 'PROCESS';

    sendMessage(data);
  }

</script>

</body>
</html>

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
  <title>Payment</title>
  <meta charset="utf-8" />
</head>
<body>
<div class="container">
  <div class="achPayment">
    <iframe id="myIframeId" src="https://wsdemo.pdc4u.com/SecureOverlay/v2_0?iframeId=myIframeId"></iframe>
    <iframe id="iframe2Id" name="iframe2Id" src="https://wsdemo.pdc4u.com/SecureOverlay/v2_0?iframeId=iframe2Id"></iframe>
    <br/>
    <input type="tel" id="routingNumber" placeholder="Routing Number" />
    <br/>
    <label for="bankAccountType">Bank account type</label>
    <select name="bankAccountType" id="bankAccountType" >
      <option value="CHECKING" selected="selected">Checking</option>
      <option value="SAVINGS">Savings</option>
    </select>
    <br/>
    <p>Authorized for Future Use:</p>
    <div>
      <label for="authYes">Yes</label>
      <input type="radio" id="authYes" name="authorizedForFutureUse" value="Yes" checked>
    </div>
    <div>
      <label for="authNo">No</label>
      <input type="radio" id="authNo" name="authorizedForFutureUse" value="No">
    </div>
    <br/>
    <button id="nextButton" onclick="tokenizeData()">Tokenize</button>
  </div>
</div>


<script type="text/javascript">
  window.addEventListener('message', receiveMessage, false);
  //mark that we have set a listener
  let listenerExists = true;

  const remoteDomain = 'https://wsdemo.pdc4u.com';
  let preType = 'BAN';

  //These are used to set up and communicate through the dedicated channel
  const channel1 = new MessageChannel();
  const channel2 = new MessageChannel();
  let port1 = channel1.port1;
  let port2 = channel2.port1;

  //We will use this to prevent submitting a PRELOAD request a second time in the case that a second PRELOAD message is received from SecureOverlay
  let alreadyPreloading = false;

  /*
   * This function will be used once, to handle the PRELOAD function
   * On the PRELOAD function, we will set up a dedicated MessageChannel to converse between iFrame and parent page
   * Because 2 Secure Overlay fields have been loaded, you will receive messages from each field, thus getting multiple PRELOAD messages.
   * In order to distinguish which iframe is sending the message, the PRELOAD message will include the id of the iframe if it is provided in the src URL, 
   * in this case "myIframeId" or "iframe2Id"
   * In most workflows, you will only need to tokenize one field. The second field would be used to validate that the user entered their information correctly
   * by having them re-enter it in the second field.
   * If the parent page has need to communicate with both SecureOverlay fields (for styling, for example), a second MessageChannel can be established, same
   * as the first is.
   */
  function receiveMessage(event) {
    if(event.origin !== remoteDomain) {
      console.log('remote origin: ' + event.origin);
      return;
    }

    switch(event.data.function) {
      case 'PRELOAD':
        initiatePort(event.data.id);
        break;
      case 'RESPONSE':
        if(event.data.errorMsg) {
          console.log('error: ' + event.data.errorMsg);
        }
        console.log('data:');
        console.log(event.data);
        break;
    }

    switch(event.data.function) {
      case 'PRELOAD':
        if (alreadyPreloading) {
          return;
        }
        //First we set up the dedicated channel for both iframe fields. This will allow us to style them both. We will only tokenize the first field, however.
        //This id is only returned if it is provided in the iframe src URL (?iframeId=myIframeId)
        alreadyPreloading = true;
        initiatePort(event.data.id);

        if (event.data.id === 'myIframeId') {
          const styleOptions = {};
          styleOptions.backgroundColor = '#ccc';
          styleOptions.fontSize = '14px';
          styleOptions.function = 'PRELOAD';
          styleOptions.dataType = preType;
          sendMessage(styleOptions);
        }
        break;
    }
  }


  function initiatePort(id) {
    //receivedMessage function will be called when a postMessage from the iframe through this port comes through
    //Each MessageChannel has 2 ports. One is used on the parent side (channel1.port1) and one is passed to the iframe to establish the connection (channel1.port2)
    if(id === 'firstIframe') {
      port11.onmessage = channel1Message;
      document.getElementById(id).contentWindow.postMessage('init', '*', [channel1.port2]);
    }
    else if(id === 'secondIframe') {
      port12.onmessage = channel2Message;
      document.getElementById('secondIframe').contentWindow.postMessage('init', '*', [channel2.port2]);
    }
  }

  function channel1Message(e) {
    console.log(e.data);
    if (listenerExists) {
      listenerExists = false;
      window.removeEventListener('message', receiveMessage);
    }
    //We get a notification that the port is established so we can send the PRELOAD
    if (e.data.function === 'NOTIFY' && e.data.code === '008') {
      const preloadData = {};
      preloadData.function = 'PRELOAD';
      preloadData.focus = false;
      preloadData.clearFieldOnClick = false;
      preloadData.backgroundColor = "RED";
      preloadData.shouldNotify = true;
      preloadData.dataType = preType;
      sendMessage(preloadData, '1');
    }
  }

  function channel2Message(e) {
    console.log(e.data);
    if (listenerExists) {
      listenerExists = false;
      window.removeEventListener('message', receiveMessage);
    }
    //We get a notification that the port is established so we can send the PRELOAD
    if (e.data.function === 'NOTIFY' && e.data.code === '008') {
      const preloadData = {};
      preloadData.function = 'PRELOAD';
      preloadData.focus = false;
      preloadData.clearFieldOnClick = false;
      preloadData.backgroundColor = "BLUE";
      preloadData.shouldNotify = false;   //On the second field, we probably don't need NOTIFY events
      preloadData.dataType = preType;
      sendMessage(preloadData, '2');
    }
  }


  function sendMessage(data, channel) {
    //All that is required to do to send a message is using the correct port;
    if (channel === '1') {
      port1.postMessage(data);
    }
    else if (channel === '2') {
      port2.postMessage(data);
    }
  }

  function tokenizeData() {
    console.log("tokenizing");
    const data = {};
    data.dataType = 'BAN';
    data.routingNumber = document.getElementById('routingNumber').value;
    data.bankAccountType = document.getElementById('bankAccountType').value;

    let radio = document.getElementsByName('authorizedForFutureUse');

    for(let i = 0; i < radio.length; i++) {
      if(radio[i].checked) {
        data.authorizedForFutureUse = radio[i].value === 'Yes';
      }
    }

    data.apiKey = 'replaceWithRealApiKeyForTest';
    data.companyId = 'replaceWithRealCompanyId';
    data.function = 'PROCESS';
    //We want SecureOverlay to validate that the data in each field is the same, thus send the id of the second iframe
    data.secondName = 'iframe2Id';

    //We only need to tokenize field 1; we will get the token back for it and use that token for processing
    sendMessage(data, '1');
  }

</script>

</body>
</html>

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
  <title>Payment</title>
  <meta charset="utf-8" />
</head>
<body>
<div class="container">
  <div class="bulkPayments">
    <iframe id="iframeId" src="https://wsdemo.pdc4u.com/SecureOverlay/v2_0/bulk"></iframe>
    <button id="nextButton" onclick="uploadBulk()">Upload</button>
  </div>
</div>


<script type="text/javascript">
  window.addEventListener('message', receiveMessage, false);
  const remoteDomain = 'https://wsdemo.pdc4u.com';

  //These are used to set up and communicate through the dedicated channel
  const channel1 = new MessageChannel();
  let port1 = channel1.port1;
  //We will use this to prevent submitting a PRELOAD request a second time in the case that a second PRELOAD message is received from SecureOverlay
  let alreadyPreloading = false;

  /*
   * This function will be used once, to handle the PRELOAD function
   * On the PRELOAD function, we will set up a dedicated MessageChannel to converse between iFrame and parent page
   */
  function receiveMessage(event) {
    if(event.origin !== remoteDomain) {
      console.log('remote origin: ' + event.origin);
      return;
    }

    switch(event.data.function) {
      case 'PRELOAD':
        if (alreadyPreloading) {
          return;
        }
        alreadyPreloading = true;
        //First we set up the dedicated channel
        initiatePort();
        break;
    }
  }


  function initiatePort() {
    //receivedMessage function will be called when a postMessage from the iframe through this port comes through
    port1.onmessage = receivedMessage;
    //Each MessageChannel has 2 ports. One is used on the parent side (channel1.port1) and one is passed to the iframe to establish the connection (channel1.port2)
    document.getElementById("iframeId").contentWindow.postMessage('init', '*', [channel1.port2]);
  }


  function receivedMessage(e) {
    //Notice there is no needs to validate the event.origin when receiving a message as this is a dedicated channel directly from the parent page to the iframe
    console.log(e.data);
    //It is recommended here to listen for the NOTIFY 008 message, which signifies the port connection is established. Then we can remove our generic message listener and also send our PRELOAD data through the port
    if (e.data.function === 'NOTIFY' && e.data.code === '008') {
      window.removeEventListener('message', receiveMessage);
      const preloadData = {};
      preloadData.function = 'PRELOAD';
      preloadData.backgroundColor = "RED";
      preloadData.shouldNotify = true;
      sendMessage(preloadData);
    }
    else {
      //handle other communication here (notifications/tokenization response, etc.)
    }
  }

  function sendMessage(data) {
    //All that is required to do to send a message is use the port1.postMessage();
    port1.postMessage(data);
  }

  function uploadBulk() {
    console.log("Uploading");
    const data = {};
    data.dataType = 'CCN';
    data.apiKey = 'replaceWithRealApiKeyForTest';
    data.companyId = 'replaceWithRealCompanyId';
    data.function = 'BULK_UPLOAD';
    data.bulkType = 'TRANSACTION';

    sendMessage(data);
  }

</script>

</body>
</html>