Cybersource/BOA Donation Page

Problem with transaction processing without shopping cart

[Pewit]

I have recently become one of the webmasters of the Federation of Gay Games.

One of the issues I am trying to resolve is that the donation page is far too complex and based on using a shopping cart which is unnecessary (mainly because my predecessor just modified the sample application from Cybersource/BOA).

I have simplified this into a one page form.

However, when you make a donation the payment is rejected and a pop-up appears asking you to login to the secure server.

I'm not that familiar with PHP and commerce systems so can anyone advise me where the problem is?

Can anyone also confirm that Cybersource rejects non-US postcodes? The docs say this is an optional field if the address is not US/Canada but the transaction still seems to be rejected, and we would want to capture the postcode for all transactions.

Thanks in advance.

Paul

[edited by: lorax at 8:57 pm (utc) on Oct. 17, 2005]
[edit reason] No URLs Please [/edit]

[Corey Bryant]

Well you cannot have the credit card information on that page - it is non-secure.

Is mynocdns3 your shared SSL?

-Corey

[Pewit]

I wasn't asking for someone to "review my site" I was asking for someone to help track down an issue which I can't resolve which only shows up after you have submitted the form and got to the confirmation page!

Sorta looses the point of trying to track the error if you can't include a link to the page with it on as the error only shows on submission and doesn't show up in the browser error logs <sigh>. But if you want reems of code to try at home here it it below.

   <!--- BEGIN PAYMENT FORM --->
   <fieldset style="width: 360px; height: 100%; position: relative;">
   <legend><b class="blue">Your Order</b></legend>
   <text name="textarea" cols="34" rows="1" wrap="none" class="form" style="padding: 3px; width: 100%; height: 30px; position: relative;">FGG 
   Donation 
   </fieldset>
  <tr> 
  <td width="526" height="100%" valign="top"> 
  <fieldset style="width: 320px;">
  <legend><b class="blue">Donation Total</b> ($USD)</legend>
  <table width="643" border="0" cellpadding="0" cellspacing="5">
   <tbody>
   <tr> 
    <td width="9"><b>$</b></td>
    <td width="619" valign="top" class="h6"> <br> <input name="itemName" value="Donation" type="hidden"> 
    <input name="itemSku" value="don01" type="hidden">
    <input name="itemAmount" class="form" size="16" style="width: 200px;" maxlength="6" value="100.00" type="text"> 
    *
    <input name="itemQuantity" value="1" type="hidden">
    <br>
  </td>
   </tr>
   </tbody>
  </table>
  <!-- BEGIN MERCHANT CARD PROCESSING FIELDS -->
  <input name="merchantReferenceCode" value="MyReference" type="hidden">
//Real form has correct value
  <input name="purchaseTotals_currency" value="USD" type="hidden">
  </fieldset>
  <p> </p>
  <fieldset style="width: 320px;">
  <legend><b class="blue">Card Holder Billing Information</b></legend>
  <table height="228" border="0" cellpadding="0" cellspacing="5">
   <tbody>
   <tr> 
    <td width="155" valign="top" class="h6"> First*<br> 
    <input name="billTo_firstName" class="form" size="14" style="width: 150px;" maxlength="100" type="text"></td>
    <td width="295" valign="top" class="h6"> Last*<br> 
    <input name="billTo_lastName" class="form" size="15" style="width: 150px;" maxlength="100" type="text"></td>
   </tr>
   <tr> 
    <td colspan="2"></td>
   </tr>
   <tr>
    <td colspan="2" class="h6" valign="top">Street Address*<br>
    <input name="billTo_street1" class="form" size="33" style="width: 308px;" maxlength="150" type="text">
</td>
   </tr>
   <tr> 
    <td colspan="2" class="h6" valign="top"> Street Address 2<br>
    <input name="billTo_street22" type="text" class="form" id="billTo_street22" style="width: 308px;" size="33" maxlength="150"></td>
   </tr>
   <tr> 
    <td colspan="2" valign="top"> <table border="0" cellpadding="0" cellspacing="0">
     <tbody>
     <tr> 
      <td width="140" valign="top" class="h6"> City*<br> 
      <input name="billTo_city" class="form" size="10" style="width: 110px;" maxlength="150" type="text"> 
      <br> </td>
      <td width="10"><br></td>
      <td width="160" valign="top" class="h6"> State/Province/County*<br> 
      <input name="billTo_state" class="form" size="10" style="width: 110px;" maxlength="150" type="text">
      <br>
      (Enter city again if not applicable)<br> </td>
      <td width="10"><br></td>
      <td width="99" valign="top" class="h6"> Postal Code*<br> 
      <input name="billTo_postalCode" class="form" size="5" style="width: 70px;" maxlength="20" type="text">
      <br>
      </td>
     </tr>
     <tr> </tr>
     </tbody>
    </table></td>
   </tr>
   <tr> 
    <td colspan="2" class="h6" valign="top"> Country*<br> <select name="billTo_country">
     <option value="US" selected>United States </option>
     <option value="UK">United Kingdom </option>
