Changes for the Saferpay Hosted Forms, Fields and Payment Page

Due to ongoing modernization efforts, to keep the look and feel of Saferpay state of the art, some changes may need merchant attention.

This site will discuss the changes and will help you to evaluate the impact on the merchants system, if any.

What is changing? Am I affected?

Saferpay will introduce a new and modernized look to its Payment Page, which will also impact the functionality and look of the Saferpay Fields, the Hosted Card Entry Form, as well as the Hosted Card Register Form in certain ways.

Since it is a technical Integration topic, you should contact your developer/administrator, if you feel unsure about all this.

The impact of this change has to be evaluated on merchant-side. Unfortunately, Worldline Saferpay is unable to do this check for you.

Saferpay can be integrated in multiple ways and not all are impacted. In order to find out, if this impacts you, you need to know, if you use Saferpay in one of the following ways.

Payment Page

We are excited to introduce our new and modernized Payment Page, which has been optimized to minimize user-interactions and for a better compatibility and look on mobile devices.

This will however also mean, that the structure and look is going to change. You need to check, whether your integration relies on the old look in any way, or not.

Furthermore, Saferpay will completely remove the support for CSS Styling, which has been marked as depricated, since May 2020.

If you have been using the parameter CssUrl up until now, it will stop working. Saferpay will ignore any CSS, that is submitted.

This is applied retroactively to all SpecVersions, not just new ones.

If you are using CssUrl with the Payment Page, this change will affect you, no matter what.

Any styling, that is applied via a Payment Page Configuration, will remain unaffected.

Hosted Forms and Saferpay Fields

With the upcoming release, we will also apply small CSS changes to the Saferpay Fields as well as the Hosted Forms. As these are intended to be styled by you, this change could have impact on your currently applied look.

You need to check your integration and see, if these changes break your current styling, or not.

The following CSS-code will be changed specifically:

Old

sfp-card-number, sfp-card-exp, sfp-card-cvc, sfp-card-name
{
  display: inline;
  position: static;
  width: auto;
}

New

sfp-card-number, sfp-card-exp, sfp-card-cvc, sfp-card-name
{
  display: inline-block;
  position: relative;
  width: 100%;
}

Old

.cardnumber__logos
{
  height: 100%;
  position: absolute;
  right: 0;
  z-index: 1;
}

New

.cardnumber__logos
{
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}

This change breaks my style. What can I do?

You have two options to deal with this change:

• You change your CSS in order to incorporate the changes.

• You add the old CSS (see above) to yours, in order to overwrite the change and set everything to how it was previously.

Please also see the chapter on CSS Styling and the Saferpay Fields.

When will the change be deployed?

This change will go live in two waves:

March 19th 2024

First wave of merchants will be migrated to the new Payment Page.

All merchants will receive the changes for the Saferpay Fields and Hosted Forms.

March 26th 2024

Second wave of merchants will be migrated to the new Payment Page.

If you havent noticed any changes with the first wave, you'll be migrated with the second.

Can I test this change beforehand?

Yes!

This change is already deployed on the Saferpay Test Environment on March 1st 2024 and can be tested there. If you haven't already, you can register for a test account and see the changes for yourself.

Just configure your current implementation, so it runs on the Saferpay test-environment and go through your normal checkout.

Who can I contact on Worldline side?

Do you still have questions, or concerns?

Please feel free to contact our Integration Support.