Raty i Płacę później

Informacje podstawowe

• PayU | Raty są dostępne dla merchantów bezpłatnie.
• PayU | Raty są dostępne dla zakupów na łączną kwotę od 300 do 20 000 zł.
• Integrację usługi można wykonać protokołem OpenPayU (REST API) lub NewPayment (Classic API).
• Wartość parametru payMethod(OpenPayU) lub pay_type(NewPayment) dla rat to "ai".

Opis usługi

Niniejsza dokumentacja ma na celu przedstawienie sposobu wdrożenia usługi PayU | Raty w sklepie internetowym. Materiał ten jest przede wszystkim przeznaczony dla developerów.

Proces realizacji płatności w przypadku usługi PayU | Raty w sklepie internetowym składa się z dwóch etapów.

1. Złożenia zamówienia przez kupującego na stronie sklepu.
2. Potwierdzenia prawidłowego rozliczenia płatności zrealizowanej przez usługę PayU.

Etap pierwszy. Złożenia zamówienia przez kupującego.

Proces jest przedstawiony na poniższym diagramie.

1. Kupujący klika w przycisk reprezentujący usługę PayU | Raty.
2. Jeżeli nie podano payMethod/pay_type=ai oraz imienia i nazwiska, System PayU prezentuje stronę z podsumowaniem zamówienia na której kupujący potwierdza płatność.
3. System PayU przekierowuje kupującego na stronę partnera pożyczkowego.
4. Kupujący dokonuje czynności określonych przez partnera pożyczkowego, np. akceptuje ofertę lub wykonuje przelew weryfikacyjny.
5. Partner pożyczkowy potwierdza PayU wykonanie płatności i przekierowuje Kupującego ponownie na stronę systemu PayU.
6. Na tym etapie transakcja może przejść w jeden z trzech statusów, nadawanych w zależności od decyzji partnera pożyczkowego lub możliwości rozpatrzenia wniosku pożyczkowego:
   1. Jeżeli partner pożyczkowy nie może niezwłocznie zweryfikować wszystkich danych lub rozpatrzyć wniosku pożyczkowego, transakcja otrzymuje status PENDING. Kupujący zostaje przekierowany na stronę PayU zawierającą informację że wniosek jest w statusie PENDING oraz przycisk pozwalający na powrót do sklepu.
   2. W przypadku nieprzyznania pożyczki ratalnej lub braku możliwości rozpatrzenia wniosku pożyczkowego przez partnera pożyczkowego, transakcja otrzymuje status FAIL, a Kupujący zostaje przekierowany na stronę wskazaną w parametrze continueURL.
   3. Po rozpatrzeniu wniosku i przyznaniu pożyczki, transakcja otrzymuje status SUCCESS. Kupujący zostaje przekierowany na stronę wskazaną w parametrze continueURL.
7. System PayU przekierowuje Kupującego na stronę wskazaną w parametrze continueURL, informującąc o udanym złożeniu zamówienia.

Po ręcznym potwierdzeniu transakcji (lub jej autoodbiorze) Kupujący zostaje poinformowany o wyniku rozpatrzenia wniosku pożyczkowego.

Etap drugi (opcjonalny). Rozliczenie płatności.

1. System PayU powiadamia system sprzedawcy o zmianie stanu procesowanej płatności za pomocą tzw. notyfikacji.
2. System sprzedawcy potwierdza odebranie powiadomienia.

W niniejszej sekcji podano przykłady dla protokołu OpenPayU, Raty PayU dostępne są również w Classic API.

Przykład zamówienia poprzez formularz. Protokół OpenPayU:

                <form method="POST" action="https://secure.payu.com/api/v2_1/orders">
                    <input type="hidden" name="customerIp" value="123.123.123.123">
                    <input type="hidden" name="merchantPosId" value="145227">
                    <input type="hidden" name="description" value="Opis">
                    <input type="hidden" name="totalAmount" value="99900">
                    <input type="hidden" name="currencyCode" value="PLN">
                    <input type="hidden" name="products[0].name" value="Laptop">
                    <input type="hidden" name="products[0].unitPrice" value="99900">
                    <input type="hidden" name="products[0].quantity" value="1">
                    <input type="hidden" name="notifyUrl" value="http://shop.url/notify" >
                    <input type="hidden" name="continueUrl" value="http://shop.url/continue" >   
                    <input type="hidden" name="payMethods.payMethod.type"  value="PBL" > 
                    <input type="hidden" name="payMethods.payMethod.value" value="ai" >                                 
                    <input type="hidden" name="OpenPayu-Signature" type="hidden" value="sender=145227;algorithm=SHA-256;signature=0f83ee156263138744e54eeeae0f46b77ee61f996f77f2bb96d45c909f7334b7">
                    <button type="submit" formtarget="_blank">PayU</button>
                </form>
            

