Beginning ASP.NET 2.0 With CSharp (2006) [eng]

Chapter 13

The next part of your odyssey is to place an “add to cart” button, back on the previous Product Item page. In the following Try It Out, this will add the corresponding item to your cart every time a button is clicked. If you click it twice on two separate occasions, it will update the quantity for you.

1.Open WroxShopItem.aspx in Visual Web Developer, go to Design View, and add an ImageButton, above the Return to Shop link. Via the Properties window, change the button name to btnAddToCart, and change the ImageUrl property to “~/Images/AddToCart.gif”, as shown in Figure 13-27.

Figure 13-27

2.Double-click the button and add the following code:

protected void btnAddToCart_Click(object sender, ImageClickEventArgs e)

{

498

E-Commerce

double Price = double.Parse(((Label)DataList1.Controls[0].FindControl(“PriceLabel”)).Text);

string ProductName = ((Label)DataList1.Controls[0].FindControl(“NameLabel”)).Text;

string PictureURL = ((Label)DataList1.Controls[0].FindControl(“PictureUrlLabel”)).Text;

int ProductID = int.Parse(Request.QueryString[“ProductID”]);

if (Profile.Cart == null) {

Profile.Cart = new Wrox.Commerce.ShoppingCart();

}

Profile.Cart.Insert(ProductID, Price, 1, ProductName, PictureURL); Server.Transfer(“WroxShop.aspx”);

}

3.Go back to WroxShop.aspx in Design View. Add a hyperlink button from the General section of the Toolbox. Right-click the link, select Properties, and change the properties listed in the following table.

It will now look like Figure 13-28.

Figure 13-28

4.Give the shopping cart a test drive. Go to WroxShop.aspx and select the scarf, as shown in Figure 13-29.

499

Chapter 13

Figure 13-29

5.Click Add to Cart. This takes you back to the main shopping screen. Now click View Shopping Cart, and as you can see in Figure 13-30, your item has been added to the cart.

Figure 13-30

6.Click Edit to change the Quantity box into a text box that you can edit (see Figure 13-31).

500

E-Commerce

Figure 13-31

7.Type 2 and click Update. The totals are updated, as shown in Figure 13-32.

Figure 13-32

8.Click Delete. The item is removed from your cart.

How It Works

By adding two bits to the application in this Try It Out, you enabled the whole functionality of the shopping cart. You started by adding a button to the Product Item page and creating some code that ran when the button was clicked. The code handles the business of adding an item to your shopping cart. You start by getting the Price, ProductName, PictureUrl and ProductID:

double Price = double.Parse(((Label)DataList1.Controls[0].FindControl(“PriceLabel”)).Text);

string ProductName = ((Label)DataList1.Controls[0].FindControl(“NameLabel”)).Text;

string PictureURL = ((Label)DataList1.Controls[0].FindControl(“PictureUrlLabel”)).Text;

int ProductID = int.Parse(Request.QueryString[“ProductID”]);

501

Chapter 13

This information has already been stored in the page. You use the FindControl method of a control to locate a control. The DataList control contains an item template, so you have to move into the controls collection of the DataList control to get at the Label controls. You can cast the contents of the control to text by prefixing them with the control type in brackets. So each of the three lines works like this. You declare a variable in which to store your item. You search the DataList control for your Label control using FindControl, and supply it with the name of the control you want to find. You convert the control from a “generic” control into a specific Label control. (Note that this only works if the control you are casting to actually is a Label control.) So for the Price, you search for the PriceLabel control’s contents and you retrieve the text property of the label. There is actually another level of conversion required here. You want the price as a double data type, so you convert the text item you receive into a double and store it in the double data type. The PictureUrlLabel is the one you didn’t delete in the second Try It Out of this chapter because we said you’d need it later. This is where you need it. Having stored the Price, ProductName, and PictureURL, you still need the ProductID. This can be located in the query string passed to the page:

int ProductID = int.Parse(Request.QueryString[“ProductID”]);

You check to see if a cart exists for this profile:

if (Profile.Cart == null) {

Profile.Cart = new Wrox.Commerce.ShoppingCart();

}

Profile.Cart.Insert(ProductID, Price, 1, ProductName, PictureURL); Server.Transfer(“WroxShop.aspx”);

}

