Customise look and feel | Payment Page Designer

Payment Page Designer

You can use the Payment Page Designer to add your branding and to customise the look and feel of the Hosted Payment Pages.

Watch the video

With the Payment Page Designer, you can:

  • Customise the Worldpay public cascading stylesheet (CSS). Add your logo.
  • Hide or display user interface (UI) elements such as buttons, menus and fields.
  • Define aspects of how you send and receive parameters for the payments you submit to us.

Start the Payment Page Designer

To access the Payment Page Designer, log into the Production Merchant Interface (MI).

The Payment Page Designer is not accessible through the Test Merchant Interface.

From the production environment, you can publish your customisations to either the Sandbox test environment or the production environment.

To start the Payment Page Designer:

  1. Log in to the Production Merchant Interface, and select Installations.

  2. Select Payment Page Designer.

    Start Payment Page Designer button

  3. From here you can carry out the following activities:

Your Payment Page Designer session will time out if you do not complete an action within 30 minutes.

Edit and upload assets

An asset is a logo or a CSS file you can use to alter the appearance of your Hosted Payment Pages. Your assets can be used across multiple channels (installation IDs). By default, we provide a Worldpay logo and public cascading stylesheet (CSS) in the assets library. You must use the Worldpay public CSS to change the styles of the Hosted Payment Pages. You can upload and use your own logo.

To upload assets:

  1. Click the Manage Assets tab.

  2. To upload a logo, select the Logos tab.

  3. To edit the public CSS file, on the Stylesheets tab, click View for the desired public CSS entry.

    You can only upload an edited version of our public CSS. The upload of any other CSS file is prohibited.

  4. To upload assets, do one of the following:

    • Drag-and-drop your file into the relevant marked section.

    • Click in the marked section to upload.

  5. Once you have uploaded an asset, you can select it for use for a specific installation ID, also called a channel. For more information, see Specify assets for a channel (installation ID).

    Restrictions

    The following restrictions apply when you upload an asset:

Asset type Maximum dimensions Allowed file types Maximum file size

Logo

Width: 700 pixels

Height: 200 pixels

.gif

.jpg

.png

.jpeg

512 KB
Stylesheet N/A .css 30 KB

    To ensure an optimal user experience, we have limited the number of properties that can be edited in the public CSS. You can update/edit the following properties in the public CSS file:

    • font-family

    • background-colour

    • colour

    • font-weight

    • font icons

    • border

    • border-width

    • border-style

    • border-radius

    • border-top-left-radius

    • border-top-right-radius

    • border-bottom-left-radius

    • border-bottom-right-radius

    • font icons

      You can edit the colour of font icons. These icons include:

      • Expand/collapse field icons

      • Navigation icons - To scroll through payment methods in a carousel type of webpage feature

      • Field validation indicator icons - These show a tick (check mark) for correct, and a cross for incorrect

    The use of functions in the public CSS is restricted to the rgb function. You can use the rgb function with or as a property value. For example: rgb(10, 20, 30). All other CSS functions are prohibited.

    When you upload an asset, we perform validation checks on the asset. If your upload is not successful, you will receive an error message detailing the reasons for the failure.

Delete assets

Logo and CSS file assets can be deleted, which will remove them from the Payment Page Designer entirely.

To delete assets:

  1. Click the Manage Assets tab.

  2. Select the required tab, depending on the asset requiring deleting – Logo or Stylesheet (CSS file).

  3. Click the Delete button of the asset you want to delete, shown in the Options column in the below example.

If the ‘Delete’ button is greyed out, it means the asset is in use and cannot be deleted.

    A confirmation message appears (example below). Click OK to confirm.

CSS file error handling

Improved CSS error messaging is now displayed on page if a CSS file upload fails (highlighted in the below example). This provides line item detail of the errors identified, making it much easier to troubleshoot issues.

ddddd

Customise the Hosted Payment Pages properties

To customise the Hosted Payment Pages, you make choices about:

  • User interface (UI) elements
  • Parameters that you send to and receive from us

These customisable items are called properties.

To edit properties for the Hosted Payment Pages:

  1. Click Edit Payment Pages and then select a channel (installation ID).

  2. Select the Properties tab.

  3. To edit a property on the Hosted Payment Page, select a value from the drop-down menu.

    Your selection is automatically saved when either of the following happens:

    • Two seconds have elapsed.

    • You navigate away from the field.

    Your changes are automatically saved to the Design environment.

    Changes to properties are not visible in the preview.

Edit properties

Make selections about which user interface (UI) elements to hide or display.

Edit page features
UI element Description Gateway default

Show country list

Displays a drop-down list of countries on the payment pages.

False. Hide country list.

Show language list

Displays a drop-down list of languages on the payment pages.

False. Hide language list.

Show Powered by Worldpay

The 'Powered by Worldpay' logo is displayed while content is being displayed on a payment page.

True. The 'Powered by Worldpay' logo is enabled.

Show cancel button

The cancel button lets the shopper cancel the payment.

True. The cancel button is displayed.

Show change payment method button

Returns the shopper to the payment method selection page.

True. The Change payment method button is displayed.

A Back button may be displayed instead of a Change payment method button.