//other countries removed for testing
    </select> </td>
   </tr>
   </tbody>
  </table>
  </fieldset>
  <p> </p>
  <fieldset style="width: 320px;">
  <legend><b class="blue">Card Holder Contact Information</b></legend>
  <font size="1">(this information will only be used to assist in the processing
  of this transaction unless authorized by you</font>) 
  <table border="0" cellpadding="0" cellspacing="5">
   <tbody>
   <tr> 
    <td width="240" valign="top" class="h6"> E-mail Address*<br> 
    <input name="billTo_email" class="form" size="14" style="width: 200px;" maxlength="150" type="text"> 
    </td>
    <td width="300" valign="top" class="h6"> Day Time Phone*<br> 
    <input name="billTo_phoneNumber" class="form" size="20" style="width: 150px;" maxlength="20" type="text">
    <br>
    (including country code if outside U.S.) </td>
   </tr>
   </tbody>
  </table>
  <table width="72%">
   <tbody>
   <tr>
    <td width="61%" valign="bottom">
</td>
   </tr>
   </tbody>
  </table>
  </fieldset>
  <p> </p>
  <fieldset style="width: 320px;">
  <legend><b class="blue">Payment Method</b></legend>
  <table border="0" cellpadding="0" cellspacing="5">
   <tbody>
   <tr> 
    <td colspan="3" class="h6"> 
    <!-- value must include the word "check" -->
    <input name="Payment_Method" value="Visa" onclick="grayOutCC(0)" checked="checked" type="radio">
    Visa &nbsp; <input name="Payment_Method" value="Mastercard" onclick="grayOutCC(0)" type="radio">
    Mastercard &nbsp;
    <input name="Payment_Method" value="Personal Check" onclick="grayOutCC(1)" type="radio">
Personal Check 
    <!-- <input type="radio" name="Payment_Method" value="Carte Blanche"onClick="grayOutCC(0)">Carte Blanche &nbsp;
  <input type="radio" name="Payment_Method" value="Diners Club"onClick="grayOutCC(0)">Diners Club<br>
-->
    </td>
   </tr>
   <tr> 
    <td class="h6" valign="top"> Credit Card Number*<br> 
    <input name="card_accountNumber" onfocus="grayOutCC(0)" class="form" size="16" style="width: 150px;" maxlength="19" type="text"> 
    </td>
    <td class="h6" valign="top"> Expiry Month*<br> 
    <select name="card_expirationMonth" style="width: 90px;" onfocus="grayOutCC(0)">
     <option value="01" selected>January </option>
     <option value="02">February </option>
     <option value="03">March </option>
     <option value="04">April </option>
     <option value="05">May </option>
     <option value="06">June </option>
     <option value="07">July </option>
     <option value="08">August </option>
     <option value="09">September </option>
     <option value="10">October </option>
     <option value="11">November </option>
     <option value="12">December </option>
    </select> </td>
    <td class="h6" valign="top"> Expiry Year*<br> 
    <select name="card_expirationYear" style="width: 60px;" onfocus="grayOutCC(0)">
     <option value="05">2005 </option>
     <option value="06" selected>2006 </option>
     <option value="07">2007 </option>
     <option value="08">2008 </option>
     <option value="09">2009 </option>
     <option value="10">2010 </option>
     <option value="11">2011 </option>
     <option value="12">2012 </option>
     <option value="13">2013 </option>
     <option value="14">2014 </option>
     <option value="15">2015 </option>
     <option value="16">2016 </option>
     <option value="17">2017 </option>
     <option value="18">2018 </option>
     <option value="19">2019 </option>
     <option value="20">2020 </option>
    </select> </td>
   </tr>
   <tr> 
    <td colspan="3" valign="top"> <table border="0" cellpadding="0" cellspacing="0" width="100%">
     <tbody>
     <tr> 
      <td valign="top"> <input name="card_cvNumber" onfocus="grayOutCC(0)" class="form" size="3" style="width: 30px;" maxlength="4" type="text"> 
      </td>
      <td class="h6" valign="top"> Enter the three digit validation
      number (last 3 digits in signature box found on the back
      of your credit card)</td>
     </tr>
     </tbody>
    </table></td>
   </tr>
   </tbody>
  </table>
  </fieldset>
  <div align="center"> <small class="blue"> </small> </div>
  <p align="center"><small class="blue">This transaction will be processed
   on a secure server.<br>
