HPCI Demo – Basic 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

HPCI Basic iFrame is the first version of the HPCI iFrame. Basic iFrame allows merchants to collect a credit card by simply placing the iframe in the checkout page, along with a few API calls. Basic iFrame only contains the core functions: tokenizing the credit card number and CVV, and returning the credit card BIN. Additional features such as early tokenization and more are available on other versions of the iFrame.

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

<!-- IMPORTANT: the "cc-accept-form" id must match the id used in the script code. -->
<!-- TODO: adjust the "action" attribute according to your site. -->
<form id="cc-accept-form" action="#" method="post">
  <iframe id="ccframe" name="ccframe"
    src="https://cci.framehpci.com/iSynSApp/showPxyPage!ccFrame.action?pgmode1=prod&locationName=checkout1&sid=528160&reportCCType=Y&reportCCDigits=Y&reportCVVDigits=Y&fullParentHost=https://www.hostedpci.com&fullParentQStr=/iframe-demo-basic/"
    onload="receiveHPCIMsg()">
    If you can see this, your browser doesn't understand IFRAME.
  </iframe>
  <input type="text" readonly id="cc-token">
  <input type="text" readonly id="cvv-token">
  <input type="text" readonly id="cc-bin">
  <input type="submit" value="Submit" onclick="return sendHPCIMsg();">
</form>

JavaScript

// Should match the HPCI iframe "src" host / URL
var hpciCCFrameHost = "https://cci.framehpci.com";
var hpciCCFrameFullUrl = "https://cci.framehpci.com/iSynSApp/showPxyPage!ccFrame.action?pgmode1=prod&locationName=checkout1&sid=528160&reportCCType=Y&reportCCDigits=Y&reportCVVDigits=Y&fullParentHost=https://www.hostedpci.com&fullParentQStr=/iframe-demo-basic/";
// Name of the iframe containing the credit card
var hpciCCFrameName = "ccframe";

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

// Called when tokenization succeeds — receives the tokens back
var hpciSiteSuccessHandlerV7 = function(hpciMsgSrcFrameName, hpciMappedCCValue,
    hpciMappedCVVValue, hpciCCBINValue) {
  document.getElementById("cc-token").value  = hpciMappedCCValue;
  document.getElementById("cvv-token").value = hpciMappedCVVValue;
  document.getElementById("cc-bin").value    = hpciCCBINValue;
};