Make sure that you're updating the token and signature hidden fields before the post Also process the submit() as a function to encrypt the CC# before actual submission
Attached is a simple no-frills Direct post HTML:
<html>
<head>
<script type="text/javascript" src="https://apisandboxstatic.zuora.com/Resources/830810/tag/js/jquery-1.11.0.min-patch.js"></script>
<script type="text/javascript" src="https://apisandbox.zuora.com/apps/Hosted/lite2/js/HPM2Security.js"></script>
<script language="Javascript">
<!--
var req = "undefined";
var response = "undefined";
var url= "/pay/pay.html";
var params = {
tenantId: "",
id:"2c92c0f96d82c23b016da16021e4656a",
token: "",
signature: "",
style:"inline",
key: "",
submitEnabled:"true",
locale:"en_US",
url:"https://apisandbox.zuora.com/apps/PublicHostedPageLite.do"
};
/**
* Ajax function to load HPM specific data
*
*/
function loadHpmJson() {
alert('loadHPM');
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
req.onreadystatechange = processReqChange;
req.open("GET", url, true);
req.setRequestHeader("Content-type","application/json");
req.send();
}
else {
alert("Sorry, Use a modern Browser");
}
}
/**
* Processes the Ajax Request Change
*
*/
function processReqChange() {
if (req.readyState == 4) {
if (req.status == 200) {
var data = JSON.parse(req.responseText);
params.tenantId = data.tenantId;
params.token = data.token;
params.signature = data.signature;
params.key = data.key;
alert("params: "+JSON.stringify(params));
/* populate the fields in the form */
var token = document.getElementById('token');
token.setAttribute("value",params.token);
alert('token: '+params.token);
var signature = document.getElementById('signature');
signature.setAttribute("value",params.signature);
alert('signature: '+params.signature);
}
else { // Some other Error
alert("req.status = "+req.status);
alert("There was an error!!\n" + req.responseText);
}
}
}
function init(){
alert("init");
loadHpmJson();
}
function submitForm(){
alert("Submitting Form");
var encryptedText = buildEncryptedValues();
alert("Encrypted Text: "+encryptedText);
var field = document.getElementById('encrypted_values');
field.setAttribute("value",encryptedText);
document.forms["HostedPaymentMethodPageForm"].submit();
}
function callback(response) {
if(response.success) {
var redirectUrl =
"/pay/?refid="+response.refId+"&field_passthrough1="
+response.field_passthrough1;
window.location.replace(redirectUrl);
} else {
alert("errorcode="+response.errorCode + ", errorMessage="+response.errorMessage);
}
}
function buildEncryptedValues() {
var creditCardNumber = document.getElementById('creditCardNumber').value;
var cardSecurityCode = document.getElementById('cardSecurityCode').value;
var creditCardExpirationMonth = document.getElementById('creditCardExpirationMonth').value;
var creditCardExpirationYear = document.getElementById('creditCardExpirationYear').value;
var unencrypted_values = "#" + creditCardNumber +
"#" + cardSecurityCode + "#" + creditCardExpirationMonth + "#" + creditCardExpirationYear;
return encryptText(unencrypted_values, params.key);
}
/**
* encrypt the text using the specified public key.
* @param text the text to be encrypted.
* @param key the public key.
* @returns Base64 encoded encrypted data.
*/
function encryptText(text, key) {
if (key) {
try {
var key = pidCryptUtil.decodeBase64(key);
var rsa = new pidCrypt.RSA();
//ASN1 parsing
var asn = pidCrypt.ASN1.decode(pidCryptUtil.toByteArray(key));
var tree = asn.toHexTree();
//setting the public key for encryption with retrieved ASN.1 tree
rsa.setPublicKeyFromASN(tree);
// Base64 encode and encrypt the string
var crypted = rsa.encrypt(text);
return pidCryptUtil.encodeBase64(pidCryptUtil.convertFromHex(crypted));
} catch(e) {
console.info(e);
}
}
// return origin text if unable to encrypt
return text;
}
</script>
<!-- Zuora Public javascript library -->
<!-- <script type="text/javascript"
src="https://static.zuora.com/Resources/libs/hosted/1.3.1/zuora-min.js"/></script> -->
</head>
<body onload="init();" onbeforeunload="return 'Are you sure?';"><font face="roboto,arial,helvetica" >
<h1>Direct Post Simple Test</h1>
<hr/>
<form action="https://apisandbox.zuora.com/apps/PublicHostedPageLite.do" id="HostedPaymentMethodPageForm"
name="HostedPaymentMethodPageForm" method="post">
<input type="hidden" name="method" id="method" value="submitPage">
<input type="hidden" name="id" id="id" value="2c92c0f96d82c23b016da16021e4656a">
<input type="hidden" name="tenantId" id="tenantId" value="23482">
<input type="hidden" name="token" id="token" value="">
<input type="hidden" name="signature" id="signature" value="">
<input type="hidden" name="host" value="http://3.15.142.66/html/direct_post_simple.html">
<input type="hidden" name="field_key" value="MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAqyxfRdK06S66mBX/EPW/O61tuDTVZmAidCD0VtuQ27aSdA4+PTAAVjo5+c0KMedty8x2cVaVY8gI90RHCGyjOMY+NpFdInPJS9s9PE1aaOkji35pIHHhP/u3gBKPasP6lRyL8mgY2zDlRxYw3AOyY7HLR5ijS42X+Cy4+tOCmoXLwCUfnqHmkaJf1mN5sHdQVJnun69mn7CzlqRrmrVcbQz3hSDfXF5075+VwHOeOwdfwU7CwxAp3wa/osRymAnPO6IWKokPHyJ6+uL3mW+QgfYaxW0G6/U9rBzVE7Rhh+K/gQMowmyoJoZ9a5eh5tQWZylTVgjAaEWERKJAnzedcwIDAQAB">
<input type="hidden" name="encrypted_fields" id="encrypted_fields" value="#field_creditCardNumber#field_cardSecurityCode#field_creditCardExpirationMonth#field_creditCardExpirationYear">
<input type="hidden" name="encrypted_values" id="encrypted_values" value="">
<input type="hidden" name="field_style" id="field_style" value="inline">
<input type="hidden" name="field_passthrough1" value="PassThrough Field 1">
<input type="hidden" name="field_passthrough2">
<input type="hidden" name="field_passthrough3">
<input type="hidden" name="field_passthrough4">
<input type="hidden" name="field_passthrough5">
<b>Credit Card:</b> <input type="text" id="creditCardNumber" name="field_creditCardNumber" value="4111111111111111"/><br/>
<b>CVV:</b> <input type="text" id="cardSecurityCode" name="field_cardSecurityCode" value="123"/><br/>
<b>Exp Month:</b> <input type="text" id="creditCardExpirationMonth" name="field_creditCardExpirationMonth" value="10"/><br/>
<b>Exp Year:</b> <input type="text" id="creditCardExpirationYear" name="field_creditCardExpirationYear" value="2020"/><br/>
<b>Card Type:</b> <input type="text" name="field_creditCardType" value="Visa"/><br/>
<b>Card Holder Name:</b> <input type="text" name="field_creditCardHolderName" value="Cardy McCardFace"/><br/>
Country: <input type="text" name="field_creditCardCountry" value=""/><br/>
State: <input type="text" name="field_creditCardState" value=""/><br/>
Address 1: <input type="text" name="field_creditCardAddress1" value=""/><br/>
Address 2: <input type="text" name="field_creditCardAddress2" value=""/><br/>
City: <input type="text" name="field_creditCardCity" value=""/><br/>
Postal Code: <input type="text" name="field_creditCardPostalCode" value=""/><br/>
Phone: <input type="text" name="field_phone" value=""/><br/>
Email: <input type="text" name="field_email" value=""/><br/><hr/>
<b><a href="javascript:" id="submitButton" class="btn-submit" onclick="submitForm();"> Submit</a></b>
</form>
</font>
</body>
</html>
