Creating a Buy Now Button

The last step is to create some HTML and test the account. For now, I will show you how to create an instant purchase link, or Buy Now button. This is the easiest part of the entire process.

To create a Buy Now button, return to the developer page shown in Figure 3. Select the Sandbox tab and choose the test account that represents your seller. Click the Launch Sandbox button and log in for that user. This step will open a browser instance for that user at www.sandbox.paypal.com. Select the Merchant Tools tab.

The Merchant Tools tab is almost identical to the live Merchant Tools tab; it has links for generating various kinds of HTML. You plug in the generated HTML into a Web page — and voila, you have instant e-commerce support.

To generate a Buy Now button for our test seller follow these steps:

• On the sandbox Merchant Tools tab, find the Website Payments section (about half way down the page).
• Click Buy Now buttons.
• Fill out the Sell Single Items page (see Figure 8).
• Provide an item name or service (for example, "Source Code Donation").
• Provide an item number. This is for your reference, and you can leave it blank. (PayPal is only interested in the financial transaction and less in what you sell.)
• Provide a dollar amount or leave this field blank (for example, you might want people to donate a sum that they specify).
• Optionally, you can specify an alternate currency and a buyer's country.
• Select the button type, or provide a custom image by indicating the image's URL. (We'll use the default button.)
• Specify whether you want encryption. For our purposes, change it from the default Yes to No. This makes the HTML clearer.
• Click Create Button Now.

Figure 8: Use the wizard to generate a Buy Now button as HTML.

After you finish the last step, you'll see a page containing the HTML for your button and HTML for e-mail responses. Copy and paste the HTML Code for Web sites from this page into a text editor, save the text with an HTML extension, and open that page in your browser. That's all there is to it.

Listing 1 shows the generated HTML for my example.

Listing 1: Generated Buy Now HTML.

<form action="https://www.sandbox.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_xclick">
<input type="hidden" name="business" value="retailer@nowhere.com">
<input type="hidden" name="item_name" value="Source Code Donation">
<input type="hidden" name="item_number" value="SCD9999">
<input type="hidden" name="no_note" value="1">
<input type="hidden" name="currency_code" value="USD">
<input type="image"
  src="https://www.sandbox.paypal.com/en_US/i/btn/x-click-but23.gif"
  border="0" name="submit"
  alt="Make payments with PayPal - it's fast, free and secure!">
</form>

In a browser, this HTML looks exactly like the button in the wizard. Click the button to test the HTML. Your browser will redirect you to a page similar to the one shown in Figure 9. You are now playing the role of customer.

Figure 9: Enter the customer test information to make your purchase.

Enter a donation amount, enter your test customer's password, and click Continue. On the next page, click Pay. On the next page, click Continue. The transaction should show up in your customer's test account as a debit in the customer's account and a credit in the seller's account. You can log into each account to verify this information. Figure 10 shows the customer's account after tinkering with it for a bit.

Figure 10: The customer test account after making the most recent $1 donation.

By the time I was through figuring out this process, I had about eight browser instances open. Don't let this be daunting. I've found PayPal to be committed to improving this process. And, after all, getting paid for your ideas, products, and services is worth a bit of trouble.

Going Live

To bring the "Buy Now" button to production, you can repeat all of the steps here, or take a shortcut right out of David Nielson's book, PayPal Hacks: simply modify the HTML from the test site. To convert the HTML for a live site, remove all of the references to sandbox from the HTML and change the business field to your real PayPal account (see Listing 2). Finally, integrate the entire HTML into your Web site at a suitable location (see Figure 11).

Listing 2: Hack the HTML to point to a real product and PayPal account, plug it into your Web site, and you are now selling online.

<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_xclick">
<input type="hidden" name="business" value="pkimmel@softconcepts.com">
<input type="hidden" name="item_name" value="Source Code Donation">
<input type="hidden" name="item_number" value="SCD9999">
<input type="hidden" name="no_note" value="1">
<input type="hidden" name="currency_code" value="USD">
<input type="image"
  src="https://www.paypal.com/en_US/i/btn/x-click-but21.gif"
  border="0" name="submit"
  alt="Make payments with PayPal - it's fast, free and secure!">
</form>

Figure 11: Shows the donation button on the Web page listing all of the books I have written or contributed to. (Please feel free to donate.)

Notice that in Figure 11, the button text has changed. I manually modified the image to x-click-but21.gif, which is the "Make a Donation" button you see in the figure.

To integrate this code into an ASP.NET Web site, you need to make some additional changes. ASP.NET only permits one server-side <form> tag, and our HTML would introduce another. Instead of using a form post, you can accomplish the same thing by converting the HTML to a query string. To integrate the HTML into my ASP.NET-based Web site, I converted the post to the code in listing 3.

Listing 3: Using a URL and query parameters to integrate the HTML-generated Make a Donation button into an ASP.NET application.

<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_xclick
  &business=pkimmel@softconcepts.com&item_name=Source Code Donation&
  item_number=SCD9999">
  <img src="https://www.paypal.com/en_US/i/btn/x-click-but21.gif"
  border="0">
</a>

Notice that I used the name and value pairs from listing 2 to create the query. The cmd and business parameters are essential, and item_name and item_number are good for reference. To restrict the purchase to a specific amount, include an amount parameter and the dollar amount.

The Buy Now button works fine if you are offering single items. However, if you want to create a store, then you need a true shopping cart model. PayPal merchant tools can create and host a shopping cart, too. Tighter integration is one more reason that PayPal has developed ASP.NET Web controls. We'll look at those in the next part of this article series.

Paul Kimmel is the founder of Software Conceptions, Inc, founded in 1990 and the co-founder of the Greater Lansing Area .NET Users Group (glugnet.org). Paul has written several books on object-oriented programming and frequently writes columns online and in print. Look for his upcoming book UML DeMystified. You may contact him at pkimmel@softconcepts.com if you need help designing or building software.