Using The Pay Pal Donate Button on a Web Page That Uses Frames

 

I recently re-wrote the web page for Duck Haven; it's still at http://duckhaven.community-info.org so the web site owner of http://duckhaven.org still hasn't redirected the url to point to my web server. The links on the side frame could be prettied up with graphics (via Photoshop or Gimp), but everything else looks fine, and still works. That frame didn't exist before my re-write, in fact, the web page didn't use frames at all. Frames are considered bad practice nowadays; i.e., there are situations where they work just great, and there is really no compelling reason not to use them in those situations, but web designers have had it ground into their heads that they are "bad". Still, I was asked to make a table of contents for the website, using frames.

One of the "everything" that works is a Pay Pal donate button. If you goto the Pay Pal website and have it create a donate button for your website it will create a form. The form has a very standard sort of layout; an "action" (a program on somebody's server, that processes the information that is sent from the form), fields that hold information that are used by the program in the "action" section (these are "INPUT" fields that have a name, a value="some value" and a "hidden" attribute so they aren't visible on your web page. the "action" program uses these "name", "value" fields as input), and a "submit" field (another input field that has a value of "submit" but an image field - the donate button). If you put this form in your web page that uses frames, and click on the donate button, you'll get an error message, telling you the donate button doesn't work in frames! So how did I get it to work? Well, here's the code that doesn't work (the form code):

<form action="https://www.paypal.com/cgi-bin/webscr" enctype="application/x-www-form-urlencoded" method="post">
   <input name="cmd" type="hidden" value="_xclick" /> 
   <input name="business" type="hidden" value="DrQuack615@aol.com" /> 
   <input name="item_name" type="hidden" value="To help save the Muscovy Ducks in Margate,Florida at www.DuckHaven.org" /> 
   <input name="no_shipping" type="hidden" value="2" /> 
   <input name="no_note" type="hidden" value="1" /> 
   <input name="currency_code" type="hidden" value="USD" /> 
   <input name="tax" type="hidden" value="0" /> 
   <input name="lc" type="hidden" value="US" /> 
   <input name="bn" type="hidden" value="PP-DonationsBF" /> 
   &nbsp;<img src="https://www.paypal.com/en_US/i/scr/pixel.gif" border="0" alt="" width="2" height="2" /> 
   <input alt="Make payments with PayPal - it's fast, free and secure!" name="submit" src="https://www.paypal.com/en_US/i/btn/x-click-but04.gif" type="image" width="61" height="34" align="right" />
</form>

Do you notice where it says "cgi-bin" in the "action section? This is a cgi application! CGI stands for Common Gateway Interface; one of the first attempts at getting web pages to work interactively with the user. CGI applications accept input from the user (those "hidden" input fields in the code above) and run some program(s) on the server and send some results to the web page user (usually an acknowledgement that the program ran successfully). Those results are sent back to the web page, but the Pay Pal program won't do it if it sees frames. So I just created a pop up web page (no longer in a page with frames) that opens up the url listed in the "action" section of the form, and passes the input values they way you always do when addressing a cgi program. You can see the way to pass values to a cgi program by inspecting the code I wrote to create the pop-up for the Pay Pal donate page:

<form action="Page1.html" onsubmit="javascript:window.open('https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=DrQuack615@aol.com&lc=US&item_name=Duck%20Haven&no_note=0&currency_code=USD&bn=PP-DonationsBF:btn_donateCC_LG.gif:NonHostedGuest','mywindow','width=800,height=600,scrollbars=yes')">
<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>

Page1.html is the frame the donate button resides in. By calling the caller page as the action, we just put Page1.html back into the frame; this is the action we want. Adding an "onsubmit" attribute to the form means that we perform the action described in "onsubmit"  when we click on the submit field (the donate button). In this case the onsubmit action is a call to a javascript function; window.open. Window.open is a javascript function that opens up a new browser window, and allows you to pass a url to it, so it opens up a specific web page. Not only do I tell the pop up to open up the Pay Pal donate page, I pass it the fields it needs to open the page up with the values needed for a payment to Duck Haven. Notice how the fields are passed by placing a "?" mark after the url, and putting "name"="value" after the "?" mark. If you have more then one input field (as in this example) you keep appending them with ampersands; i.e., &"name"="value".

That's all there is to using a Pay Pal donate button in a web page that uses frames. If you take a look at the developer guide on the Pay Pal web page for using donate buttons, it describes how cgi programs work and how to pass values to them. If you are unfamiliar with cgi then you should probably read the Pay Pal guide or you could read a book like, "Perl, CGI, and JavaScript COMPLETE"; Sybex. In any case, this "old" technology is worth learning.

Back To My Blog Page     Back to My Program Links