Creating a PayPal Payment Form
Apr 22nd in HTML & CSS by Collis Ta'eedHow it Works
PayPal makes doing this very easy by providing those "Buy Now" buttons you've probably seen around the place. Basically when you see one of those buttons, it is really the submit button on an HTML form with all the form fields set to hidden. This is fine for when you have a set price and set item, but what if you want the user to specify how much they are paying, and what they are paying for.
For example if you are adding a payment form to your freelancing site then you would want the client to type in their invoice number and the amount they wish to pay. This is easily done by changing the <input> fields from hidden to text and stripping away the defaults so that the user can fill them in. So let's get started.
Step 1

Step 2

Next we log into our PayPal account and click the Merchant Services tab. Down the bottom right you'll see a link that says Buy Now Buttons, follow that through and you get to a form to create one of these buttons.
Complete the form, under item ID just type the number 1, and use similar dummy numbers for the Item Name and Price. We'll change those in the code later. Make sure you do NOT encrypt the button. The rest of the fields (weight etc) can be left blank.
Step 3
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_xclick">
<input type="hidden" name="business" value="accounts@freelanceswitch.com">
<input type="hidden" name="item_name" value="Donation">
<input type="hidden" name="item_number" value="1">
<input type="hidden" name="amount" value="9.00">
<input type="hidden" name="no_shipping" value="0">
<input type="hidden" name="no_note" value="1">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="lc" value="AU">
<input type="hidden" name="bn" value="PP-BuyNowBF">
<input type="image" src="https://www.paypal.com/en_AU/i/btn/btn_buynow_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online.">
<img alt="" border="0" src="https://www.paypal.com/en_AU/i/scr/pixel.gif" width="1" height="1">
</form>
Here's the code that PayPal gives me. As you can see the button is in fact a <form&rt; element that uses an image submit button. Most importantly we can change any of those hidden. input fields to actual text fields simply by changing the word hidden to text.
- Item Number The value you place in this field appears when the user goes to PayPal and clicks the down arrow for more details on their purchase (you can see it by entering some information in the test form below).
- Business This field is for the PayPal account being paid to. Make sure it's set to your account. The one I'm using is for accounts [@] freelanceswitch.com (which is linked to our sister site FreelanceSwitch).
- Currency Code
This is pretty straightforward. When creating the Buy Now button you can select different options for this setting. If for some reason you wanted to, you could also change this to a
<select>element and let your user choose what currency to pay in. - Item Name The item_name field is the one where your user describes what they are paying for. In the example form below I've used a select box to let the user choose what they are donating towards. You could just as easily change it to a text field and let the user type something in.
- Amount The only thing to note here, is that if the user types anything other than a number in here PayPal will return an error, so you might want to use some Javascript to do validation on this field and ensure it's a number - though that would be a whole other tutorial. So instead for my example form I've just written a $ sign before the text field, hoping that will make it a little more self explanatory.
Step 4
You might have noticed that there is no space for a return URL. Happily in a previous version of the Buy Now button form, there used to be, and the value still works. You simply need to add this line to your form (substituting in the appropriate return URL of course!).<input type="hidden" name="return" value="http://nettuts.com/payment-complete/">
Step 5
Since that PayPal button is pretty ugly, I'm also going to switch back to a regular submit button. To do this we simply swap the<input type='image'> element with a regular <input type='submit'> element, like this:
<input type="submit" value="Pay with PayPal!">
Step 6
Make a Donation to NETTUTS
Fill out the form and send us a few dollars for your favourite tutorial:
So there you have it. In the somewhat silly example above I've used two <select> fields. You could of course use regular text fields or really any combination. You can even leave fields out, for example it's not really necessary to have the item_number and item_name in my example.
If you fill out the form and press Pay, you'll see where the three inputs appear in PayPal - don't worry you don't need to actually pay!
Here's the final code I used:
<p><big><b>Make a Donation to NETTUTS</b></big><br />
Fill out the form and send us a few dollars for your favourite tutorial:</p>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_xclick">
<input type="hidden" name="business" value="accounts@freelanceswitch.com">
<strong>Donation / Contribution? </strong><br />
<select name="item_name">
<option value="Donation">Donation</option>
<option value="Contribution">Contribution</option>
</select>
<strong>Which tutorial are you donating for?</strong><br />
<select name="item_number">
<option value="PayPal Form Tutorial">The PayPal Form Tutorial</option>
<option value="Amazon S3 Tutorial">The Amazon S3 Tutorial</option>
<option value="Some Other Tutorial">Some Other Tutorial</option>
</select>
<strong>How much do you want to donate?</strong><br />
$ <input type="text" name="amount">
<input type="hidden" name="no_shipping" value="0">
<input type="hidden" name="no_note" value="1">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="lc" value="AU">
<input type="hidden" name="bn" value="PP-BuyNowBF">
<input type="hidden" name="return" value="http://nettuts.com/payment-complete/">
<br /><br />
<input type="submit" value="Pay with PayPal!">
</form>
Related Posts
Check out some more great tutorials and articles that you might like
Plus Members
Source Files, Bonus Tutorials and
More for $9 a month for all TUTS+
sites in one subscription.










