Web Checkout iFrame HTML Guide

Optional JavaScript Includes

<script src="https://ccframe.hostedpci.com/WBSStatic/site60/proxy/js/jquery-1.4.1.min.js" type="text/javascript" charset="utf-8"></script>

JavaScript in /HEAD/  Section

<script>
  var hpciCCFrameHost = "https://ccframe.hostedpci.com";
  var hpciCCFrameFullUrl = "https://ccframe.hostedpci.com/iSynSApp/showPxyPage!ccFrame.action?pgmode1=prod&locationName=[location]&sid=[hpciSiteId]&reportCCType=[Y]&reportCCDigits=[Y]&formatCCDigits=Y&formatCCDigitsDelimiter=%09&reportCVVDigits=[Y]&fullParentHost=[ecommerceSiteHostName]&fullParentQStr=[ecommerceURLQueryString]&pluginMode=[jqVersion]&clientType=[browserType]";
  var hpciCCFrameName = "ccframe"; // use the name of the frame containing the credit card
  var hpciSiteErrorHandler = function (errorCode, errorMsg){
    // Place the following alert to properly display the error message
    alert("Error while processing credit card code:" + errorCode + "; msg:" + errorMsg);
  }
var hpciSiteSuccessHandlerV4 =
 function(hpciMappedCCValue, hpciMappedCVVValue, hpciCCBINValue, hpciGtyTokenValue, hpciCCLast4Value, hpciGtyTokenAuthRespValue, hpciTokenRespEncrypt){
    // Please pass the values to the document input and then submit the form
    // name of the input (hidden) field required by ecommerce site
    // Typically this is a hidden input field.
    var ccNumInput = document.getElementById("ccNum");
    ccNumInput.value = hpciMappedCCValue;
    // name of the input (hidden) field required by ecommerce site
    // Typically this is a hidden input field.
    var ccCVVInput = document.getElementById("ccCVV");
    ccCVVInput.value = hpciMappedCVVValue;
    // name of the input (hidden) field required by ecommerce site
    // Typically this is a hidden input field.
    var ccBINInput = document.getElementById("ccBIN");
    ccBINInput.value = hpciCCBINValue;
    // name of the form submission for ecommerce site
    var pendingForm = document.getElementById("CCAcceptForm");
    pendingForm.submit();
  }
  var hpci3DSitePINSuccessHandler = function (){
    // Name of the form submission for ecommerce site
    var pendingForm = document.getElementById("CCAcceptForm");
    pendingForm.submit();
  }
  var hpci3DSitePINErrorHandler = function (){
    // Adapt the following message / action to match your required experience
    alert("Could not verify PIN for the credit card");
  }
  var hpciCCPreliminarySuccessHandlerV2 = function(hpciCCTypeValue, hpciCCBINValue, hpciCCValidValue, hpciCCLengthValue, hpciCCEnteredLengthValue);){
    // Adapt the following message / action to match your required experience
    alert("Received preliminary credit card details");
  }
  var hpciCVVPreliminarySuccessHandlerV2 = function(hpciCVVLengthValue, hpciCVVValidValue);{
    // Adapt the following message / action to match your required experience
    alert("Received preliminary CVV details");
  }
  var hpciCCDigitsSuccessHandlerV2 = function(hpciCCTypeValue, hpciCCBINValue, hpciCCValidValue, hpciCCLengthValue, hpciCCEnteredLengthValue) {
    // Use to enable credit card digits key press
    alert("Received CC keypress");
  }
  var hpciCVVDigitsSuccessHandler = function(hpciCVVDigitsValue) {
    // Use to enable CVV digits key press
    alert("Received CVV keypress");
  }
</script>