Customizing the Hosted Payment Form

When using the payment gateway hosted payment form, you can also configure the following settings to match the look of your website:

• The color of the text

• The color of link text

• The background color

• The header text (this can include HTML)

• The footer text (this can include HTML)

To configure the look of the payment gateway hosted payment form:

1. Log on to the Merchant Interface at https://secure.authorize.net

2. Click Settings under Account in the main menu on the left

3. Click Payment Form in the Transaction Submission section

4. Click on any of the provided links to configure the different elements of the payment form

For specific instructions, click the Help link at the top right corner of each Merchant Interface page.

Basic HTML Guide

When customizing headers and/or footers for your hosted payment form and receipt page, you can use the following basic hypertext markup language (HTML) tags and codes to specify font and paragraph formatting and create hyperlinks. Simply use the following tags around your text, as shown in the examples.

There are many ways to use HTML code in the payment form and receipt page headers and footers. You might choose to reference a cascading style sheet (CSS). A CSS is a separate HTML document that defines formatting styles such as font and text color and size. Please contact your Web developer with any questions you have about using HTML tags and codes, or about using a CSS in your form headers and footers.

Logos and Background Images

If you would like to use a logo and/or background image on the hosted payment form, image files must be uploaded to the payment gateway server in order to be displayed properly. The location of the logo and background images on the payment gateway server must be referenced in the header or footer.

To upload a logo or background image to the payment gateway:

1. Save the file in any of the following formats: .gif, .jpg, .png, or .swf (other file formats will not be accepted).

2. If needed, rename the logo or background image according to the following Authorize.Net naming convention:

   • Only use letters, numbers and/or the underscore character

   • Do not use spaces

   • You must include your merchant ID and one of the following prefixes for identification purposes: logo_, background_, header_, footer. (If you do not know your merchant ID, refer to the Merchant Profile page in the Account menu of the Merchant Interface.
     
     Good Examples:                                          Bad Examples:
     logo_merchantIDhere.jpg                          logo.jpg
     background_merchantIDhere.png           background.jpg
     header_merchantIDhere.swf                    online forms.png
     footer_merchantIDhere.gif

3. Send the logo and/or background file in an email to support@authorize.net with the subject line “Payment Form Image Upload.” The images are then uploaded to a secure payment gateway server.

4. To reference the logo or background image, add the following HTML to the payment form and/or receipt page header or footer:

Note: The maximum character length allowed when configuring header or footer text in the Merchant Interface is 255. If you are including a lot of text, links or graphics, you will need to arrange with your Web developer to include the header information as part of the integration code. There is no character limit when configuring payment form header text in the integration code.

If you are not comfortable uploading an image to the payment gateway or adding HTML to the form header or footer yourself, you can ask your Web developer for help.