Hack 51 Customize Checkout Pages

Give your customers a smooth buying experience by changing the look and feel of PayPal payment pages to match your web site .

When you sell online using PayPal, you are selling to PayPal veterans and newbies alike. While PayPal represents online transaction safety to tens of millions of satisfied users, some less experienced buyers might find being sent off to another site to pay for their purchases rather jarring. And since you have gone to the trouble of creating your beautiful web site, why send people away from it when they are ready to buy?

Well, you send customers to PayPal so that Paypal can run the secure transaction and you don't have to. But your customers don't have to feel like they are being sent off to a foreign country when they go to the PayPal payment flow. By customizing the PayPal pages so they function more like your own web site, you can make all your customers happy.

PayPal's Custom Payment Pages feature lets you control key parts of the user experience on PayPal's web site. You can place a 750x90-pixel banner at the top of PayPal's pages and carry your site's color scheme through the payment process. Did you know PayPal could look like Figure 5-5?

Figure 5-5. A customized checkout page

Here's how to get started:

1. Log into your PayPal account.

2. Click the Profile link and select Custom Payment Pages from the right column.

3. Click on the Add button to add a page style. Give the style a name (you can store up to five named styles), add the URL to your banner, and select appropriate colors for the page background and the header, as shown in Figure 5-6.

   Figure 5-6. Creating a custom page style

   
   

4. Press the Preview button to see what PayPal's pages will look like for your buyers. When you like the result, save the style.

5. Press the Make Primary button, and all your customers will be treated to this new style.

Presto! You're done.

5.8.1 Using Multiple Custom Page Styles

Setting a primary style makes that style the default for all the existing payment buttons on your web site. However, you can save up to five different custom page styles on your PayPal account and apply any of those page styles to a particular payment flow. This is particularly helpful if you have more than one web site or if you use visual cues to distinguish particular areas of your web site.

Simply name your styles appropriately (e.g., electronics or marys_crafts ) and then select which page style to associate with each button on your site by including the style's name in the button HTML, like this:

 <input type=hidden name="page_style" value="marys_crafts"> 

Specifying a page style in a GET link is easier; add &page_style=marys_crafts to the end of the PayPal URL.

5.8.2 Getting the Most from Custom Page Style Banners

Header banners allow you to continue your site's look and feel through the payment process, so PayPal has ceded you a 750x90-pixel area at the top of all their payment pages. That's great for brand awareness and all, but what else could you do with 67,500 pixels?

How about presenting your site's message of the day? Or advertising your best-selling accessories? No problem. Create a custom page style and point the image URL to a location on your site (e.g., https ://www.mysite.com/motd.jpg). Then, you can put any image (as long as it fits in the banner space; PayPal clips oversized images) in that location. In today's banner, you can push overstocked product: "scratching postsFrisky loves them!" When the posts are sold out, you can fire up Photoshop and replace the banner with an advertisement for catnip mice.

Change as often as you like without logging into PayPal at all. If you want to get fancy, you can write a script that rotates through a set of banners so that customers always see a fresh message.

PayPal Etiquette

PayPal has the ability to review the contents of custom page styles and can remove styles that violate the company's guidelines. Repeated violations might bring other sanctions too. Sorry, no nekkid ladies or gents on your banners. You can't sell already-detonated airbags either.

For a full list of the company's guidelines for appropriate content (not to mention some good laughs), see http://www.paypal.com/cgi-bin/webscr?cmd=p/gen/ua/use/index_frame-outside.

Here are a few more tips to remember when you are customizing your payment pages:

• Host your banner image on a secure ( https ) site so that your customers will not see warnings about mixing secure and insecure context.

• Before PayPal offered Custom Payment Pages, it offered more limited functionality in the form of two optional button variables : image_url and cs . The old and new features are not compatible, so if you are using Custom Payment Pages, do not use the image_url or cs variables in your buttons.

• PayPal selects white or black foreground text based on your background color. On light backgrounds such as #FFFFFF (pure white) PayPal uses black text. If you select a dark background such as #000033 (dark blue), PayPal uses white foreground text. This ensures that your payment pages have sufficient contrast to be legible, regardless of which background color you select.

• There are a few colors that PayPal does not allow you to select as background colors because they are too similar to the bright red ( FF0000 ) that PayPal uses to alert users to errors. If you run into this restriction, try a similar or complementary color. You might also be able to stay in the desired color family by selecting a color that has a different total brightness.

Glenn Ellingson