February 7, 2010 wordpress, wp-e-commerce

Last Friday a user contacted me and asked me for a fix for the Paypal Pro system. He wanted a drop down box instead of the default text boxes for the credit card expiration dates. The fix sounded like a great enhancement that many Wp-e-Commerce users could benefit from. I’ll be asking Instinct if we can add it to core, I like it

In paypal_pro.php you’ll see this code somewhere near the top of the file:

if(in_array('paypal_pro',(array)get_option('custom_gateway_options'))) {
$gateway_checkout_form_fields[$nzshpcrt_gateways[$num]['internalname']] = "
<tr %s>
<td>Credit Card Number *</td>
<td>
<input type='text' value='' name='card_number' />
<p class='validation-error'>%s</p>
</td>
</tr>
<tr %s>
<td>Credit Card Expiry *</td>
<td>
<input type='text' size='2' value='' maxlength='2' name='expiry[month]' />/<input type='text' size='4' maxlength='4' value='' name='expiry[year]' />
<p class='validation-error'>%s</p>
</td>
</tr>
<tr %s>
<td>CVV *</td>
<td><input type='text' size='4' value='' maxlength='4' name='card_code' />
<p class='validation-error'>%s</p>
</td>
</tr>
<tr %s>
<td>Card Type *</td>
<td>
<select name='cctype'>
<option value='Visa'>Visa</option>
<option value='Mastercard'>MasterCard</option>
<option value='Discover'>Discover</option>
<option value='Amex'>Amex</option>
</select>
<p class='validation-error'>%s</p>
</td>
</tr>
";
}

Instead change it to this which in short, adds the months 01-12 and the current year plus seven years ahead.

if(in_array('paypal_pro',(array)get_option('custom_gateway_options'))) {
$curryear = date('Y');
for($i=0; $i < 7; $i++){
$years .= "<option value='".$curryear."'>".$curryear."</option>\r\n";
$curryear++;
}
$gateway_checkout_form_fields[$nzshpcrt_gateways[$num]['internalname']] = "
<tr %s>
<td>Credit Card Number *</td>
<td>
<input type='text' value='' name='card_number' />
<p class='validation-error'>%s</p>
</td>
</tr>
<tr %s>
<td>Credit Card Expiry *</td>
<td>
<select class='wpsc_ccBox' name='expiry[month]'>
".$months."
<option value='01'>01</option>
<option value='02'>02</option>
<option value='03'>03</option>
<option value='04'>04</option>
<option value='05'>05</option>
<option value='06'>06</option>
<option value='07'>07</option>
<option value='08'>08</option>
<option value='09'>09</option>
<option value='10'>10</option>
<option value='11'>11</option>
<option value='12'>12</option>
</select>
<select class='wpsc_ccBox' name='expiry[year]'>
".$years."
</select>
<p class='validation-error'>%s</p>
</td>
</tr>
<tr %s>
<td>CVV *</td>
<td><input type='text' size='4' value='' maxlength='4' name='card_code' />
<p class='validation-error'>%s</p>
</td>
</tr>
<tr %s>
<td>Card Type *</td>
<td>
<select class='wpsc_ccBox' name='cctype'>
<option value='Visa'>Visa</option>
<option value='Mastercard'>MasterCard</option>
<option value='Discover'>Discover</option>
<option value='Amex'>Amex</option>
</select>
<p class='validation-error'>%s</p>
</td>
</tr>
";
}

Now that makes it display but you will notice that it looks horrib because there is some css forcing them to be the same width as the text fields,, the fix is adding this class to your file compatibility.css file in plugins/wp-e-commerce/themes

.wpsc_ccBox{
width:auto !important;
}

Also in the selected wp-e-commerce theme you are running remove the ‘!important’ around line 588-ish:

table.wpsc_checkout_table select {
width:271px !important;
}

to this:

table.wpsc_checkout_table select {
width:271px ;
}