Internet Articles ∞

Once you havecreated your PayPal account, you can immediately start adding customized “Buy now” or “Add to cart” buttons to your Web site (you must be logged in to PayPal to access the previous links). This will allow you to begin listing your products online and accepting payments within minutes. This is quite acceptable if you have only a few products to offer and you don’t change to your prices or your shipping/handling costs. Unfortunately, every time you want to add a product, change a price, or change the shipping/handling calculations, you will have to go through the entire process all over again to re-create your buttons. Wouldn’t it be nice if there was a way to make these updates automatic?

Fortunately, there is a way to do this. It does require a little bit of coding on your part, but you do not need to have any previous knowledge of coding to make it work. I’ll walk you through the entire process, and you can have your catalog up and running within a few hours.

The key is to use some sort of content management solution to do the work for you…when you decide to change a price or add a new product, your system can automatically generate the appropriate PayPal scripts for you, making it a snap to update your online catalog.

Before you begin, there is one very important thing you need to change in your PayPal account. When you log in to PayPal, choose the “Profile” link under “My account.” In the right-hand column, you will find a link to change your “Website Payment Preferences.” You will have to turn off the option to “Block Non-encrypted Website Payment.” When this option is turned on, PayPal will scramble the codes generated for your Buy Now buttons, making them unreadable to anyone but PayPal. However, your content management system will not be able to generate encrypted codes, so you will have to allow non-encrypted codes. As far as I know, the only way to turn your Buy Now buttons into Add to Cart buttons is to turn this feature off anyway, so there’s no getting around this requirement.

Recommended content management solution: Zoho Creator

Why Zoho Creator? Because it’s free, and it allows you to create and edit an online database. This database can serve as an online content management system for your catalog. Rather than having to remember to re-build your PayPal buttons every time you add a new product or change the pricing for an existing product, this service will do it for you. Although it will take you a little while to get up and running, spending a little time on this now will save you countless hours in the future.

Zoho Creator is a very nice Web 2.0 service that allows you to build Web-based forms and applications for use on your Web site. I mentioned this service briefly in an earlier post titled “Building interactivity into your Web site.” Once you set up an account with Zoho Creator, you can start building an online database to serve as the backbone of your product catalog. You should make sure that your application is a private application, and is not shared with the public. You will be able to create a “view” of your database later that is publicly available so people can see the products you offer, but you certainly don’t want anyone but you to be able to modify the prices or details for your products.

In my next post, I will show you some secrets to create a very dynamic online catalog, but for now, let’s just keep it simple. You can include any fields you want in your catalog, but at a minimum, your new database should contain the following fields:

• Product name (Should be a short name that does not contain any HTML tags)
• Product description and/or image (Must be set to “Multi line”)
• Product price
• Shipping base price (the shipping cost for 1 item)
• Shipping additional price (the shipping cost for each additional item purchased within the same customer order)
• Handling fee (per order, not per item)
• PayPal Script field (Must be set to “Multi line”)

Once you have set up your fields, test out your application by adding a sample product or two. You will want to create a “view” of your catalog that displays the product name, description, and price, as well as the PayPal Script field. It is up to you whether you want to make your shipping/handling costs visible to the public at this point. You may want to hide these costs (they will automatically be calculated when the user adds an item to his/her cart, or you can create a separate field that will add the shipping base price and handling fee to display to your user) to simplify your online catalog. Verify that this view of the catalog is “shared” to the general public so they will be able to see it and actually buy your products. While you’re at it, double-check to be sure your actual catalog application is not shared - you don’t want people adding products to your catalog without your knowledge!

Here is the basic script you need to generate to create a PayPal Add to Cart button for each product in your database:

<form method=’post’ action=’https://www.paypal.com/cgi-bin/webscr’ target=’_blank’>

<input type=’hidden’ name=’cmd’ value=’_cart’>

<input type=’hidden’ name=’add’ value=’1′>

<input type=’hidden’ name=’business’ value=’payments@yoursite.com’>

<input type=’hidden’ name=’item_name’ value=’Baseball Hat’>

<input type=’hidden’ name=’item_number’ value=‘123′> //This line is optional

<input type=’hidden’ name=’amount’ value=’5.95′>

<input type=’hidden’ name=’shipping’ value=’1.00′> //This is your “base” shipping charge

<input type=’hidden’ name=’shipping2′ value=’0.50′> //This is your per-item “additional” shipping charge

<input type=’hidden’ name=’handling’ value=’2.00′> //This is your per-order handling charge

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

<input type=’hidden’ name=’return’ value=’http://www.yoursite.com/thankyou.htm‘> //This is the URL your customer will be sent to when the order is complete

<input type=’hidden’ name=’undefined_quantity’ value=’1′>

<input type=’image’ src=’http://images.paypal.com/en_US/i/btn/x-click-but22.gif’ border=’0′ name=’submit’ width=’87′ height=’23′ alt=’Make payments with PayPal - it is fast, free and secure!’>

</form>

The values listed in “red” above represent values that you will need to pull from your Zoho Creator catalog. I have included some comments in “green” above to help you identify the fields. These comments should be removed from the final code.

Build your PayPal Script in Zoho

This is where things get a little tricky, but bear with it and you’ll find it is well worth your efforts. You will have to create a script within Zoho Creator to automatically apply the code above to each of your products, based on the current information in the database.

