Umbraco and PayPal form content

Umbraco CMS Logo

If you have ever used the PayPal "Add to Cart" generated buttons, you know how convenient they are.   If your site has only few products, then managing these is fairly simple - not really much of a need to use any of the PayPal APIs.

However, when attempting to integrate a client's products into their new Umbraco managed site (which uses ASP.NET on the backend), I came across a perplexing problem:  the dreaded multiple forms on an ASP.NET page issue!

Since each ASP.NET page has a server-side "form" tag, adding additional "form" tags within the main content area can, apparently, cause some, issues.  In other words, your PayPal buttons might not work via copy and paste content like one would hope they would.  They certainly didn't work for me.  When displaying a single "Add to Cart" PayPal form button, clicking the image link would simply post back to the ASP.NET parent page - the item was not added to the PayPal cart.  When displaying multiple products on a page, the first "Add to Cart" item would not work (just like with a single cart item on a page), however, all of the secondary items would be added to the PayPal cart as expected.  Ah, that ended up being the very clue I needed for my own solution.

Not to get all Hey-Haw on you, but it seems like I really did search the NET over and thought I found a solution (many actually) - but alas, none of them really suited my needs, which were mainly this:  I need something SIMPLE!

So after considering and then rejecting all of the presumably excellent solutions, I experimented a bit and eventually stumbled upon my own solution, which worked perfectly!  I know, everyone says their solution works perfectly. But this one is so easy, you'll want to give it a try:

Before you display or render your (or your client's) PayPal "Add to Cart" generated "buttons" on your page, you should add a "dummy" form, like this:

<!-- ProWorks Hack:  dummy form so that the secondary form(s) displayed will work in context -->

<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="0" />

<input type="hidden" name="on0" value="Size" />

<input type="hidden" name="currency_code" value="USD" />

</form>

<!-- ADD YOUR REAL PAYPAL FORM BUTTONS HERE! -->

This "dummy" code won't actually render any visible HTML on the page.  Once you've added the  dummy form entry you can then display your PayPal generated "Add to Cart" buttons and they should work nicely with ASP.NET.  And that's the key for this solution:  make sure the dummy form code is inserted before your real PayPal cart buttons, even if you only have one on the page.

And that's it! There's no code behind, no fancy Ghost Form, no javascript, and no ASP.NET server-side controls. Simply precede all your PayPal generated form code snippets with the dummy form code listed above and that it!

It will be interesting to know if this solution works for others - and why it works would be of interest.

For our particular consulting project, the "dummy" form prefix solution was ideal because we could simply use our existing client's PayPal generated cart buttons as configurable content within the Umbraco data "ProductItem" data type.  Then it was simply a matter of iterating through all ProductItem types using XSLT and rendering the product list!