HPCI Demo – 3DS Payment API

<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>

<!-- 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=[3DS_iFRAME]&sid=[HPCI_SID]&reportCCType=Y&cvvValidate=YreportCCDigits=Y&reportCVVDigits=Y&enable3DSec=cruise1&selected3DSecPayName=[3DS-PAYPROFILE]&selected3DSecPayCCType=any&selected3DSecPayCurISO=USD&strictMsgFmt=Y&reportInit=Y&formatCCDigits=Y&formatCCDigitsDelimiter=-&reportFormFields=holderName;expiryDate&reportFormFormats=alpha;expdt&fullParentHost=https://www.hostedpci.com&fullParentQStr=/payment-api-3ds/"
    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">
  <input type="hidden" id="threeds_ordId">
  <input type="hidden" id="threeds_sesId">
  <input type="hidden" id="threeds_action" value="verifyenroll">

  <!-- 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>

<script>
	var hpciCCFrameHost;	
	var hpciCCFrameFullUrl;
	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 hpciSiteSuccessHandlerV7 = function(hpciMsgSrcFrameName, hpciMappedCCValue, hpciMappedCVVValue, hpciCCBINValue, hpciGtyTokenValue, hpciCCLast4Value, hpciReportedFormFieldsObj,
 		hpciGtyTokenAuthRespValue, hpciTokenRespEncrypt, threeDSValuesObj){
		
		var ccNumInput = document.getElementById("ccNum");
    		ccNumInput.value = hpciMappedCCValue;
    
    		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 hpciCCPreliminarySuccessHandlerV4 = function(hpciCCTypeValue, hpciCCBINValue, hpciCCValidValue, hpciCCLengthValue, 
		hpciCCEnteredLengthValue, hpciMappedCCValue, hpciMappedCVVValue, hpciGtyTokenValue, hpciCCLast4Value, hpciReportedFormFieldsObj,
		hpciGtyTokenAuthRespValue, hpciTokenRespEncrypt) {

		var ccNumInput = document.getElementById("ccNum");
 		ccNumInput.value = hpciMappedCCValue;
		var ccCVVInput = document.getElementById("ccCVV");
		ccCVVInput.value = hpciMappedCVVValue;
		var ccBINInput = document.getElementById("ccBIN");
		ccBINInput.value = hpciCCBINValue;
  }
	
	var hpciFormFieldPreliminarySuccessHandlerV2 = function(hpciMsgSrcFrameName, hpciFormFieldName, hpciFormFieldValue){
	}

	var hpciCCDigitsSuccessHandlerV2 = function(hpciCCTypeValue, hpciCCBINValue, hpciCCValidValue, hpciCCLengthValue, hpciCCEnteredLengthValue) {
	}
	
	var hpciCVVDigitsSuccessHandler = function(hpciCVVDigitsValue, hpciCVVValidValue) {
	}
	
	var hpciCVVPreliminarySuccessHandlerV4 = function (hpciCVVLengthValue, hpciCVVValidValue,hpciMappedCCValue, 
		hpciMappedCVVValue, hpciCCBINValue, hpciGtyTokenValue, hpciCCLast4Value, hpciReportedFormFieldsObj, 
		hpciGtyTokenAuthRespValue, hpciTokenRespEncrypt) {
	
		var ccNumInput = document.getElementById("ccNum");
 		ccNumInput.value = hpciMappedCCValue;
		var ccCVVInput = document.getElementById("ccCVV");
		ccCVVInput.value = hpciMappedCVVValue;
		var ccBINInput = document.getElementById("ccBIN");
		ccBINInput.value = hpciCCBINValue;
	}
	
	var hpciInitCompleteSuccessHandler = function(){	 
	}
</script>

----- 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]