Creating a paypal payment form

GFX9.COM share Creating a paypal payment form, you can download now.

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 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

Here's the code that PayPal gives me. As you can see the button is in fact a 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 [@] (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

    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 element with a regular element, like this:

    Step 6

    Make a Donation to NETTUTS
    Fill out the form and send us a few dollars for your favourite tutorial:

    Donation / Contribution?

    Donation Contribution

    Which tutorial are you donating for?

    The PayPal Form Tutorial The Amazon S3 Tutorial Some Other Tutorial

    How much do you want to donate?

    So there you have it. In the somewhat silly example above I've used two Donation / Contribution?
    Which tutorial are you donating for?
    How much do you want to donate?

Similar content