HPCI Demo – Interactive iFrame

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://ccframe.hostedpci.com/WBSStatic/site60/proxy/js/jquery-3.4.1.min.js?v=101'> </script> 
<script src='https://ccframe.hostedpci.com/WBSStatic/site60/proxy/js/jquery.ba-postmessage.2.0.0.min.js?v=101'> </script> 
 <script src='https://ccframe.hostedpci.com/WBSStatic/site60/proxy/js/hpci-cciframe-1.0.js'> </script>

Body

<!-- IMPORTANT: The "cc-accept-form" id needs to match the id's in the script code. -->
<!-- So if you change this id, make sure to change it in all other places -->
<!-- TODO: Adjust the action attribute according to your site -->
<form id="cc-accept-form" action="#" method="post">
   <iframe id="ccframe" 
src="https://cci.framehpci.com/iSynSApp/showPxyPage!ccFrame.action?pgmode1=prod&locationName=checkout1&sid=510300&reportCCType=Y&reportCCDigits=Y&reportCVVDigits=Y&enableEarlyToken=Y&formatCCMaskMode=S6X6&formatCCMaskChar=*&fullParentHost=https://www.hostedpci.com&fullParentQStr=/iframe-demo-interactive/"      
onload="receiveHPCIMsg()" name="ccframe">
         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"; 
 // TODO: Adapt according to your site. 
 // Should match the HPCI's iframe "src" attribute 
 var hpciCCFrameFullUrl = "https://cci.framehpci.com/iSynSApp/showPxyPage!ccFrame.action?pgmode1=prod&locationName=checkout1&sid=510300&reportCCType=Y&reportCCDigits=Y&reportCVVDigits=Y&enableEarlyToken=Y&formatCCMaskMode=S6X6&formatCCMaskChar=*&fullParentHost=https://www.hostedpci.com&fullParentQStr=/iframe-demo-interactive/"
 // Use the name of the iframe containing the credit card 
 var hpciCCFrameName = "ccframe"; 

 var hpciSiteErrorHandler = function(errorCode, errorMsg) { 
    // TODO: Adapt the following message / action to match your required experience 
    console.log("===========Begin hpciSiteErrorHandler==========="); 
    console.error("%cErrorCode: " + errorCode 
      + "\nErrorMsg: " + errorMsg, "font-size: larger"); 
    console.log("===========End hpciSiteErrorHandler==========="); 
 }  


 var hpciCCPreliminarySuccessHandlerV4 = function(hpciCCTypeValue, hpciCCBINValue,
   hpciCCValidValue, hpciCCLengthValue, hpciCCEnteredLengthValue, hpciMappedCCValue,
   hpciMappedCVVValue, hpciGtyTokenValue, hpciCCLast4Value, hpciReportedFormFieldsObj,
   hpciGtyTokenAuthRespValue, hpciTokenRespEncrypt) { 

   // TODO: Adapt the following message / action to match your required experience 
   console.log("===========Begin hpciCCPreliminarySuccessHandlerV4==========="); 
var data = [
			{ name: "hpciCVVLengthValue", value: hpciCVVLengthValue },
			{ name: "hpciCVVValidValue", value: hpciCVVValidValue },
			{ name: "hpciMappedCCValue", value: hpciMappedCCValue },
			{ name: "hpciMappedCVVValue", value: hpciMappedCVVValue },
			{ name: "hpciCCBINValue", value: hpciCCBINValue },
			{ name: "hpciGtyTokenValue", value: hpciGtyTokenValue },
			{ name: "hpciCCLast4Value", value: hpciCCLast4Value },
			{ name: "hpciGtyTokenAuthRespValue", value: hpciGtyTokenAuthRespValue },
			{ name: "hpciTokenRespEncrypt", value: hpciTokenRespEncrypt }
		  ];
		  
		console.table(data);
                   var ccNumInput = document.getElementById("cc-token");
                  ccNumInput.value = hpciMappedCCValue;
		var ccCVVInput = document.getElementById("cvv-token");
		ccCVVInput.value = hpciMappedCVVValue;
		var ccBINInput = document.getElementById("cc-bin");
		ccBINInput.value = hpciCCBINValue;

   console.log("===========End hpciCCPreliminarySuccessHandlerV4===========");
} 

 var hpciCCDigitsSuccessHandlerV2 = function(hpciCCTypeValue, hpciCCBINValue, hpciCCValidValue,
   hpciCCLengthValue, hpciCCEnteredLengthValue) { 

   console.log("===========Begin hpciCCDigitsSuccessHandlerV2==========="); 
   // TODO: Adapt the following message / action to match your required experience 
   console.log("===========End hpciCCDigitsSuccessHandlerV2==========="); 
} 

