Making a PayPal Form Tutorial

Some time ago I put up a post here on the ‘Switch about Taking Payment with PayPal, Escrow and other Online Options in which I mentioned that it was relatively easy to create a form on your regular website that allows you to accept credit card payments. Here is an example that Cyan and I used to use on our portfolio/agency site.
This is a pretty neat thing to do because it’s both very simple and it’s kinda nice to be able to say “Oh yes you can pay by credit card on our website” which to most offline people sounds rather like “I am an uber-freelancer and I should be charging you six squillion dollars an hour, but you’re getting me for a steal”. In actual fact when Cyan and I had the form on our site, we only actually took payment through it maybe a dozen times, but just having it on the site made us look that much more professional.
How it Works
PayPal makes doing this very easy by providing those “Buy-It-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 in our situation we want the client to be able to fill out what it is they are paying for (e.g. an invoice number) and also to set how much they are paying.
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 – Make a Payment Confirmation Page
First of all you should make a page to send the user to after payment has been processed. For the example form that I am making – one for FreelanceSwitch – I created this page http://freelanceswitch.com/payment-complete/. On this page you should be placing a simple confirmation message so that your client doesn’t feel like they just sent money off into the ether. Next upload the confirmation page so it’s accessible over the web and you have a URL for it.
Step 2 – Create the Form
Next we create the form. When I first made this form I used the Buy-It-Now button form generator on PayPal and then modified accordingly, but you can just use the code below and make the changes I’ve described further on:
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" id="payPalForm"> <input type="hidden" name="item_number" value="01 - General Payment to FreelanceSwitch.com"> <input type="hidden" name="cmd" value="_xclick"> <input type="hidden" name="no_note" value="1"> <input type="hidden" name="business" value="your@paypalaccount.com"> <input type="hidden" name="currency_code" value="USD"> <input type="hidden" name="return" value="http://freelanceswitch.com/payment-complete/"> Item Details:<br /><input name="item_name" type="text" id="item_name" size="45"> <br /><br /> Amount: <br /><input name="amount" type="text" id="amount" size="45"> <br /><br /> <input type="submit" name="Submit" value="Submit"> </form>
The parts that need modification are as follows:
Item Number
The item number field is this one:
<input type="hidden" name="item_number" value="01 - General Payment to FreelanceSwitch.com">
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). I’ve used the value “01 – General Payment to FreelanceSwitch.com” and theoretically if I had some other forms for say donation I might write “02 – Donation” and so on.
Business
The business field is this one:
<input type="hidden" name="business" value="accounts@freelanceswitch.com">
This is the most important field to modify as it is the one that determines where your customer is paying to. You need to substitute in your PayPal email address. So for FreelanceSwitch, our PayPal address is accounts [@] freelanceswitch.com, but obviously you’ll want to change that (though please feel free to send payment our way if you want to!)
Currency Code
The currency code value in my example form is set to USD, you could change this to your own currency (Cyan and I used to use AUD for Australian Dollars). If you want a list of the different currencies available through PayPal you should log in to your account, click on Merchant Tools then click on Buy Now Buttons and in the form there is a drop down box which lists them.
Return URL
The return URL (or payment confirmation page) is set by this field:
<input type="hidden" name="return" value="http://freelanceswitch.com/payment-complete/">
Simply swap in the URL you created in Step 1.
Item Name
The item_name field is the one where your user describes what they are paying for. When billing clients I set up my form to have “Invoice Number” and in the invoices we sent out under “How to Pay” it explained that you had to get the invoice number from the top right of the bill and type it into the form. In my example form below, I’ve written simply Item Details, so theoretically you could write anything in there – e.g. “Payment for Providing Amazing Freelancing Website, Thanks” and that will appear in PayPal when you go to purchase.
Note that if this were a Buy-Now button form, then the item_name would be a Hidden field with a default value, but we’ve changed it to a text field so the user can decide what they are paying for.
Amount
The amount field is pretty self explanatory. The only thing to note 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’s not necessary. The main problem is your users might be tempted to write in a dollar sign – e.g. “$450″ which results in an error. Another solution would be to write a $ sign before the form field.
Step 3 – Test!
OK and that’s it really! Here is the example form that i just made…
Update: I had to put in a fake email address into the form below as a few people accidentally tested it with rather large amounts of money



