Adding basic E- commerce to your Website Tonight account.

Cash Register tonight?

In this two part article and screen cast, I'll be suggesting ways to add a basic payment / E Commerce feature to your site by adding payment buttons in your WST project. In part two we'll look at more specific suggestions to make the whole experience more fluid for your visitors.

Is this right for you?

I see this as being useful for people that have limited number of items to sell, or groups that want to collect contributions from their membership or the general public. There's no reason you couldn't create a thousand item stores from these methods, but the day to day upkeep would require more time than setting up a dedicated shopping cart. ( Our shopping cart starts at $9.99 a month)

For this example, I'll be using PayPal, but the basics apply to Google Checkout and Revolution Money exchange equally and it's up to you to work out which service best fits you needs.

All of these services have a method that allows you to generate code for a button that you place within your WST project. This button then launches the service’s site, the transaction takes place, and the user is returned (if you've set it up to do so), to a location of your choosing.

You'll need an account with one, or more, of these services but first let's get started with the buttons

Obtaining the Button

Log into your PayPal account and click on “Merchant Services”. As you can see, there's quite a choice of button types, and while they all can be added to WST, the choices they offer is something you should take your time to familiarize yourself with. I'm going to go with a basic “buy now” button, which is a bit of a misnomer since there's really a lot of versatility within the button. I'll address that specifically in part 2. While nearly all of these options are self-explanatory, it's worth bringing up the choice between an encrypted and unencrypted button since this has implications on the type of button you can offer.

With the encrypted button, the code you paste into your WST project can't be edited. If you want to change the name, price, or shipping, you will have to go to PayPal to create a new button every time.

Unencrypted buttons are normal human readable code that you can change the values on.

With unencrypted, you have more options available such as the ability to create drop down selections for size and color, amongst other things. If you are comfortable with HTML, you can even add your own custom form options.

Why could this be an issue?

Well there's nothing stopping other people grabbing the button code, editing the values and then submitting an order with altered values. Obviously if you approve each item prior to shipping, it’s more annoying than anything else. But, if you need options then this may be acceptable to you. Otherwise my suggestion would be to create an encrypted button for each option. What you choose is really up to your business model. I recommend you research the limitations of either method.

Placing the button

We've done the research and have the code for our button. The easy part is placing it into WST. There are two main ways to do this. The basic one is to enter into the content block, click on HTML, and then paste in the code, click html, and then OK. You are done and you can admire your handiwork on the screen.

The alternate method is to add the button as a script object. To do this, click on the content block. Then from the sidebar navigation click Tables and Objects > Insert Object, then Script. Paste in the code, save then save again. You will need to then preview the page if you want to see what the button looks like.

Why two methods?

I prefer using the script method as it doesn't slow down the page designer by showing the buttons / code each time. It's also neater when you have many buttons within a content block. If you add an unencrypted button with options, the edit mode will show you all of the fields that make up the button. If you have many of these, you can see how hard it would be to keep track of multiple buttons within the same content block.

NOTE: Don't try to edit the button's options or values using the WST form tool (located in the forms section). The form wasn't created by this tool and none of the changes you make will take effect.

That's the basics of how to get the button into your WST project. In part two, I’ll be showing you how to create a complete purchase path.

GoDaddy.com is not liable for the consequences of any action taken on the basis of information provided.

PayPal is a registered trademark of PayPal, Inc. All Rights Reserved.