Custom Payment Pages

Creating and Applying Custom Payment Page Styles

With our Custom Payment Pages feature, you can tailor PayPal's payment pages to the style of your website for a truly seamless payment experience. Make PayPal's payment flow yours with custom page colors and your own images. Custom Payment Pages can be used with all PayPal Website Payment buttons, including Buy Now, Donations, Shopping Cart, and Subscriptions. It is also compatible with the PayPal Account Optional feature and will apply your choices to the pages in that payment flow.

Examples of Custom Payment Pages

The screen shots below demonstrate the types of customization you can add to your PayPal Website Payment buttons.

Figure 7.1

A payment page in the standard PayPal page style

Figure 7.2

The same payment page with a Custom Payment Page Style applied.

This page style includes a custom header image and header border color

Figure 7.3

The same payment page with a different Custom Payment Page Style applied

This page style includes a custom header image, header border color, and background color.

Getting Started

1.	Log in to your PayPal account at www.paypal.com

2.	Click on the Profile sub-tab.

3.	Click on the Custom Payment Pages link under the Selling Preferences heading to get to the Custom Payment Page Styles page.

4.	From this page, you can Add, Edit, Preview, and Remove page styles, as well as make any page style your Primary style.

Adding a Page Style

You may add up to 3 page styles. To add a page style:

1.	Begin at the Custom Payment Page Styles page (see Getting Started above).

2.	Click Add.

3.	Enter your page style preferences:

Page Style Name (required)
Enter a name up to 30 characters in length. The name can contain letters, numbers, and the underscore mark - but no other symbols or spaces. The Page Style Name will be used to refer to the page style within your PayPal account and in the HTML code for your PayPal Website Payment buttons.

Header Image URL (optional)
Enter the URL for an image that is a maximum size of 750 pixels wide by 90 pixels high; larger images will be cut to this size. The image must be in a valid graphics format such as .gif, .jpg, .png, and .swf. The image will appear at the top left of the payment page.

PayPal recommends that you enter an image URL only if the image is stored on a secure (https) server. Otherwise, your customer's web browser will display a message that the payment page contains insecure items.

Header Background Color (optional)
Enter the background color for the header using HTML hex code. The color code must be six digits long and should not contain the # symbol. The header is a 750 pixel wide by 90 pixel high space at the top of the payment page.

Header Border Color (optional)
Enter the border color for the header using HTML hex code. The color code must be six digits long and should not contain the # symbol. The header border is a 2 pixel perimeter around the header space.

Background Color (optional)
Enter the background color for the payment page using HTML hex code. The color code must be six digits long and should not contain the # symbol.

4.	Click Preview to preview your page style, or click Save to save it.

The next time you create a button, you will have the option to apply a page style to the payment pages associated with it. To do so, click Add More Options on the button creation page, and select a page style from the Custom Payment Page Style menu.

Editing a Page Style

To edit a page style:

1.	Begin at the Custom Payment Page Styles page (see “Getting Started”).

2.	Click the radio button next to the page style you wish to edit.

3.	Click Edit.

4.	Keep or modify your page style preferences:

Page Style Name (required)
Enter a name up to 30 characters in length. The name can contain letters, numbers, and the underscore mark - but no other symbols or spaces. The Page Style Name will be used to refer to the page style within your PayPal account and in the HTML code for your PayPal Website Payment buttons.

Header Image URL (optional)
Enter the URL for an image that is a maximum size of 750 pixels wide by 90 pixels high; larger images will be cut to this size. The image must be in a valid graphics format such as .gif, .jpg, .png, and .swf. The image will appear at the top left of the payment page.

PayPal recommends that you enter an image URL only if the image is stored on a secure (https) server. Otherwise, your customer's web browser will display a message that the payment page contains insecure items.

Header Background Color (optional)
Enter the background color for the header using HTML hex code. The color code must be six digits long and should not contain the # symbol. The header is a 750 pixel wide by 90 pixel high space at the top of the payment page.

Header Border Color (optional)
Enter the border color for the header using HTML hex code. The color code must be six digits long and should not contain the # symbol. The header border is a 2 pixel perimeter around the header space.

Background Color (optional)
Enter the background color for the payment page using HTML hex code. The color code must be six digits long and should not contain the # symbol.

5.	Click Preview to preview your page style, or click Save to save it.

Previewing a Page Style

To preview a page style:

1.	Begin at the Custom Payment Page Styles page (see “Getting Started”).

2.	Click the radio button next to the page style you wish to preview.

3.	Click Preview.

You also can preview a page style when adding or editing it by clicking Preview.

Making a Page Style Primary

When you make a page style Primary, it will be applied to all of your payment pages unless you specify otherwise. To learn how to apply a page style other than your Primary style, see “Overriding Page Style Settings”.

To make a page style Primary:

1.	Begin at the Custom Payment Page Styles page (see “Getting Started”).

2.	Click the radio button next to the page style you wish to make your Primary style.

3.	Click Make Primary.

4.	Click Make Primary to confirm your choice.

Removing a Page Style

When you remove a page style, the payment pages to which the style applied will no longer be customized with those specifications. Instead, your Primary page style will be applied to those pages. If you remove your Primary page style, the PayPal page style will become Primary.

To remove a page style:

1.	Begin at the Custom Payment Page Styles page (see “Getting Started”).

2.	Click the radio button next to the page style you wish to remove.

3.	Click Remove.

4.	Click Remove to confirm your choice.

Overriding Page Style Settings

Your Primary page style will automatically be applied to all of your payment pages unless you specify otherwise.

To apply a page style other than your Primary style, select a different one when creating your button. Just click Add More Options on the button creation page, and select a page style from the Custom Payment Page Style menu.

To change the page style for a button you have already created, you can modify the button's HTML code. replacing the value of the page_style variable with the Page Style Name of the style you wish to apply. The next time the button is clicked, its payment pages will appear in the new style.