Powyższy POS nie ma aktywnej bramki ratalnej. Dlatego Kupujacy nie zostanie przekierowany na wniosek ratalny, System PayU zaprezentuje formularz z podsumowaniem. Więcej informacji na temat parametrów formularza opisano na: Tworzenie nowego zamówienia.

Przykład zamówienia poprzez REST API z jednym produktem, podstawowymi danymi kupującego oraz extOrderId:

curl -v -X POST https://secure.payu.com/api/v2_1/orders \
-H "Content-Type: application/json" \
-H "Authorization: Bearer 3e5cac39-7e38-4139-8fd6-30adc06a61bd" \
-d '{
    "notifyUrl": "https://your.eshop.com/notify",
    "customerIp": "127.0.0.1",
    "merchantPosId": "145227",
    "description": "RTV market",
    "currencyCode": "PLN",
    "totalAmount": "99900",
    "extOrderId":"[generateExtOrderId]",
    "buyer": {
        "email": "jan.kowalski@example.com",
        "phone": "654111654",
        "firstName": "Jan",
        "lastName": "Kowalski"
     },
     "payMethods":{
          "payMethod":{
              "type":"PBL",
              "value":"ai"
          }
      },
      "products": [
          {
              "name": "Laptop",
              "unitPrice": "99900",
              "quantity": "1"
          }
       ]
 }'
                

Powyższy POS nie ma aktywnej bramki ratalnej. Dlatego Kupujacy nie zostanie przekierowany na wniosek ratalny, System PayU zaprezentuje formulularz z podsumowaniem. Więcej informacji na temat parametrów zamówienia opisano na: Tworzenie nowego zamówienia.

Ostyluj formularz w celu dobrej identyfikacji usługi PayU | Raty.

<style type="text/css">
form[name="payform"] input[type="submit"] {
    border: 0px;
    height: 35px;
    width: 100px;
    background: url('http://static.payu.com/pl/standard/partners/raty_payu/raty_small.png');
    cursor: pointer;
}
</style>
                    

Zapisz zmiany w pliku i przeładuj stronę przeglądarki.

Autoodbiór włączony

Jeżeli status Autoodbioru został ustawiony na Włączony, transakcje przetwarzane są automatycznie bez konieczności ręcznego zatwierdzenia.

Autoodbiór wyłączony

Jeżeli status Autoodbiór został ustawiony na Wyłączony, transakcje przetwarzane są dopiero po ręcznym zatwierdzeniu.

Ręczne zatwierdzanie transakcji

Aby ręcznie zatwierdzić transakcję w Panelu Menadżerskim przy wyłączonym Autoodbiorze:

1. Przejdź do Panelu Menadżerskiego.
2. Przejdź do Transakcje --> Lista transakcji. .
3. W polu Status wybierz Oczekuje na odbiór. Możliwe jest także ustawienie innych parametrów wyszukiwania.
4. Kliknij Pokaż.
5. Aby zatwierdzić transakcję, w kolumnie Akcja kliknij Odbierz.
6. Sprawdź poprawność danych i kliknij OK.

Informacje o obsłudze transakcji za pomocą API znajdziesz w sekcji Wymiana informacji.

Konfigurowanie Autoodbioru

Autoodbiór konfiguruje się tak, jak standardowe metody płatności.

W celach każdego e-biznesu znajduje się budowanie kompleksowej i innowacyjnej oferty dla swoich klientów. Wprowadzając produkt PayU | Raty sklep może to osiągnąć poprzez prezentację informacji przedstawioną w prosty i nieinwazyjny sposób o udostępnianej usłudze.

Materiał zawarty w sekcji opisuje sposób wdrożenia następujących elementów:

1. elementy składające się na identyfikację graficzną takie jak przyciski, bannery statyczne,
2. widget ratalny,
3. widget kalkulator.

Wprowadzenie powyższych elementów na stronie pozwala osiągnąć szereg korzyści:

1. zapewnia pełen profesjonalizm w kontaktach z Klientami Sklepu;
2. gwarantuje umieszczenie odpowiedniej ilości informacji dla Klienta o możliwości zapłacenia na raty;
3. sprzyja utrzymaniu zainteresowania Klienta, co oddziałuje korzystnie na liczbę transakcji zakończonych pomyślnie;
4. ułatwia Klientowi szybkie dokonanie płatności;
5. sprawi, że zadowoleni Klienci powrócą do Sklepu.

