```html theme={"theme":{"light":"one-light","dark":"one-dark-pro"}}

``` Logo jest zawsze. Nazwę i opis możesz schować (`hide-label`, `hide-description`) albo nadpisać (`label`, `description`):

```html theme={"theme":{"light":"one-light","dark":"one-dark-pro"}}

``` Kafelek domyślnie nie ma tła, ramki ani paddingu — wtapia się w wiersz Twojej listy metod, a wiersze, ramki i radiobuttony zostają po stronie sklepu. Zmiennymi CSS z sekcji **Wygląd** (`--paymove-bg`, `--paymove-border-color`, `--paymove-padding`, `--paymove-radius`) zrobisz z niego samodzielną kartę. Z atrybutem `interactive` kafelek jest klikalny i emituje `paymove:click` — przy schowanych tekstach nazwa metody zostaje w `aria-label`, więc czytniki ekranu widzą go poprawnie. ## 4. Otwarcie checkoutu w modalu Modalem steruje kontroler z `window.Paymove`: ```html theme={"theme":{"light":"one-light","dark":"one-dark-pro"}} ``` `mount()` przejmuje kliknięcia w element i sam przełącza przycisk w stan ładowania na czas pobierania adresu. Jeśli `redirectUrl` masz już w momencie renderowania strony, podaj go zamiast `fetchCheckoutUrl`: ```javascript theme={"theme":{"light":"one-light","dark":"one-dark-pro"}} const checkout = window.Paymove.createCheckout({ checkoutUrl: redirectUrl }); ``` `fetchCheckoutUrl` jest wygodniejsze: płatność powstaje dopiero w chwili kliknięcia, więc nie zostawiasz porzuconych płatności po klientach, którzy tylko oglądali koszyk. ### Konfiguracja `createCheckout` | Pole | Opis | | ------------------ | ------------------------------------------------------------ | | `checkoutUrl` | Gotowy `redirectUrl` z Twojego backendu | | `fetchCheckoutUrl` | Funkcja zwracająca `redirectUrl`, wywoływana przy kliknięciu | | `flow` | `modal` (domyślnie) albo `redirect` | | `triggerPayment` | Metoda uruchamiana od razu po otwarciu checkoutu | | `onReady` | Checkout zgłosił gotowość i modal pokazał treść | | `onSuccess` | Płatność zakończona powodzeniem — `{ externalId }` | | `onComplete` | Modal zamknięty po udanej płatności — `{ externalId }` | | `onCancel` | Modal zamknięty bez płatności | | `onError` | Błąd checkoutu — `{ code, message }` | Konfiguracja przyjmuje też wszystkie pola wyglądu przycisku (`label`, `methods`, `variant`…), więc możesz opisać element wyłącznie w JavaScripcie i zamontować go w pustym `

