Happy Business Starts Here

Highlighted
Honor Student

Hosted Page 2.0 Post to PublicHostedPageLite.do redirects to login.do

I am currently implenting a payment page using the Hosted Page 2.0 stratergy. 

 

I can correctly fetch a Digital Signature and set up the Hosted page, however, when posting I get a 302 to Login.do.

 

There's no error and I am unable to find any documentation on this. Is this due an invalid digital signature or form data? 

6 REPLIES 6
Highlighted
Zuora Alumni

Re: Hosted Page 2.0 Post to PublicHostedPageLite.do redirects to login.do

Hi Simon, 

 

Are you using the iFrame or Using Direct Post? 

 

Cheers,

Kevin

Highlighted
Honor Student

Re: Hosted Page 2.0 Post to PublicHostedPageLite.do redirects to login.do

Direct Post

Zuora Alumni

Re: Hosted Page 2.0 Post to PublicHostedPageLite.do redirects to login.do

What is your callback Path set to? 

 

Callback Path.png

Highlighted
Honor Student

Re: Hosted Page 2.0 Post to PublicHostedPageLite.do redirects to login.do

/someApiEndpoint

Highlighted
Zuora Alumni

Re: Hosted Page 2.0 Post to PublicHostedPageLite.do redirects to login.do

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&colon;" id="submitButton" class="btn-submit" onclick="submitForm();"> Submit</a></b>
</form>
</font>
</body>
</html>

 

Highlighted
Honor Student

Re: Hosted Page 2.0 Post to PublicHostedPageLite.do redirects to login.do

Hey Kevin

 

I;ve followed the information you provided and made sure the datais correct however, I am still getting a 302 to the login.do page. Do you have any more information that would help? I am more than happy to call and chat if that would be easier. I am on a tight deadline to get this working so would appreciate the input

 

Thanks

 

Simon