HPCI Demo – Payment API

These values build the iframe on the "Try it Out" tab. Change them and click Apply to rebuild.

Site ID

Location Name

Payment Profile

fullParentHost

fullParentQStr

The Payment API demo shows the full purchase flow. The card is collected and tokenized in the HPCI iframe (so the real card number never touches your page). The resulting tokens— plus the expiry and order details — are sent to your server, which makes a secure server-to-server call to the HPCI Payment API to authorize the payment against your gateway. Your server authenticates with API credentials that never reach the browser, and HPCI de-tokenizes the card internally before forwarding it to the gateway. This keeps your systems out of PCI scope while still letting you charge cards.

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

<!-- The iframe tokenizes the card; the tokens land in hidden fields, then the form posts to YOUR server. -->
<form id="cc-accept-form" action="/your-server-endpoint" method="post">
  <iframe id="ccframe" name="ccframe"
    src="https://cci.framehpci.com/iSynSApp/showPxyPage!ccFrame.action?pgmode1=prod&locationName=websiteDemo&sid=528160&reportInit=Y&reportCCType=Y&reportCCDigits=Y&enableEarlyToken=Y&reportCVVDigits=Y&fullParentHost=https://www.hostedpci.com&fullParentQStr=/hpciapiprocess/"
    onload="receiveHPCIMsg()">
    If you can see this, your browser doesn't understand IFRAME.
  </iframe>

  <!-- HPCI tokens (hidden — filled by the success handler) -->
  <input type="hidden" id="ccNum">
  <input type="hidden" id="ccCVV">
  <input type="hidden" id="ccBIN">

  <!-- Order details collected in the clear (no card data) -->
  <input type="text" name="expMonth" placeholder="MM">
  <input type="text" name="expYear"  placeholder="YYYY">
  <input type="text" name="firstName" placeholder="First name">
  <input type="text" name="lastName"  placeholder="Last name">

  <input type="submit" value="Pay" onclick="return sendHPCIMsg();">
</form>

JavaScript (front end)

var hpciCCFrameHost = "https://cci.framehpci.com";
var hpciCCFrameName = "ccframe";
var hpciCCFrameFullUrl = "https://cci.framehpci.com/iSynSApp/showPxyPage!ccFrame.action?pgmode1=prod&locationName=websiteDemo&sid=528160&reportInit=Y&reportCCType=Y&reportCCDigits=Y&enableEarlyToken=Y&reportCVVDigits=Y&fullParentHost=https://www.hostedpci.com&fullParentQStr=/hpciapiprocess/";

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

// On tokenization, copy the tokens into hidden fields and submit the form to YOUR server.
var hpciSiteSuccessHandlerV7 = function(hpciMsgSrcFrameName, hpciMappedCCValue,
    hpciMappedCVVValue, hpciCCBINValue) {
  document.getElementById("ccNum").value = hpciMappedCCValue;   // CC token
  document.getElementById("ccCVV").value = hpciMappedCVVValue;  // CVV token
  document.getElementById("ccBIN").value = hpciCCBINValue;      // BIN
  document.getElementById("cc-accept-form").submit();
};

HostedPCI Payment API Sample — /iSynSApp/paymentAuth.action


----- Endpoint: https://HPCI_API_HOSTNAME + /iSynSApp/paymentAuth.action

---- Request (Name-Value Pairs) ----
apiVersion=1.0.1
apiType=pxyhpci
userName=[API_USER]
userPassKey=[API_PASSKEY]
pxyTransaction.txnPayName=[HPCI_PAYRPOFILE]
pxyCreditCard.creditCardNumber=[HOSTEDPCI_TOKEN]  # HPCI token, NOT the real CC PAN
pxyCreditCard.cardCodeVerification=[CVV_TOKEN]
pxyCreditCard.expirationMonth=03
pxyCreditCard.expirationYear=2035
pxyTransaction.txnAmount=1.00
pxyTransaction.txnCurISO=USD
pxyTransaction.merchantRefId=[MERCHANTREF_ID]
pxyCustomerInfo.billingLocation.firstName=John
pxyCustomerInfo.billingLocation.lastName=Smith

--- Response (Name-Value Pairs) ---
status=success
pxyResponse.gatewaySession=
pxyResponse.gatewaySubToken1=
pxyResponse.gatewaySubToken2=
pxyResponse.gatewaySubToken3=
pxyResponse.gatewayToken=
pxyResponse.gatewayToken.fullNativeResp=
pxyResponse.gatewayToken.status=
pxyResponse.mappedParams=txnResponse.ccTypeEst=VISA
pxyResponse.processorRefId=[TXN_PROCESSOR_REFID]
pxyResponse.processorType=anetResponse
pxyResponse.provNetTknVaultName=
pxyResponse.recurringAdviceCode=
pxyResponse.recurringAdviceDescription=
pxyResponse.responseAVS1=Y
pxyResponse.responseAVS2=
pxyResponse.responseAVS3=
pxyResponse.responseAVS4=
pxyResponse.responseAuthCode=
pxyResponse.responseCVV1=P
pxyResponse.responseCVV2=
pxyResponse.responseStatus=approved
pxyResponse.responseStatus.code=1
pxyResponse.responseStatus.description=This transaction has been approved.
pxyResponse.responseStatus.name=APPROVED
pxyResponse.responseStatus.reasonCode=1
pxyResponse.txnPayName=[HPCI_PAYRPOFILE]