How do I modify my PayPal button so it works for other products?

Submitted by keptin on Wed, 02/25/2009 - 9:04pm.

To answer this question let us consider the following situation. We want to have two products that each have a PayPal "buy now" button. The two products are "Widget" for $5.00 and "Gadget" for $6.00. We want to create an "unsuccessful page" which will be the page the person will be taken too if they "cancel" the sale and we want to have two separate "success" pages. A success page will be the page a person is taking too after successfully completing the sale. Our pages are as follows:

Unsuccessful: http://www.onlinelearningmodules.com/node/469
Widget: http://www.onlinelearningmodules.com/node/470
Gadget: http://www.onlinelearningmodules.com/node/471

Generating the Code

First of all you need to create the HTML for a PayPal button using the tools in PayPal. Use the following steps to get to the interface for creating a button.

Products and Services
Website Payments Standard
Select the type of Payment Button you want (Buy Now, Add to Cart, or Subscribe)
Click "Create Your Button Now"

Then use the following steps:

In Step 1, you are going to define the Item Name, Item Number, and Price as shown below.

Step 1

Click on Step 2 and then locate where it is listed "Save button at PayPal", you are going to uncheck this option.

Make sure this is unchecked.

Click on Step 3, towards the bottom of the screen you will find where you can define both the checkout cancellation page (unsuccessful payment) or the successful checkout page.

Click the Create Button button.

The next page will give you HTML for the button. However, the HTML is encrypted and is not human readable. PayPal does this so that a hacker can't change your button. However, there are cases when you will want to have it so that you can manipulate the HTML. In the upper left hand corner of where the HTML is displayed is an option "Remove code protection" click it.

After you do this you will have HTML that is "human readable". Click the Select Code button and then copy the code to your text editor.

Button Code

Below is the final HTML code that PayPal produces, this particular HTML code will allow the person to buy a "Gadget" for $5.00

What will Need to Change

Below, in red, are the lines of the HTML code that will need to be changed, the particular piece of code that will need to be changed has been bolded.

<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_xclick">
<input type="hidden" name="business" value="SGYKAPX4NTSM4">
<input type="hidden" name="lc" value="US">
The following line of HTML will be where you the Item Name is defined.
<input type="hidden" name="item_name" value="Widget">

The following line of HTML will be where you the Item Number is defined, the Item Number likely refers to an inventory number.
<input type="hidden" name="item_number" value="W122">

The following line of HTML will be where you the Item Price is defined.
<input type="hidden" name="amount" value="5.00">

<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="cn" value="Add special instructions to the seller">
<input type="hidden" name="no_shipping" value="2">
<input type="hidden" name="rm" value="1">
The following line of HTML will define what page should be loaded after the customer finishes the payment process.
<input type="hidden" name="return" value="http://www.onlinelearningmodules.com/node/470">

The following line of HTML defines what page should be loaded if the customer clicks the cancel button.
<input type="hidden" name="cancel_return" value="http://www.onlinelearningmodules.com/node/469">

<input type="hidden" name="bn" value="PP-BuyNowBF:btn_buynowCC_LG.gif:NonHosted">
<input type="image" src="https://www.paypal.com/en_US/i/btn/btn_buynowCC_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_US/i/scr/pixel.gif" width="1" height="1">
</form>

What to Change it Too

To update this code so that it will work for "Gadgets" you would do the following (assume the Item ID is G345). The code that needs to be deleted has a line through it and next to that is the new code that needs to be inserted.

So you End Up With

Below is exactly what the new HTML should look like so that the button will now work for buying a "Gadget".

Navigation