Important note: Zoho Creator, by default, will remove any HTML codes (such as the code shown above) from your catalog. You can change this setting by clicking on the “XSS Settings” on the upper-right corner of your catalog (only available when you are editing the catalog, not viewing or accessing it). Ensure your XSS settings are set to Low to allow HTML tags, or your efforts will all go to waste.

Now you need to configure your Zoho account to automatically build your “Add to cart” button:

1. Go to your Zoho Creator catalog (in edit mode) and click on the “Script” link. You should see a basic scripting page that looks something like this:

   

   .

2. Click on the “On Success” link underneath “On Edit” to start writing your code. Be sure you are using the link in the “On Edit” section, rather than the “On Add” section for now. Drag a “Set variable” module into your code. When you mouse over the code you’ve added, you will see an “edit” button that will allow you to modify this code snippet. Click this button to begin editing your field.

   .

3. Select the database field that will contain the newly-generated script for your PayPal button. In the text field provided, begin entering your code line-by-line, inserting the appropriate variables where required, like this:

   .

   “<form method=’post’ action=’https://www.paypal.com/cgi-bin/webscr’><input type=’hidden’ name=’cmd’ value=’_cart’><input type=’hidden’ name=’add’ value=’1′><input type=’hidden’ name=’business’ value=‘payments@yoursite.com’>…{Continue adding the script as needed}

   .

   Be sure to start your entry with a double-quotation-mark and do not use double-quotes or line breaks within the code shown above - use only single quotes for field values. When you reach a place where you need to add your own variable (from your database), you will need to stop your entry with a double-quote, then insert a “+” sign, the appropriate field using the box above the text field to generate the appropriate values, and another “+” sign. Start the next section of the code with a double-quotation mark, like the example (see the “blue” text) below (Assumes the field containing the product name is named “itemName”):

   .

   “<form method=’post’ action=’https://www.paypal.com/cgi-bin/webscr’><input type=’hidden’ name=’cmd’ value=’_cart’><input type=’hidden’ name=’add’ value=’1′><input type=’hidden’ name=’business’ value=’payments@yoursite.com’><input type=’hidden’ name=’item_name’ value=’ ” + input.itemName + ” ‘>”

   .

   You will probably have to split this process into multiple steps, as you have a 255-character limit to the text you enter into any field. You can easily get around this by inputting the code in fragments. Let’s say the code listed just above was the first section you want to add. Drag another “Set variable” module into your code just below the first, select the appropriate field to modify (the same as the previous “set variable” block), and just include the existing value with the next segment, as follows (Assumes the database field containing the PayPal script is named “PayPal” and the other fields are named ItemNumber, Price, Shipping, Shipping2, and Handling):

   .

   input.PayPal + “<input type=’hidden’ name=’item_number’ value=’” + input.ItemNumber + “‘><input type=’hidden’ name=’amount’ value=’” + input.Price + “‘><input type=’hidden’ name=’shipping’ value=’” + input.Shipping + “‘><input type=’hidden’ name=’shipping2′ value=’” + input.Shipping2 + “‘><input type=’hidden’ name=’handling’ value=’” + input.Handling + “‘>”

   .

   Continue in this fashion until you have entered the entire script listed above, replacing all of the fixed values with the appropriate (input.{Name}) fields from your database. Be sure to save your script!

   .

4. Check your code by accessing the Zoho application and editing one of the sample entries you made. If everything is working correctly, you should see an “Add to cart” button in your catalog. Click on the button to ensure that the correct information is being passed on to PayPal to allow people to purchase your product. Click the button a few more times (or change the quantity in your cart) to verify that the “Shipping2″ (additional per-item shipping) is being calculated correctly.

   .

5. If everything is working correctly, switch to the “free-flowing script” view (upper right-hand corner of the script display) and copy the Zoho script you created. Click on the “On success” subsection of the code under the “On add” heading and paste the code into the script area (so that the code will be properly generated when you add new products, not only when you modify your existing products). Save your script.

   .

6. You are now ready to add your “real” products to your online catalog. Zoho Creator will also provide you with the codes necessary to embed your publicly-accessible catalog view right inside your Web site.

   .

Is it worth all the effort?

Only you can decide whether all this effort is necessary for your own e-commerce needs. However, before you decide that it’s not worth your time to write these codes, you might want to take a look at this sample catalog I have created. You can add your own products to this example and view the catalog to see how quickly and easily your PayPal button was generated. To prevent people from corrupting other users’ examples, I have disabled editing any of the data in the catalog, but in your own catalog it would be just as quick and easy to update a price or shipping/handling information and ensure that the PayPal script was updated accordingly without having to re-write the code yourself. Using Zoho Creator and PayPal together will give you a fully-functional e-commerce solution for your Web site absolutely free of charge. That’s probably worth a little bit of your time, if e-commerce is your goal!

That’s all for today. In my next post, I’ll show you a few simple ways you can apply some of the same Zoho scripting capabilities to enhance your online catalog even further. If you’ve been following along with this blog, you’ve learned how to create your own Web site, sign up for a PayPal account, and create an online e-commerce solution. And you’ve done it all without spending a penny! With a few more simple tricks, no one will be able to tell you aren’t paying a penny for your new high-tech Web site.

this article is copied from Lockworld Herald