HPCI Demo – Multi iFrame

These values build the iframe on the "Try it Out" tab. Change them and click Apply to rebuild.

Site ID

Location Name

fullParentHost

fullParentQStr

Some instances require loading multiple iFrames on the same page.
For example, if there is a requirement to split the payment into multiple credit cards. Another example would be for an agent to have multiple iFrames available to him on a single page load. This way there is no need to reload the page to select a different customer/credit card.

Head

<script src="https://cci.framehpci.com/WBSStatic/site60/proxy/js/jquery-3.4.1.min.js"></script>
<script src="https://cci.framehpci.com/WBSStatic/site60/proxy/js/jquery.ba-postmessage.2.0.0.min.js"></script>
<script src="https://cci.framehpci.com/WBSStatic/site60/proxy/js/hpci-cciframe-1.0.js"></script>

Body

<!-- Multiple iframes on one page: each gets its own ccNumTokenIdx and its own token fields. -->
<form id="cc-accept-form" action="#" method="post">
  <!-- Card 1 -->
  <iframe id="ccframe1" name="ccframe1"
    src="https://cci.framehpci.com/iSynSApp/showPxyPage!ccFrame.action?pgmode1=prod&locationName=checkout1&sid=528160&reportCCType=Y&reportCCDigits=Y&reportCVVDigits=Y&enableEarlyToken=Y&formatCCMaskMode=S6X6&formatCCMaskChar=*&ccNumTokenIdx=1&fullParentHost=https://www.hostedpci.com&fullParentQStr=/multi-iframe-demo/"
    onload="receiveHPCIMsg()">
    If you can see this, your browser doesn't understand IFRAME.
  </iframe>
  <input type="text" readonly id="cc-token1">
  <input type="text" readonly id="cvv-token1">
  <input type="text" readonly id="cc-bin1">

  <!-- Card 2 -->
  <iframe id="ccframe2" name="ccframe2"
    src="https://cci.framehpci.com/iSynSApp/showPxyPage!ccFrame.action?pgmode1=prod&locationName=checkout1&sid=528160&reportCCType=Y&reportCCDigits=Y&reportCVVDigits=Y&enableEarlyToken=Y&formatCCMaskMode=S6X6&formatCCMaskChar=*&ccNumTokenIdx=2&fullParentHost=https://www.hostedpci.com&fullParentQStr=/multi-iframe-demo/"
    onload="receiveHPCIMsg()">
    If you can see this, your browser doesn't understand IFRAME.
  </iframe>
  <input type="text" readonly id="cc-token2">
  <input type="text" readonly id="cvv-token2">
  <input type="text" readonly id="cc-bin2">

  <input type="submit" value="Submit" onclick="return sendHPCIMsg();">
</form>

JavaScript

var hpciCCFrameHost = "https://cci.framehpci.com";
// Multiple iframes: a counter tracks which frame reported so tokens land in the right fields
var iframeCounter = 0;
// Frame names follow the pattern ccframe1, ccframe2, …
var hpciCCFrameName = "ccframe" + (iframeCounter + 1);
var hpciCCFrameFullUrl = "https://cci.framehpci.com/iSynSApp/showPxyPage!ccFrame.action?pgmode1=prod&locationName=checkout1&sid=528160&reportCCType=Y&reportCCDigits=Y&reportCVVDigits=Y&enableEarlyToken=Y&formatCCMaskMode=S6X6&formatCCMaskChar=*&ccNumTokenIdx=1&fullParentHost=https://www.hostedpci.com&fullParentQStr=/multi-iframe-demo/";

var hpciSiteErrorHandler = function(errorCode, errorMsg) {
  console.error("ErrorCode: " + errorCode + " | ErrorMsg: " + errorMsg);
};

// CVV early-token COMPLETES a frame's token set — this is the populator in early-token mode.
// Fill the active frame's numbered fields, then advance the counter to the next frame.
var hpciCVVPreliminarySuccessHandlerV4 = function(hpciCVVLengthValue, hpciCVVValidValue,
    hpciMappedCCValue, hpciMappedCVVValue, hpciCCBINValue) {
  var i = iframeCounter + 1;
  document.getElementById("cc-token" + i).value  = hpciMappedCCValue;
  document.getElementById("cvv-token" + i).value = hpciMappedCVVValue;
  document.getElementById("cc-bin" + i).value    = hpciCCBINValue;
  iframeCounter++;
};

// Submit path (non early-token) — route to the reporting frame by its name (ccframe1 / ccframe2)
var hpciSiteSuccessHandlerV7 = function(hpciMsgSrcFrameName, hpciMappedCCValue,
    hpciMappedCVVValue, hpciCCBINValue) {
  var i = String(hpciMsgSrcFrameName).replace(/\D/g, "");
  document.getElementById("cc-token" + i).value  = hpciMappedCCValue;
  document.getElementById("cvv-token" + i).value = hpciMappedCVVValue;
  document.getElementById("cc-bin" + i).value    = hpciCCBINValue;
};