Konfiguracja

Widget konfigurujesz wyłącznie atrybutami data-* na znaczniku <script>. Każdy znacznik tworzy jeden, niezależny widget.

<script
  defer
  src="https://pay.sandbox.paymove.io/v1/sdk.js"
  data-product-id="d0a834f9-94a4-4b3a-aa10-27d911e3633f"
  data-widget-id="checkout"
  data-button-label="Zapłać online"
  data-bubble-title="Szybka płatność"
  data-bubble-description="BLIK, Google Pay lub Apple Pay. Bez zakładania konta."
  data-locale="pl"
></script>

Atrybuty

Atrybut	Opis	Limit / domyślnie
`data-product-id`	Wymagany. Identyfikator produktu (UUID) albo jego publiczny alias (`shortName`)	do 256 znaków
`data-widget-id`	Identyfikator instancji - potrzebny do własnych przycisków i sterowania widgetem z kodu	do 128 znaków: litery, cyfry, `_`, `-`; bez niego generowany automatycznie
`data-button-label`	Tekst przycisku. Pusty - przycisk się nie pokazuje	do 120 znaków; domyślnie pusty
`data-bubble-title`	Tytuł dymka nad przyciskiem	do 160 znaków; domyślnie pusty
`data-bubble-description`	Opis w dymku	do 500 znaków; domyślnie pusty
`data-locale`	Język strony płatności w modalu, np. `pl`, `en`, `pl-PL`	domyślnie wybór automatyczny
`data-external-id`	Otwiera widget od razu na płatności za konkretny dokument (subprodukt). Przyjmuje identyfikator subproduktu nadany przez paymove, a przy `rawExternalIdEnabled: true` także Twój własny `externalId`	do 256 znaków
`data-document-entry`	Pokazuje ekran, na którym klient sam wpisuje numer dokumentu. Działa dla produktu bez cennika na poziomie produktu. Flaga bez wartości	nie łączy się z `data-external-id`
`data-left`	Odległość przycisku od lewej krawędzi okna	0-10000 px
`data-right`	Odległość od prawej krawędzi	0-10000 px
`data-top`	Odległość od górnej krawędzi	0-10000 px
`data-bottom`	Odległość od dolnej krawędzi	0-10000 px

Zasady wspólne dla wszystkich atrybutów:

Konfiguracja jest odczytywana raz, przy starcie skryptu. Zmiana atrybutów później nie zmienia tekstu, języka ani położenia widgetu. Żeby to zrobić, usuń widget (destroy()) i wstaw skrypt na nowo.
Tekst to zwykły tekst, nigdy HTML - znaczniki zostaną wyświetlone dosłownie.
Wartość złożona z samych spacji liczy się jako pusta.
Błędna wartość albo przekroczony limit blokuje uruchomienie tylko tej instancji i zostawia w konsoli przeglądarki komunikat z prefiksem [PaymoveWidget], który wskazuje błędny atrybut.

Przycisk i dymek

Przycisk pojawia się, gdy data-button-label nie jest pusty. Widget nie ma domyślnego tekstu - napis zawsze podajesz Ty, w języku swojej strony.

Ciemny przycisk widgetu z sygnetem paymove, napisem „Zapłać online” i strzałką — Sam przycisk - data-button-label="Zapłać online"

Dymek „Szybka płatność” z opisem „BLIK, Google Pay lub Apple Pay. Bez zakładania konta.” nad przyciskiem „Zapłać online” — Dymek nad przyciskiem - data-bubble-title i data-bubble-description

Dymek pojawia się, gdy ustawisz data-bubble-title albo data-bubble-description (albo oba). Działa tak:

pokazuje się po najechaniu kursorem na przycisk albo po przejściu do niego klawiszem Tab; na ekranach dotykowych się nie pokazuje,
zostaje widoczny, gdy przesuwasz kursor z przycisku na dymek, i znika, gdy kursor i fokus opuszczą widget,
Esc chowa go na chwilę, a ikona zamknięcia - do końca życia tej instancji widgetu (do przeładowania strony),
otwarcie modala chowa dymek,
nie zajmuje miejsca w układzie strony; gdy nad przyciskiem brakuje miejsca, wyświetla się pod nim,
animacja trwa 200 ms i jest wyłączana, gdy system ma włączone ograniczenie ruchu.

Dymek wymaga przycisku widgetu. Bez data-button-label dymek nie jest renderowany, nawet jeśli ustawisz tytuł i opis.

Bez przycisku widgetu

Pomiń data-button-label, jeśli modal ma otwierać Twój własny element - link w menu, baner albo przycisk w treści. Widget nie wyświetli wtedy nic, dopóki go nie otworzysz:

<script
  defer
  src="https://pay.sandbox.paymove.io/v1/sdk.js"
  data-product-id="d0a834f9-94a4-4b3a-aa10-27d911e3633f"
  data-widget-id="checkout"
></script>

<button type="button" data-paymove-open="checkout">Wesprzyj nas</button>

Szczegóły i wersja z JavaScriptu: Własny przycisk.

Położenie

