Integracja PayU na Shopify

PayU oferuje wiele aplikacji dla sprzedawców na Shopify:

• PayU GPO umożliwia płatności poprzez przekierowanie na stronę płatności PayU,
• PayU GPO - BLIK ułatwia płatności BLIK z bezpośrednim przekierowaniem do strony BLIK.
• PayU GPO - Karta ułatwia płatności kartą z przekierowaniem do formatki kartowej PayU.
• PayU GPO - Raty ułatwia płatności ratalne z przekierowaniem do formatki ratalnej PayU.
• PayU GPO - PayPo ułatwia odroczone płatności PayPo z przekierowaniem do formatki PayPo w PayU.
• PayU GPO - Klarna ułatwia odroczone płatności Klarna z przekierowaniem do formatki Klarna w PayU.
• PayU GPO - Twisto ułatwia odroczone płatności Twisto z przekierowaniem do formatki Twisto w PayU.
• PayU GPO - PragmaPay ułatwia płatności PragmaPay z przekierowaniem do formatki PragmaPay w PayU.
• PayU GPO - Widget kredytowy informuje użytkowników o dostępności płatności odroczonych oraz ratalnych na stronie produktu, oraz w koszyku. Rekomendujemy jego instalację, aby już na wczesnym etapie ścieżki zakupowej przekazać klientom informację o dostępnych metodach finansowania. Szczegółowe instrukcje dotyczące instalacji znajdziesz w sekcji Instalowanie aplikacji PayU na Shopify. Informacje dotyczące konfiguracji są dostępne w sekcji Konfiguracja aplikacji widgetu kredytowego na Shopify.

Wszystkie aplikacje zostały zaprojektowane w celu uproszczenia zarządzania transakcjami poprzez zapewnienie jednego interfejsu do wydajnej obsługi wszystkich płatności, raportów i wypłat.

Instalowanie aplikacji PayU na Shopify

Aplikacje PayU można zainstalować za pośrednictwem strony Shopify App Store.

1. Aby zainstalować aplikacje Shopify PayU, odwiedź Shopify App Store i przejdź do dedykowanej strony dla aplikacji PayU (linki do aplikacji znajdują się powyżej), a następnie kliknij przycisk Zainstaluj.

   W zależności od tego, czy jesteś zalogowany do Shopify App Store, może być konieczne wybranie sklepu, w którym chcesz zainstalować aplikacje.

Jeżeli jesteś zalogowany do Shopify App Store

Aplikacje zostaną zainstalowane w aktualnie aktywnym sklepie.

Jeżeli nie jesteś zalogowany do Shopify App Store

Pojawi się prośba o zalogowanie się i wybranie sklepu, do którego chcesz zainstalować aplikację.

2. Następnie pojawi się okno popup z prośbą o potwierdzenie instalacji aplikacji i wyrażenie zgody na udostępnienie niezbędnych danych wymaganych przez aplikację. Jeśli zgadzasz się na udostępnienie danych, kliknij Instaluj.

   

Po zakończeniu instalacji zostaniesz przekierowany i poproszony o podanie kluczy konfiguracyjnych ze swojego sklepu PayU. Więcej szczegółów na temat konfiguracji znajdziesz w sekcji Konfigurowanie aplikacji Shopify PayU.

Konfigurowanie aplikacji PayU na Shopify

Pamiętaj...

...waluta bazowa sklepu w Shopify musi być zgodna z walutą sklepu w PayU.

1. Po zakończeniu instalacji nastąpi przekierowanie do strony konfiguracyjnej, gdzie należy podać klucze konfiguracyjne:

   • pos_id,
   • Drugi klucz (MD5)
   • Protokół OAuth - client_id,
   • Protokół OAuth - client_secret

   

   Podanie kluczy jest niezbędne aby połączyć Twoje konto PayU z aplikacją na Shopify. Więcej informacji na temat kluczy konfiguracyjnych znajdziesz w sekcji Czym jest punkt płatności (POS)?.

2. Po dodaniu niezbędnych kluczy konfiguracyjnych zostaniesz przekierowany z powrotem do pulpitu nawigacyjnego. Tam możesz włączyć metody płatności, używając przełączników obok ich nazw i klikając przycisk Aktywuj. Możesz włączyć Tryb testowy, aby zasymulować udaną transakcję. Pamiętaj, aby wyłączyć Tryb testowy przed udostępnieniem funkcjonalności dla użytkowników sklepu.

   

Jesteś teraz gotowy do korzystania z aplikacji PayU na Shopify. Możesz zmienić konfigurację aplikacji w dowolnym momencie, klikając przycisk Więcej czynności a następnie wybierając opcję Zarządzaj.

Konfigurowanie widgetu kredytowego PayU na Shopify

Zweryfikuj...

Nie wszystkie szablony sklepu Shopify wspierają wyświetlanie widgetu. Po zainstalowaniu aplikacji zweryfikuj czy widget poprawnie się wyświetla.

Po zakończeniu instalacji zostaniesz przekierowany do strony konfiguracyjnej, gdzie powinieneś:

1. Włączyć widget poprzez aktywowanie pola Plugin aktywny.
2. Następnie musisz podać dane konfiguracyjne swojego sklepu PayU:

