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

The HPCI ACH iFrame lets merchants securely collect Bank-account (ACH) details (the bank routing number and account number) directly inside an HPCI-hosted iframe dropped into the checkout page, with just a few API calls. Because the account details are entered inside the iframe, they never touch the merchant's own page, keeping the sensitive bank data out of the merchant's environment.

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=achtest1&sid=528160&enableEarlyToken=Y&reportInit=Y&enableTokenDisplay=Y&strictMsgFmt=Y&fullParentHost=https://www.hostedpci.com&fullParentQStr=/iframe-ach-demo-basic/&dataType=achus1"
    onload="receiveHPCIMsg()">
    If you can see this, your browser doesn't understand IFRAME.
  </iframe>
  <input type="text" readonly id="achtoken1">
  <input type="text" readonly id="achtoken2">
  <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=achtest1&sid=528160&enableEarlyToken=Y&reportInit=Y&enableTokenDisplay=Y&strictMsgFmt=Y&fullParentHost=https://www.hostedpci.com&fullParentQStr=/iframe-ach-demo-basic/&dataType=achus1";
// Name of the iframe containing the ACH data
var hpciCCFrameName = "ccframe";

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

/ Early tokenization (enableEarlyToken=Y): fires as soon as the ACH fields tokenize.
var hpciACHPreliminarySuccessHandlerV1 = function (
    hpciMsgSrcFrameName, hpciMappedACHValue1, hpciMappedACHValue2, hpciMappedACHValue3, hpciMappedACHValue4,
    hpciTokenRespEncrypt, hpciReportedFormFieldsObj) {
  document.getElementById("achtoken1").value = hpciMappedACHValue1 || "";
  document.getElementById("achtoken2").value = hpciMappedACHValue2 || "";
};

// Called when tokenization succeeds — receives the tokens back
var hpciSiteSuccessHandlerV9 = function(hpciMsgSrcFrameName, hpciMappedCCValue, hpciMappedCVVValue, hpciCCBINValue, 
			hpciGtyTokenValue, hpciCCLast4Value, hpciReportedFormFieldsObj, hpciGtyTokenAuthRespValue, hpciTokenRespEncrypt, 
			threeDSValuesObj, hpciCCTypeValue, hpciMappedACHValue1, hpciMappedACHValue2, hpciMappedACHValue3, hpciMappedACHValue4) {
  document.getElementById("achtoken1").value  = hpciMappedCCValue;
  document.getElementById("achtoken1").value = hpciMappedCVVValue;
};