`. `externalId` w `onSuccess` i `onComplete` to **`details.orderId`**, jeśli przekazałeś je przy tworzeniu płatności - a 10-znakowy hash Paymove dopiero wtedy, gdy `orderId` nie ustawiłeś. Jeśli dopasowujesz zamówienie po tej wartości, ustawiaj `details.orderId` konsekwentnie, żeby zawsze dostawać ten sam identyfikator. ### Kontroler | Metoda | Działanie | | --------------- | --------------------------------------------------------------------------------------------- | | `mount(target)` | Podpina się pod selektor lub element — wstawia ``, jeśli w środku go nie ma | | `unmount()` | Odpina się od elementu | | `open()` | Otwiera modal (albo przekierowuje przy `flow: 'redirect'`) | | `close()` | Zamyka modal | | `update(patch)` | Podmienia część konfiguracji, np. `label` po zmianie kwoty w koszyku | | `destroy()` | Sprząta wszystko: modal, nasłuchy i element | Gdy chcesz tylko otworzyć modal — bez własnego przycisku — użyj skrótu: ```javascript theme={"theme":{"light":"one-light","dark":"one-dark-pro"}} window.Paymove.openCheckout(redirectUrl, { onSuccess: ({ externalId }) => console.log('opłacone', externalId), }); ``` ## 5. Przekierowanie zamiast modala To ta sama konfiguracja z jednym polem więcej: ```javascript theme={"theme":{"light":"one-light","dark":"one-dark-pro"}} window.Paymove.createCheckout({ checkoutUrl: redirectUrl, flow: 'redirect', }).mount('#pay'); ``` Klient trafia na checkout Paymove, a po płatności widzi ekran potwierdzenia z przyciskiem „Wróć do sklepu", który przenosi go pod `returnUrl` przekazany przy tworzeniu płatności. Modal i przekierowanie różnią się wyłącznie tym polem, więc możesz przełączać się między nimi bez zmian w reszcie integracji. W trybie `modal` `returnUrl` nie jest używany w ogóle - przycisk powrotu zamyka modal i wywołuje `onComplete`. Jeśli Twoja integracja opiera się na handlerze `returnUrl`, w modalu nigdy się on nie wykona. Źródłem prawdy pozostaje [webhook](/webhook-signature). ## 6. Jak zachowuje się modal * Na desktopie to panel o szerokości **398 px**, wyśrodkowany, na przyciemnionym tle. Wysokość dopasowuje się do treści checkoutu. * Przy szerokości okna do **640 px** modal wysuwa się z dołu jak natywny arkusz: maksymalnie **90% wysokości okna**, z belką do przeciągania — przeciągnięcie w dół zamyka płatność. * W trakcie ładowania widać statyczny sygnet Paymove. Krzyżyka wtedy nie ma — pojawia się dopiero, gdy checkout nie odezwie się przez 10 sekund, jako wyjście awaryjne. * Po załadowaniu zamykanie przejmuje nagłówek checkoutu. Zamknąć można też klawiszem `Esc` i kliknięciem w tło. * Strona pod modalem nie przewija się, a po zamknięciu wraca w to samo miejsce. * Na czas płatności checkout blokuje przewijanie tła i sam raportuje swoją wysokość, więc modal nie skacze przy zmianie kroku. * Modal potrafi zamknąć się sam po udanej płatności, ale sterujesz tym **przy tworzeniu subproduktu**, polem [`details.autoclose`](/rest-api#parametry-body) (w milisekundach), a nie z poziomu SDK. Checkout pokazuje wtedy odliczanie w przycisku „Wróć do sklepu" i po jego upływie zamyka modal, wywołując `onComplete`. Dowolna interakcja klienta anuluje odliczanie. Część banków w Pay by Link i PayPo zabrania osadzania swoich stron w iframie. Checkout otwiera je wtedy w nowym oknie i po powrocie wraca do modala — nie wymaga to niczego po stronie sklepu, ale nie blokuj wyskakujących okien we własnym kodzie. ## 7. Wygląd Kolory, promień i typografię przycisku ustawisz konfiguracją albo bezpośrednio zmiennymi CSS na elemencie: | Pole konfiguracji | Zmienna CSS | | ----------------- | ------------------------ | | `color` | `--paymove-bg` | | `textColor` | `--paymove-color` | | `borderColor` | `--paymove-border-color` | | `radius` | `--paymove-radius` | | `fontSize` | `--paymove-font-size` | | `padding` | `--paymove-padding` | | `fontFamily` | `--paymove-font-family` | ```html theme={"theme":{"light":"one-light","dark":"one-dark-pro"}} ``` Widget dziedziczy krój pisma ze strony sklepu, dopóki nie ustawisz `--paymove-font-family`. ## 8. React i Next.js ```jsx theme={"theme":{"light":"one-light","dark":"one-dark-pro"}} 'use client'; import Script from 'next/script'; import { useEffect, useRef } from 'react'; export function PayButton({ amount }) { const host = useRef(null); const checkout = useRef(null); useEffect(() => { let cancelled = false; window.Paymove?.ready().then((sdk) => { if (cancelled) return; checkout.current = sdk.createCheckout({ label: `Zapłać · ${amount}`, methods: ['BLIK', 'GPAY', 'APAY'], fullWidth: true, fetchCheckoutUrl: async () => { const response = await fetch('/api/payments', { method: 'POST' }); const { redirectUrl } = await response.json(); return redirectUrl; }, onSuccess: ({ externalId }) => router.push(`/zamowienie/${externalId}`), }); checkout.current.mount(host.current); }); return () => { cancelled = true; checkout.current?.destroy(); }; }, [amount]); return ( <>