1. Open BalloonShop.master in Source View and add the following JavaScript function inside the
<HEAD> element:
<head runat="server">
<title>BalloonShop</title>
<script language="JavaScript">
Darie-Watson_4681C07.fm Page 213 Thursday, August 25, 2005 8:48 AM
214 C H A P T E R 7 ■ R E C E I V I N G P A Y M E N T S U S I N G P A Y P A L
<!--
var PayPalWindow = null;
// Opens a PayPal window function OpenPayPalWindow(url) {
if ((!PayPalWindow) || PayPalWindow.closed) // If the PayPal window doesn't exist, we open it
PayPalWindow = window.open(url, "cart", "height=300, width=500");
else {
// If the PayPal window exists, we make it show PayPalWindow.location.href=url;
PayPalWindow.focus();
} } // -->
</script>
</head>
■ Note JavaScript is case sensitive, so you need to be very careful to reproduce the code exactly; otherwise, it won’t work as expected.
2. While BalloonShop.master is in Source View, add the View Cart button on the main page, just below the SearchBox control.
<uc4:SearchBox id="SearchBox1" runat="server">
</uc4:SearchBox>
<p align="center">
<a href="JavaScript: OpenPayPalWindow('https://www.paypal.com/cgi-bin/webscr ?cmd=_cart
&business=youremail@yourserver.com &display=1
&return=www.yourwebsite.com
&cancel_return=www.yourwebsite.com')">
<IMG src="Images/ViewCart.gif" border="0">
</a>
</p>
■ Note You must write the OpenPayPalWindow call on a single line in the HTML source. We split it on multiple lines in the code snippet to make it easier to read.
Darie-Watson_4681C07.fm Page 214 Thursday, August 25, 2005 8:48 AM
C H A P T E R 7 ■ R E C E I V I N G P A Y M E N T S U S I N G P A Y P A L 215
3. Next, to add the PayPal Add to Cart button in Product.aspx, open Product.aspx and add an HTML Server Control just below the product price:
<asp:Label CssClass="ProductPrice" ID="priceLabel" Runat="server"
Text="Label"/>
<br /><br />
<a runat="server" id="addToCartLink">
<IMG src="Images/AddToCart.gif" border="0">
</a>
Your form should look like Figure 7-1 in Design View.
Figure 7-1. The Add to Cart button in Product.aspx
4. Append the following code to the PopulateControls method in Product.aspx.cs:
// Create the "Add to Cart" PayPal link string link =
"JavaScript: OpenPayPalWindow(\"https://www.paypal.com/cgi-bin/webscr"
+ "?cmd=_cart" + // open shopping cart command
"&business=youremail@yourserver.com" + // your PayPal account "&item_name=" + pd.Name + // product name
"&amount=" + String.Format("{0:0.00}", pd.Price) + // product price "¤cy=USD" + // currency
"&add=1" + // quantity to add to the shopping cart "&return=www.yourwebsite.com" + // return address
"&cancel_return=www.yourwebsite.com\")"; // cancel return address)
Darie-Watson_4681C07.fm Page 215 Thursday, August 25, 2005 8:48 AM
216 C H A P T E R 7 ■ R E C E I V I N G P A Y M E N T S U S I N G P A Y P A L
// Encode link characters to be included in HTML file string encodedLink = Server.HtmlEncode(link);
// The the link of the HTML Server Control addToCartLink.HRef = encodedLink;
5. Make sure you replace youremail@yourserver.com in every link with the email address you sub- mitted when you created your PayPal account for all Add to Cart and View Cart buttons. Also, replace www.yourwebsite.com with the address of your e-commerce store. Alternatively, you can remove the return and cancel_return variables if you don’t want PayPal to redirect back to your web site after the customer completes or cancels a payment.
■ Caution You need to use the correct email address for the money to get into your account.
6. Press F5 to execute the project. Your first page should look like Figure 7-2 now.
Figure 7-2. Integrating the PayPal shopping cart
7. Experiment with the PayPal shopping cart to make sure that it works as advertised. Figure 7-3 shows the PayPal shopping cart in action.
Darie-Watson_4681C07.fm Page 216 Thursday, August 25, 2005 8:48 AM
8213592a117456a340854d18cee57603
C H A P T E R 7 ■ R E C E I V I N G P A Y M E N T S U S I N G P A Y P A L 217
Figure 7-3. The PayPal shopping cart
How It Works: PayPal Integration
Yes, it was just that simple. Right now, all visitors became potential customers! They can click the Checkout button of the PayPal shopping cart, which allows them to buy the products!
After a customer makes a payment on the web site, an email notification is sent to the email address registered on PayPal and also to the customer. Your PayPal account reflects the payment, and you can view the transaction infor- mation in your account history or as a part of the history transaction log.
We touched on a few of the details of the PayPal shopping cart, but for a complete description of its functionality, you should read PayPal’s Website Payments Standard Integration Guide. If you decide to use PayPal for your own web site, make sure you learn about all its features. For example, you can teach PayPal to automatically calculate shipping costs and tax for each order.
This was also the first time you created an HTML Server Control, when you added the Add to Cart link in Product.aspx. The HTML Server Control is just a simple HTML tag that has the runat="server" attribute. After you add that attribute, you can access its properties from the code-behind file, just as you did when setting the link’s HRef property.
Among the alternative solutions is the use of an ImageButton control, whose OnClientClick property could contain the JavaScript function call that opens the PayPal shopping cart.
Darie-Watson_4681C07.fm Page 217 Thursday, August 25, 2005 8:48 AM
218 C H A P T E R 7 ■ R E C E I V I N G P A Y M E N T S U S I N G P A Y P A L