Custom Checkout Appearance {#sa-custom-checkout-appearance}
===========================================================

Customize the appearance and branding of the `Secure Acceptance` checkout pages by choosing a background color, font, and text color. Upload a logo or image, and align it within the header or footer.  
`Cybersource` recommends that you preview your changes in the Image Preview window.  
To display an image as the header banner of the payment form, the image dimensions must not exceed 840 (width) x 60 (height) pixels and the image size must not exceed 100 kB. To display a small logo within the header banner, the logo height must not exceed 60 pixels. The image file must be GIF, JPEG, or PNG.

Changing the Header Content {#sa-change-header-content}
=======================================================

1. In the left navigation panel, choose Payment Configuration \> `Secure Acceptance` Settings. The `Secure Acceptance` Settings page appears.
2. Choose a profile. The General Settings page appears.
3. Click Branding. The Branding page appears.
4. Check Display Header.
5. Click the header color icon.
6. Choose a color in one of two ways:
   * Enter a hexadecimal value for the header color of the payment form.
   * Click within the header color palette to choose a color. Click the color icon to confirm your selection.
7. Click Browse to upload the image to display as the header banner or as a logo within the header banner.
8. Choose the alignment option for the image or logo: left-aligned, centered, or right-aligned.
9. Click Save.

Changing the Body Color and Font Settings {#sa-change-body-color-font-settings}
===============================================================================

1. In the left navigation panel, choose Payment Configuration \> `Secure Acceptance` Settings. The `Secure Acceptance` Settings page appears.
2. Choose a profile. The General Settings page appears.
3. Click Branding. The Branding page appears.
4. Choose a background color for the main body in one of two ways:
   * Enter a hexadecimal value for the background color.
   * Click within the header color palette to choose a color. Click the color icon to confirm your selection.
5. Select a text font from the drop-down list.
6. Choose a text color in one of two ways:
   * Enter a hexadecimal value for the text color.
   * Click within the header color palette to choose a color. Click the color icon to confirm your selection.
7. Click Save.
8. Click Set to Default to restore all the default settings on this page.

Changing the Total Amount Background and Text Color {#sa-change-background-text-color-total-amt}
================================================================================================

> If you are implementing the iframe embedded version of ` Hosted Checkout Integration `, the total amount figure is not displayed within the iframe. Any settings you select below are ignored.

1. In the left navigation panel, choose Payment Configuration \> `Secure Acceptance` Settings. The `Secure Acceptance` Settings page appears.
2. Choose a profile. The General Settings page appears.
3. Click Branding. The Branding page appears.
4. Choose a background color in one of two ways:
   * Enter a hexadecimal value for the background color.
   * Click within the header color palette to choose a color. Click the color icon to confirm your selection.
5. Choose a text color in one of two ways:
   * Enter a hexadecimal value for the text color of the total amount.
   * Click within the header color palette to choose a color. Click the color icon to confirm your selection.
6. Click Save.
7. Click Set to Default to restore all the default settings on this page.

Changing the Progress Bar Color {#sa-change-progress-bar-color}
===============================================================

1. In the left navigation panel, choose Payment Configuration \> `Secure Acceptance` Settings. The `Secure Acceptance` Settings page appears.
2. Choose a profile. The General Settings page appears.
3. Click Branding. The Branding page appears.
4. Choose a color in one of two ways:
   * Enter a hexadecimal value for the color of the progress bar.
   * Click within the header color palette to choose a color. Click the color icon to confirm your selection.
5. Click Save.
6. Click Set to Default to restore all the default settings on this page.

Changing the Color and Text on the Pay or Finish Button {#sa-change-color-text-pay-or-finish-button}
====================================================================================================

1. In the left navigation panel, choose Payment Configuration \> `Secure Acceptance` Settings. The `Secure Acceptance` Settings page appears.
2. Choose a profile. The General Settings page appears.
3. Click Branding. The Branding page appears.
4. Choose a background color of the pay or the finish button in one of two ways:
   * Enter a hexadecimal value for the background color.
   * Click within the header color palette to choose a color. Click the color icon to confirm your selection.
5. Choose a color of the pay or the finish button text in one of two ways:
   * Enter a hexadecimal value for the text.
   * Click within the header color palette to choose a color. Click the icon at the bottom right to confirm your selection.
6. Check Change Button text. A text box appears for the pay button.
7. Enter the text you want displayed on the pay button. This button text is required.
8. Enter the text you want displayed on the finish button. This button text is required.
9. Click Save.
10. Click Set to Default to restore all the default settings on this page.

Changing the Footer Color and Uploading a Small Logo or Image {#sa-change-footer-color-upload-small-logo-image}
===============================================================================================================

1. In the left navigation panel, choose Payment Configuration \> `Secure Acceptance` Settings. The `Secure Acceptance` Settings page appears.

2. Choose a profile. The General Settings page appears.

3. Click Branding. The Branding page appears.

4. Check Display Footer.

5. Choose a color in one of two ways:

   * Enter a hexadecimal value for the footer color of the payment form.
   * Click within the header color palette to choose a color. Click the color icon to confirm your selection.
6. Click Browse to upload a footer logo. Upload the image that you want displayed within the footer of the payment form.

   #### ADDITIONAL INFORMATION

   To display a small logo or image in the footer of the payment form, the file must not exceed 840 (width) x 60 (height) pixels. The image file must be GIF, JPEG, or PNG.

7. Choose the alignment option for the image: left-aligned, centered, or right-aligned.

8. Click Save.

9. Click Set to Default to restore all the default settings on this page.