On This Page

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

  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

  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

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

  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

  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.