Get started

How to open the Payment Page Editor and start making changes.

Before you start

Things to be aware of before you begin.

Changes start in test mode only

Any changes you make using the Payment Page Editor are only applied to pages in the test environment. This protects your 'live' pages from untested changes. Then, when you are ready to make your changes live, you use theCopy to productionoption.

Many changes apply to two pages

Many of the changes you make to thepayment selection pagewill also be applied to thepayment page. This helps to keep a consistent shopper journey through the payment pages.

Open the Payment Page Editor

To open the Payment Page Editor:

  1. Log in toBusiness Manager(it doesn't matter if you're in test or production mode)

  2. Click SETUP in the left menu to be taken to the Installations page.

  3. Click Edit Payment Pages at the bottom, then choose the Installation ID you made a note of inGet your installation id.

    Note: You'll normally only have one website installation, but if you have more you can design the pages for each installation separately.

  4. Click Edit Payment Pages to open the Payment Page Editor. You are now on the main page.

Suggested tasks

Some simple and effective changes to get you started.

Add your company name

To add your company name to the payment pages:

  1. On the Edit Menu to the left, click Text.

  2. In the Title for the Payment pages field (middle), replace "Secure Payment Page" with your company name.

  3. Click Add text at the bottom.

Your changes will be saved in the test environment for the installation.

To view your changes:

  1. Click the Preview link at the top of the page to go to the Test Transaction Submission page.

  2. Click Submit (middle) and follow the steps inSend a test transaction. Your customised pages will be displayed.

Add your own logo in the header (top) area of the payment pages. You need to have a suitable logo prepared.

Upload your logo file

  1. On the File Menu to the left, click File Management.

  2. Click Choose File and find your logo. Click Open.

  3. Click the Upload button. If the upload is successful the file will be listed below in the Image Files area.

  4. Make a note of the whole filename (e.g "MyImage.gif").

Add your logo to the header

  1. On the Edit Menu to the left, click Header and Footer.

  2. Enter the filename of your logo in the Co-brand Image field.

    Note: Make sure you match the name exactly (including capitals, and the extension, such as .gif).

  3. Click Set Options. This saves your changes in the test environment for the installation.

To view your changes:

  1. Click the Preview link at the top of the page to go to the Test Transaction Submission page.

  2. Click Submit (middle) and follow the steps inSend a test transaction. Your customised pages will be displayed.

Change the colours

You can change the colours of backgrounds and text in the payment pages.

Note: You enter colours as hexadecimal codes, such as #FFFFFF for white and #000000 for black. For more information about hexadecimal colour values, please refer to http://www.w3.org/TR/css3-color/.

To change the background colour of the payment pages:

  1. On the Edit Menu to the left, click Colours.

  2. Enter the hexadecimal code for your chosen colour in the Page body field - for example, #FFFFCC is pastel yellow.

    Note: To see more detail (and a labelled example) about the colours page, click the "eye" button to the right of the field.

  3. Click Set Colours at the bottom. This saves your changes in the test environment for the installation.

To view your changes:

  1. Click the Preview link at the top of the page to go to the Test Transaction Submission page.

  2. Click Submit (middle) and follow the steps inSend a test transaction. Your customised pages will be displayed.

Change your shopper confirmation email

A confirmation email is sent when a transaction is successfully completed, such as our standard (test) one shown below.

You can customise the contents of both the text and HTML versions of this email by using theConfirmation Emailscreen in the Payment Page Editor.

../resources/images/email_thumb_350_0.png