Znaczek "Tu kupisz na raty"

W celu zwrócenia uwagi Klienta o możliwości realizacji płatności ratalnych zalecamy umieszczenie przycisku „Tu kupisz na raty PayU” na stronie głównej lub na podstronach sklepu.

Po kliknięciu przycisku, klient przekierowywany jest do dokumentu PDF z informacjami na temat rat PayU.

Aby uzyskać ten efekt na stronie sklepu wprowadź poniższy kod:

<a href="https://payu.pl/payu-raty-dla-Ciebie">
    <img src="http://static.payu.com/pl/standard/partners/raty_payu/tu_kupisz_na_raty_payu_blue.png" />
</a>
            

Pozostałe wersje graficzne są dostępne pod linkiem.

Przycisk transakcyjny

W celu zwrócenia uwagi Klienta na szybką akcję zakupu na raty użyj graficznego znaku dla przycisku

Aby uzyskać ten efekt na stronie sklepu ostyluj przycisk formularza używając poniżego kodu pomiędzy tagami <head>

<style type="text/css">
form[name="payform"] input[type="submit"] {
    border: 0px;
    height: 35px;
    width: 100px;
    background: url('http://static.payu.com/pl/standard/partners/raty_payu/raty_small.png');
    cursor: pointer;
}
</style>
            

Pozostałe wersje graficzne są dostepne pod linkiem.

Statyczne banery

Przygotowaliśmy rownież statyczne reklamy graficzne, dzięki którym poinformujesz Klienta o dostępności Rat | PayU w Twoim Sklepie.

Pozostałe wersje graficzne są dostepne pod linkiem.

Krok 1

Otwórz kod źródłowy strony i upewnij się, że używa ona kodowania utf-8 (kalkulator został przygotowany tylko dla tego kodowania).

Widgety kalkulatora wykorzystuje wewnętrznie biblioteki jquery i pozwalają na jednoczesne użycie innych wersji. Import skryptu widget-calculator-installments.min.js nie nadpisuje w żaden sposób innych wersji jquery użytych przez klienta i służy jedynie do poprawnego działania widgetów.

Krok 2

Wklej poniższy skrypt w sekcji <head>. Uwaga, nie kopiuj pliku na swój serwer, ponieważ skrypty PayU zawierają właściwe informacje na temat aktualnych ustawień dotyczących pożyczek.

<meta charset="utf-8" />
<script src="https://static.payu.com/res/v2/widget-calculator-installments.min.js"></script>
<link href="https://static.payu.com/res/v2/layout/style.css" rel="stylesheet">
                    

Krok 3

Wklej poniższy kod, po wcześniejszej edycji creditAmount, posId (wpisz tu swoje dane) i key (wpisz tu swoje dane) w sekcji <body> pliku źródlowego. Do tego elementu zostanie wstrzyknięty kalkulator o wymiarach 712x402px.

<div id="installment-calc"></div> 
<script type="text/javascript">
    var openpayu = openpayu || {};
    openpayu.options = {
        creditAmount: 4234.56,  // wartość w PLN
        posId: '67328',         // identyfikator punktu płatności
        key: 'zQ'               // pierwsze dwa znaki klucza api
    };
    OpenPayU.Installments.calculator('#installment-calc');
</script>
                    

Krok 4

Zapisz zmiany.

Krok 5

Odśwież stronę w przeglądarce.

Jeśli zmiany nie są widoczne w przeglądarce pomimo odświeżenia strony, być może trzeba wyczyścić cache.

Krok 1

Otwórz kod źródłowy strony.

Krok 2

Wklej poniższy skrypt w sekcji <head>. Uwaga, nie kopiuj pliku na swój serwer, ponieważ skrypty PayU zawierają właściwe informacje na temat aktualnych ustawień dotyczących pożyczek.

<meta charset="utf-8" />
<script src="https://static.payu.com/res/v2/widget-products-installments.min.js"></script>
                    

Krok 3

Wklej poniższy kod, po wcześniejszej edycji value (creditAmount), posId (wpisz tu swoje dane) i key (wpisz tu swoje dane) w sekcji <body> pliku źródlowego.

<p><span id="installment-mini"></span></p> 
<script type="text/javascript">
  var value = 1234.56;
  var openpayu = openpayu || {};
  openpayu.options = {
    creditAmount: value,    // wartość w PLN
    posId: '67328',         // identyfikator punktu płatności
    key: 'zQ',              // pierwsze dwa znaki klucza api
    showLongDescription: true
  };
  if (value >= 300 && value <= 20000) {
    OpenPayU.Installments.miniInstallment('#installment-mini');
  }