Thanks. Nice tutorial ! I’m twice the happier now that my country (RO) can also receive money from PayPal, not only send
Oh this is great guys! I can’t wait to crack my knuckles and sit down to make this work!
A+!
Nifty little idea this, thanks.
BTW: The RSS feed for the blog is hosed. Try visiting http://feeds.feedburner.com/FreelanceSwitch in Firefox for some angry red error text.
Sweet, i was actually looking for such an article, off to make my form now
Does anybody know how to do the exact same thing but using Google Checkout? I’ve heard many horrible stories about PayPal stealing thousands of dollars from peoples accounts and people being out of luck to get it back. I trust Google much more.
Should one be hosting their website on a secure server (https:// vs http://) to use this securely?
This is a grea tutorial guys thanks for sharing! Very useful for those that want to make their own form
a sneaky way to raise funds. very sneaky.
Great and very useful tutorial! Thanks!
Needed this, thanks!
great tuto .. thanks a lot …! :0)
greetings!
Thankyou this is great!
@Nathan: Thanks for the heads up, I think i must have broken that last week and not realised, argh! I’ll fix it today, it’s an extra line we put in for the podcast
@Matt: Regular http:// is OK actually, nothing secure happens on your site, because the only information they are transferring is that invoice number and an amount. Once they get to PayPal, they will be in a secure environment and that’s when they actually put in their payment/credit card/bank details. The neat thing about PayPal is that if someone gets your PayPal email address the only thing they can do is pay money to you – actually I suppose if they knew you well they could maybe try guessing your password, but that just means you should have a hard password for things like PayPal – I use long strings of random characters which are troublesome to remember but safe
Anyhow so you can place the form on anything and you’ll be fine!
Do payments made this way still attract the same Paypal fees? If so, how do you allow for the fact that an invoice paid via Paypal will actually return you less funds than if they pay by some other method, e.g. direct bank deposit?
Researching all eCommerce means, just about everyone will charge you per sale, per month, etc. PayPal and Google checkout have very great deals on pricing. You could always ask for a check or direct deposit, but then it isn’t anonymous nor convenient. Thanks for the great tutorial! Do one for Google checkout now please!!!
Maybe not convenient, but if you’re asking your clients to pay their invoices (as demonstrated in the first example in this article), anonymity doesn’t really come into it. You aleady know who they are and they already know who you are. My question doesn’t really relate to ecommerce – I’m not talking about selling anything, I’m talking about offering different payment options to clients.
@Collis Well, yeah, duh. That makes sense, of course. Thanks!
Great little tutorial!
I like it a lot
will defiantly have to use this, already have three or four websites I could use this for
Hey nice Tutorial,
We implemented a paypal integration into one of our sites lately using Ruby on Rails.
http://www.fortytwo.gr/blog/14/Using-Paypal-with-Rails
Hope it is useful to someone.
Regards
Vasilis
Cool tutorial,
Will be very useful! And complements on the site in general; nice slick design and some excellent content!
Great tutorial. Thanks!
A really useful tutorial – this is exactly what I need for my site. PayPal’s own documentation makes it sound so complicated and I had no idea it was so simple. Thank you!
So all I need to do is view source and find the return url to get the stuff/ebook/scirpt/software for free?
Um.. time to grow up eh?
Good tutorial.
Paypals documentation is way too complicated. This is what i need to see how it works and build it from there. Too bad you didn’t finish the tutorial with testing against paypal’s servers.
Thanks
Good One….. thanks a lot
If concerns of people viewing source are ripping your URL a quick google search returned this:
http://www.1-hit.com/online-payment-systems/html-encryption.htm
Nice tutorial thanks for the share.
Great tutorial!!! Thanks Magic to you too!
A very useful post. Unfortunately for my mates in Argentina Paypal doesn’t seem to work very well.
I have a personal paypal account how can i claim donations..its saying wrong paypal id.plz reply to my mail
i have implemented the code and it does seem to work but……
is there a way to have the text of your product and the price embedded in the form
what is worrying me is if a user input $5.00 instead of the price e.g $7.00 would the transaction go through where-as the consumer could input $0.01 and still get away with the product????
Awesome lil tut
you did not mention something very important.
how does paypal know which vender is sending a customer ?
https://www.paypal.com/cgi-bin/webscr only sends the form to the login page in paypal
I know there must be that hidden field related to the vendor ,you could’ve insert it as well with a value of
Also,how about using a link that embeds all that stuff and its advantages vs disadvantages ?
nice tutorial,keep up the good work
Is there a way to adapt this for a Registration Form? For Example:
Customer fills out RegForm > they click a Next button (info goes to us) > they finish paying with PayPal (we get a confirmation of payment).
A tutorial like that would save the day! Thanks.
What happens if someone edits the HTML code, inserts a lower number in the “amount” field, but leaves everything else the same.
Then they would automatically get access to the product being sold.
I guess this could be combated by performing form validation before the data gets sent to paypal and/or when IPN sends it back. Could store the form values and only allow access to the website once the IPN values that come back match the values that were originally sent from the website.
The (dollar amount) value would need to be checked before the form was submitted.
Hmm… seems a bit confusing, and still not water-tight. But i guess that’s the cost of using a cheap service?
Even if they were to visit the “payment complete” URL, it is very easy to check PayPal for the correct payment amount from the client or whether they paid at all. Worst case scenario just don’t use a custom page, but either way, it is very easy to tell if they have paid by checking your PayPal account.
If it is being used for another method such as a registration where it is a specific amount that is required, just require that amount and don’t give them a field to enter it. I have seen many retailers use PayPal, where after paying, it takes you back to their checkout process with the funds now processed.. obviously if someone was to hack the URL by visiting the “payment complete” page for this type of checkout, it will still say it needs more funds, because the checkout process on the retailer’s site makes sure that the paypal payment processed first. I am sure PayPal provides ways of doing this to make sure no one’s customers or clients are getting anything for free.
nice post, btw my client do not even know about it, so we must make them understand how it could work…
hi
I am new to paypal and I would like to display the shipping cost for the transaction in the paypal site. I’m displaying tax per each item by using the following code.
This works fine and the total tax value is displayed below the subtotal in the paypal site. However i cant pass shipping cost for individual items like
because the total shipping cost is not displayed in paypal. Can some one tell me the correct way to do this so the total shipping cost will be calculated by paypal and displayed like it happens with tax.
Thanks
hi
I am new to paypal and I would like to display the shipping cost for the transaction in the paypal site. I’m displaying tax per each item by using the following code.
input type=”hidden” name=”amount_1″ value=”26.99″
input type=”hidden” name=”tax_1″ value=”2.00″
input type=”hidden” name=”amount_2″ value=”25.99″
input type=”hidden” name=”tax_2″ value=”8.00″
This works fine and the total tax value is displayed below the subtotal in the paypal site. However i cant pass shipping cost for individual items like
input type=”hidden” name=”shipping_1″ value=”8.00″
input type=”hidden” name=”shipping_2″ value=”18.00″
because the total shipping cost is not displayed in paypal. Can some one tell me the correct way to do this so the total shipping cost will be calculated by paypal and displayed like it happens with tax.
Thanks
Hey!
Some of the links in the tutorial seem to have gotten broken over time, might want to look into that.
This is easy tutorial for new commers
Why waste time juggling with HTML.. I prefer using a invoicing software like CurdBee to get the job done.
You might want to check your “Here is an example” and “http://freelanceswitch.com/payment-complete/” links, they are not working… would be nice to be able to see those examples… anyway, nice tutorial
Hi All,
Here is an example of how to make this better:
http://www.appointmentsbook.com/appointmentsbook/shopping.aspx
1. view the html source and see the Javascript in the tags.
functions:
autocheck
ddlCopies_Change
getCheckedValue
GetSelectedCurrency
GetSelectedCurrencyStandardEdition
2. Put this line of code in to tick one of the currency radio buttons
<body onload=”javascript:autocheck(1);
Tip: the above line hides dropdownlists with other currencies on page load
3. Then put in the dropdownlists with the prices
Note: I have prevented users typing there own figures and remove and foreign dollar sign. It seems PayPal has a regular expression that only validates currencies with “$” type of dollar sign, pounds and euros it doesn’t like.
also e-junkie.com is a valuable partner when you need PayPal APIs but dont have the time
Wow that’s a superb idea…
I will try it soon. Thanks man
http://www.fadzuli.com
I’m surprised at how easy it was! Thanks a mill!
Hi. Good site.
Good Day!
my problem is…after submitting the from, and the form is redirected to paypal site , once the user redirected to paypal what if the user decide to go back , the user try to hit the BACK button of Firefox browser. How do i get the post data being submitted to paypal.
Thank in advance!
hello,
your tutorial is perfect for normal payment, put what if I want more information from customer to add to the form ..
how can I incload this information requier and how can I get it..
thank you
The example link referring to your portfolio is not working.
Great quality stuff.
Great tutor. Thanks a lot friend.
hey
Thanks. Nice tutorial
can we send the item description to paypal. or description about the transaction.
e.g. I can ship the parcel in 48 hrs n that I want to display to user while making payment.
Thx
It’s no where near that easy! This basic of a form is crap! You don’t discuss variables like discount amounts and how the F to get a different discount for each item based on Qty, and how to pass the names of the items the customer has selected, this becomes a huge problem when treating all items as one so that qty discounts can be applied and still have the names of the items passed along so the seller knows which items to ship!!! The real problem is PayPal basic cart is not flexible enough and Pro Cart is outrageously priced per month!!
Some links are not working
nice tutorial.
“I am an uber-freelancer and I should be charging you six squillion dollars an hour, but you’re getting me for a steal”
hahahahahahaah this is so funny and so true!
Nice info, Useful for my job…this has made my life (my projects) goes a lot easier. Keep up the good work, thanks very much…
Awesome…. worked perfectly! Thank you!
This is all well and good but what if you want the amount to be submitted from a database? I couldn’t find that anywhere but figured it out with PHP echo and wrote a short bit about it here.
http://www.wikisoftpeople.com/blog/2009/12/how-to-send-paypal-invoices-through-email.html
Beautiful Tutorial. We integrated paypal payments with our form builder service, so I wanted to share about it.
If you are a freelancer short in time but also have more advanced needs such as:
- Integrated Form,
- Multiple Choices on the payment form where user can choose one or many options,
- Subscription Payments,
- SSL Secure Form.
Please consider our service: JotForm. Many freelancers use JotForm to collect payments from users. It also integrates with many other payment gateways in addition to PayPal.
If you have any questions about JotForm, please send me an email.
It’s good for newbies…
Thanks for share.
Good article. Do you know I can have a full form with 5-6 fields, where the form is also emailed to me after payment confirmation?
Beautiful Tutorial. We integrated paypal payments with our form builder service
Hello, I was wondering if anyone could tell me if there is a way to work this code for a subscription payment option??
I cannot get the amount out in the paypal website. i was just using one pay now button.
anyone experiencing same problem?
I’ve been trying to figure out how to get a custom form to show up in the paypal cart i’ve been working on FOREVER! This works exactly the way I need it to! Thanks!
Thank you for posting this solution! Is there also a way to post the number of items you want to buy. So if you want to buy three bars of chocolate instead of one.
Very nice work!
Oh, I tried a little bit and found out that you have to add a field with the name “quantity_n” like this:
Thanks guys for this helpful info. I knew there was a way to make your own payment form.
thanks a lot.
how to put several item and there price
hello
is “return” parameter necessary ?
i mean, what should we type if we want to close the window after the transaction was complete ?
Thanks
Am I too late for this? The links on the tutorial do not work…?
I have a product which have a recurring payment amount as well as registration charges. Registration charges will be charged once and recurring payment should be charged every subsequent month. Could someone tell me how to send both the values to Paypal?
Thanks for this great tutorial. I was really looking for it, my client needs that urgently.
Thank You.
Param
Thanks for this easy tut. I got it working, but i get no $_POST vars back from PayPal. Any ideas?
I needed to enable IPN messaging in my PayPal profile in orde to get the reply from PayPal.
thanks for the artice i am using paypal…
Nice tut.
what if we want to send form data to an email?
Hi,
Great tip. Just what I was looking for.
Wonder if you can elaborate on something though, I am using this on a form where the user customises a product, then pays using the Paypal button. However, I want it to also post the customisation details to a mysql database.#
Then I guess I will have a flag in the database called paid, on successful payment this will change.
Any chance anyone could point me in the right direction?
Cheers
Mike
@mike, you need to setup a file(notify.php) path in paypal, which brings back all the information about the payment process like the customers details, payment status etc, also u can get form data and populate your database like a any simple mysql query.
I did something similar for my application.
@gangesh
Hi thanks for the reply.
Sorry I don’t follow the bottom bit.
If it is all part of one form, once they click the Paypal button does it not take them off the the Paypal site, losing any data that was posted with the form?
Or can i run a script of my own AS WELL AS it going off to Paypal?
@article writer – this issue I’ve come across would be a great continuation of this tutorial!!
Mike
Than you for this short tutorial.. it helps me alot!!!
This is great! I’m adding it to my site right now. Thanks for an awesome, helpful tip.
Very nice tutorial! Very easy to do and very well expalined indeed. Thnaks guys
Very easy tutorial to understand
This is not much for Paypal but i like this for novice..
But I am looking for the Google Checkout if u have plz shae and mail me.
This works for you!
But I do not seem to be able to get it to work on either one of to client systems?
Hi All, Thanks for the tutorial.
I seem to have a problem with the return part of the form.
When the user returns they return to the index page instead of the url i specified in return. If anyone sees a glaring error in my form (below) would they please point it out to me. ps the $variables are all declared and working.
HI
I am writing you this email because I think you have the solution I’ve been looking for.
I have a small website that will allow user to post their adverts; Once the form is filled out the user will click on the submit button to store his advert on the database (PHP mysql) as normally.
This time I would like the paypal payment option to appear when the user press submit button; Once the payment process is completed, then data provided will be send and store in the database.
Thank you in advance for guiding me to realize the project.
Regards
I have designed a form with WYSIWYG Web builder 7.6.3
The Form contains 3 checkboxes and few radio buttons for selecting what the client needs to pay for, and below this i have mad a username and password fields for the clients to signup and be member of the site.
Now when i click on submit i would like it to pay for the selected items and make an account for the member on the site. Is this possible to do?
If yes then how to do it, i m new at this.
Hope someone can help me with this.Thanks
rony
Is there a way to change it where you set up preset choices for the user to pick using checkboxes? So something like this:
$125.00 – Patron
$250.00 – Donor
Can it somehow be changed to pass both the item_name and amount using checkboxes. If anyone has any suggestions or thought I would appreciate the help. Thanks.
sorry i messed up on showing the code:
label
input id=”CheckboxGroup1_1″ name=”CheckboxGroup1″ type=”checkbox” value=”checkbox”
$125.00 – Patron
label
label
input id=”CheckboxGroup1_2″ name=”CheckboxGroup1″ type=”checkbox” value=”checkbox”
$250.00 – Donor
label
hopefully that makes sense
If i want to open mobile view then what i do..?
this is great – perfect for what i needed to do for my client! thank you!
Hi Collis,
Thanks for the tut, never thought it could be that easy.
I want to ask, if it’s possible to split an amount and transfer each part to a different paypal email address.
Let’s say you want to share 40% of the benefits of selling an item with another person. Is it achievable through some tweaking in this html?
Thanks again.
This is really working, but i find it vulnerable for attacks. A user can change the business email of the form, (using tools like firebug), before submitting the form.
Shashi – good point.
For html buttons paypal recommends that the button be created at paypal and saved there in your paypal account.
(Quoting from their site)
Note: If you save your buttons at PayPal, you do not need to protect them. The code that you add to your website for buttons that you save contain no information that can be fraudulently altered by malicious third parties to submit fraudulent payments. (end quote)
Found here:
https://cms.paypal.com/us/cgi-bin/?cmd=_render-content&content_ID=developer/e_howto_html_encryptedwebpayments
Thanks. Before I thought it was much difficult
I’m building a hot lunch order form on WordPress for our local PTA and want to run payments through Paypal.
I have an order form, so the total price depends on what they order (many options).
How can I get Paypal to automatically populate the price form with the individual’s order total ($)?
I’m assuming it’s do-able by passing a php variable, but don’t know enough php to write it.
I would LOVE some help as they have no budget to buy some of the packaged solutions I’ve seen.
Thanks!
Found a solution – in case anyone else is looking for this, it’s very hard to find.
Adding PayPal Checkout to Your 3rd-party Shopping Cart
https://www.paypal.com/cgi-bin/webscr?cmd=p/pdn/howto_checkout-outside
I will use this after the parents fill out the order forms — it will take their order totals and plunk them into Pp.
Thanks you explained that alot easier than paypals site did!
Really nice. I was in a hurry to get the paypal payment process done and google just landed me in this page luckily for me.. Great help..
Hi, great info from you.
How can i get the buyer’s profile (lets say, i want his/her phone number) in the paypal page?
Thank you.
I got the transaction_id from paypal but i want to save it in database.Please give me any suggestion for it.
Hi.. I just went through your paypal form tutorial. It was well written and worked almost perfectly. When I click on my submit button (http://thesimacademy.com/registration.html) it goes nowhere. I expected it to go to paypal. However, when I click on your example submit button it goes to paypal. So why is mine not working? I used thesame code from the tutorial. Any suggestion would be helpful. Thanks.
hi, i m satisfied wit this transaction…but i cant to retrieve my transaction id to my database …can any one tell solution for this…
thanks in advance
Thanks for the great tut! Exactly what I needed
Wonderful points altogether, you just received a new reader. What may you recommend about your publish that you made some days ago? Any positive?