Bez atrybutów położenia przycisk przypięty jest do prawego dolnego rogu ekranu, z uwzględnieniem bezpiecznych marginesów na urządzeniach z wycięciem ekranu. Atrybuty data-left, data-right, data-top i data-bottom ustawiają odległość przycisku od krawędzi okna przeglądarki (pozycja fixed). Przyjmują liczbę albo wartość z px: 24 i 24px znaczą to samo.

<script
  defer
  src="https://pay.sandbox.paymove.io/v1/sdk.js"
  data-product-id="d0a834f9-94a4-4b3a-aa10-27d911e3633f"
  data-button-label="Zapłać online"
  data-left="24"
  data-bottom="24"
></script>

<script
  defer
  src="https://pay.sandbox.paymove.io/v1/sdk.js"
  data-product-id="d0a834f9-94a4-4b3a-aa10-27d911e3633f"
  data-button-label="Zapłać online"
  data-right="24"
  data-bottom="96"
></script>

<script
  defer
  src="https://pay.sandbox.paymove.io/v1/sdk.js"
  data-product-id="d0a834f9-94a4-4b3a-aa10-27d911e3633f"
  data-button-label="Zapłać online"
  data-left="24"
  data-top="96"
></script>

Każdy atrybut działa samodzielnie. data-left="24" przesuwa przycisk do lewej krawędzi i zostawia domyślną odległość od dołu.
W każdej osi wybierz jedną krawędź: left albo right, top albo bottom. Podanie obu przeciwnych krawędzi blokuje uruchomienie widgetu.
Położenie dotyczy wyłącznie przycisku. Dymek dopasowuje się do niego sam, a modal zawsze jest wyśrodkowany.
Dobierz odległości tak, żeby przycisk nie zasłaniał innych pływających elementów - czatu, banera cookies, przycisku „do góry”.

Język

data-locale ustawia język strony płatności w modalu. Przyjmuje kod języka (pl, en) albo kod z regionem (pl-PL, en-US).

Polski i angielski są dostępne dla każdego produktu, a dla części produktów także inne języki, m.in. niemiecki, ukraiński, czeski i słowacki.
Gdy podany język nie jest dostępny, strona płatności używa języka zapamiętanego wcześniej przez klienta, a potem języka przeglądarki.
Bez data-locale język jest wybierany tak samo.
Klient może zmienić język w trakcie procesu.
Teksty, które podajesz Ty - data-button-label i dymek - nie są tłumaczone. Przekaż je od razu w języku strony.
Komunikaty samego widgetu (ładowanie, błąd, „Spróbuj ponownie”, „Zamknij”) biorą język z data-locale, potem z atrybutu lang na <html>, a potem z przeglądarki.

Teksty z biblioteki i18n

Literał t("…") wpisany w HTML nie zostanie obliczony. Na stronie wielojęzycznej zbuduj znacznik skryptu w JavaScripcie i ustaw atrybuty przed wstawieniem go do dokumentu:

const script = document.createElement("script");
script.src = "https://pay.sandbox.paymove.io/v1/sdk.js";
script.setAttribute("data-product-id", productId);
script.setAttribute("data-widget-id", "checkout");
script.setAttribute("data-locale", locale);
script.setAttribute("data-button-label", t("widget.button"));
script.setAttribute("data-bubble-title", t("widget.title"));
script.setAttribute("data-bubble-description", t("widget.description"));
document.head.append(script);

Po zmianie języka na stronie usuń widget (destroy()) i wstaw skrypt jeszcze raz z nowymi tekstami. Każdy znacznik <script> tworzy osobny widget z własnym przyciskiem. Możesz łączyć różne produkty, także z różnych adresów skryptu - np. bilety i parking na stronie wydarzenia:

<script
  defer
  src="https://go.sandbox.paymove.io/v1/sdk.js"
  data-product-id="EVENT_PRODUCT_ID"
  data-widget-id="tickets"
  data-button-label="Kup bilety"
  data-right="24"
  data-bottom="24"
></script>
<script
  defer
  src="https://park.sandbox.paymove.io/v1/sdk.js"
  data-product-id="PARKING_ID"
  data-widget-id="parking"
  data-button-label="Zapłać za parking"
  data-right="24"
  data-bottom="88"
></script>

Nadaj każdemu widgetowi inny data-widget-id. Kolejny skrypt z tym samym identyfikatorem jest ignorowany.
Widgety nie układają się automatycznie - bez atrybutów położenia wszystkie przyciski trafią w ten sam róg i się nałożą. Rozstaw je atrybutami data-*.
Na stronie może być otwarty tylko jeden modal. Otwarcie drugiego widgetu zamyka pierwszy.
Błąd konfiguracji jednego widgetu nie blokuje pozostałych.

Wprowadzenie

Integracje

Tutoriale

Pomoc

Atrybuty

Przycisk i dymek

Bez przycisku widgetu

Położenie

Język

Teksty z biblioteki i18n

Kilka widgetów na jednej stronie

​Atrybuty

​Przycisk i dymek

​Bez przycisku widgetu

​Położenie

​Język

​Teksty z biblioteki i18n

​Kilka widgetów na jednej stronie

Atrybuty

Przycisk i dymek

Bez przycisku widgetu

Położenie

Język

Teksty z biblioteki i18n

Kilka widgetów na jednej stronie