Payment pages

For merchants with a custom integration via JSON API MultiSafepay, we also offers dynamic styling of the templates. This means you can change the look and feel of a payment page per transaction.

There are two options to dynamically style the payment page:

1. Load a saved template

Whenever you have stored a template, you can call it through the first-level JSON object “template_id”: “value of the template”.

2. Provide ‘template’ object structure within the transaction request

MultiSafepay also offers real-time styling of the templates. This means you can change the look and feel of a payment page per transaction on the fly. You need to add the following to your transaction request:

    "template": {
        "version": "1.0",
        "settings": {
            "hide_logo": false,
            "hide_flags": false,
            "hide_powered": false,
            "hide_cart": false,
            "hide_btn_cancel": false,
            "hide_cc_logos": false,
            "hide_btn_all_methods": false
        },
        "header": {
            "logo": {
                "image": ""
            },
            "cover": {
                "image": ""
            },
            "background": "",
            "text": "#333"
        },
        "body": {
            "text": "#ab141b",
            "background": "#fdfcfc",
            "link": {
                "text": "#00acf1",
                "hover": {
                    "text": "",
                    "border": ""
                }
            }
        },
        "container": {
            "text": "#ffffff",
            "label": "#a4a3a3",
            "background": "#080808",
            "link": {
                "text": ""
            }
        },
        "cart": {
            "text": "#333333",
            "label": "#8b8b8b",
            "background": "#ffffff",
            "border": "#333333"
        },
        "payment_form": {
            "text": "#ab141b",
            "background": "#ffffff",
            "border": "#333333",
            "inputs": {
                "border": "#bdbbbb",
                "label": "#8b8b8b"
            }
        },
        "buttons": {
            "payment_method": {
                "background": "#ffffff",
                "text": "#ab141b",
                "border": "#333333",
                "hover": {
                    "background": "#ab141b",
                    "text": "#ffffff",
                    "border": ""
                },
                "active": {
                    "background": "",
                    "text": "",
                    "border": ""
                }
            },
            "secondary": {
                "background": "#00acf1",
                "text": "#ffffff",
                "hover": {
                    "background": "",
                    "text": ""
                }
            },
            "primary": {
                "background": "#cccccc",
                "text": "#ffffff",
                "hover": {
                    "background": "",
                    "text": ""
                }
            }
        }
    }

A lot of changes have been made with the release of our V2 payment page. Although a merchant can still use the V1 payment page without problems, we strongly recommend to take the step and change over to our newest payment page version to make use of the MultiSafepay platform without limitations.

Payment methods

Some of the MultiSafepay payment methods and gift cards are only available on the V2 payment page. When new payment methods get added to the MultiSafepay platform, we cannot guarantee that these payment methods will work on the V1 version.

Request and responses

The requests and responses from and to the MultiSafepay server, are processed quicker on the V2 payment page compared to the V1 payment page.

Responsive

The responsive design of the V2 payment page is developed to be used across different types of devices and browsers. Whether your customer is paying on a desktop,tablet or mobile, give your customers a seemless customer experience.

Dynamic template

One of our main V2 futures, is the possibility to implement the dynamic payment template into your API integration. This way you can customize the payment page without any hassle. For more information visit the following link: https://docs.multisafepay.com/api/#dynamic-template

Countries/translations

The V2 payment page supports 5 more languages which makes the total count 19 languages! Check our language support page to see the full list of available languages

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.

MultiSafepay is unable to customize payment pages or email templates for you, although if you do encounter functionality issues, please contact us at [email protected]

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 into your 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 menu 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 its corresponding website via the Submit website button. If you have more than one template, use the Set default option to make this the default template. You can also give this template a name (later referred to as template_id). 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 and 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.

When the country of your customer is not fully clear or your backend does not allow you to provide for the correct country code, you might want to offer all available payment methods directly on our payment page. This is done by following these steps:

1. Retrieve the payment link by creating an order
2. Put &methods=all behind the payment link
3. Redirect your customer to this adapted link.

• The payment link should now look like: https://testpayv2.multisafepay.com/connect/822LtiM8RjN313Yo5C46E2cjqmuL5qVfc7w/?lang=en_NL Please note that this an example, the link might not work

Notes: This is not a standard option in our plugins. This will only work on our new payment pages which start with payv2. If you see no option to switch to our new payment pages, please contact us at [email protected]

When the customer selects Visa as their desired payment method, we have to show the city and country where the webshop is located, as required by Visa itself. This measure aims to increase reliability, transparency and safety for the customer.

MultiSafepay provides two versions of payment pages:

• ConnectV1 (starts with pay.multisafepay.com)
• ConnectV2 (starts with payv2.multisafepay.com).

With the latter, you can use all new payment methods and use our editor for your own styling.