# Widżet dla płatności kartami Metoda integracji przez widżet pozwala na zintegrowanie płatności kartą płatniczą z poziomu sklepu. W takim przypadku nie jest wymagane przekierowanie na bramkę płatności. Widżet obsługuje płatności eCom 3DSecure, płatności OneClick jak i również rekurencyjne. Aby zastosować tę metodę należy osadzić odpowiedni skrypt JavaScript. Środowisko produkcyjne: ``` https://paywall.imoje.pl/js/widget.min.js ``` Środowisko testowe: ``` https://sandbox.paywall.imoje.pl/js/widget.min.js ``` ## Parametry | Parametr | Parametr wymagany | Opis | |---------------------|-------------------|----------------| | `data-merchant-id` | `TAK` | identyfikator klienta | | `data-service-id` | `TAK` | identyfikator sklepu klienta | | `data-amount` | `TAK` | kwota transakcji podana w groszach | | `data-currency` | `TAK` | waluta | | `data-order-id` | `TAK` | ID zamówienia, **dopuszczalne znaki**: A-Za-z0-9#_-./ oraz znak spacji(0x20) i znaki z zakresu UNICODE 00C0 - 02C0 (m.in. polskie znaki diakrytyczne) | | `data-customer-id` | `TAK` | ID płatnika, **dopuszczalne znaki**: A-Za-z0-9_- | | `data-customer-first-name` | `TAK` | imię osoby składającej zamówienie, **dopuszczalne znaki**: A-Za-z0-9-,. oraz znak spacji(0x20) i znaki z zakresu UNICODE 00C0 - 02C0 (m.in. polskie znaki diakrytyczne), 0400 - 04FF (cyrylica) | | `data-customer-last-name` | `TAK` | nazwisko osoby składającej zamówienie, **dopuszczalne znaki**: A-Za-z0-9-,. oraz znak spacji(0x20) i znaki z zakresu UNICODE 00C0 - 02C0 (m.in. polskie znaki diakrytyczne), 0400 - 04FF (cyrylica) | | `data-customer-email` | `TAK` | adres e-mail w formacie zgodnym ze standardem RFC 5322 oraz RFC 6531 | | `data-signature` | `TAK` | wyliczona sygnatura | | `data-customer-phone` | `NIE` | numer telefonu osoby składającej zamówienie, **dopuszczalne znaki**: -+0-9 oraz spacja. Wartość parametru zawierać może **maksymalnie 20 znaków** | | `data-order-description` | `NIE` | tytuł transakcji, **dopuszczalne znaki**: A-Za-z0-9#&_-,.\/ oraz znak spacji(0x20) i znaki z zakresu UNICODE 00C0 - 02C0 (m.in. polskie znaki diakrytyczne) | | `data-url-success` | `NIE` | Adres URL, na który użytkownik będzie przekierowany po pomyślnie zakończonej transakcji.
Adres musi być zgodny ze standardem `RFC 3986` i zawierać hosta.
Nazwa domeny nie może być absolutna (FQDN). | | `data-url-failure` | `NIE` | Adres URL, na który użytkownik będzie przekierowany po błędnie dokonanej transakcji.
Adres musi być zgodny ze standardem `RFC 3986` i zawierać hosta.
Nazwa domeny nie może być absolutna (FQDN). | | `data-url-return` | `NIE` | Ogólny adres URL, na który użytkownik będzie przekierowany po dokonaniu transakcji.
Adres musi być zgodny ze standardem `RFC 3986` i zawierać hosta.
Nazwa domeny nie może być absolutna (FQDN).| | `data-url-cancel` | `NIE` | Adres URL, na który użytkownik będzie przekierowany po naciśnięciu przycisku `Anuluj`.
Adres musi być zgodny ze standardem `RFC 3986` i zawierać hosta.
Nazwa domeny nie może być absolutna (FQDN). | | `data-widget-type` | `NIE` | oznaczenie typu płatności **Dopuszczalne wartości**: `oneclick`, `recurring`, `ecom3ds` | | `data-valid-to` | `NIE` | data ważności linku płatności jako timestamp w sekundach, jeżeli nie jest przekazane to link ważny jest zawsze | | `data-invoice` | `NIE` | zakodowane dane do faktury, konieczne podczas korzystania z usługi **ING Księgowość**. Dane należy zakodować zgodnie z instrukcją opisaną **[tutaj](#ing-ksiegowosc#przygotowanie-obiektu-invoice)**| | `data-multipayout` | `NIE` | dane określające odbiorcę płatności dla **funkcji multiwypłat**, gdzie:
* `ban` - numer konta bankowego
* `amount` - kwota transakcji podana w groszach
* `label` - nazwa odbiorcy (max 35 znaków), **dopuszczalne znaki**: A-Za-z0-9-,. oraz znak spacji(0x20) i znaki z zakresu UNICODE 00C0 - 02C0 (m.in. polskie znaki diakrytyczne)
* `title` - tytuł przelewu (max 105 znaków), **dopuszczalne znaki**: A-Za-z0-9#&_-,.\/ oraz znak spacji(0x20) i znaki z zakresu UNICODE 00C0 - 02C0 (m.in. polskie znaki diakrytyczne), parametr opcjonalny. Jego obecność powoduje wyodrębnienie danej transakcji na koncie odbiorcy.
Podanie parametru dla jednego elementu warunkuje konieczność dostarczenia go dla pozostałych.| ### Przykładowa struktura parametru `data-multipayout` powinna wyglądać w następujący sposób: ```javascript data-multipayout=[{"ban":"39109024028943913168514519","label":"Test1","amount":100},{"ban":"72105000028166973380325415","label":"Test2","amount":100}] ``` ## Parametry konfiguracyjne - **nie należy ich uwzględniać przy wyliczaniu sygnatury** | Parametr | Parametr wymagany | Opis | |----------------------|-------------------|----------------| | `data-locale` | `NIE` | Dwuznakowy kod języka.
**Dopuszczalne wartości**: `pl`, `en`, `cs`, `de`, `es`, `fr`, `it`, `lt`, `ru`, `sk`, `sl`, `uk`, `nl`, `hu`, `ro`, `bg`, `sv`.
Domyślnie `pl`, gdy zostanie przekazana nieznana wartość to wyświetli `en` | | `data-inline` | `NIE` | jeżeli jest ustawione na `true` to istnieje możliwość aby iframe był osadzony w elemencie o identyfikatorze `imoje-widget__wrapper` (element o takim identyfikatorze musi istnieć).
Jeżeli tego parametru nie ma lub jest ustawiony na `false` wtedy iframe będzie wyświetlony na cały ekran | | `data-element-id` | `NIE` | wskazanie identyfikatora elementu który ma być interaktywny z widżetem, domyślnie jest `false` | | `data-element-event` | `NIE` | wskazanie jaki event ma rozpocząć interakcję z widżetem, domyślnie jest `click` | ## Przykład ``` ``` gdzie * `src` - adres URL do skryptu `widget.min.js` * `id` - ID skryptu. Zawsze musi mieć wartość `imoje-widget__script` > info > Powyższych parametrów `src`, `id` należy **nie uwzględniać** przy wyliczaniu sygnatury. ## Wyliczanie sygnatury Nazwy parametrów do wyliczenia sygnatury należy zamienić zgodnie z przykładem: * parametr `data-order-id` na `orderId`. Sygnaturę należy wyliczyć w taki sam sposób jak jest to opisane w punkcie [Autoryzacja](#topic-autoryzacja)