</script>
                    

Krok 4

Zapisz zmiany.

Krok 5

Odśwież stronę w przeglądarce.

Jeśli zmiany nie są widoczne w przeglądarce pomimo odświeżenia strony, być może trzeba wyczyścić cache.

1. Po dodaniu kodu na stronie, wyświetla się pusta strona

• Podczas modyfikacji kodu została uszkodzona struktura pliku HTML w wyniku czego strona działa częściowo lub wcale (pusty ekran). Plik HTML jest ustrukturyzowanym plikiem, który musi zachować właściwy format.

2. Po dodaniu kodu na stronie, nie widzę żadnych zmian, widgeta nie widać

• Sprawdź czy nie widać widgeta na dole strony. Jeśli widget jednak jest widoczny na stronie (ale w złej lokalizacji) patrz punkt 3.
• Kod z Backendu (np.: z PHP) został wklejony do stony HTML, należy to poprawić.
• Widget składa się z trzech elementów: link do naszego skryptu (w tagu head), tag HTML z widgetem (w tagu body), kod wykonujący funkcję Javascript. Prawdopodobnie na stronie zabrakło któregoś z tych elementów.
• Na liście produktów widget należy dodać przy każdym z produktów

3. Widget wyświetla się, ale w złym miejscu

• Należy odnaleźć na stronie element (prawdopodobnie z ceną) pod którym ma być umieszczona mini ratka i tam przenieść tag HTML.

4. Widget wyświetla błędne dane

• Dodano właściwe kody, we właściwych miejscach, tylko do widgeta została przekazana błędna kwota.
• Na stronie istnieją tagi HTML o zduplikowanych identyfikatorach (id).

5. Na jakich stronach warto umieścić widget?

• Opis/karta produktu
• Lista produktów – dla każdego produktu odrębny widget, należy uważać żeby każdy widget miał unikalne id (np.: id="installment-mini-2903" następny np.: id="installment-mini-2821")
• Koszyk
• Checkout – finalizacja zamówienia

6. Gdzie mam znaleźć POS_ID i KEY?

• W instrukcji instalacji widgeta, pewne dane wskazane w kodzie html są przykładowe i należy w ich miejsce podstawić swoje dane. Są to np. POS_ID i KEY.
  • Logujemy się do NPM
  • Wybieramy Moje sklepy
  • Wybieramy punkt płatności w wybranym sklepie
  • Klikamy odpowiedni punkt płatnosci
  • Pojawia się zielona ramka z danymi

7. Korzystam z tzw. systemu pudełkowego. Czy widget u mnie zadziała?

• Aby widget zadziałał, potrzebna jest zmiana kodu źródłowego strony, zgodnie z instrukcją. W przypadku niektórych systemów pudełkowych modyfikacja kodu może być utrudniona. W takim przypadku, sugerujemy kontakt z dostawcą oprogramowania. Jeśli korzystasz z PrestaShop, nie musisz instalować widgetu - PayU udostępnia oficjalny plugin do PrestaShop z opcją promowania płatności ratalnych, którego częścią jest widget ratalny.

Informacje podstawowe

• Usługa Twisto | PayU Płacę później jest dostępna dla zakupów od 1 zł do 1500 zł.
• Integrację usługi należy wykonać protokołem OpenPayU (REST API).
• Wartość parametru payMethod to "dpt".

Opis usługi

Twisto | PayU Płacę później daje płacącemu możliwość zapłaty za zakupiony towar całej kwoty w terminie 30 dni bez żadnych kosztów dodatkowych. Po upływie wspomnianego okresu, klienci mogą rozłożyć płatność na raty.

Proces realizacji płatności oraz funkcjonalność autoodbioru dla usługi Twisto | PayU Płacę później, z punktu widzenia sklepu internetowego, jest taki sam jak dla usługi PayU | Raty.

Dodatkowe informacje

Przy integracji z protokołem OpenPayU (REST API) celem korzystania z usługi Twisto | PayU Płacę później, zalecane jest wysyłanie wypełnionej sekcji credit w komunikacie OrderCreateRequest. Przesłanie tych danych w znaczący sposób upraszcza i przyśpiesza proces po stronie użytkownika. Sekcja credit nie jest wymagana, jednak użycie jej jest rekomendowane celem uzyskania jak najlepszej konwersji.