Valid markup is important, and my assumption is that PayPal designed its code generator for older HTML, and has not updated, so we need to fix the button code manually! This is some code from our Drama Classes page.
When you get button code from Pay Pal, it looks like this:
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="#######">
<table>
<tr><td><input type="hidden" name="on0" value="Stage Right Drama Class (Spring 09)">Stage Right Drama Class (Spring 09)</td></tr><tr><td><select name="os0">
<option value="8-10 years old">8-10 years old $126.00
<option value="11 & 12 years old">11 & 12 years old $189.00
<option value="Teen">Teen $246.75
</select> </td></tr>
</table>
<input type="hidden" name="currency_code" value="CAD">
<input type="image" src="https://www.paypal.com/en_US/i/btn/btn_cart_LG.gif" border="0" name="submit" alt="">
<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>
Here's why this code will not validate:
1) Lack of Closing Tags
XHTML requires that all tags be closed with a '/'. The button code generator does not add the '/' to tags that are self closing, like <img/>, and< input/>. So, add a '/' before the last pointy bracket and that takes care of some errors. For some reason, the button code generator entirely leaves out the closing tag for <option> so, you have to add a closing tag </option>.
<input type="hidden" name="on0" value="Stage Right Drama Class (Spring 09)"> Stage Right Drama Class (Spring 09)should look like
<input type="hidden" name="on0" value="Stage Right Drama Class (Spring 09)"/> Stage Right Drama Class (Spring 09)and
<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">should be
<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1"/>AND...
<option value="8-10 years old">8-10 years old $126.00needs a closing tag added like this:
<option value="8-10 years old">8-10 years old $126.00</option>Check all of the tags, close them if they are self-closing, or add a closing tag if they modify text that is displayed.
2) Input tag does not support the attribute "border".
You are given this:
<input type="image" src="https://www.paypal.com/en_US/i/btn/btn_cart_LG.gif" border="0" name="submit" alt="">
Make it this:
<input type="image" src="https://www.paypal.com/en_US/i/btn/btn_cart_LG.gif" name="submit" alt=""/>
While you're at it... put the 'alt' attribute to use!
<input type="image" src="https://www.paypal.com/en_US/i/btn/btn_cart_LG.gif" name="submit" alt="This is a button that will submit your choices to Paypal's shopping cart.">
3) Special characters like '&' are not coded properly.
***NOTE!!!!*** You should change the code in PAYPAL as well as the code on your site for this error***
The button code generator accepts the user's special characters as if they are normal characters. When you tell the button generator that you are creating an option to order classes for "11 & 12 year olds", it posts exactly that to the HTML code.
In order to ensure that you are not breaking a button, change the code in PayPal so that is it exactly the same as the code that you have on your webpage:
- Access the paypal Merchant page, click to create a new button
- Find and click on the option to go to your saved buttons
- Find the button that you are correcting, click 'edit'
- Make and SAVE your changes.
so.. this
<option value="11 & 12 years old">11 & 12 years old $189.00
ends up like this:
<option value="11 & 12 years old">11 & 12 years old $189.00
Remember to validate your code! It is an excellent way to learn more about XHTML.
My next battle: Getting CSS to display properly in IE. (I use Firefox!)
Posts
