I have established a PayPal Pro account, and have all the API credentials. My assigned integration engineer at PayPal suggested I use the free WP Plugin by BlueSky iSolutions. It works okay, but the overall look and feel is not what Im going for. This is what I have: http://doubravaforregent.com/?page_id=7. This is what I need: https://briansandoval2010.worldsecuresystems.com/donate. Im looking for an expert to help modify the page - today.
It is not CSS, but PHP. Regardless, this question was posted 3 days ago.. So much for "Post emergency WordPress questions for fast help".
Utkarsh Kukreti answers:
Hi,
Are you looking for an alternative solution, or a modification done to this, to match the other page?
Lawrence Krubner answers:
Jordan,
I just want to clarify your question. You have this:
http://doubravaforregent.com/?page_id=7
You want this:
https://briansandoval2010.worldsecuresystems.com/donate
What part of your system is not working? Is it a matter of what happens when someone submits the form?
I tried to test your form, but your price is fixed at $100. While you are beta-testing, could you lower the price $0.50 so that we might have an easier time testing it?
Juan Orozco answers:
I noticed that many of the form elements don't have any style (CSS) information set. With a little CSS you should be able to improve the "look and feel" of the form.
Also, the gaps between the form elements are rather large. I like how spread out it is, but for users with smaller screen resolutions, I'd recommend removing these - or at the very least, make them smaller.
The credit card expiration drop down would probably work better if it was two separate elements; a month drop down and a year drop down. I'm not sure if the form was a template from Paypal, but if the template allows, changing it should be a quick and easy fix.
Lastly, you can use an image for the submit button that will help with the aesthetic of the form.
Juan Orozco answers:
First place this between the <head> tags:
<script language="JavaScript">
function amountUpdate (value) {document.forms.donationform.charge_amount.value=value;}
</script>
Next, change your FORM tag to this (it needs a form name):
<form name='donationform' method='POST' action='/?page_id=7' style='margin:0;'>
Lastly, change this:
<tr>
<td nowrap>Payment Amount:</td>
<td >
<input type='text' name='charge_amount' value='' size='4'></td>
</tr>
to this:
<tr>
<td nowrap>Payment Amount:</td>
<td><input type="radio" onclick="amountUpdate(this.value)" name="donate_amount" id="donate_amount_0" value="10" /> <label for="donate_amount_0">$10</label></td>
<td><input type="radio" onclick="amountUpdate(this.value)" name="donate_amount" id="donate_amount_1" value="25" /> <label for="donate_amount_1">$25</label></td>
<td><input type="radio" onclick="amountUpdate(this.value)" name="donate_amount" id="donate_amount_2" value="50" /> <label for="donate_amount_2">$50</label></td>
</tr>
<tr>
<td><input type="radio" onclick="amountUpdate(this.value)" name="donate_amount" id="donate_amount_3" value="100" /> <label for="donate_amount_3">$100</label></td>
<td><input type="radio" onclick="amountUpdate(this.value)" name="donate_amount" id="donate_amount_4" value="500" /> <label for="donate_amount_4">$500</label></td>
<td><input type="radio" onclick="amountUpdate(this.value)" name="donate_amount" id="donate_amount_5" value="1000" /> <label for="donate_amount_5">$1000</label></td>
</tr>
<tr>
<td><input type="radio" onclick="amountUpdate('');" name="donate_amount" id="donate_amount_6" value="Other" /> <label for="donate_amount_6">Other</label> <input type="text" name="charge_amount" id="charge_amount" size="7" /></td>
</tr>
This will give you the same functionality as the example site you gave. Good luck. :)