payMethod(OpenPayU) lub pay_type(NewPayment) dla rat to "ai".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.
Proces jest przedstawiony na poniższym diagramie.
Po ręcznym potwierdzeniu transakcji (lub jej autoodbiorze) Kupujący zostaje poinformowany o wyniku rozpatrzenia wniosku pożyczkowego.
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"
}
]
}'
Metody uwierzytelnienia znajdują się w: Uwierzytelnienie użytkownika API.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.
PayU umożliwia włączenie lub wyłączenie autoodbioru dla danego punktu płatności.
Jeżeli status Autoodbioru został ustawiony na Włączony, transakcje przetwarzane są automatycznie bez konieczności ręcznego zatwierdzenia.
Jeżeli status Autoodbiór został ustawiony na Wyłączony, transakcje przetwarzane są dopiero po ręcznym zatwierdzeniu.
Aby ręcznie zatwierdzić transakcję w Panelu Menadżerskim przy wyłączonym Autoodbiorze:
Informacje o obsłudze transakcji za pomocą API znajdziesz w sekcji Wymiana informacji.
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:
Wprowadzenie powyższych elementów na stronie pozwala osiągnąć szereg korzyści:
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.
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.
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.
Kalkulator rat PayU pozwala na wygodną analizę sposobu spłaty rat. Klient dopasowuje kwotę oraz liczbę rat, na które chce rozłożyć zakup za pomocą suwaków, a w rezultacie otrzymuje wysokość raty. Wysokość jednej raty można obliczyć uwzględniając ubezpieczenie.
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.
Parametry dostępne dla panelu| Parametr | Wartość domyślna | Wymagalność | Opis |
|---|---|---|---|
| posId | brak | tak | Identyfikator punktu płatności posId. |
| key | brak | tak |
Klucz definiowany w zależności od rodzaju punktu płatności. Dla:
|
| interestRate | 6.5 | nie | Wartość oprocentowania. Wartość musi być zgodna z umową podpisaną przez Sklep i PayU. |
| installmentAmount | 3 | nie | Liczba rat z przedziału 3 do 36. |
| installmentMinAmount | 3 | nie | Minimalna liczba rat. |
| installmentMaxAmount | 36 | nie | Maksymalna liczba rat. |
| creditMinAmount | 300 | nie | Najniższa wartość zakupu. |
| creditMaxAmount | 20000 | nie | Najwyższa wartość zakupu. |
| creditAmount | 300 | nie | Wartość zakupu z przedziału 300 do 20000 pln. |
| currencySign | zł | nie | Waluta |
| lang | pl | nie | Język używany w komponencie. Wartości dopuszczalne: en, pl. |
Jeśli zmiany nie są widoczne w przeglądarce pomimo odświeżenia strony, być może trzeba wyczyścić cache.
W celu poinformowania klienta o minimalnej kwocie raty dla konkretnego produktu, zalecamy umieszczenie widgetu ratalnego przy produktach w listach produktów, opisie (szczegóły) wybranego produktu, koszyku i przy finalizacji zamówienia (przed płatnością). W przypadku listy produktów (kilka widgetów ratalnych na stronie) należy pamiętać o unikalnych identyfikatorach dla widgetów. Dobrym rozwiązaniem jest uzależnienie id od id produktu np. dla produktu o id 3241 id="installment-mini-3241"
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-mini-installments.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;
if (value >= 300 && value <= 50000) {
var options = {
creditAmount: value, // wartość jako number (w PLN)
posId: '67328', // identyfikator punktu płatności
key: 'zQ', // pierwsze dwa znaki klucza api
showLongDescription: true
};
OpenPayU.Installments.miniInstallment('#installment-mini', options)
.then(function(result) {
// Ten fragment kodu zostanie wykonany po pokazaniu widżetu
// obiekt 'result' przekazany w parametrze funkcji udostępnia dodatkowe opcje;
// przykładowe użycie w FAQ pkt. 6
})
.catch(function(e) {
console.error(e.toString()); // Wypisanie błędów konfiguracji na konsolę
});
}
</script>
Krok 4
Zapisz zmiany.
Krok 5
Odśwież stronę w przeglądarce.
Parametry dostępne dla panelu| Parametr | Wartość domyślna | Wymagalność | Opis |
|---|---|---|---|
| creditAmount | brak | tak | Wartość zakupu z przedziału 300 do 50000 pln. |
| posId | brak | tak | Identyfikator punktu płatności posId.
Identyfikator składa się z samych cyfr. |
| key | brak | tak | Klucz definiowany w zależności od rodzaju punktu płatności.
Klucz składa się z cyfr oraz liter a-f. Dla:
|
| showLongDescription | false | nie | W przypadku aktywowania, zostanie dodany prefix dla danego języka:
true.
W przypadku zmian globalnych parametrów produktów kredytowych opis zostanie wtedy
automatycznie zaktualizowany.
|
| currencySign | zł | nie | Waluta |
| lang | pl | nie | Język używany w komponencie. Wartości dopuszczalne: en, pl. |
Jeśli zmiany nie są widoczne w przeglądarce pomimo odświeżenia strony, być może trzeba wyczyścić cache.
payu-mini-installments-widget-details {
color: black !important;
}
showLongDescription: true widżet
pokazuje tekst "Rata już od: 50,36 zł.". W tym przypadku można osobno
ostylować tekst (posiada klasę
payu-mini-installments-widget-details), separator (klasa
payu-mini-installments-widget-separator) oraz kwotę
miesięcznej raty kredytu (klasa
payu-mini-installments-widget-amount).showLongDescription, całość widżetu
opakowana jest w element oznaczonym klasą payu-mini-installments-widget, który
również można ostylować.1. Po dodaniu kodu na stronie, wyświetla się pusta strona
2. Po dodaniu kodu na stronie, nie widzę żadnych zmian, widgeta nie widać
3. Widget wyświetla się, ale w złym miejscu
4. Widget wyświetla błędne dane
5. Na jakich stronach warto umieścić widget?
6. Czy można manualnie otworzyć popup ze szczegółami rat?
OpenPayU.Installments.miniInstallment('<selektor>', options) oraz dodaniu
obsługi tej promesy otrzymamy dostęp do obiektu, który umożliwia otworzenie
popupu.openWidget() przekazanego w promesie
parametru.undefined, null lub
"").
<img id="payuLogo" src="https://poland.payu.com/wp-content/uploads/sites/14/2020/05/PAYU_LOGO_LIME-990x640.png"/>
<script>
var options = { creditAmount: 2000, posId: '67328',key: 'zQ' };
window.OpenPayU.Installments.miniInstallment("", options)
.then(function (result) {
document.querySelector("#payuLogo").onclick = function() { result.openWidget(); };
})
.catch(function(e) {
console.error(e.toString());
});
</script>
7. Gdzie mam znaleźć POS_ID i KEY?
8. Korzystam z tzw. systemu pudełkowego. Czy widget u mnie zadziała?
payMethod to "dpt".payMethod to "dpp".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 PayU Płacę później, z punktu widzenia sklepu internetowego, jest taki sam jak dla usługi PayU | Raty.
Przy integracji z protokołem OpenPayU (REST API) celem korzystania z usługi 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.