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

Interactive iFrame provides prompts and feedback during the keypress of credit card# and CVV.
It also gives prompt informing of which card type is being used.
To use the full functionality of the iFrame additional parameters needs to be added to iFrame URL, as well as making some small changes to the back -end. Format credit card number 3 different ways, dashes, spaces, or tabs.

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=interactiveIframe&sid=528160&reportCCType=Y&reportCCDigits=Y&reportCVVDigits=Y&enableEarlyToken=Y&formatCCMaskMode=S6X6&formatCCMaskChar=*&fullParentHost=https://www.hostedpci.com&fullParentQStr=/iframe-demo-interactive/"
    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

var hpciCCFrameHost = "https://cci.framehpci.com";
// Should match the HPCI iframe "src" URL
var hpciCCFrameFullUrl = "https://cci.framehpci.com/iSynSApp/showPxyPage!ccFrame.action?pgmode1=prod&locationName=interactiveIframe&sid=528160&reportCCType=Y&reportCCDigits=Y&reportCVVDigits=Y&enableEarlyToken=Y&formatCCMaskMode=S6X6&formatCCMaskChar=*&fullParentHost=https://www.hostedpci.com&fullParentQStr=/iframe-demo-interactive/";
// 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);
};

// Early tokenization — fires LIVE as the CC is typed and returns the tokens before submit
var hpciCCPreliminarySuccessHandlerV4 = function(hpciCCTypeValue, hpciCCBINValue,
    hpciCCValidValue, hpciCCLengthValue, hpciCCEnteredLengthValue, hpciMappedCCValue,
    hpciMappedCVVValue, hpciGtyTokenValue, hpciCCLast4Value, hpciReportedFormFieldsObj,
    hpciGtyTokenAuthRespValue, hpciTokenRespEncrypt) {
  document.getElementById("cc-token").value  = hpciMappedCCValue;
  document.getElementById("cvv-token").value = hpciMappedCVVValue;
  document.getElementById("cc-bin").value    = hpciCCBINValue;
};

// Fires on each CC digit update — card type & BIN are available early
var hpciCCDigitsSuccessHandlerV2 = function(hpciCCTypeValue, hpciCCBINValue,
    hpciCCValidValue, hpciCCLengthValue, hpciCCEnteredLengthValue) {
  // Adapt to your experience (e.g. show the detected card brand)
};

// Fires on each CVV digit update
var hpciCVVDigitsSuccessHandler = function(hpciCVVDigitsValue, hpciCVVValidValue) {
  // Adapt to your experience
};

// Early CVV tokenization
var hpciCVVPreliminarySuccessHandlerV4 = function(hpciCVVLengthValue, hpciCVVValidValue,
    hpciMappedCCValue, hpciMappedCVVValue, hpciCCBINValue, hpciGtyTokenValue,
    hpciCCLast4Value, hpciReportedFormFieldsObj, hpciGtyTokenAuthRespValue, hpciTokenRespEncrypt) {
  document.getElementById("cc-token").value  = hpciMappedCCValue;
  document.getElementById("cvv-token").value = hpciMappedCVVValue;
  document.getElementById("cc-bin").value    = hpciCCBINValue;
};

// Final success on Submit — receives the tokens (and 3DS values)
var hpciSiteSuccessHandlerV7 = function(hpciMsgSrcFrameName, hpciMappedCCValue,
    hpciMappedCVVValue, hpciCCBINValue, hpciGtyTokenValue, hpciCCLast4Value,
    hpciReportedFormFieldsObj, hpciGtyTokenAuthRespValue, hpciTokenRespEncrypt, threeDSValuesObj) {
  document.getElementById("cc-token").value  = hpciMappedCCValue;
  document.getElementById("cvv-token").value = hpciMappedCVVValue;
  document.getElementById("cc-bin").value    = hpciCCBINValue;
};