All fields are required for payments made by credit card. </small></p>
  <table border="0" cellpadding="0" cellspacing="5" width="100%">
   <tbody>
   <tr> 
    <td align="center" valign="top"> <input onclick="pmtMethod(0)" name="post" class="button" value="Proceed to Checkout" style="width: 300px;" type="submit"> 
    <br> <br> 
    <!-- <input onClick="pmtMethod(1)" type="submit" name="print" class="button" style="width:300;"
value="Print This Form, Exit, and Pay By Check"><br>
<br> -->
    </td>
   </tr>
   </tbody>
  </table>
  <!-- END MERCHANT CARD PROCESSING FIELDS -->
  <!-- BEGIN FIELD VALIDATION CODE -->
  <script language="javascript" type="text/javascript"><!--
var defaults=new Array();
var dd='';
function initFlds(){
dd=document.OrderForm;
if(!getCheckVal(dd.Payment_Method)){
var de=dd.elements;
var i=de.length;
do if(de[i-1].type && de[i-1].type.indexOf('text')>=0)defaults[i-1]=de[i-1].value;
while(--i);
}
}
onload=initFlds;
function getCheckVal(fld){
var i=fld.length; do if(fld[(i-1)].checked==true) return fld[(i-1)].value; while(--i);
return 0;
}
function validate(){
var errMsg='The following fields are required. Please return\n'
+'to the form and complete your entries.\n\n';
var err=''; var fld=''; var val=''; var def='';
fld=dd.itemAmount;
if(isNull(fld.value) ¦¦ isNaN(fld.value)){
errMsg+='Payment Amount\n';
getFocus(fld,err);
err++;
}
fld=dd.billTo_firstName;
if(isNull(fld.value)){
getFocus(fld,err);
err++;
}
fld=dd.billTo_lastName;
if(isNull(fld.value)){
errMsg+='Last Name\n';
getFocus(fld,err);
err++;
}
fld=dd.billTo_street1;
if(isNull(fld.value)){
errMsg+='Address\n';
getFocus(fld,err);
err++;
}
fld=dd.billTo_city;
if(isNull(fld.value)){
errMsg+='City\n';
getFocus(fld,err);
err++;
}
fld=dd.billTo_state;
if(isNull(fld.value)){
errMsg+='State or Province\n';
getFocus(fld,err);
err++;
}
fld=dd.billTo_postalCode;
if(isNull(fld.value) ¦¦ isZip(fld.value)){
errMsg+='Postal Code\n';
getFocus(fld,err);
err++;
}
fld=dd.billTo_country;
if(isNull(fld.options[fld.selectedIndex].value)){
errMsg+='Country\n';
getFocus(fld,err);
err++;
}
fld=dd.billTo_email;
if(isNull(fld.value) ¦¦ isEmail(fld.value)){
errMsg+='E-mail Address\n';
getFocus(fld,err);
err++;
}
fld=dd.orderitems;
if(isNull(fld.value)){
errMsg+='Your Order - please indicate all item quantities, sizes and colors (if applicable).\n';
getFocus(fld,err);
err++;
}
// Validate to the card info if this is a card order
if(dd.Payment_Method[0].checked==false){
if(isNull(getCheckVal(dd.Payment_Method))){
errMsg+='Payment Method\n';
getFocus(dd.Payment_Method[1],err);
err++;
}
fld=dd.card_accountNumber;
if(isNumber(fld.value)){
errMsg+='Credit Card Number\n';
getFocus(fld,err);
err++;
}
fld1=dd.card_expirationMonth;
fld2=dd.card_expirationYear;
val1=fld1.options[fld1.selectedIndex].value
val2=fld2.options[fld2.selectedIndex].value
if(isNull(val1) ¦¦ isNull(val2)){
errMsg+='Card Expiration\n';
if(isNull(val1))getFocus(fld1,err);
else getFocus(fld2,err);
err++;
}
}
else{ // if this is a check payment, change the form action.
dd.action='orderprocess.php';
grayOutCC(1);
}
if(err){
alert(errMsg);
return false;
}
return true;
}
function getFocus(fld,err){
if(!err){
document.location='#'+fld.name;
fld.focus();
}
}
function isNull(val,max){
if(!max)max=1
if(!val ¦¦ val.length<max) return true
}
function isNumber(val){
if(!val ¦¦ isNaN(replaceList(val,'-, ',','))) return true
}
function isEmail(val){
var usr=val.substring(0,val.indexOf('@'))
var dom=val.substring(val.indexOf('@')+1,val.lastIndexOf('.'))
var ext=val.substring(val.lastIndexOf('.')+1,val.length)
var eml=usr+'@'+dom+'.'+ext
if(eml!=val ¦¦ usr.length<2 ¦¦ dom.length<2 ¦¦ ext.length<2) return true
}
function isZip(val){
val=replaceList(val,'-, ',',')
val=(val.length!=6 && isNaN(val))?0:val
if(val.length!=9 && val.length!=5 && val.length!=4 && val.length!=6) return true
}
function replaceList(val,list1,list2){
var l1=listToArray(list1)
var l2=listToArray(list2)
for(var x=0; x<l1.length; x++){
var v=''
while(val.indexOf(l1[x])>=0){
v+=val.substring(0,val.indexOf(l1[x]))+l2[x]
val=val.substring(val.indexOf(l1[x])+l1[x].length,val.length)
}
val=v+val
}
return val
}
function listToArray(lst,delim){
// comma is default delimiter
var arr=new Array(0)
if(!delim)delim=','
while(lst.indexOf(delim)>=0){
arr[arr.length]=lst.substring(0,lst.indexOf(delim))
lst=lst.substring(lst.indexOf(delim)+1,lst.length)
if(arr[arr.length-1]=='undefined')arr[arr.length-1]=''
}
arr[arr.length]=lst
return arr
}
function grayOutCC(clr){
var len=dd.length
var c=clr?'CCCCCC':'FFFFFF';
grayOut(dd.card_accountNumber,c)
grayOut(dd.card_expirationMonth,c)
grayOut(dd.card_expirationYear,c)
grayOut(dd.card_cvNumber,c)
if(clr){
grayOut(dd.post,'CCCCCC');
grayOut(dd.print,'666666');
}
else {
grayOut(dd.post,'666666');
grayOut(dd.print,'CCCCCC');
dd.Payment_Method[0].checked=0;
}
}
//function grayOut(elm,clr){
//(elm.style?elm.style:elm).backgroundColor=clr;
//}
function pmtMethod(i){
grayOutCC(i);
dd.Payment_Method[0].checked=i;
}
function pleaseWait(){
var w = 420;
var h = 150;
var doc=document;
var x = screen?((window.opera?doc.body.clientWidth-8:screen.availWidth-8)-w)/2:0;
var y = screen?((window.opera?doc.body.clientHeight+4:screen.availHeight-30)-h)/2:0;
var params = 'resizable=1,menubar=0,scrollbars=0,width='+w+',height='+h+',left='+x+',top='+y;
waitWin = window.open('please-wait.htm','waitWin',params)
}
waitWin = null;
function goAway(){ if(waitWin) waitWin.close() }
onunload = goAway;
//--></script> 
  <!-- END FIELD VALIDATION CODE -->
  </td>
 </tr>
 </form></tbody>
</table>
<!--- END PAYMENT FORM --->

Alterntively, you could just click on this non-commercial link to try it and then click on the Donate button to get to the non-commercial form.

Regards

Paul

[edited by: lorax at 1:22 pm (utc) on Oct. 18, 2005]
[edit reason] Removed URL [/edit]

[Corey Bryant]

I was not reviewing your site. I was actually asking you a few questions. You stated they get a pop-up. You are on a non-secure page posting to a secure page. The data is not secure. I was only trying to let you know that and that might be the reason why you are getting that error message

Is mynocdns3 your shared SSL?

-Corey

[Pewit]

Sorry Corey, I was referring to Lorax who removed the links from my original post.

Yes mynocdns3 is the shared SSL. I did reply with the correct secure URL but that was also removed by Lorax.

If you follow the Donation button link from <snip> it will take you to the secure order form which is the one with the error.

Paul

[edited by: lorax at 1:27 pm (utc) on Oct. 18, 2005]
[edit reason] removed URL [/edit]