# 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,](/home/integration-guide/licences-and-interfaces/payment-page.md) which will also impact the functionality and look of the [Saferpay Fields](/home/integration-guide/licences-and-interfaces/saferpay-fields.md), the [Hosted Card Entry Form](/home/integration-guide/licences-and-interfaces/transaction-interface.md), as well as the [Hosted Card Register Form](/home/integration-guide/licences-and-interfaces/secure-card-data.md#standalone-secure-card-data-registration) in certain ways.

{% hint style="warning" %}
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.
{% endhint %}

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.

<figure><img src="/files/191miUh6SKqXNvZcW550" alt=""><figcaption></figcaption></figure>

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](/home/integration-guide/general-information/iframe-integration-and-css.md), which has been marked as depricated, since May 2020.&#x20;

{% hint style="warning" %}
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.**
{% endhint %}

{% hint style="success" %}
Any styling, that is applied via a [Payment Page Configuration](/home/interfaces/backoffice/settings/payment-page-configuration.md), will remain unaffected.
{% endhint %}

### 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:

{% tabs %}
{% tab title="Old" %}

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

{% endtab %}

{% tab title="New" %}

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

{% endtab %}
{% endtabs %}

{% tabs %}
{% tab title="Old" %}

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

{% endtab %}

{% tab title="New" %}

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

{% endtab %}
{% endtabs %}

#### 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](/home/integration-guide/general-information/iframe-integration-and-css.md) and [the Saferpay Fields](/home/integration-guide/licences-and-interfaces/saferpay-fields.md).

## When will the change be deployed?

This change will go live in two waves:

#### <mark style="color:orange;">**March 19th 2024**</mark>

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.

#### <mark style="color:orange;">**March 26th 2024**</mark>

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

{% hint style="info" %}
If you havent noticed any changes with the first wave, you'll be migrated with the second.
{% endhint %}

## Can I test this change beforehand?

Yes!

This change is already deployed on the [Saferpay Test Environment](https://test.saferpay.com)  on <mark style="color:orange;">**March 1st 2024**</mark> and can be tested there. If you haven't already, you can [register for a test account](https://test.saferpay.com) 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](/home/integration-guide/support.md#integration-support).


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.saferpay.com/home/news-and-important-changes/changes-for-the-saferpay-hosted-forms-fields-and-payment-page.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
