As of today, PBase does not automatically offer an integrated shopping cart mechanism for it’s users. That feature has been in ‘development’ for a while, and we do not really know when it will be officially announced. In the meantime, several users have already integrated Paypal shopping carts on their own to enhance user experience. Examples of such galleries include http://www.pbase.com/zylen and http://www.pbase.com/arjunrc amongst many others.

Till a few days ago, implementing a shopping cart in PBase was a manual process where you had to change the shopping cart code for every image. While I was authoring the original article for the PBase Magazine, Jay sent me an email that takes away the manual process and you could simply paste the same code for all your images.

Right, now on to the process. Needless to say, you must first be logged into your PBase account before you can integrate the shopping cart.

There are two parts to the procedure. The first part involves generating the required HTML code via the Paypal wizard interface. Once this is done, you do not need to use the Paypal wizard again. Instead, all you need to do is modify the generated HTML code trivially to fit into other images.

NOTE: More experienced readers can directly skip to the section titled Using the generated HTML in PBase – you really do not need to use the wizard.

If you don’t already have one, create one at www.paypal.com – it’s free.

After logging in to Paypal, click on the Merchant Tools tab button and then on the Paypal Shopping Cart link as shown below.

NOTE: Paypal offers this shopping cart feature only for Premier and Business accounts.

Message on the site: PayPal's Shopping Cart is only available to Premier and Business accounts. To use the Shopping Cart, please upgrade your account today.

Upgrading an account is free, but you are charged for all payments received.

Paypal now presents you with a set of questions which it uses to generate the HTML code. In this example, I enter the name of the photo as IMAGE_TITLE() and the item number as IMAGE_ID(). These are the special variables that PBase will change with the real image name and ID for each image the code is applied to.

In case you want to add any other “options” you can do so, using the “Add more options” button in the previous screen. In this example in addition to selling images, I’d like to offer my customers a choice of Finish – Lustre or Matte. So I clicked on the “Add more options” button and created a new drop down list and named it Finish. This will have a value of Lustre or Matte depending on which option my customer chooses. If this is confusing, don’t worry. All it means is that when a customer places an order, the email that Paypal will send you will indicate that s/he chose a value of Lustre or Matte for the image. In addition to selecting additional options as described, you also need to select the look of the button that your customers will use to view their shopping cart.

Finally, you need to choose the email address that you would like to associate to your Paypal payments. This is typically the same email address that is associated with your Paypal payments.

Now all you need to do is click on ‘Create Button Now’ and Paypal will display the HTML code that you need to insert into your PBase galleries, both for the ‘View Cart’ and ‘Add to Cart’ buttons.

And that’s it – Paypal has now created your shopping cart code that you need to insert into your PBase galleries. My recommendation is that you only use this interface once and then keep changing values on your own manually as you iterate through the process of adding this code to all your images. Of course, nothing stops you from using this Paypal interface for all of your images each time, just that it is much slower. Let’s now discuss how to use this code.

First, let’s take a look at how things will look. Let’s assume you want a ‘view cart’ icon in your root page and each image should have an option of purchase when you view the images like so:

A view of your gallery page:

A view of your individual image page:

To add the View Cart icon to the top of your root PBase page, all you need to do is add the generated View Cart code by Paypal to the User Description area of your PBase page, when you click on Edit Description. Please ensure that you have checked the box that says “check if using HTML description”. Now just paste the View Cart code that Paypal generated. This will enable your customers to keep shopping for your pictures and adding them to their cart as well as view their current orders before paying. You can place this code in any place you want. I just prefer to place it at the top of my major galleries.

Let us first take a look at the code that was generated by Paypal, and more importantly, what to change for each image we add the same code to. For example, in my galleries, I use the following code for a picture of a splashing Flamingo, where I chose to sell a 5×7 print size for USD 9.00. The image address is : http://www.pbase.com/image/28986875

<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post"><table border="0">
<tr><td><input type="hidden" name="on0" value="finish">5 x 7  print ($9.00)</td><td><select name="os0" >
<option value="Lustre">Lustre<option value="Glossy">Glossy</select></td><td><input  type="image"  
src="https://www.paypal.com/en_US/i/btn/x-click-but22.gif" border="0"  align="center" valign="center"
 name="submit" alt="Make payments with PayPal - it's fast, free and secure!"><input type="hidden" name="add" 
value="1"><input type="hidden" name="cmd" value="_cart"><input type="hidden" name="business" 
value="your@email.com"><input type="hidden" name="item_number" value="IMAGE_ID()"><input type="hidden" 
name="item_name" value="5x7 IMAGE_TITLE()"><input type="hidden" name="amount" value="9.00"><input type="hidden" 
name="no_note" value="1"><input type="hidden" name="currency_code" value="USD"><input type="hidden" name="lc" 
value="US"></td></tr></table></form>

warning: code above has been split into multiple lines to increase readability - if you choose to copy the code from here, please remove all linebreaks after you copy it. Everything must be in one continuous line. It is better you actually generate this code from the paypal template if you don't know what you are doing

You really do not need to understand everything. All you need to know are some specific sections. In my case, I created two additional fields, where one specifies the image size and the other specifies print quality (Lustre or Glossy). Remember, all Paypal does is when you receive a payment, it sends you an email with these fields, saying a customer has bought a picture titled “5×7 The Capitol, Washington DC” with image ID of “28986875” and finishing of “Lustre” or “Glossy” (whichever was chosen by the buyer. This gives me enough information to pinpoint the exact image chosen (sometimes, title is not enough, especially if you have many images and may have repeated a title more than once)

Note that I replaced the Paypal generated item name and item number values by two special variables called IMAGE_TITLE() and IMAGE_ID(). These are special variables that PBase replaces with the Title and ID of the current image your customer is viewing. So if you paste this same code in another image, the values will be different. This is exactly what we want ! The code is completely generic, and you can just keep pasting the same code for each image. If you want to add different sizes, just repeat the above code, changing the “5×7” to something else as well as the price.

Paypal offers the buyer to pay you either by credit card or by alternate paying means that you choose, so you don’t have to worry about how the payment reaches you.

In the email you receive, Paypal also provides you with the buyer email as well as the shipping address. All you now need to do is get your image printed according to specifications and ship out. Paypal does not automatically handle printing for you – it is just an order system that tells you “You have received a payment of $xxx.xx and following are the details” .

If you are interested in online print services, I could recommend http://whcc.com or http://ezprints.com – I have used both and quite like them.

Finally, this same code can be repeated across multiple images – you need to keep changing the fields in yellow appropriately. Please remember to substitute your@email.com with your Paypal registered email id.

To add this code, just click on ‘edit image’ and paste the modified code in the description area (make sure HTML check box is enabled).

This is just an example of setting up a basic payment system. You can keep tweaking around and add more things. Once you start adding payments to every page, pretty soon, you will have it down to an easy process. Always remember to try it yourself before opening it to real customers.

Finally, please visit the HTML forum of PBase with doubts or questions. The PBase forums are very active and there are always people willing to help.

Q: Are there any more 'hidden' variables that PBase uses that we know about ?

A: Well, here is the known list:

• GALLERY_NAME() - PBase substitutes it with the real name of the gallery
• GALLERY_TIYLE() - PBase substitutes it with the descriptive name of the gallery
• IMAGE_ID() - PBase substitutes this with the image number (this is globally unique for each image in PBase)
• IMAGE_TITLE() - PBase substitutes this with the title provided for the image

Q: I tried your shopping cart code and I see wierd spaces everywhere. What gives ?

A: Remember not to add any new lines or spaces to the code Paypal generates – otherwise you may have display problems with your shopping cart (wide spaces and such)