var hpciCVVDigitsSuccessHandler = function(hpciCVVDigitsValue, hpciCVVValidValue) { 

   console.log("===========Begin hpciCVVDigitsSuccessHandler==========="); 
   // TODO: Adapt the following message / action to match your required experience 
   console.log("===========End hpciCVVDigitsSuccessHandler===========");
} 

 var hpciCVVPreliminarySuccessHandlerV4 = function (hpciCVVLengthValue, hpciCVVValidValue,
   hpciMappedCCValue, hpciMappedCVVValue, hpciCCBINValue, hpciGtyTokenValue,
   hpciCCLast4Value, hpciReportedFormFieldsObj, hpciGtyTokenAuthRespValue, hpciTokenRespEncrypt) { 

   // TODO: Adapt the following message / action to match your required experience 

   console.log("===========Begin hpciCVVPreliminarySuccessHandlerV4==========="); 
   var data = [
                         { name: "hpciCVVLengthValue", value: hpciCVVLengthValue },
			{ name: "hpciCVVValidValue", value: hpciCVVValidValue },
			{ name: "hpciMappedCCValue", value: hpciMappedCCValue },
			{ name: "hpciMappedCVVValue", value: hpciMappedCVVValue },
			{ name: "hpciCCBINValue", value: hpciCCBINValue },
			{ name: "hpciGtyTokenValue", value: hpciGtyTokenValue },
			{ name: "hpciCCLast4Value", value: hpciCCLast4Value },
			{ name: "hpciGtyTokenAuthRespValue", value: hpciGtyTokenAuthRespValue },
			{ name: "hpciTokenRespEncrypt", value: hpciTokenRespEncrypt }
		  ];
		  
		console.table(data);
                   var ccNumInput = document.getElementById("cc-token");
                  ccNumInput.value = hpciMappedCCValue;
		var ccCVVInput = document.getElementById("cvv-token");
		ccCVVInput.value = hpciMappedCVVValue;
		var ccBINInput = document.getElementById("cc-bin");
		ccBINInput.value = hpciCCBINValue;

   console.log("===========End hpciCVVPreliminarySuccessHandlerV4===========");
} 

 var hpciSiteSuccessHandlerV7 = function(hpciMsgSrcFrameName, hpciMappedCCValue, hpciMappedCVVValue,
      hpciCCBINValue, hpciGtyTokenValue, hpciCCLast4Value, hpciReportedFormFieldsObj,
      hpciGtyTokenAuthRespValue, hpciTokenRespEncrypt, threeDSValuesObj) { 

   // TODO: Adapt the following message / action to match your required experience
         console.log("===========Begin hpciSiteSuccessHandlerV7===========");
              ccNumInput.value = hpciMappedCCValue;
		var ccCVVInput = document.getElementById("cvv-token");
		ccCVVInput.value = hpciMappedCVVValue;
		var ccBINInput = document.getElementById("cc-bin");
		ccBINInput.value = hpciCCBINValue;

 var pendingForm = document.getElementById("cc-accept-form"); 
		pendingForm.submit; 
		
   console.log("===========End hpciSiteSuccessHandlerV7===========");

}

HPCI Interactive iFrame Demo

HPCI Demo – Interactive iFrame

Head

Body

JavaScript