I recently had a request from a client to add a paypal donate button to their blog. So off I went to the Paypal site to get instructions for them on how to generate the button html for them to send to me.
- Login to your paypal account (or create one).
- Click on the Merchant Services tag.
- Click on "Create Payment Buttons for your Website"
- Choose "Donate" as the button type, and complete the form.
- At the end of the process, you have the html you need to add the button to any site.
They did all this and sent me the html which consists of a simple form. Initially, I simlpy created a new text widget and pasted it in. The button looked as it should but when I clicked on it I got a 404 error. I viewed the source for the page and saw that the Form tag had been stripped, probalby by the text editor. No problem, I went to the Site Master page, and pasted it directly into the theme template, exactly where it was needed. Published the change, still goes to a 404 page. Then I realize what the problem is. I'm nesting forms. Blogengine.Net, like many traditional ASP.Net based sites, relies on the page being wrapped in a <form runat="server"> tag, which allows for all the postback stuff to work.
A quick Google search for "BlogEngine PayPal Donate button" returned a handy little Extension. But on closer inspection I could see that while this would add a button inside a post, it could not be relied upon to add it to the frame of the page itself, so that it could appear at all times, regardless of which post or page you were viewing. Of course, if it could add it to a post it must have found a way around the nested form issue, so I took a look at the code and discovered that it was creating a simple link, that is an image, wrapped in an anchor tag that looked something like this:
<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=[email address here]&item_name=[Description, e.g. "Donation to MySite.com" (UrlEncoded)]&no_shipping=0&no_note=1&tax=0¤cy_code=USD&lc=US&bn=PP%2dD onationsBF&charset=UTF%2d8"><img src="Path/To/PaypalDonateButton.jpg" /></a>
So I filled in my information and I finally had a working paypal donate button. However, I didn't like the fact that my email address was now so firmly embedded on the page, I rather liked the anonymity that the original paypal code offered. Any spider could skim my email from the page and start adding to the thousands of spam emails I already receive every day. So I kept looking for other solutions. As usual, Stack Overflow had a better solution.
Instead of using the anchor tag which makes a Get request and exposes your email address, paste in the full code from paypal, then delete the form tags. Replace the image input with a server side image button or regular button and have it post back to paypal for example If the paypal code looks like this:
<form 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="xxx"><input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"><img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1"></form>
You paste it all in where you want it then modify it like this:
<input name="cmd" type="hidden" value="_s-xclick" /> <input name="hosted_button_id" type="hidden" value="xxx" /> <asp:ImageButton ID="btnDonate" AlternateText="PayPal - The safer, easier way to pay online!" runat="server" ImageUrl="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif" PostBackUrl="https://www.paypal.com/cgi-bin/webscr" OnClick="btnPayNow_Click"/><img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1" />
In your code behind, add an empty method to handle the OnClick specified above (btnPayNow_Click):
protected void btnPayNow_Click(object sender, EventArgs e)
{
}
That's it! Now you have a working Paypal donate button. If you want to test it out to see if it works, by all means click on the one you see on this page ;) Or, you can change the postback Url on your button to "https://www.sandbox.paypal.com/us/cgi-bin/webscr" which should allow you to test it without actually spending any money.