In Part 1 of this article, Pay Dirt: Using PayPal's Web Controls, I introduced the idea of getting paid for products or services using PayPal's pluggable controls in your own Web pages. As part of the demonstration, I added a "Make a Donation" button to my Web site. The "Make a Donation" button made it possible for readers to make an optional donation when they downloaded some of the tens of thousands of lines of sample code on my site. Since then, a few readers were generous enough to make donations.

Using PayPal with these copy and paste buttons may be just the ticket for you: sell your poems, create an instant online garage sale, or actually sell a product or service. However, for high-traffic commercial Web sites, you may want more control than the basic copy-and-paste that HTML has to offer.

In this article, I show you how to use the PayPal ASP.NET Web Controls and build your own storefront in ASP.NET. There are several controls in the downloadable toolkit. We focus on a couple of core controls needed for offering products, managing a cart, and getting paid.

Your Pair 'o Pennies

To experiment with the examples in this article you first need to perform a couple of preparatory steps. You need a PayPal account and a couple of test accounts in the PayPal sandbox; you'll find those instructions in Pay Dirt: Using PayPal's Web Controls. There is no cost involved in creating a PayPal account or sandbox accounts.

Note: PayPal is a product offering of EBay. The links referenced in this article were provided to me by David Nielsen at PayPal and should be the latest versions of the portal and e-commerce starter kit. Here are the text links in case you have difficulty following the hyperlinks in the article text. The e-commerce starter kit can be found at http://www.paypal.com/aspdotnet and the PayPal ASP.NET web controls can be found at http://www.persistent.com/paypal/aspdotnet/PayPal%20ASP.NET%20Web%20Controls%20(1.0.5).msi.

After you create a PayPal account and test accounts you can download the PayPal ASP.NET Web Controls and the PayPal Commerce Starter Kit. You need the PayPal ASP.NET Web Controls to experiment with the code in this article and the PayPal Commerce Starter Kit is a complete e-commerce example based on the IBUYSPY portal and PayPal Web controls. Once you have mastered the fundamentals in this article, you can explore the commerce starter kit and use that as a starting point for your own e-commerce Web site.

Before you begin, install the PayPal web controls and make sure that the controls show up in the VS.NET toolbox.

Displaying Your Wares

For the purposes of our discussion, I limit our focus to selling products on the Internet. You could use the PayPal Web controls to sell a service or offering a recurring-fee subscription, but here we create a simple storefront.

The first thing to do is define a means of presenting the products to sell on a Web page. To maintain focus, let's take some reasonable shortcuts. Here is an overview of the goals we need to accomplish:

• Create an inventory. In a real application, we probably would want to store the inventory in a database, but we aren't going to take an ADO.NET detour here.
• Provide an image and caption to show customers our products. We need to assign a name, number, and a price for each product, for tracking purposes.
• Define a way to organize and display our products.

For simplicity, I use a strongly typed collection of hard-coded product information and an ASP.NET user control and DataList to display all of the products. The user control plays the role of a template that contains controls to display a single product, and the PayPal ASP.NET Web controls; the DataList uses the item template to repeat the controls in the user control for each product.

Listing 1 defines the Item class that represents a single product. Listing 2 contains the typed collection of Items, and Listing 3 and Figure 1 show the code-behind and the visual implementation of the user control.

Listing 1: The product-item class.

  public class Item
  {
    private string itemImageUrl;
    private string itemName;
    private string itemNumber;
    private string itemCaption;
    private double itemPrice;

    public static Item CreateItem(string imageUrl,
      string itemName, string itemNumber, string itemCaption,
      double itemPrice)
    {
      return new Item(imageUrl, itemName, itemNumber, 
        itemCaption, itemPrice);
    }

    public Item(){}

    public Item(string itemImageUrl, string itemName, 
      string itemNumber, string itemCaption, double itemPrice)
    {
      this.itemImageUrl = itemImageUrl;
      this.itemName = itemName;
      this.itemNumber = itemNumber;
      this.itemCaption = itemCaption;
      this.itemPrice = itemPrice;
    }

    public string ItemImageUrl
    {
      get{ return itemImageUrl; }
      set{ itemImageUrl = value; }
    }

    public string ItemName
    {
      get{ return itemName; }
      set{ itemName = value; }
    }

    public string ItemNumber
    {
      get{ return itemNumber; }
      set{ itemNumber = value; }
    }

    public string ItemCaption
    {
      get{ return itemCaption; }
      set{ itemCaption = value; }
    }

    public double ItemPrice
    {
      get{ return itemPrice; }
      set{ itemPrice = value; }
    }
  }

Listing 2: The implementation of the typed ItemCollection, including hard-coded product information.

  public class ItemCollection : System.Collections.CollectionBase
  {
    public static ItemCollection CreateTest()
    {
      ItemCollection o = new ItemCollection();
      o.Add(Item.CreateItem("~/images/csharp_dev_guide.jpg", 
        "Advanced C#", 
        "1234", "Advanced C# Programming Book", 39.99));
      o.Add(Item.CreateItem("~/images/ExcelVBA.jpg", 
        "Excel VBA 2003 Progrmaminers Guide", "1235", 
        "Visual Basic for Applications programmers guide for Excel 2003", 
        39.99 ));
      o.Add(Item.CreateItem("~/images/powercoding.jpg", 
                "Visual Basic .NET Power Coding", "1236",  
        "Advanced Visual Basic .NET programming book (autographed copy)", 
        41.99));
      o.Add(Item.CreateItem("~/images/spyrograph.jpg", "Spyrograph Game", 
        "1237", "Spyrograph for Windows (source code included)", 
        19.99));
      o.Add(Item.CreateItem("~/images/VBNETUnleashed.jpg", 
        "Visual Basic .NET Unleashed",
        "1238", "Visual Basic .NET programming book.", 39.99));
      return o;
    }

    public Item this[int index]
    {
      get{ return (Item)List[index]; }
      set{ List[index] = value; }
    }

    public int Add(Item value)
    {
      return List.Add(value);
    }
  }

