PHP and MySql with PayPal

by: Neill Tyler

Dynamic PayPal Tutorial

This tutorial is meant to show how GoLive users can integrate their PHP/MySql dynamic data with PayPal to create a simple online store with some advanced pricing features.

This tutorial assumes that you are already familiar with using dynamic content in GoLive and aren't too terrified of working with source code.

You will also need a PayPal account.

Ok, lets get started.

Rather than reinvent the wheel we'll start out with an existing database and table.

Here is the table design:

CREATE TABLE `items` (
`id` INT( 1 ) NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`item` VARCHAR( 50 ) ,
`desc` VARCHAR( 255 ) ,
`imageurl` VARCHAR( 50 ) ,
`imagedesc` VARCHAR( 255 ) ,
`price` VARCHAR( 15 ) ,
FULLTEXT (
`item` ,
`desc` ,
`imageurl` ,
`imagedesc` ,
`price`
)
);

I've already defined my data source within my site settings and added a new page to my site.

Before we can add our content source object we need to make the page dynamic. Since this is a PHP tutorial we're gonna go with PHP.

Next we need to add a content source. From the dynamic content palette select the content source object and drag it to the page.

The content source object will show up in the heading. Double-click to activate it in the inspector.

Fill in the appropriate information for your content source:

  • description
  • type...in this case MySQL Database Query
  • database name
  • table name
  • sort order if desired

When you setup a content source its always a good idea to test your source. When you click test source you should see the first record matching the criteria in your content source settings.

Ok at this point we have a dynamic page (PHP) and a content source for the page. I've added a banner and some text to the page.

Next we need to go to the PayPal site and create an add to shopping cart item. Do this by signing onto PayPal with the account you should have already setup. From your "My Account" page select the "Sell" tab. From the sell page you want to select PayPal Shopping Cart.

We are going to create a single add to shopping cart item. This item is going to be the template for our page. I've entered Item for the name and a price of 200.00. I'm going to use the default Add to Cart button.

Click Create Button Now (not shown). This generates the PayPal code that we are going to paste into our site. First we are going to select the add to cart text generated by PayPal and copy it.

After selecting and copying the text we want to go to our dynamic page and click in the layout view where we want to paste the code. Before we paste we need to change to the source view. Make sure that the insertion point is where you want it, then past the copied PayPal code.

Switch back to layout view and take a look. What you should see is a form box, several hidden field objects and one image box placeholder. The placeholder will pull an image from the PayPal site when you "golive".

Now we're ready to add some dynamic content and desriptive text.

I've entered a label, Item and the place holder for the dynamic item text. To make the placeholder dynamic, highlight it. With it hilighted, select the Dynamic Bindings palette from the Window menu.

From the Dynamic Bindings palette select your content source and field. Appropriately I've set the property to item.

Next I'm going to add a dynamic image field just below the item and set its property to my image field and I'm going to set the alt text to match the description field.

Make sure when using the dynamic image field to set the image width and height to the image settings to avoid distorting your pics.

Last but not least I want to add some dynamic text for the price just as you did for the item text.

Here is the page in layout view so far.

If you'd like you can upload your page and look at it. Its dynamic but we still need to make a few changes to make it work with PayPal.

Since PayPal creates hidden fields to pass the description and price what we need to do now is go to our code view and copy the php code that GoLive generates for our item and our price and paste them into the item and price hidden fields for PayPal.

Lets do the item text first. In layout view highlight your dymamic text bound to the item field. With that text highlight click over to the source view. Depending on what field name you used you should see something like this:

In order to pass our dynamic description to the PayPal shopping cart we need to copy this PHP code and paste it as the value of our PayPal item_name hidden field. With the PHP code copied, click back to Layout view, then click the hidden field for item_name. Clicking the hidden field should make the field active in the inspector and now all we need to do is paste the code into the value field like this.

Easy enough. Now repeat the sames steps for the item text but use the dynamic price field and the PayPal hidden field labeled amount.

This is usually a good place to stop and test so save your work and upload your page and try it out. It will look the same but you should be able to try your add to cart button now.

I've decided that I want to add my description to the PayPal description. I clicked on my dynamic image since its alt text is set to our dynamic description field. I highlighted the PHP code for the description and copied it and I'm going to paste it after the item code that is already in the item_name hidden field. What this does is appends the text to the item. You may need to add a space in between the two PHP code strings to make the description look right.

Last but not least we need some navigation buttons since we have more than one item in the store. Just below the form field drag the dynamic objects for previous and next records to the page.

Thats pretty much it. Take a look at a few items in the shopping cart.

Notice the first item that was added before we appended the description to the PayPal item_name hidden field.

Just a small disclaimer for myself. Anyone can view the source created by your page, save it locally and edit in their own price. This would be true with just a single item created from PayPal's own code. While this is somewhat of a drawback its also what makes this process so easy. With that being said just be on the lookout when your oders come in and make sure your prices have not been modified.



Article published Friday, 16th November 2007
© 2008 NetVisits, Inc. All rights reserved.