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 the '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 pageare also applied to thepayment page. This helps to keep a consistent shopper journey through the payment pages.

File name limitations

  • File names are case-sensitive and must be in an alphanumeric format, no longer than 255 characters and may not contain special characters including hyphens.

  • If you do not name the uploaded file correctly, then our payment service is unable to find the required file when building and operating your Payment pages; and so we are substituting our standard file if needed (that is, the default version that we initially supplied).

Supported file types

The types of files that you can upload:

File extensionFile MIME type
bmpimage/bmp
comptext/html
text/plain
csstext/css
text/plain
gifimage/gif
htmapplication/xhtml+xml
text/html
text/plain
htmlapplication/xhtml+xml
text/html
text/plain
icoimage/bmp
image/gif
image/x-icon
jpegimage/jpeg
jpgimage/jpeg
pngimage/png
propertiestext/html
text/plain
templtext/html
text/plain
texttext/plain
tifimage/tif
txttext/plain
xmlapplication/xml
text/xml

Server space and file size

The limits to the number and size of files you can upload to the installation area within our secure server:

  • The maximum recommended size of file that you can upload is 500 KB

  • The default space allocation per installation is: 1.5 MB

These size limits enables you to operate most types of website shop, and to support various language versions of the payment pages.

Best practice: Avoid using large files, as these increase the time it takes for the Payment page to load into a shopper's browser.

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 are 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, click File Management.

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

  3. Click Upload. If the upload is successful, the file is 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 , 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, 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. 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