Advertisement
HTML & CSS

Creating a PayPal Payment Form

by

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://net.tutsplus.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:

Donation / Contribution?

Which tutorial are you donating for?

How much do you want to donate?
$

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://net.tutsplus.com/payment-complete/">

	<br /><br />
    <input type="submit" value="Pay with PayPal!">

</form>
Related Posts
  • Code
    Creative Coding
    Using the Included Password Strength Meter Script in WordPressPassword meter 400
    WordPress uses a pretty nifty password strength script that is used to display whether the passwords you entered in the WordPress admin are: not the same, very weak, weak, medium or strong. Currently this script is only used when creating creating new users and when changing your password in your admin. In this article, I will be teaching you on how to use the WordPress' password strength meter in your own forms.Read More…
  • Web Design
    HTML/CSS
    Creating Friendlier, “Conversational” Web FormsForm retina
    Web forms are constantly a hot topic when it comes to web design and user interaction. The reasons for this are vast, but one of the more obvious reasons is that forms are the most basic way for a user to input information into your application. In this article, we'll discuss a few techniques that allow your forms to respond to the user's input, while helping to obscure unnecessarily confusing or overwhelming elements.Read More…
  • Code
    PHP
    Validation and Exception Handling: From the UI to the BackendProcedural to oop php retina preview
    Sooner or later in your programming career you will be faced with the dilemma of validation and exception handling. This was the case with me and my team also. A couple or so years ago we reached a point when we had to take architectural actions to accommodate all the exceptional cases our quite large software project needed to handle. Below is a list of practices we came to value and apply when it comes to validation and exception handling.Read More…
  • Code
    JavaScript & AJAX
    Adding Bitcoin Payment Processing to Your WebsiteBitcoin retina preview
    Bitcoin has definitely started to become more mainstream, and with its global reach and minimal fees, it is a payment method worth considering. In this article, we will take a look at what Bitcoin is, as well as how to start accepting them in your applications.Read More…
  • Code
    ASP.NET
    Understanding Cross-Site Request Forgery in .NETCsrf dotnet retina preview
    You can only produce secure web applications by taking security into account, from the start. This requires thinking of the potential ways someone could attack your site as you create each page, form, and action. It also requires understanding the most common types of security problems and how to address them.Read More…
  • Code
    PHP
    How to Accept Payments With StripeCode
    Processing credit cards is unfortunately far more difficult than we might hope, as developers. Given that it’s such a common task, is it really necessary that we jump through countless hoops (surrounded by fire, of course) for the sole purpose of processing a payment? Merchants? Gateways? SSL? Security? Very quickly, a seemingly simple operation can become an overwhelmingly confusing and, more importantly, dangerous task. Any time that you find yourself handling a user’s sensitive data, you better be on your toes. Read More…