The static method CreateTest populates our typed collection with pre-defined products. This same implementation would work fine by populating the typed collection from a database or by replacing the typed collection with a DataSet.

Listing 3: The code-behind for the user control.

namespace PayPal
{
  using System;
  using System.Data;
  using System.Drawing;
  using System.Web;
  using System.Web.UI.WebControls;
  using System.Web.UI.HtmlControls;

  /// 

  ///    Summary description for BuyNow.
  /// 
  public class BuyNow : System.Web.UI.UserControl
  {
    protected System.Web.UI.WebControls.Image Image1;
    protected System.Web.UI.WebControls.Label Label1;
    protected PayPal.Web.Controls.AddToCartButton AddToCartButton1;
    protected PayPal.Web.Controls.BuyNowButton BuyNowButton1;

    private void Page_Load(object sender, System.EventArgs e)
    {
      // Put user code to initialize the page here
    }

    public string ItemImageUrl
    {
      get{ return Image1.ImageUrl; }
      set{ Image1.ImageUrl = value; }
    }

    public string ItemName
    {
      get{ return BuyNowButton1.ItemName; }
      set
      { 
        BuyNowButton1.ItemName = value; 
        AddToCartButton1.ItemName = value;
      }
    }

    public string ItemNumber
    {
      get{ return BuyNowButton1.ItemNumber; }
      set
      { 
        BuyNowButton1.ItemNumber = value; 
        AddToCartButton1.ItemNumber = value;
      }
    }

    public string ItemCaption
    {
      get{ return Label1.Text; }
      set
      { 
        Label1.Text = value; 
      }
    }

    public double ItemPrice
    {
      get{ return BuyNowButton1.Amount; }
      set
      { 
        BuyNowButton1.Amount = value; 
        AddToCartButton1.Amount = value;
      }
    }

    [Web Form Designer generated code]
  }
}

The constituent properties in the user control are surfaced using property methods. Each property either binds to the image, label, or one of the PayPal control properties.

Figure 1: The user control is an HTML table with an image, label, and two PayPal buttons.

The user control is comprised of an HTML table with an image, label, and two PayPal buttons. To repeat the product offering, we insert the user control into the item template of a DataList and bind the typed collection to the DataList.

The user control and DataList are contained in a Web form (shown in Figure 2). The code to bind the typed collection to the DataList is shown in Listing 4, and the binding code for the user controls in the .aspx file is shown in Listing 5.

Figure 2: The user control in the item template section of the DataList.

Listing 4: The Page_Load event binds the product-item collection.

   private void Page_Load(object sender, System.EventArgs e)
    {
      // Put user code to initialize the page here
      DataList1.DataSource = ItemCollection.CreateTest();
      DataList1.DataBind();
    }

Listing 5: The ASPX code that contains the script-block binding statements for the user control.

<%@ Page language="c#" Codebehind="BuyNow.aspx.cs"
AutoEventWireup="false" Inherits="PayPal.WebForm1" %>
<%@ Register TagPrefix="cc1" Namespace="PayPal.Web.Controls"
Assembly="PayPal.Web.Controls, Version=1.0.22.18680,
Culture=neutral, PublicKeyToken=97b06e1531ed482a" %>
<%@ Register TagPrefix="uc1" TagName="BuyNow" Src="BuyNow.ascx" %>
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>WebForm1</title>
<meta name="GENERATOR"
Content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" Content="C#">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
</HEAD>
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server">
<asp:datalist id="DataList1" runat="server"
RepeatDirection="Horizontal" RepeatColumns="2">
<ItemTemplate>
<uc1:BuyNow id=Buynow2 runat="server"
ItemPrice='<%# DataBinder.Eval(Container.DataItem, "ItemPrice") %>'
ItemCaption='<%# DataBinder.Eval(Container.DataItem, "ItemCaption") %>'
ItemNumber='<%# DataBinder.Eval(Container.DataItem, "ItemNumber") %>'
ItemName='<%# DataBinder.Eval(Container.DataItem, "ItemName") %>'
ItemImageUrl='<%# DataBinder.Eval(Container.DataItem, ItemImageUrl") %>'>
</uc1:BuyNow>
</ItemTemplate>
</asp:DataList>
</form>
</body>
</HTML>

The DataBinder.Eval shared method takes a generic object (the first parameter) and the name of a property (the second parameter). Container.DataItem represents a single Item (or a row in a DataTable). The DataList recreates the user control for each object in the collection, and the DataBinder binds the named-property to the user control's property. For example, the statement ItemPrice='<%# DataBinder.Eval(Container.DataItem, "ItemPrice") %>' assigns the Item.ItemPrice value to the user control's ItemPrice property which in turn represents the PayPal control's Amount property.

When we run the sample, we get a result that looks like the page in Figure 3. Obviously, this page needs some prettification, and you will need your own product images. The general idea is to ensure we have the technical aspects of a storefront.

Figure 3: The typed collection, DataList, user control, and PayPal controls as defined by the code, running.

Now that we have the mechanics of our storefront, let's explore the PayPal ASP.NET Web controls and look at the information we need to send to PayPal.

Next: ' Making An Instant Purchase ' >>

Discuss Building an ASP.NET Storefront with PayPal   I've been looking for a long time an article that explains how to use paypal with... This is an interesting teaser, but in our real-world experience, providing a... weak i was a starter to paypal payment and due to huge sea of information available on... >>> Post your comment now!

>>> More Using Microsoft Visual Studio Articles          >>> More By Paul Kimmel