• Identyfikator punktu płatności POS ID, który znajduje się w Twoim Panelu Menadżerskim PayU. Więcej informacji znajdziesz w sekcji Czym jest punkt płatności (POS)?
• Dwa pierwsze znaki odpowiedniego klucza – klucz jest definiowany w zależności od rodzaju punktu płatności i składa się z cyfr oraz liter a-f. Znajdziesz go w swoim Panelu Menadżerskim PayU:
  • dla REST API - są to pierwsze dwa znaki Protokół OAuth - client_secret,
  • dla Classic API - są to pierwsze dwa znaki klucza Klucz (MD5).

Dodawanie widgetu do strony sklepu na Shopify

Po instalacji i konfiguracji widgetu zostanie aktywowana sekcja Dodaj widget do szablonów sklepu.

Dla twojej informacji.

Nie wszystkie szablony sklepu Shopify wspierają dodawanie widgetów. Jeśli dane konfiguracyjne są zapisane, a powyższe przyciski dalej nie są aktywne, oznacza to, że szablon nie jest obsługiwany przez aplikację.

Dodawanie widgeta do szablonu karty produktu

1. Wybierz przycisk Dodaj do szablonu karty produktu.

2. Nastąpi przekierowanie do edytora szablonów Shopify. Aplikacja z szablonem strony zostanie automatyczne dodana do aplikacji.

Dla twojej informacji.

Gdy cena produktu jest poza zakresem wspieranym przez widget, edytor zaprezentuje jedynie zastępczy tekst, który nie będzie wyświetlany na docelowej stronie wyświetlanej przez klientów.

Dodawanie widgeta do szablonu koszyka

1. Wybierz przycisk Dodaj do szablonu koszyka.

2. Nastąpi przekierowanie do edytora szablonów Shopify. Aplikacja z widgetem zostanie automatycznie dodana do szablonu.

Dla twojej informacji.

Gdy wartość koszyka jest poza zakresem wspieranym przez widget, edytor prezentuje jedynie zastępczy tekst, który nie będzie wyświetlany na docelowej stronie wyświetlanej przez klientów.

Alternatywny sposób dodawania elementów do szablonu sklepu

1. W panelu administracyjnym Shopify przejdź do edytora szablonów korzystając z przycisku Edytuj szablon w sekcji Kanały sprzedaży > Sklep online > Szablony.

2. Wybierz jeden z szablonów, do których można dodać aplikację.

3. Wybierz Dodaj blok lub Dodaj sekcję w sekcji Szablon w zależności od tego, gdzie chcesz dodać widget.

4. Wybierz aplikację PayU GPO — Widget kredytowy w sekcji Aplikacje.

5. Widget pojawi się w wybranym szablonie.

Dla twojej informacji.

Gdy kwota uwzględniana przez widget jest poza zakresem wspieranym przez widget, edytor zaprezentuje jedynie zastępczy tekst, który nie będzie wyświetlany na docelowej stronie wyświetlanej przez klientów.

Wizualizacja widgetu kredytowego

1. Sugerujemy przeniesienie lokalizacji widgetu za pomocą techniki przeciągnij i upuść w okolicę kwoty produktu/zamówienia. Wykonuje się to przesuwając aplikację widgetu w edytorze Informacji o produkcie/koszyku.

2. Po wybraniu aplikacji z widgetem możesz skonfigurować opcje prezentacji widgetu:

• Pokaż dłuższy opis – automatycznie wyświetla dodatkowy opis przed prezentowaną kwotą, zależnie od dostępnych metod płatności. Zaleca się pozostawienie tego ustawienia włączonego.

• Wykluczone metody płatności – lista metod płatności wyłączonych z wyświetlania widgetu. Należy wprowadzać wartości z pierwszej kolumny tabeli w sekcji Metody płatności Raty i Płacę później. Rekomendujemy pozostawienie listy pustej oraz wykluczanie metod jedynie w szczególnych przypadkach.

3. Domyślnie widget wyświetla możliwie najniższą kwotę raty 0% (wraz z walutą) oferowaną przez Raty PayU - o ile taka forma finansowania jest dostępna. W przypadku braku opcji rat 0%, widget pokazuje możliwie najniższą kwotę raty wraz z marżą (również wraz z walutą). Jeśli metoda Raty PayU nie jest dostępna, wyświetlana jest kwota do spłaty w ramach usługi PayU Płacę Później. Domyślnie wszystkie te kwoty mają kolor niebieski: rgb(29, 175, 236).

4. Jeżeli chcesz zastosować specyficzne stylowanie widgetu przejdź do sekcji Ustawienia szablonu w edytorze szablonów.

5. Następnie w sekcji Niestandardowy CSS należy dodać wpis, który nadpisuje domyślne wartości.

Przykład niestandardowego stylu

Poniżej znajduje się przykład kodu CSS, który dosunie tekst widgetu do prawej strony:

Dosunięcie tekstu do prawej

.payu-shopify-credit-widget {
  text-align: right;
}

Możesz również zastosować bardziej precyzyjne selektory CSS, aby zmodyfikować wygląd widgetu wyłącznie w koszyku lub tylko na karcie produktu.