Use this screen to select the colors and font styles you want to use to display text, text links, and the background of the payment gateway hosted payment form and receipt page. Make your choices from the available options in the drop-down list. Or, if the color you want is not listed in the drop-down list, you can enter the color’s hexadecimal code in the text fields.
This page has three sections:
General—settings in this section apply to both the hosted payment form and the receipt page.
Payment Form Heading—settings in this section apply only to the payment form headings (these are the headings “Order Information,” “Payment Information,” “Billing Information” and "Shipping Information")
Receipt Page Heading—settings in this section apply onlyl to the receipt page headings (these are the headings”Order Information,” and the card or eCheck number).
The default settings are:
Text: Arial 12 pixels, black
Links: blue
Background: white
Payment Form Heading: same font family, size and color as the general text, but bold
Receipt Page Heading: same font family and size as the payment form heading.
Receipt Page Heading color and background color: The default background color for receipt page headings is the same as the text color specified for the payment form text color. The default text color for the receipt page headings is the background color specified in the general settings.
If you change the default settings, it is recommended you preview the payment form and receipt page to make sure they look as you intended.
General Settings
To change the font and color settings for your payment form and receipt page:
Step 1: On the Text line, select a font from the Font drop-down list box.
Step 2: Select a font size from the Size (px) drop-down list box. Pixels are specified instead of points, because pixels behave more consistently in browsers.
Step 3: If you want the text to be a different color than the default (black), select a text color from the Color drop-down list; or, enter a hexadecimal value in the HEX # text field. Before you can enter a HEX value, you must first select HEX Color Code from the Color drop-down list box.
Step 4: Select a color for links from the Color drop-down list, or enter a hexadecimal value in the HEX # text field. Before you can enter a HEX value, you must first select HEX Color Code from the Color drop-down list box.
Step 5: Select a color for the background from the Color drop-down list on the background line, or enter a hexadecimal value in the HEX # text field. Before you can enter a HEX value, you must first select HEX Color Code from the Color drop-down list box.
Step 6: If you wish, you can preview the settings by clicking the Preview button at the bottom of the page. Your Payment Form pops up in a separate browser window. To preview the receipt page, click Submit on the payment form.
Step 7: Click Submit. A confirmation message indicates that your settings have been successfully applied.
Note: If you choose to use the Simple Checkout feature, the same general settings for the hosted payment form also apply to the order page for Simple Checkout.
Payment Form Heading
To change colors and fonts for the payment form heading:
Step 1: Select a font name from the Font drop-down list box.
Step 2: Select a font size from the Size (px) drop-down list box.
Step 3: Select a font style from the Style drop-down list box.
Step 4: Select a font color from the Color drop-down list box. The default color for the heading text is the same as the text on the rest of the page. If you don’t see the color you want, enter a hexadecimal value in the HEX# text field. Before you can enter a HEX value, you must first select HEX Color Code from the Color drop-down list box.
Step 5: If you wish, you can preview the settings by clicking the Preview button at the bottom of the page. Your Payment Form pops up in a separate browser window.
Step 6: Click Submit. A confirmation message indicates that your settings have been successfully applied.
Receipt Page Heading
To change colors and fonts for the receipt page heading:
Step 1: Select a font name from the Font drop-down list box.
Step 2: Select a font size from the Size (px) drop-down list box.
Step 3: Select a font style from the Style drop-down list box.
Step 4: To change the default, select a text color in the Color drop-down list box, and a background color in the Background Color drop-down list box. If you don’t see the color you want, enter a hexadecimal value in the HEX# text field. Before you can enter a HEX value, you must first select HEX Color Code from the Color drop-down list box.
Step 5: Preview the settings by clicking the Preview button at the bottom of the page. Your Payment Form pops up in a separate browser window. To see the receipt page, click Submit on the payment form. Your receipt page opens. Close the browser window to return to the Colors and Fonts settings page.
Step 6: Click Submit. A confirmation message indicates that your settings have been successfully applied.