How can I style the Payment pages?

MultiSafepay’s Payment pages provide the quickest, easiest and most secure way to accept online payments. By default, your Payment pages use MultiSafepay’s renowned brand and styling. However, we recommend that you personally tailor the Payment pages in a manner that is consistent with your own website. This is very easy, and can be done via MultiSafepay Control

Using the editor

In your MultiSafepay Control, use the editor to easily change the look and feel of the Payment page template. To adjust the template, please follow the following steps:

  1. Login to MultiSafepay Control
  2. Navigate to Settings / Website Settings and select Website
  3. Click on the Template button.

In the editor, you can style nearly all elements on the Payment pages. Via the left menum you can change the colour of e.g. the background, the footer, buttons (incl. mouseover) and cart details. For the header, you can choose to pick a logo and use either an image or color for the background.

1. Choosing colors

In the left menu, you will see a color chart when you click on the field of an element. You can also directly use a Hex color in the input field next to it.

2. Selecting a logo or header image

Before you can select a file for the logo or header background, you need to upload it under Settings / Payment page Templates. After uploading, it will automatically appear in the dropdown list on the editor. The processing of an uploaded image might take up to 5 minutes. Go to the upload page

3. Loading and Saving template

Whenever you finished a template, you can save it for this website via the Submit website button. If you have more than one template, use the set default to make this the default template. You can also give this template a name (later referred to as _templateid). Via the top left button Edit template you can select previously saved templates.

If you wish to load a template from another website within your account, you can load this via the Apply style from button in the top right corner. Don’t forget to save this to the website you are currently editing.

Dynamic templates

For merchants with a custom integration via MultiSafepay API, MultiSafepay (?) also offers dynamic styling of the templates. This means you can change the look & feel of a Payment page per transaction. There are two options to dynamically style the Payment page:

  1. Load a saved template via object _templateid
  2. Provide template object structure within the transaction request. You can still use the editor to generate the object structure for the transaction request. To do this, first generate your template and then switch to the tab </> Api view code. Next to the code you can also find the _templateid here.

For more information visit the API Reference.