Beyond web logs

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. 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 BeyondWebLogs.com">

<input type="hidden" name="cmd" value="_xclick">

<input type="hidden" name="no_note" value="1">

<input type="hidden" name="business" value="accounts@beyondweblogs.com">

<input type="hidden" name="currency_code" value="USD">

<input type="hidden" name="return" value="http://beyondweblogs.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 BeyondWebLogs.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.

Business
The business field is this one:

<input type="hidden" name="business" value="accounts@beyondweblogs.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.

Currency Code
The currency code value in this example form is set to USD, you could change this to your own currency. 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://beyondweblogs.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. 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!

Yep! that’s it.

paypal