Ta sekcja wyjaśnia, jak dostosować Formularz Płatności, aby lepiej odpowiadał identyfikacji wizualnej Twojej marki oraz wymaganiom dotyczącym doświadczenia użytkownika.

Możesz kontrolować wygląd Formularza Płatności, korzystając z opcjonalnej konfiguracji formStyle podczas renderowania formularza na stronie checkout.

Obsługiwane przeglądarki

Formularz Płatności został zaprojektowany z myślą o wysokich standardach bezpieczeństwa i wydajności.

Jest w pełni obsługiwany przez wszystkie główne, nowoczesne przeglądarki, które są aktywnie rozwijane i otrzymują aktualizacje zabezpieczeń, w tym:

• Google Chrome
• Microsoft Edge
• Mozilla Firefox
• Opera
• Safari

Lekkie Dostosowanie

Lekkie dostosowanie umożliwia zmianę podstawowych elementów wizualnych, takich jak kolory i czcionki, zapewniając spójność z identyfikacją wizualną Twojej marki bez wpływu na standardowe działanie Formularza Płatności.

Dostosowanie to jest realizowane wyłącznie po stronie frontendu i nie wpływa na przetwarzanie backendowe ani walidację transakcji.

Aby zastosować te zmiany, dodaj atrybut spg-style podczas definiowania Formularza Płatności w Kroku 2.

Jak zastosować formStyle

</>HTML

<form class="paymentSPG"
      spg-context="{formContext}"
      spg-config="{formConfig}"
      spg-style='{formStyle}'>
</form>

Atrybut formStyle to ciąg JSON definiujący konfigurację wizualną Formularza Płatności.

Konfiguracja ta jest opcjonalna i wpływa wyłącznie na warstwę prezentacji.

Upewnij się, że wartość przekazana w spg-style jest poprawnym ciągiem JSON.

Struktura formStyle (przykład)

Poniżej znajduje się kompletny przykład konfiguracji formStyle:

</> JSON

{
  "layout": "default",
  "theme": "default",
  "color": {
    "primary": "#FF5733",
    "secondary": "",
    "border": "#CCCCCC",
    "surface": "#FFFFFF",
    "header": {
      "text": "payment",
      "background": ""
    },
    "body": {
      "text": "#333333",
      "background": ""
    }
  },
  "font": "Arial"
}

Parametry formStyle

Parameter	Type	Example	Description
layout	string	„default”	Określa strukturę układu Formularza Płatności
theme	string	„default”	Określa motyw wizualny formularza (default, light, grey, dark)
color.primary	string	„#ff0000”	Kolor podstawowy używany dla przycisków i wyróżnień
color.secundary	string	„#ffffff”	Kolor dodatkowy używany w elementach pomocniczych UI
color.border	string	„#cccccc”	Kolor obramowania elementów formularza
color.surface	string	„#ffffff”	Kolor tła kontenera formularza
color.header.text	string	„#000000”	Kolor tekstu nagłówka
color.header.background	string	„#ffffff”	Kolor tła nagłówka
color.body.text	string	„#000000”	Domyślny kolor tekstu
color.body.background	string	„#ffffff”	Kolor tła treści formularza
font	string	„Arial”	Rodzina czcionek używana w Formularzu Płatności

Przykład wizualny

Poniżej znajduje się przykład ilustrujący, jak różne konfiguracje stylu wpływają na wygląd Formularza Płatności.

Pełne Dostosowanie (White label)

Pełne dostosowanie (white label) umożliwia jeszcze dokładniejsze dopasowanie Formularza Płatności oraz powiązanego doświadczenia użytkownika do identyfikacji Twojej marki.

Opcja ta pozwala na bardziej zaawansowaną konfigurację, obejmującą zarówno interfejs Formularza Płatności, jak i komunikację wysyłaną do klientów.

Dostępne są dwa poziomy dostosowania:

• Poziom 1: Formularz Płatności – dostosowanie wyglądu i interfejsu płatności
• Poziom 2: Formularz Płatności i komunikacja wychodząca – rozszerzenie dostosowania o komunikaty i wiadomości dla klientów

Pełne dostosowanie jest zazwyczaj aktywowane w ramach dedykowanej konfiguracji i może wymagać współpracy z zespołami SIBS.

Aby uzyskać więcej informacji, zapoznaj się z dedykowaną dokumentacją dotyczącą Pełnego Dostosowania.