If a cart doesn’t exist, you create a new one. Then you need to insert a new item into your shopping cart along with the ProductID, Price, ProductName, PictureURL, and the quantity of 1:

Profile.Cart.Insert(ProductID, Price, 1, ProductName, PictureURL);

Last, you simply transfer the user back to the initial Product Catalog page:

Server.Transfer(“WroxShop.aspx”);

This stage can continue cyclically until the user either leaves the application or needs to check out.

Checkout

Checking out is perhaps the lengthiest stage of the whole process. The checkout process involves a number of considerations, not just the totalling up of the items and how much they cost, but also things like stock availability, getting the user’s address and delivery details, obtaining and verifying payment for the items, and some sort of rounding up of the whole process.

Checkout is, in itself, a mini set of stages. If you’re serious about implementing your own e-commerce process, it’s worth checking some of the major e-commerce vendors (such as Amazon), seeing what they do in their checkout process, and asking is it quick and intuitive to use? A lot of time and effort has gone into producing checkout processes that can be completed in the minimum number of steps, with the minimum number of clicks.

502

E-Commerce

In your design, consider checkout as comprising the following:

Order processing

Login

Enter or get the address and delivery details

Get the credit card details

Finish

This is one part of the process that is impossible to model completely, without actually building a real, live, working e-commerce site. However, some considerations about each step are worth talking about.

Order Processing

The first step of the checkout process is to check whether or not the item is in stock. With a large retailer such as Amazon, not all of the items they carry will be sourced by them. They have a range of suppliers, and they often need to check with them first to see if a particular item is in stock. Hence you will find that some products will ship from Amazon within 24 hours, whereas others may take between four and six weeks. In reality there is often another pipeline (similar to Figure 13-33) going on here that has to be negotiated.

Figure 13-33

With Wrox United, you’re not going to delve into this level of detail. You are going to assume that all goods are stored in the Wrox United warehouse, and after you’ve checked the stock level and they are in stock, they are good to be released for shipping.

Login

We’ve already mentioned that the Wrox United application uses one of ASP.NET 2.0’s best features to keep track of the shopping cart, in that you don’t have to physically log in to keep track of your shopping cart. However, when you come to checkout, you must log in, because you need to supply your address details and credit card information. You need to supply a login box and password to be able to authenticate your user’s details. You will use the standard ASP.NET 2.0 login control to do this.

Address/Delivery Details

The address details are fairly easy to sort as well. One of two scenarios could occur. Either you have already captured the user’s details and you can access the details that are stored with the profile, or if you don’t have them on record, you must request that the user enter them into a series of text boxes. You can either use the Profile that was created in Chapter 11 and that stores these details, or you can store the details supplied in the text boxes by the user.

503

Chapter 13

Credit Card Handling

Here you’re going to cop out and not handle credit cards at all — you’ll just add a small dummy section. This gives the impression that it isn’t a major part of the e-commerce pipeline, but don’t be fooled for a moment — it is of course critical to the success of the pipeline. For obvious reasons, you can’t set up an actual credit card–handling facility. For starters, you don’t have a physical product to sell. Fetching as the Wrox United kits undoubtedly would be, they only exist in cyberspace. So here we can’t provide any code, but instead can quickly consider what you need to take into account when setting up a credit card–handling facility on your web site.

Credit card retailers first starting out need a merchant ID, usually supplied via their bank, which gives some sort of guarantee that the business is genuine. Most Internet businesses require the same thing. In the U.S., there are two ways to do this. The first is to provide all the processing and handling of credit cards yourself, and the second is to get someone else to do it on your behalf.

In-House Credit Card Transactions

Setting up credit card processing in-house is the ideal way to keep an eye on all your transactions, but it can be quite a slow and unwieldy process. You require an e-commerce ID (also known as a merchant number or as an Internet Merchant Account [IMA] in the UK) from a third party who can actually process the credit card details for you, meaning the third party can decide whether or not a particular credit card number is genuine. You will have to apply for an account with the third party and provide a lot of details that help establish your authenticity.

Obtaining an E-Commerce ID, Merchant Number, or IMA

In the U.S., you can go to one of the following web sites:

Verisign/CyberCash: www.icverify.com

First Data/Card Service: www.cardservice.com

In the UK, you can go to one of these web sites:

WorldPay: www.worldpay.co.uk

DataCash: www.datacash.com