Show page header and logo

When set to True, we display the selected logo and associated space around the logo.

True. The selected logo with associated space is displayed.

Show page footer

When set to True, Worldpay copyright information is displayed in the footer.

True. The footer containing Worldpay copyright information is displayed.

Show card icons

When set to True, logos for card payments are displayed.

You may want to hide the card icons if you are displaying the payment pages in an iframe and you already provide the card types in your own website.

True. The card icons are displayed.

Change payment button text

Customers can now customise the text displayed on the 'Make Payment' button with a variety of alternatives available through a drop-down menu:

  • Submit Payment

  • Buy Now

  • Pay Now

  • Pay

  • Save Account

  • Save Card

  • Save

  • Add

  • Add Card

  • Book Now

Make Payment

Edit address and contact display settings

Make selections to hide or display address and contact details fields. If displayed, indicate whether they are editable.

Edit merchant configuration

Customise settings about the parameters that you send to and receive from us for payments.

During the payment process, parameters can be optionally appended to one or both of the following URLs:

Redirect URL

Once we receive your initial order, we send a response containing a redirect URL. You use this redirect URL to redirect your customer to the Hosted Payment Pages.

You can optionally append standard Worldpay parameters or your own custom parameters to the redirect URL.

Result URL When we receive the payment result, we redirect your customer to a result page. We recommend that you provide us with your custom result URLs.
Edit merchant configuration
Field Type of redirect Description Gateway default

Send URL parameters

result URL

Indicate if you want us to append a basic set of Worldpay parameters to the result URL.

When this feature is enabled, the following parameters are appended to the result URL:

  • Order key
  • Payment status
  • Payment amount
  • Payment currency
  • Method authentication code (MAC)

In order to successfully receive the additional Worldpay parameters, a MAC secret must to be set up, which is optional by default. Please refer to the Securing payments section of the Worldwide Payment Gateway Integration Guide, for guidance on setting the MAC.

False. By default, the result URL does not contain any appended parameters.

When set to True, we append the Worldpay parameters to the result URL.

Extra URL parameters

redirect URL

Specify one or more of your own custom parameters to append to the redirect URL. For example, if you use a third party shopping cart, a reference such as 'cartID' may be appended.

We do not use custom append parameters in the payment process, nor are they returned in the result URL.

You will only need to enter the parameter itself: prefixes (for example =&) are not required.

Separate multiple parameters with spaces.

The property character limit is 40.

If you submit an order with a custom parameter that has not been registered, your shopper will receive an error and will not be able to complete the order.

No extra URL parameters are appended unless specified.

Disable strict redirect URLs

result URL

When we return the shopper to your website with the payment result, we can include additional information such as the result URL, payment status and mac.

If you include a fragment in your result URL, you can specify the order in which we send you the additional information.

To receive a basic set of Worldpay parameters with the result URL, you must set Send URL parameters to True.

A fragment is an identifier that refers to a resource that is subordinate to another primary resource within the AngularJs javascript framework, on which most modern-day Single Page applications (SPA) are run. The javascript framework may append the fragment identifier (#) in between the URL for reference purposes, which can cause the result URL to be malformed.

True. We append the additional information after the fragment.

When set to false, we append the additional information before the fragment. This means that the additional information is placed between the URL and the fragment.

Specify assets for a channel (installation ID)

To use assets (logo and stylesheet) that you have uploaded to the Payment Page Designer, you need to specify them for use with a channel (installation ID).

To specify assets for a channel:

  1. Click the Look and feel tab.

  2. Select from your uploaded logos and stylesheets in the relevant drop-down list.

    Your selection is automatically saved when either of the following happens:

    • Two seconds have elapsed.

    • You navigate away from the field.

    The logo or stylesheet you selected is automatically applied to the Design environment.

    Note: If you wish to revert to the default Worldpay look and feel, you must reset your selections to Please choose a logo and Please choose a stylesheet.

  3. Select the Redirect or Embedded buttons above the preview pane to toggle between the previews for each option.

Preview

The Preview option enables you to see how your customisation renders on page, so you can get a feel for how it looks.

The Redirect or Embedded buttons above the preview pane toggle between the previews for each option.

Only the card capture page is visible. Note that the preview doesn’t reflect all account configuration and payment page properties currently. It should be used as a visual aid for how your logo and stylesheet (CSS) have rendered on page. We strongly recommend that sufficient testing is completed in Secure Test (Sandbox) before publishing to Production.

Publish your changes

Once you have completed your design, you can perform a two-step process to publish your changes to the production environment.

  1. On the Edit payment pages tab, click the Publish tab.

    By default, any changes you have made are automatically saved to the Design environment.

  2. To publish your design to the test environment (Sandbox), click Promote.

    Your changes will be available in Sandbox for testing after approximately five minutes.

    Use the Sandbox environment to validate the look and feel and page functionality. Only after you are satisfied with your testing should the changes be promoted to production.

  3. To publish your customisations to the production environment, click Promote. Your changes will be available in production after approximately five minutes.

    Your changes will now be live.

    During publishing, the Promote buttons will be unavailable and you will be unable to make further changes to the same channel.