HPCI Demo – Basic iFrame
HPCI Basic iFrame is the first version of the HPCI iFrame. Basic iFrame allows merchants to collect credit card by simply placing the iframe in the eheckout page as well as some API calls. Basic iFrame only contains basic function like tokenizing the credit card number, CVV and the return credit card BIN. Additional features such as early tokenixation and more are available on other versions of the iFrame.
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&fullParentHost=https://www.hostedpci.com&fullParentQStr=/iframe-demo-basic/"
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&fullParentHost=https://www.hostedpci.com&fullParentQStr=/iframe-demo-basic/";
// 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===========");
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===========");
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;
console.log("===========End hpciSiteSuccessHandlerV7===========");
pendingForm.submit();
}