NETTUTS - Web development tutorials and links - Creating a PayPal Payment Form

Creating a PayPal Payment Form

In HTML / CSS Techniques by Collis Ta'eed

Although it can have some issues, PayPal does provide a very simple way to take payments on a website. And with a little tweaking you can easily turn a PayPal "Buy Now" button into a form where the user specifies how much they'd like to pay and what they are paying for.

How 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

The first thing we need is a page to return to after the transaction. In my example I'm creating a donation form for NETTUTS, so I created this Payment Confirmation page.

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.

This would mean that for example instead of specifying the amount value to be 9.00, we can allow the user to type in the value they wish to pay. Similarly the item_name can also be a user input. Here's a run down of the fields you'll be interested in changing:

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>

If you enjoyed this post, your vote is always highly appreciated!! Delicious StumbleUpon Float Reddit Mixx

Comments

Add a Comment

Note: 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!

Trackbacks

Leave a Trackback