# Payment Page Configuration

This guide is a supplement to the Saferpay Backoffice user manual. It describes the configuration options available for the creation of templates for the Saferpay Payment Page in the Saferpay Backoffice.

A Payment Page Configuration can be used to amend the look and technical parameters for the Saferpay Payment Page without any additional programming work. The JSON API PaymentPage/Initialize parameters listed here in `monospace` are described in the [Saferpay Payment API](https://docs.saferpay.com/home/interfaces/payment-api) documentation.

## Prerequisites

The prerequisites for using and configuring the Saferpay Payment Page are as follows:

* A corresponding Saferpay eCommerce license and therefore a valid ID with a user name and password for the Saferpay system.
* At least one active Saferpay terminal via which payments can be made and the associated Saferpay `CustomerId` and `TerminalId`.
* A valid acceptance contract for credit cards or other means of payment.

## Creating a Payment Page Configuration

After logging into the Saferpay Backoffice, select the "Settings" area to arrive at the "Payment Page configuration":

![](https://3537448238-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fzpi9teY7Tm2pCZ1Bw8zO%2Fuploads%2FVyx2nN0E9UpPmYTECbjC%2FSettingsMenu_EN.png?alt=media\&token=d13ffe96-3197-46a8-9353-5ca470914020)

A short introduction will be displayed:

![](https://3537448238-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fzpi9teY7Tm2pCZ1Bw8zO%2Fuploads%2FVo0uMa3YRXElLbX5dB4c%2FPPConfig_IntroText_2024-08-29_11-55-51.png?alt=media\&token=1f32f29a-cd2d-489e-8de0-f9e0a52dcf5b)

Click on the "Create new configuration" button to create a new template. The following screen is displayed:

![](https://3537448238-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fzpi9teY7Tm2pCZ1Bw8zO%2Fuploads%2FjTb1q3o67beUMvZDEruv%2FPPConfig_Create_tiny_2024-08-29_11-03-53.png?alt=media\&token=46151096-7d15-4298-bac8-3bb61e5f422c)

## Configuration Options

The customization options are divided into different areas. Changes to the payment page configuration are immediately displayed in the [preview window](#preview).

### Styling

This section enables you to upload your own logo to be displayed on the payment page and to set the colors and fonts for the payment page.

![](https://3537448238-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fzpi9teY7Tm2pCZ1Bw8zO%2Fuploads%2FIHBSpKMuIqZ5GCUZy1Ha%2FPPConfig_Styling_EN.png?alt=media\&token=ce87bf25-0dc4-48e6-827e-4615d38ee1b1)

{% hint style="info" %}
Supported file-types are GIF, JPG, JPEG, PNG, SVG and WEBP with a maximum file size of 1MB.\
The pictures will be automatically scaled.\
We recommend to use a **WEBP** file if possible.
{% endhint %}

### E-mail notification

You can enable payment notification emails and remove personal data such as name, address, IBAN, etc. 

![](https://3537448238-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fzpi9teY7Tm2pCZ1Bw8zO%2Fuploads%2F8RR9txpwKb6oeB6CbyWU%2FPPConfig_EmailNotification_2024-08-29_11-17-11.png?alt=media\&token=bc6cfb32-bd6f-49d1-8742-bb88c3e3e1ae)

### Terms

The label for payment process term and for the pay button can be adapted to your requirements.

<figure><img src="https://3537448238-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fzpi9teY7Tm2pCZ1Bw8zO%2Fuploads%2F31DRwHOmLsLEY8HSpG5w%2FPPConfig_Terms_2024-08-29_11-18-37.png?alt=media&#x26;token=e7884ebf-bc22-444f-a668-6bda99eac144" alt=""><figcaption></figcaption></figure>

### Preview

Changes to the payment page configuration are immediately displayed in the preview window.

<figure><img src="https://3537448238-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fzpi9teY7Tm2pCZ1Bw8zO%2Fuploads%2FPZrbAf9DfdnyS6iTtKQl%2FPPConfig_Preview_2024-08-29_11-13-11.png?alt=media&#x26;token=daabd5af-b7fd-4e85-ac54-ed29f91851cb" alt=""><figcaption></figcaption></figure>

## Configuration Overview

As soon as a configuration has been created, it will be added to the overview:

![](https://3537448238-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MJbIA8fSCwoMDsZw5y-%2F-McjEdblz13_8i06jRPO%2F-McjEsM-O7vyxUOqVJXb%2F7_PaymentPageCofig_Overview.png?alt=media\&token=bae1f51c-30bb-4bb3-a16e-35688b09ca2e)

1. Click to view details of the configuration.
2. Displays the `ConfigSet` value to be entered to use a configuration.
3. If a configuration has been set as the "Default", it will always be used without the need to state the `ConfigSet` parameter.
4. Displays the status of a configuration.
5. Deletes an existing configuration.
6. Produces a copy of an existing configuration.