• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Chapter 4. Editing Page Content > Adding PayPal E-commerce Buttons

Adding PayPal E-commerce Buttons

Contribute allows you the capability to add buttons to your Web pages that allow the user to purchase products and services from your Web site. These buttons work with PayPal, one of the largest online payment services. PayPal allows anyone with an email address to securely send and receive payments online; to send money, the source of the funds can be a credit card, a bank account, or a balance in the purchaser’s PayPal account. By clicking a PayPal button on your site, the visitor is directed to a secure form on the PayPal site that takes their payment information and allows them to complete the purchase. Then PayPal deposits the money from the purchase into your PayPal account, from which you can later transfer the funds to your regular checking account.

✓ Tips

  • Before you can accept payments via PayPal, you will need to sign up for a PayPal account, if you don’t already have one. You can do that at http://www.paypal.com.

  • In order to accept credit card payments via PayPal, you must have a Business or Premier PayPal account. PayPal charges you a fee for receiving credit card payments. At press time, these fees ranged from 2.2% to 2.9% of the transaction amount, plus $.30 per transaction.

  • The PayPal e-commerce toolkit is actually an extension to Contribute written by WebAssist (http://www.webassist.com), based on their similar toolkit for Macromedia Dreamweaver MX. You can find out technical details about both the Contribute and Dreamweaver toolkits at the WebAssist Web site.


Types of E-commerce transactions

The PayPal e-commerce toolkit allows you to place five different kinds of buttons on your Web pages for electronic transactions:

  • A Buy Now Button allows you to sell individual items from your Web site. The user clicks the button, and is taken to a payment form on the PayPal Web site. When the user completes the payment, he or she can optionally be sent back to your site to continue browsing.

  • An Add to Cart Button is useful if you have multiple items that you are selling from your site. When the user clicks this button, they are taken to a shopping cart page on the PayPal site. At that point they can choose to go through the checkout process, or return to your site and add more items to the shopping cart.

  • The View Cart Button works with the Add to Cart Button to allow your site visitors to view the contents of their shopping cart.

  • A Subscription Button allows you to sell ongoing subscriptions from your Web site. From the e-commerce standpoint, a subscription consists of two or more payments made at a regular interval, such as days, weeks, months, or years. For example, you could use a Subscription Button to allow your site visitors to pay for a monthly newsletter you send out via email, to renew annual dues for a club, or to make recurring donations to a community group.

  • A Donation Button allows you to collect a donation from a button on your Web site.

Choosing any of these transaction types from the PayPal submenu in the Insert menu displays a Wizard that steps you through setting up the transaction.

To add a Buy Now button:

1.
On a draft page, click to place the insertion point where you want the button.

2.
Choose Insert> PayPal > Buy Now Button. The first screen of the Insert PayPal Buy Now Button Wizard appears (Figure 4.31).

Figure 4.31. On the first page of any of the PayPal Wizards, you must enter your PayPal account name, which is the email address that you have registered with PayPal.


3.
Type in the name of your PayPal account, which is the email address that you used to register with PayPal, then click Next. The Choose a Button screen appears (Figure 4.32).

Figure 4.32. You have a variety of Buy Now buttons from which to choose.


4.
Click a button next to the button image that you wish to use for your Buy Now button.

Alternatively, you can click “Use a custom button,” then enter the URL to a button image on your site.

5.
Click Next.

The Item Details screen appears (Figure 4.33).

Figure 4.33. The Item Details screen allows you to enter the name of the item or service and its price.


6.
Do the following (all entries on this screen are optional, but recommended):

  • In the “Item name/service” field, enter the name of the item or service that you are selling.

  • In the “Item ID/number” field, enter an item number or product code.

  • In the “Price of item/service” field, enter an amount. You must include a decimal amount, i.e., you must type a number like 15.00, not just 15. Don’t type a currency symbol.

    You may also leave this field blank, which will allow the purchaser to enter their own price when they get to the PayPal payment form. This is useful for payments such as donations.

  • Choose the currency for the payment amount from the pop-up menu. Your choices are US Dollars, Canadian Dollars, Euros, Pounds Sterling, or Yen.

  • If you are willing to allow the purchaser to buy more than one of the items or services, select the check box.

7.
Click Next.

The Shipping Preferences screen appears (Figure 4.34).

Figure 4.34. If you charge for shipping, enter the shipping amounts here.


8.
Do the following (again, the entries on this screen are optional):

  • If the item you are selling has a shipping charge, type it in the “Base shipping” field.

  • If the purchaser orders more than one item, you probably need to impose additional shipping charges for each item. Enter that charge in the “Extra shipping” field.

  • If you’ll be adding a handling fee, type the amount in the “Handling” field. Handling fees are calculated once per order as a flat fee.

  • If you want the buyer to provide you with their shipping address, select the Yes button next to “Ask buyers to provide you with their shipping address?” If you don’t need the buyer’s address (perhaps because they are purchasing an item that they can download, or because they are purchasing a service), click No.

  • Select Yes or No to the question “Allow customers to optionally include a note with their payment?”

9.
Click Next.

The Display Your Logo screen appears (Figure 4.35).

Figure 4.35. If you want to put your company brand on the PayPal payments screen, enter the URL of the logo image on this screen.


10.
If you want your logo to appear on the PayPal payments page, type the URL for the logo image. Your logo should be hosted on a secure server (see the sidebar “Staying Secure”). This is another optional entry.

The logo image must be exactly 150 by 50 pixels in size.

11.
Click Next.

The Customize Customer Experience screen appears (Figure 4.36). This screen allows you to send your customers to two different places depending on whether their transaction is successful or canceled.

Figure 4.36. It is a good idea to enter URLs on this screen that direct your customer to pages letting them know that their transaction has succeeded, or that it has not.


12.
Do the following (the entries on this screen are optional, but recommended):

  • Type the Success URL. This is a page that your customers will be sent to if the transaction is successfully completed. For example, you might want to send your customers to a page thanking them for the purchase.

  • Type the Cancel Payment URL. This is a page that your customers will be sent to if the transaction fails for any reason. Possible reasons could include failure to validate a credit card, or if the buyer cancels the transaction before completing the purchase process.

13.
Click Next.

The Summary screen appears (Figure 4.37). Review the information, and if needed, click the Back button to make any changes.

Figure 4.37. The Summary screen lets you check that all the details are correct before creating your Buy Now button.


14.
Click Finish.

The Buy Now button appears on your draft page (Figure 4.38).

Figure 4.38. The finished Buy Now button uses the button image that you selected from the Wizard.


Staying Secure

Putting your logo on the PayPal payments page is a good way to look more professional, but to do it right, you will need to host the logo image on a secure Web server. That’s a server that encrypts all of the data it sends for security purposes. Technically, you don’t have to host your logo image securely, but most browsers will present a security alert to the buyer (Figure 4.39). Worse, that alert will appear every time they add an item to the shopping cart, and when they check out. Buyers are rightly suspicious when they are sending money online and the browser alerts them that the transaction may not be fully secure.

Figure 4.39. This security alert will annoy your potential customers—and probably drive away sales—if you don’t host your logo on a secure Web server.


There are a variety of services that will host your logo file on a secure server inexpensively, often for $1 per image per month or less. Some of these services are:


To add an Add to Cart button:

1.
On a draft page, click to place the insertion point where you want the button.

2.
Choose Insert> PayPal > Add to Cart Button. The first screen of the Insert PayPal Add to Cart Button Wizard appears (Figure 4.40).

Figure 4.40. Begin adding an Add to Cart button to your page by entering your PayPal account name.


3.
Type in the name of your PayPal account, which is the email address that you used to register with PayPal.

4.
Click Next.

The Choose a Button screen appears (Figure 4.41).

Figure 4.41. Choose the Add to Cart button that you want.


5.
Click a button next to the button image that you wish to use for your Add to Cart button.

Alternatively, you can click “Use a custom button,” then enter the URL to a button image on your site.

6.
Click Next.

The Item Details screen appears (Figure 4.42).

Figure 4.42. Enter the item details that will later appear in the shopping cart.


7.
Do the following (all entries on this screen are optional, but recommended):

  • In the “Item name/service” field, enter the name of the item or service that you are selling.

  • In the “Item ID/number” field, enter an item number or product code.

  • In the “Price of item/service” field, enter an amount. You must include a decimal amount, i.e., you must type a number like 15.00, not just 15. Don’t type a currency symbol.

  • Choose the currency for the payment amount from the pop-up menu. Your choices are US Dollars, Canadian Dollars, Euros, Pounds Sterling, or Yen.

  • If you want the buyer to provide you with their shipping address, select the Yes button next to “Ask buyers to provide you with their shipping address?” If you don’t need the buyer’s address (perhaps because they are purchasing an item that they can download, or because they are purchasing a service), click No.

  • Select Yes or No to the question “Allow customers to optionally include a note with their payment?”

8.
Click Next.

The Display Your Logo screen appears.

9.
(Optional) If you want your logo to appear on the PayPal payments page, type its URL. Your logo should be hosted on a secure server.

10.
Click Next.

The Customize Customer Experience screen appears.

11.
Do the following (entries on this screen are optional, but recommended):

  • Type the Success URL. This is a page that your customers will be sent to if the transaction is successfully completed. For example, you might want to send your customers to a page thanking them for the purchase.

  • Type the Cancel Payment URL. This is a page that your customers will be sent to if the transaction fails for any reason. Possible reasons could include failure to validate a credit card, or if the buyer cancels the transaction before completing the purchase process.

12.
Click Next.

The Summary screen appears (Figure 4.43). Review the information, and if needed, click the Back button to make any changes.

Figure 4.43. Check the Summary screen carefully; you don’t want mistakes when money is involved.


13.
Click Finish.

The Add to Cart button appears on your draft page (Figure 4.44).

Figure 4.44. The completed Add to Cart button.


To add a View Cart button:

1.
On a draft page, click to place the insertion point where you want the button.

2.
Choose Insert> PayPal > View Cart Button. The first screen of the Insert PayPal View Cart Button Wizard appears.

3.
Type in the name of your PayPal account, which is the email address that you used to register with PayPal.

4.
Click Next.

The Choose a Button screen appears (Figure 4.45).

Figure 4.45. You have only five preset choices for a View Cart button.


5.
Click a button next to the button image that you wish to use for your View Cart button.

Alternatively, you can click “Use a custom button,” then enter the URL to a button image on your site.

6.
Click Next.

The Summary screen appears.

7.
Click Finish.

The View Cart button appears on your draft page (Figure 4.46).

Figure 4.46. This View Cart button is stylistically similar to the Add to Cart button.


To add a Subscription button:

1.
On a draft page, click to place the insertion point where you want the button.

2.
Choose Insert> PayPal > Subscription Button.

The first screen of the Insert PayPal Subscription Button Wizard appears.

3.
Type in the name of your PayPal account, which is the email address that you used to register with PayPal.

4.
Click Next.

The Choose a Button screen appears (Figure 4.47).

Figure 4.47. Choose the Subscription button that you want.


5.
Click a button next to the button image that you wish to use for your Subscription button.

Alternatively, you can click “Use a custom button,” then enter the URL to a button image on your site.

6.
Click Next.

The Subscription Details screen appears (Figure 4.48).

Figure 4.48. Enter the details of the subscription, and decide whether you want to offer a free trial period for your subscription.


7.
Do the following:

  • (Optional) Type a subscription name.

    This is that name for the subscription that will appear on the PayPal payments page.

  • (Optional) Type a Reference ID, if you use them.

  • Choose the currency for the payment amount from the pop-up menu. Your choices are US Dollars, Canadian Dollars, Euros, Pounds Sterling, or Yen.

  • In the Billing/Payment Plan section, type a number in the field next to “Charge customers.” This will be the recurring amount.

  • Choose the time period for the recurring payment from the two pop-up menus. Your choices are 1 to 30 and days, weeks, months, or years.

  • Select either “Charge customers until they cancel” or “Stop charging after X payments,” where X is the choice you make from the pop-up menu.

  • If you want to offer your subscribers a free trial offer, or charge a setup fee, type a number and choose from the pop-up menus.

8.
Click Next.

The Additional Subscription Details screen appears (Figure 4.49).

Figure 4.49. PayPal needs to know what to do if a customer payment fails.


9.
Answer the questions “Reattempt billing if a customer payment fails?” and “Ask customers to provide you with their shipping address?” by selecting the Yes or No buttons.

10.
Click Next.

The Display Your Logo screen appears.

11.
(Optional) If you want your logo to appear on the PayPal payments page, type its URL. Your logo should be hosted on a secure server.

12.
Click Next.

The Customize Customer Experience screen appears.

13.
Do the following (entries here are optional, but recommended):

  • Type the Success URL. This is a page that your customers will be sent to if the transaction is successfully completed. For example, you might want to send your customers to a page thanking them for the purchase.

  • Type the Cancel Payment URL. This is a page that your customers will be sent to if the transaction fails for any reason. Possible reasons could include failure to validate a credit card, or if the buyer cancels the transaction before completing the purchase process.

14.
Click Next.

The Summary screen appears (Figure 4.50). Review the information, and if needed, click the Back button to make any changes.

Figure 4.50. The Summary screen helps you prevent mistakes when setting up your subscription.


15.
Click Finish.

The Subscription button appears on your draft page (Figure 4.51).

Figure 4.51. The completed Subscription button.


To add a Donation button:

1.
On a draft page, click to place the insertion point where you want the button.

2.
Choose Insert> PayPal > Donation Button. The first screen of the Insert PayPal Subscription Button Wizard appears.

3.
Type in the name of your PayPal account, which is the email address that you used to register with PayPal.

4.
Click Next.

The Choose a Button screen appears (Figure 4.52).

Figure 4.52. Choose the Donation button you want to use on your Web page.


5.
Click a button next to the button image that you wish to use for your Donation button.

Alternatively, you can click “Use a custom button,” then enter the URL to a button image on your site.

6.
Click Next.

The Donation Details screen appears (Figure 4.53).

Figure 4.53. You’ll need to specify the name of the donation or service, and the currency you will accept.


7.
Do the following:

  • (Optional) Type a donation/service name. This is that name for the donation or service that will appear on the PayPal payments page.

  • (Optional) Type a Donation ID, if you use them.

  • Choose the currency for the payment amount from the pop-up menu. Your choices are US Dollars, Canadian Dollars, Euros, Pounds Sterling, or Yen.

  • If you want the buyer to provide you with their shipping address, select the Yes button next to “Ask buyers to provide you with their shipping address?” If you don’t need the buyer’s address, click No.

  • Select Yes or No to the question “Allow customers to optionally include a note with their donation?”

8.
Click Next.

The Display Your Logo screen appears.

9.
(Optional) If you want your logo to appear on the PayPal payments page, type its URL. Your logo should be hosted on a secure server.

10.
Click Next.

The Customize Customer Experience screen appears.

11.
Do the following (entries here are optional, but recommended):

  • Type the Success URL. This is a page that your customers will be sent to if the transaction is successfully completed. For example, you might want to send your customers to a page thanking them for the purchase.

  • Type the Cancel Payment URL. This is a page that your customers will be sent to if the transaction fails for any reason. Possible reasons could include failure to validate a credit card, or if the buyer cancels the transaction before completing the purchase process.

12.
Click Next.

The Summary screen appears. Review the information, and if needed, click the Back button to make any changes.

13.
Click Finish.

The Subscription button appears on your draft page (Figure 4.54).

Figure 4.54. The completed Donation button.


To change the properties of a PayPal button:

1.
On the draft page, click the button to select it.

2.
Choose Format > PayPal Button Properties.

A dialog opens that allows you to change the button’s properties (Figure 4.55). The tab labels in the dialog vary with the type of PayPal button selected in the draft.

Figure 4.55. Choosing Format > PayPal Button Properties will bring up one of five dialogs, depending on the type of PayPal button you are modifying. This example is for the Buy Now button.


3.
Make the needed changes, then click OK.

To remove a PayPal button:

1.
On the draft page, click the button to select it.

2.
Press Backspace (Delete).

The button disappears from the page.

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint