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.
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;
var options = {
creditAmount: value, // wartość jako number (w PLN)
posId: '00000', // identyfikator punktu płatności
key: 'a0', // pierwsze dwa znaki klucza api
showLongDescription: true
};
OpenPayU.Installments.miniInstallment('#installment-mini', options)
.then(function(result) {
// Ten fragment kodu zostanie wykonany po pokazaniu widgetu
// Opis obiektu 'result' znajduje się w pkt. 2.3.2 Dodatkowe sposoby integracji widgetu
})
.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, kwota powinna być we właściwym przedziale – zobacz zakres dla metody płatności PayU | Raty na stronie Raty i Płacę Poźniej. Gdy kwota jest spoza przedziału widget nie wyświetli się. |
| 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 lub należy sprawdzić, czy kwota znajduje się we właściwym przedziale – zobacz zakres kwot dla metody płatności PayU | Raty na stronie Raty i Płacę Poźniej
payu-mini-installments-widget-details {
color: black !important;
}
showLongDescription: true widget
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ść
widgetu opakowana jest w element oznaczonym klasą
payu-mini-installments-widget, który również można
ostylować.Funkcja OpenPayu.Installments.miniInstallment zwraca obiekt
Promise z wartością result. Parametry
result:
| Nazwa | Typ | Wymagalność | Opis |
|---|---|---|---|
| isWidgetAvailable | boolean | tak | Wartość true, gdy podane parametry wejściowe pozwalają na wyświetlenie widgeta.
W przeciwnym wypadku false, np. kwota poza przedziałem – zobacz zakres kwot dla
metody płatności PayU | Raty na stronie Raty i Płacę Poźniej. |
| element | HTMLElement | dostępne, gdy isWidgetAvailable = true |
Element DOM z wysokością raty oraz linkiem otwierającym popup ze szczegółami rat. |
| openWidget | function | dostępne, gdy isWidgetAvailable = true |
Funkcja otwiera popup ze szczegółami rat. |
Wykorzystanie obiektu element
OpenPayU.Installments.miniInstallment('', options)
oraz dodaniu obsługi obiektu Promise otrzymamy dostęp do obiektu
element, który jest elementem DOM z wysokością raty oraz linkiem
otwierającym popup ze szczegółami rat.element jest dostępny także, gdy do funkcji został przekazany
pusty selektor (undefined, null lub
""). W tym przypadku należy samodzielnie obsłużyć dodanie elementu do
strony.element jest dostępny, gdy parametr
isWidgetAvailable ma wartość true. Przed
wykorzystaniem obiektu należy sprawdzić, czy warunek jest spełniony. isWidgetAvailable ma
wartość false.Przykładowy fragment kodu ilustrujący wykorzystanie obiektu element:
<p><span id="installment-mini"></span></p>
<script type="text/javascript">
var value = 1234.56;
var options = {
creditAmount: value, // wartość jako number (w PLN)
posId: '00000', // identyfikator punktu płatności
key: 'a0', // pierwsze dwa znaki klucza api
showLongDescription: false
};
OpenPayU.Installments.miniInstallment('', options) // selektor nie jest wymagany
.then(function(result) {
if (result.isWidgetAvailable) { // sprawdzenie czy widget jest dostępny
const customText = document.createElement('span');
customText.innerText = 'Raty PayU już od: ';
document.getElementById("installment-mini").append(customText);
document.getElementById("installment-mini").append(result.element); // element można dołączyć do dowolnego miejsca na stronie
}
})
.catch(function(e) {
console.error(e.toString()); // Wypisanie błędów konfiguracji na konsolę
});
</script>
Manualne otwarcie popup-a ze szczegółami rat
OpenPayU.Installments.miniInstallment('', options) oraz dodaniu
obsługi obiektu Promise otrzymamy dostęp do funkcji openWidget(), która umożliwia otwarcie
popupu.openWidget() jest dostępna, gdy parametr isWidgetAvailable ma wartość true.
Przed wywołaniem funkcji należy sprawdzić, czy warunek jest spełniony. openWidget(),
gdy widget nie jest dostępny (parametr isWidgetAvailable ma wartość false).undefined, null lub "").Przykładowy fragment kodu ilustrujący otwieranie popupu na kliknięcie obrazka:
<img id="payuLogo" src="https://poland.payu.com/wp-content/themes/global-website/assets/src/images/payu-logo.svg" hidden/>
<script>
var options = { creditAmount: 2200, posId: '00000',key: 'a0' };
window.OpenPayU.Installments.miniInstallment("", options)
.then(function (result) {
if (result.isWidgetAvailable) {
document.querySelector("#payuLogo").removeAttribute("hidden"); // wyświetla element
document.querySelector("#payuLogo").onclick = function() { result.openWidget(); }; // dodaje akcję na kliknięcie
}
})
.catch(function(e) {
console.error(e.toString());
});
</script>
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. Gdzie mam znaleźć POS_ID i KEY?
7. 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.