This sample consists of a simple Web store built to sell items from a fictitious company called SouthWind. The store consists of a table with three columns:
• The first column shows the item name and description.
• The second column shows the item price.
• The last column contains a C1PurchaseItem button that the user can click in order to purchase the item.
To build a Web store using unbound PayPal eCommerce for ASP.NET controls, complete the following steps:
1. To set up the table, select Layout | Insert Table from the Visual Studio menu. Here's the information the sample uses to create the table:
• To edit the color, select the Cell Properties button. The Cell Properties dialog box appears. Set the background color to Lemon Chiffon and select OK.
• From the table's Properties window, set the BorderColor property to Gold.
2. Now that the table is on the page, you need to type the names of the products into the first column and their prices into the second. You can format the strings and the table using the Visual Studio menus and toolbars. You can also edit the text, by clicking the ellipsis button located next to the Style property in the Properties pane. The StyleBuilder dialog box appears.
3. On the document, just above the table, type "C1PurchaseItem" as Header 2 style and "Click the buttons below to buy Southwind products:" as Normal style.
4. Next, drag a C1PurchaseItem control into the last cell of each row of the table. By default, the control will display a bitmap with credit card images. This is one of the predefined images available at the PayPal site. You can change the image by changing the ButtonType property to use one of the other predefined images. For this sample, set the ButtonType property to the WinXP button type. Do this for each control button.
5. Set each C1PurchaseItem.BusinessLogo property to master.gif, which is located in the C:\Program Files\ComponentOne Studio.NET 2.0\C1PayPal\Samples\CS\SouthWind directory.
Note: The image must be added to your project folder in order for it to appear in the SelectImage dialog box.
Click on the ellipsis button to open the Select Image dialog box and select the master.gif image from the contents list.
6. Then, set each Business property to the e-mail address you used when you set up your PayPal account. For this sample we set the Business property to paypaltransactions@SouthWind.com.
7. Next, set the properties for each C1PurchaseItem button to the following:
C1PurchaseItem1
|
Property |
Setting |
|
Open Water Scuba Diving Course | |
|
C-BASIC | |
|
123 |
C1PurchaseItem2
|
Property |
Setting |
|
Advanced Scuba Diving Course | |
|
C-ADVANCED | |
|
213 |
C1PurchaseItem3
|
Property |
Setting |
|
Dive Master Course | |
|
C-MASTER | |
|
632 |
Note: Make sure the ItemPrice property matches the value you entered in the second column of the table, or your customers will be surprised (they may be very happy or very mad at you).
At this point, your page should look more or less like this:
If you switch to the HTML view, you'll see the code behind each C1PurchaseItem control. Here is the code behind the C1PurchaseItem1 control:
<cc1:C1PurchaseItem id="C1PurchaseItem1" runat="server" DESIGNTIMEDRAGDROP="67" ImageUrl="https://www.paypal.com/images/x-click-but23.gif" Handling="-1" ShippingAdditional="-1" Shipping="-1" BusinessLogo="http://localhost/PayPalDemos/SouthWind/master.gif" ItemPrice="123" ItemNumber="C-BASIC" ItemName="Open Water Scuba Diving Course" Business="paypaltransactions@SouthWind.com" ButtonType="WinXP"></cc1:C1PurchaseItem>
This is really all there is to it. You can run the project now and you will see a fully functional Web store. If the Business property on your buttons is set to a valid PayPal account, you can actually click the buttons and buy the items.
This is what the application looks like when viewed in the Internet Explorer:
This approach is simple and works well. The problem is that some of the information appears in multiple places (control properties and text), and it might be difficult to maintain the page. For example, if the price of a product changes you need to update the table text and the ItemPrice property on the C1PurchaseItem control.
A better approach in most practical applications would be to get all the item information from a database, and build the page that way. This is described in the next sample.
|