For worldwide transaction processing, you can try PayPal (www.paypal.com), which accepts credit cards once you have set up a business account with them.

Payment Gateways

After you have your e-commerce ID, merchant number, or IMA, you still need another link in the chain, a way of communicating from a payment gateway to a bank. You should be able to use the same company you obtained an e-commerce ID from to do this. You supply the e-commerce ID to the bank, and they use it to track the money’s movements to the gateway service and back again. These services usually come at a hefty price. If all this sounds too complex, you might want to consider the alternative.

Bureau Services

Because this is a beginner’s book, it’s probably safe to assume that the first site you start developing won’t be a major store. More likely you’ll be working on a small store (maybe your own) that perhaps

504

E-Commerce

won’t really want to cover the risks and costs associated with having a system handling credit cards itself. In the early days of e-commerce on the web, there were a series of high-profile hacks. One notorious one was where all customers of a high-profile music store had their credit card details stolen when the database containing them was compromised. Rather than having to worry about all the risks from encrypting card details to storing them in a way to ensure their complete safety, it’s easier to get someone else to do this for you. These are termed bureau services. When you get to the part of a site where you check out, instead of handling the details, you link to the bureau service’s site, and they handle the whole process for you from then on.

Until relatively recently, bureau services were expensive propositions that required quite a large financial commitment on the part of the seller. Several years ago, I costed a small record label’s ability to do this, and the cheapest I could find to provide an online store would have meant they would have to have sold several hundred CDs a month to cover the gateway fees alone. The rise of eBay has led to a massive rise in demand of people who want to handle their own sales instantly, so rather than having to wait for checks (which carry risk of both fraud and bouncing if the funds aren’t present), or doing money transfers via banks or a third party such as Western Union, they want to be able to handle credit card transactions. In addition to that, they might only ever want to handle as little as 10 or 20 sales.

Two popular solutions supply this service, and can actually supply common components such as a shopping cart for you:

PayPal: www.paypal.com

BTClick&Buy: www.btclickandbuy.com

Other sites exist too. There are digital credit card services that specialize in micropayments when paying for small items such as single mp3s. It all depends on what you want to sell and how much you want to sell it for. If these two sites don’t provide a solution that suits you, then look around for something more suited to your needs. If you want further details about how to handle credit card transactions, we suggest you read the details given on the sites mentioned in these sections.

Summarizing the Transaction

Typically, after you’ve completed your transaction, it would be good to receive a notification or receipt of what you’ve ordered. This is actually a relatively simple step of the process, but to e-mail somebody requires a working SMTP server, so for that reason alone, you aren’t going to implement this step.

How You Intend to Checkout

Once again, you are governed by keeping things simple. What is the minimum you can boil down your checkout process to?

The five-stage process will be as follows:

Login

Delivery address

Payment

Confirmation of the order

Finish

505

Chapter 13

You will also need a breadcrumb to you to help you keep an eye on where you are in the whole checkout process. As mentioned at the beginning of the chapter, one priority is being able to abort the transaction at any point prior to confirming the purchase.

What you’re not going to do is the stock handling (reducing items and keep track of stock levels) or sending a confirmation-of-order e-mail. The chapter is already big enough as it is and these things are arguably stretched over different disciplines to e-commerce. What you are going to do in the next Try It Out is create the final stages of the e-commerce pipeline.

1.In Solution Explorer in Visual Web Developer, right-click the C:\...\Chapter13 heading at the top and select Add New Item. Add a Web Form called Checkout.aspx and check the Place Code in Separate File box to ensure a separate code-behind file is created.

2.In Design View, from the Toolbox grab a Wizard control and drop it onto the page, as shown in Figure 13-34.

Figure 13-34

3.From the smart tag dialog box, select the Add/Remove wizard steps option.

506

E-Commerce

4.In the dialog box that appears, you are going to add three extra steps. This is so you have five steps: one for login, one for address, one for credit card details, one to confirm the order, and one to finish the transaction. Start by clicking Add (see Figure 13-35) and entering Step 3 next to Title. Then clicking Add again and enter Step 4. Click Add one more time and enter Step 5.

Figure 13-35

5.Go back and change the Title property in each so that it reads as shown in Figure 13-36.

Figure 13-36

6.Click OK.

7.From the Login section of the Toolbox, drag a Login box into the <asp:Wizard> control, as shown in Figure 13-37.

507