{"id":10654,"date":"2023-06-14T09:36:36","date_gmt":"2023-06-14T09:36:36","guid":{"rendered":"https:\/\/www.qly.docs.pay.sibs.com\/integrations\/payment-form\/formularz-niestandardowy\/"},"modified":"2026-04-09T09:42:52","modified_gmt":"2026-04-09T09:42:52","slug":"formularz-niestandardowy","status":"publish","type":"page","link":"https:\/\/www.qly.docs.pay.sibs.com\/pl\/sibs-gateway-dokumentacja\/integracje\/payment-form\/formularz-niestandardowy\/","title":{"rendered":"Formularz niestandardowy"},"content":{"rendered":"<!-- wp:themify-builder\/canvas \/-->\n\n\n<p>Ta sekcja wyja\u015bnia, jak dostosowa\u0107 Formularz P\u0142atno\u015bci, aby lepiej odpowiada\u0142 identyfikacji wizualnej Twojej marki oraz wymaganiom dotycz\u0105cym do\u015bwiadczenia u\u017cytkownika.<\/p>\n\n\n\n<p>Mo\u017cesz kontrolowa\u0107 wygl\u0105d Formularza P\u0142atno\u015bci, korzystaj\u0105c z opcjonalnej konfiguracji <code>formStyle<\/code> podczas renderowania formularza na stronie checkout.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Obs\u0142ugiwane przegl\u0105darki<\/h3>\n\n\n\n<p>Formularz P\u0142atno\u015bci zosta\u0142 zaprojektowany z my\u015bl\u0105 o wysokich standardach bezpiecze\u0144stwa i wydajno\u015bci.<\/p>\n\n\n\n<p>Jest w pe\u0142ni obs\u0142ugiwany przez wszystkie g\u0142\u00f3wne, nowoczesne przegl\u0105darki, kt\u00f3re s\u0105 aktywnie rozwijane i otrzymuj\u0105 aktualizacje zabezpiecze\u0144, w tym:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Google Chrome<\/li>\n\n\n\n<li>Microsoft Edge<\/li>\n\n\n\n<li>Mozilla Firefox<\/li>\n\n\n\n<li>Opera<\/li>\n\n\n\n<li>Safari<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Lekkie Dostosowanie<\/strong><\/h3>\n\n\n\n<p>Lekkie dostosowanie umo\u017cliwia zmian\u0119 podstawowych element\u00f3w wizualnych, takich jak kolory i czcionki, zapewniaj\u0105c sp\u00f3jno\u015b\u0107 z identyfikacj\u0105 wizualn\u0105 Twojej marki bez wp\u0142ywu na standardowe dzia\u0142anie Formularza P\u0142atno\u015bci.<\/p>\n\n\n\n<p>Dostosowanie to jest realizowane wy\u0142\u0105cznie po stronie frontendu i nie wp\u0142ywa na przetwarzanie backendowe ani walidacj\u0119 transakcji.<\/p>\n\n\n\n<p>Aby zastosowa\u0107 te zmiany, dodaj atrybut spg-style podczas definiowania Formularza P\u0142atno\u015bci w <a href=\"https:\/\/www.docs.pay.sibs.com\/pl\/integracje\/payment-form\/przewodnik-integracji\/#krok-2-utworzenie-formularza\" target=\"_blank\" rel=\"noreferrer noopener\">Kroku 2.<\/a><\/p>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Jak zastosowa\u0107 formStyle<\/strong><\/h5>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;\/&gt;HTML\n\n&lt;form class=\"paymentSPG\"\n      spg-context=\"{formContext}\"\n      spg-config=\"{formConfig}\"\n      spg-style='{formStyle}'&gt;\n&lt;\/form&gt;<\/code><\/pre>\n\n\n\n<p>Atrybut <mark style=\"background-color:#e9e9f5\" class=\"has-inline-color\">formStyle<\/mark> to ci\u0105g JSON definiuj\u0105cy konfiguracj\u0119 wizualn\u0105 Formularza P\u0142atno\u015bci.<\/p>\n\n\n\n<p>Konfiguracja ta jest opcjonalna i wp\u0142ywa wy\u0142\u0105cznie na warstw\u0119 prezentacji.<\/p>\n\n\n\n<p>Upewnij si\u0119, \u017ce warto\u015b\u0107 przekazana w <mark style=\"background-color:#e9e9f5\" class=\"has-inline-color\">spg-style<\/mark> jest poprawnym ci\u0105giem JSON.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Struktura formStyle (przyk\u0142ad)<\/strong><\/h5>\n\n\n\n<p>Poni\u017cej znajduje si\u0119 kompletny przyk\u0142ad konfiguracji formStyle:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;\/&gt; JSON<br><br>{<br>  \"layout\": \"default\",<br>  \"theme\": \"default\",<br>  \"color\": {<br>    \"primary\": \"#FF5733\",<br>    \"secondary\": \"\",<br>    \"border\": \"#CCCCCC\",<br>    \"surface\": \"#FFFFFF\",<br>    \"header\": {<br>      \"text\": \"payment\",<br>      \"background\": \"\"<br>    },<br>    \"body\": {<br>      \"text\": \"#333333\",<br>      \"background\": \"\"<br>    }<br>  },<br>  \"font\": \"Arial\"<br>}<\/code><\/pre>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Parametry formStyle<\/strong><\/h5>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Parameter<\/th><th>Type<\/th><th>Example<\/th><th>Description<\/th><\/tr><\/thead><tbody><tr><td><mark style=\"background-color:#e9e9f5\" class=\"has-inline-color\">layout<\/mark><\/td><td>string<\/td><td>&#8222;default&#8221;<\/td><td>Okre\u015bla struktur\u0119 uk\u0142adu Formularza P\u0142atno\u015bci<\/td><\/tr><tr><td><mark style=\"background-color:#e9e9f5\" class=\"has-inline-color\">theme<\/mark><\/td><td>string<\/td><td>&#8222;default&#8221;<\/td><td>Okre\u015bla motyw wizualny formularza (default, light, grey, dark)<\/td><\/tr><tr><td><mark style=\"background-color:#e9e9f5\" class=\"has-inline-color\">color.primary<\/mark><\/td><td>string<\/td><td>&#8222;#ff0000&#8221;<\/td><td>Kolor podstawowy u\u017cywany dla przycisk\u00f3w i wyr\u00f3\u017cnie\u0144<\/td><\/tr><tr><td><mark style=\"background-color:#e9e9f5\" class=\"has-inline-color\">color.secundary<\/mark><\/td><td>string<\/td><td>&#8222;#ffffff&#8221;<\/td><td>Kolor dodatkowy u\u017cywany w elementach pomocniczych UI<\/td><\/tr><tr><td><mark style=\"background-color:#e9e9f5\" class=\"has-inline-color\">color.border<\/mark><\/td><td>string<\/td><td>&#8222;#cccccc&#8221;<\/td><td>Kolor obramowania element\u00f3w formularza<\/td><\/tr><tr><td><mark style=\"background-color:#e9e9f5\" class=\"has-inline-color\">color.surface<\/mark><\/td><td>string<\/td><td>&#8222;#ffffff&#8221;<\/td><td>Kolor t\u0142a kontenera formularza<\/td><\/tr><tr><td><mark style=\"background-color:#e9e9f5\" class=\"has-inline-color\">color.header.text<\/mark><\/td><td>string<\/td><td>&#8222;#000000&#8221;<\/td><td>Kolor tekstu nag\u0142\u00f3wka<\/td><\/tr><tr><td><mark style=\"background-color:#e9e9f5\" class=\"has-inline-color\">color.header.background<\/mark><\/td><td>string<\/td><td>&#8222;#ffffff&#8221;<\/td><td>Kolor t\u0142a nag\u0142\u00f3wka<\/td><\/tr><tr><td><mark style=\"background-color:#e9e9f5\" class=\"has-inline-color\">color.body.text<\/mark><\/td><td>string<\/td><td>&#8222;#000000&#8221;<\/td><td>Domy\u015blny kolor tekstu<\/td><\/tr><tr><td><mark style=\"background-color:#e9e9f5\" class=\"has-inline-color\">color.body.background<\/mark><\/td><td>string<\/td><td>&#8222;#ffffff&#8221;<\/td><td>Kolor t\u0142a tre\u015bci formularza<\/td><\/tr><tr><td><mark style=\"background-color:#e9e9f5\" class=\"has-inline-color\">font<\/mark><\/td><td>string<\/td><td>&#8222;Arial&#8221;<\/td><td>Rodzina czcionek u\u017cywana w Formularzu P\u0142atno\u015bci<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<style type=\"text\/css\">\n\t#message-box-block_b24c0b1f7a9bf39b0d2b236b350bd000 {\n\t\t\/* Add styles that use ACF values here *\/\n\t}\n<\/style>\n\n<div id=\"message-box-block_b24c0b1f7a9bf39b0d2b236b350bd000\" class=\"block-message-box\">\n\t\t\t\t<\/div>\n\n\n<style type=\"text\/css\">\n\t#message-box-block_b24c0b1f7a9bf39b0d2b236b350bd000 {\n\t\t\/* Add styles that use ACF values here *\/\n\t}\n<\/style>\n\n<div id=\"message-box-block_b24c0b1f7a9bf39b0d2b236b350bd000\" class=\"block-message-box\">\n\t\t\t\t<\/div>\n\n\n<h5 class=\"wp-block-heading\"><strong>Przyk\u0142ad wizualny<\/strong><\/h5>\n\n\n\n<p>Poni\u017cej znajduje si\u0119 przyk\u0142ad ilustruj\u0105cy, jak r\u00f3\u017cne konfiguracje stylu wp\u0142ywaj\u0105 na wygl\u0105d Formularza P\u0142atno\u015bci.<\/p>\n\n\n\n<figure class=\"wp-block-video autoplay-loop-video\"><video height=\"1080\" style=\"aspect-ratio: 1920 \/ 1080;\" width=\"1920\" autoplay loop muted preload=\"auto\" src=\"https:\/\/www.qly.docs.pay.sibs.com\/wp-content\/uploads\/2024\/11\/customized-form-EN-06.mp4\" playsinline><\/video><figcaption class=\"wp-element-caption\"><em><sup>SIBS Payment Form: Lite customization<\/sup><\/em><\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"full-customization\">Pe\u0142ne Dostosowanie (White label)<\/h3>\n\n\n\n<p>Pe\u0142ne dostosowanie (white label) umo\u017cliwia jeszcze dok\u0142adniejsze dopasowanie Formularza P\u0142atno\u015bci oraz powi\u0105zanego do\u015bwiadczenia u\u017cytkownika do identyfikacji Twojej marki.<\/p>\n\n\n\n<p>Opcja ta pozwala na bardziej zaawansowan\u0105 konfiguracj\u0119, obejmuj\u0105c\u0105 zar\u00f3wno interfejs Formularza P\u0142atno\u015bci, jak i komunikacj\u0119 wysy\u0142an\u0105 do klient\u00f3w.<\/p>\n\n\n\n<p>Dost\u0119pne s\u0105 dwa poziomy dostosowania:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Poziom 1: <\/strong>Formularz P\u0142atno\u015bci &#8211; dostosowanie wygl\u0105du i interfejsu p\u0142atno\u015bci<\/li>\n\n\n\n<li><strong>Poziom 2: <\/strong>Formularz P\u0142atno\u015bci i komunikacja wychodz\u0105ca &#8211; rozszerzenie dostosowania o komunikaty i wiadomo\u015bci dla klient\u00f3w<\/li>\n<\/ul>\n\n\n\n<p>Pe\u0142ne dostosowanie jest zazwyczaj aktywowane w ramach dedykowanej konfiguracji i mo\u017ce wymaga\u0107 wsp\u00f3\u0142pracy z zespo\u0142ami SIBS.<\/p>\n\n\n\n<p>Aby uzyska\u0107 wi\u0119cej informacji, zapoznaj si\u0119 z dedykowan\u0105 dokumentacj\u0105 dotycz\u0105c\u0105 <a href=\"https:\/\/www.docs.pay.sibs.com\/pl\/pelna-personalizacja\/\" target=\"_blank\" rel=\"noreferrer noopener\">Pe\u0142nego Dostosowania.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ta sekcja wyja\u015bnia, jak dostosowa\u0107 Formularz P\u0142atno\u015bci, aby lepiej odpowiada\u0142 identyfikacji wizualnej Twojej marki oraz wymaganiom dotycz\u0105cym do\u015bwiadczenia u\u017cytkownika. Mo\u017cesz kontrolowa\u0107 wygl\u0105d Formularza P\u0142atno\u015bci, korzystaj\u0105c z opcjonalnej konfiguracji formStyle podczas renderowania formularza na stronie checkout. Obs\u0142ugiwane przegl\u0105darki Formularz P\u0142atno\u015bci zosta\u0142 zaprojektowany z my\u015bl\u0105 o wysokich standardach bezpiecze\u0144stwa i wydajno\u015bci. Jest w pe\u0142ni obs\u0142ugiwany przez wszystkie [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":9947,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_eb_attr":"","footnotes":""},"class_list":["post-10654","page","type-page","status-publish","hentry","has-post-title","has-post-date","has-post-category","has-post-tag","has-post-comment","has-post-author",""],"acf":[],"builder_content":"","_links":{"self":[{"href":"https:\/\/www.qly.docs.pay.sibs.com\/pl\/wp-json\/wp\/v2\/pages\/10654","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.qly.docs.pay.sibs.com\/pl\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.qly.docs.pay.sibs.com\/pl\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.qly.docs.pay.sibs.com\/pl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.qly.docs.pay.sibs.com\/pl\/wp-json\/wp\/v2\/comments?post=10654"}],"version-history":[{"count":4,"href":"https:\/\/www.qly.docs.pay.sibs.com\/pl\/wp-json\/wp\/v2\/pages\/10654\/revisions"}],"predecessor-version":[{"id":29632,"href":"https:\/\/www.qly.docs.pay.sibs.com\/pl\/wp-json\/wp\/v2\/pages\/10654\/revisions\/29632"}],"up":[{"embeddable":true,"href":"https:\/\/www.qly.docs.pay.sibs.com\/pl\/wp-json\/wp\/v2\/pages\/9947"}],"wp:attachment":[{"href":"https:\/\/www.qly.docs.pay.sibs.com\/pl\/wp-json\/wp\/v2\/media?parent=10654"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}