User Comments
( ADD YOURS )Jason April 22nd
This is going to be so helpfull in my new site, i love your other site and now with the introduction of nettuts it will help alot of people understand the web more without confusing you to much. thanks guys
( )jerry April 22nd
1st !!!
)
( )giackop April 22nd
hey first one ever to make a comment here!! i was making this button some days ago.. it’s not that easy so thanx for the tutorial!!!
( )Paulo Couto April 22nd
Great article. The time it’s perfect since i’m building one of these forms for my site. Thank’s.
( )Mikael April 22nd
Wow… Its a great honor to be the first to make a comment here and be the first to subscribe to the feed! Can’t wait to see what you’ll make of this site.
( )ali April 22nd
woot first to comment on the first ever comment
( )ali April 22nd
and good site. good on the old hue & saturationing the entire psdtuts template.
( )Razvan April 22nd
Very useful, thanks!
( )Mark April 22nd
Brilliant first TUT!! Good Shizzle!
( )Bernd April 22nd
Very cool idea for this site. I love PSDTUTS but as a webdesigner myself I´m really happy to see a more web-centered site.
This article is something I`ve been looking after. Very helpful. I will implement this on my own blog: http://blog.rooocktar.com
Thanks!
Bernd
( )Martin April 22nd
Good Tut. But: Is it possible to hide your paypal-account-name (your E-Mail), because we get a lot of spam to the paypal E-mail-Account.
Greetz from Germany
( )Martin
LongyZ April 22nd
At the bottom, in NOTE: it still says ‘here at PSDtuts we use gravatars…’ shouldn’t it be nettuts?
( )Ewan April 22nd
Yay, nettuts.com will be the best.
( )Nice article too.
LOSWL April 22nd
First of all, congrats on the new website, it is looking slick!! and I love the calm colors
)….Love this Paypal tut, one of the things I always wanted to know, thanks.
( )D. Carreira April 22nd
Thanks for this tutorial! PSDTUTS and NETTUTS 4ever
David Carreira
( )1984 April 22nd
I am french!
Are tutorials CSS et XHTLM good on its French site?
PS: Is that one day NETTUTS and PSDTUTS will be translated into several languages ? (Especially in french.
)
( )Because at present I am obliged to go through Google translation to translate your site.
D. Carreira April 22nd
Eih! “We use Gravatars on PSDTUTS, they are little icons that appear next to your name on this site and on many others. You can get a Gravatar account for free and any other site that supports it will show your avatar too!”
I think you should change this to: “We use Gravatars on NETTUTS, they are little icons that appear next to your name on this site and on many others. You can get a Gravatar account for free and any other site that supports it will show your avatar too!”
David Carreira
( )Micheal April 22nd
Is there a way to know who has donate in your website?
( )shiva April 22nd
Just great!
( )Mihai April 22nd
Great job guys.Hope to see useful stuff here too.Good luck!
( )Spike April 22nd
looks great thank you so much !
( )Michael_C April 22nd
Sorry if im being stupid here but what is the “return URL” in step 4 for? I have a feeling the answer is going to be simple but what the hey!
( )Brian April 22nd
Great tut Collis. I’ll probably add this in to my site soon now that I know how to make it pretty customizable.
( )Conrad April 22nd
Aw.. nice tut. Gonna play with it later on and see how it works. Hated that Paypal button with all my guts. Thanks
( )Johan April 22nd
Thanks, will check it out when i get home.
( )Enes Kaya April 22nd
Thank very much, I’m so excited about the coming tutorials…
( )Ron April 22nd
Wow. This is cool. I have searched for “useful” tutorials all over the net. Nothing are really that helpful in real life. I love this site and PSDTUTS.
( )Andrew D April 22nd
Awesome great tutorial!
( )nettuts admin May 6th
yah
( )Gilbert Pellegrom April 22nd
Thanks for that. Very useful.
( )Geoff April 22nd
Glad to see a tut site for strictly web. How about a tut on creating email/newsletter lists?
( )Tom April 22nd
Nice tutorial, I’ve already customized the paypal donation form some time ago, but this hints are definitely useful.
( )Ashfaq May 9th
It s really nice and also So useful tutorial for us.
( )LouieP April 22nd
nice tut, and hi to the new web
lol> NOTE:We use gravatars on PSDTUTS….. :p
( )Alex April 22nd
Sorry guys, but allow to take pride in being your first subscriber!
( )Radek Mackowiak April 22nd
Thanks for this. Following you on twitter
( )Rodney April 22nd
Woah! Thanks again team for the wonderful addition to the family. If the quality of tuts at Psd are anything to go by, then this will be the best addition to the web! well done people!!!
( )Nathan April 22nd
Thanks for this Collis, it will help me out for my next client.
( )Ben Griffiths April 22nd
This is good – paypal can be awkward at times, this makes it seem a much simpler process!
( )Jonny McGurn April 22nd
Nice tutorial, I remember the first time i attempted this, it was a night mare!…
Maybe you could add a PHP section? Youd get plenty of submissions from me then.
( )Tony April 22nd
Excellent and very timely! I’m current working on a project that includes paypal and I too hate those ugly buttons. Thanks!
( )BrettJohn April 22nd
Great tuts! thank you thank you thank you
( )david April 22nd
i wished that this website was flash tutorial….
( )schoenling128 April 22nd
I really love the idea to show tutorials about the web in such a simple form.
THANK YOU!
mfg
( )Ivan April 22nd
Nice article…
( )Serpentemx April 22nd
You’re great man, keep it up dude, you’re the best.
( )rob April 22nd
With the success of PSDTUTS, I can’t wait to see how this “sister” site develops.
Looking forward to it…
( )Marcus April 22nd
I’m so glad that there is now a site I can rely on for up-to-date we tutorials! I can’t wait to see what other tutorials people come up with!
( )Harry April 22nd
Awesome Tut , Awesome site
( )Colin Stein April 22nd
now to find something people wanna pay me for….nakedcolin.com? anyone?
( )Daniel April 22nd
very useful tutorial! and congrats for the launching of your new site!
( )Sr. Santana April 22nd
Nettuts is the best news of the day. Nice article.
( )Great!!
Shane April 22nd
Interesting article – it certainly seems simpler to integrate PayPal into a site than it does WorldPay or Barclays EPDQ (here in the UK).
I’ve bookmarked this one – despite the issues you refer to, it’s a quick and relatively simple way to accept payment.
( )Lamin Barrow April 22nd
Keep the good stuff coming.
Might i ask, would there be any tutorial focused on Microsoft ASP.Net and related technologies?
( )Zane April 22nd
@ Michael_C
The return url is so after they complete the paypal donation, they are linked back to your site. Also if they decide to cancel they are linked back as well
( )OrganicPixels April 22nd
Looking forward to this site!
( )Danny April 22nd
Nice first tutorial, love it
( )xaralee April 22nd
WOW…
( )This is what i’m waiting for…
Will check it out daily
JPH April 22nd
Great tutorial – and fantastic new site.
( )Michael Castilla April 22nd
Very helpful. I know I’ll be needing this on the new WPCandy, so thanks!
( )Nico April 22nd
First tutorial already amazing! Thanks!
( )lawrence April 22nd
Love the tutorial, simple and to the point. Maybe you can do a follow up with the javascript validation..
( )Jonathan Solichin April 22nd
That’s a great first start here. Good luck on whatever is next!
( )lawton chiles April 22nd
I wanted to style my own Aweber form, aweber is a mailing list form for opt ins.
I have the code and i guess i could put it into dw. but I want it to look groovy.
So, i ask you kind sir, can you help us out?
( )Joefrey Mahusay April 22nd
Thanks Collis for this tutorial. I need to use this in the future..Nice site.
( )Nick April 22nd
Wow! Great idea! I’ll be adding this to my daily RSS feeds.
( )MacTyler April 22nd
I have always wished that you guys would make a site like this, totally awesome!
( )Mike Smith - Bootstrapping Blog April 22nd
Awesome article.
For those who are looking to have your paypal address hidden, the paypal button creator does offer you an encrypted code. However, after doing this, it’s pretty much impossible to change anything as it’s about 1,000,000 characters long of gibberish
( )alvarocker April 22nd
Congrats for the new project, I’ll send you some tuts.
( )nitos April 22nd
yay!!!!
( )thanks for this website!!
Qbrushes April 22nd
i can’t remember sending a tutorial request! this is exactly what i need for my in progress project! i’m not kidding!
thanks alot.
( )Doveshead April 22nd
Excellent site! Thank you so much!
( )Hope Nettuts will be as great as psdtuts!!!
Doveshead April 22nd
Two sites give people who engage in web design and web development so many helps!
( )Many thanks again!
Alberto April 23rd
Nice start, thank you!
( )Jash Sayani April 23rd
Thanks man !
That was great !
Just a question….
Do I need to subscribe to NETTUTS when I have already Subscribed to PSDTUTS ?
You can reply via Twitter!
( )http://twitter.com/jashsayani
ArkRep April 23rd
Great Tut,
Looking forward to more..
Ark
( )Adam April 23rd
Very useful, thanks
( )Chandrashekar April 23rd
That was a really nice tut. But one thing.. the form codes that you showed were that of an unsecure PayPal payment form. Now, guys, for tutorial purposes, I really think this is a great one. However, practically speaking, if you were gonna use this kind of form (just because you hate the PayPal button as much as I do, too!) people are going to look at your page-source (at the “” part) and then go directly to the return page (looking at the thingy)…
So guys, be careful, be intelligent and encrypt. But then, someone’s gotta find out a way to use CUSTOMIZED buttons like on this site even for encrypted PayPal forms!!
Thanks for the tut, anyway! And I am one of those die-hard fans of PSDTUTS… and will be of NETTUTS too!
( )Phil Brown April 23rd
Hey, great tutorial. I don’t see a Legend, Fieldset or labels for those input fields though…maybe one for another tutorial.
( )RicardoSantin April 23rd
Hi, first congratulations for the new Website, think it will be very helpful for developer…
Second y use to work with flash so i would liki to lern how to do the payment with Action Script. thanks.
( )Qbrushes April 23rd
it would be awesome if design elements made in PS is mixed with CSS How to.. that would totally be unique!
( )Toan April 24th
Great!!!
( )Zomball April 24th
Great tutorial and looking forward to watching the site develop. I’m a big fan of PSDTUTS so hoping the new venture is just as successful.
Cheers!
( )FlashRipper April 24th
Thanks, you! Very cool
( )Christian Mejia April 24th
I was fortunate to learn this on my own but I tell you what… I wish this tutorial was available when I was trying to learn it. It would have saved me a lot of headaches. Glad it’s up now for our fellow designers who will benefit from it! I’m really digging Nettuts massively.
( )Brian April 24th
FLATUTS next?! PLLLLLLLLEASE!!!!!!
( )Leland Clemmons April 25th
Great tutorial, always wanted to learn how to do this! Wouldn’t it be easier to use radio buttons for the “Donation/Contribution?” part, though?
( )James Mitchell April 26th
Thanks for the tut. As a good supplement to this article, I read one for receiving unique payments. I find it useful for web hosting, design, and my other kind of stuff.
Receiving Unique Payments with Paypal by Marc Amos.
( )Razvan April 27th
Thanks for the link James!
( )Michael_C April 30th
@ Zane
Thanks man
( )Blue Buffalo April 30th
Very Nice! It’s cool to see new ways to tweak PayPal code. Thanks!
( )Avangelist May 1st
hmmm, what you have just done is a guide to designing html forms, the inclusion of paypal is irrelevant but a good device to provide as an example.
How do you style the form without a table, and without ID or class tags?
That’s the next bit I would like to know.
( )Karl Hardisty May 3rd
Good stuff. As above though, I would really recommend encrypting the content.
( )Advantage May 11th
Very nice tutorial
( )thank you for the help
it will come in handy a lot
for my site and future web sites
for sure
David Gasior May 16th
Is it possible to use this code on Iweb?
( )Raj May 16th
nice tutorial.
( )Jonathan June 20th
Is there anyway you can do a tutorial like this, with paypal, but with the continued shopping feature? I think that would be a nice complement to this tutorial.
Thanks.
( )Aditya June 22nd
Thanks! Paypal was so damn complex b4 reading this stuff…
( )youporn August 3rd
hi great site nice work thanks youporn paris =) download redtube com see u
( )Windows Themes September 4th
I was searching something like this for a long time. Thank you so much!
( )Legibe September 6th
You can also give an url if visitor decide to cancel his transaction with this hidden input :
very nice tutoriel, thanks!!!
))
( )Legibe September 6th
Sorry (if moderators can edit my message please), th code I give don’t appear in my last comment : the hidden input for the cancel page is “cancel_return”
( )Q September 11th
Umm… paypal has new buttons now… any new tuts coming out?
( )Lam Nguyen October 26th
Thanks for your tut
( )This site is so awesome
kareem November 27th
this is wonderful tutorial i will put acopy of this lesson on
( )my site here
http://www.as7ap4you.com
kareem November 30th
this is wonderful topic …. i will put acopy of this topic on
( )my site here
http://www.as7ap4you.com
Mark November 30th
This will help me on a project I’m working on right NOW! Thanks!!!
( )Nimol December 2nd
thank!
( )David December 3rd
Great job,
I was wondering if those fields and other customizable fields can be read by PAYPAL and recieved by me on the payment details, fields like color, size, texts for engraving…etc…
( )Niamh December 13th
I am searching around for information on using the Cforms plugin with Paypal and having read your tutorial I think that all I need to learn now is how to get the information from the Cform into the PayPal form and how to do some calculations in between the two forms.
Thank you for this tutorial.
( )vivek December 22nd
Nice tut..
( )brandonMarius December 30th
Hey!!!
Thank you sooo much for this tut.
( )Maxi January 10th
Very useful, Good JOB DUD
( )Zair Abbas January 11th
wow!
( )thanks
this will gonna help alot!
BSBc February 8th
what if I want to add requir field so customer should fill..
( )organizacja wesel szczecin February 15th
nice!
( )lawrence77 February 21st
good one!
( )collis always RockZzZzZZZZZZZZzzzzz!
Aman April 7th
Thanx! This is what i was looking for.
Thanx Again!!
( )Aman
Aziz April 12th
that was very helpful, thanks a lot!
( )david jones May 20th
Great Article !
David
( )http://www.emisltd.com/payoneer.html
strony internetowe July 12th
great tut i’m going to use
( )Alex August 16th
So this still causes it to redirect to paypal anyway?
( )Seba August 25th
Cool
( )awais August 27th
hello thanks for information
( )but still i need help to make this form
pleas e-mail me
PG September 1st
The info about button creation is no longer valid, as PayPal have changed their way of button creation.
For developers’ instructions, please see:
( )http://www.paypal.com/cgi-bin/webscr?cmd=p/xcl/rec/sc-techview-outside
Mayur September 8th
If you want to use Cforms and Paypal together, I wrote a short tutorial here: http://www.fullmotiongroup.com/2009/09/08/dead-easy-integration-of-paypal-with-cforms-in-8-steps/
( )เพชรร่วง September 9th
you’ve made my life a lot easier.
( )pawel September 30th
nice article. thx.
( )Joe October 11th
Nice Tutorial!
( )Meissen October 29th
great tutorial, thanks for publishing
( )