PayU | Installments
Using PayU Installments, customers have the option to divide the expense of their purchase into monthly payments of equal amounts, spread over a defined period. This approach can render larger purchases more manageable and within reach for customers who might not have the immediate funds to cover the entire cost upfront.
Service Description
- PayU | Installments are available for merchants free of charge.
- PayU | Installments are available for shopping carts worth PLN 100 to PLN 50,000 (depending on the variant).
- The service can be integrated via OpenPayU (REST API).
- The value of
payMethod
(OpenPayU) orpay_type
(NewPayment) parameter isai
.
The process of handling payments through the PayU | Installments service in an online store involves two stages.
- A buyer places an order on an e-shop webpage.
- PayU confirms that the payment has been settled correctly.
First Stage - Placing an Order by the Customer
- The buyer clicks on a button that represents PayU | Installments.
- If the
payMethod.pay_type
parameter is set to a value other thanai
, and both the first name and last name are not provided, the PayU system will display an order summary page. On this page, the buyer will need to confirm the payment. - The PayU system redirects the buyer to the website of a credit partner.
- The buyer performs the actions required by the credit partner, such as accepting an offer or making a verification transfer.
- Credit partner confirms to PayU that it has processed the payment and redirects the buyer back to the PayU website.
- At this stage, a transaction may receive one of three statuses depending on the loan lender's decision or ability to consider the installments request:
- In the event that the credit partner cannot promptly verify all request details or process the loan request, the transaction status will be marked as PENDING. Subsequently, the buyer will be directed to a PayU webpage containing information about the PENDING status and a button to return to the shop.
- Should a loan not be granted or the credit partner is unable to process the loan request, the transaction status will be designated as FAIL, prompting the redirection of the buyer to a page specified as a negative URL in the shop configuration.
- After the credit request undergoes assessment and gains approval, the transaction status will be updated to SUCCESS. This, in turn, will lead to the redirection of the buyer to a page specified in the shop configuration as a positive outcome.
- The PayU system redirects the buyer to a page in your system that informs the buyer that the order has been successfully placed.
Once the transaction has been confirmed manually (or automatically collected), the buyer is informed about the outcome of loan request processing.
Second Stage (optional) - Payment Settlement
- The PayU system notifies your system that the status of the payment order has changed.
- Your system confirms receiving the notification.
Integrating Installments
For PayU | Installments, the standard order request should be extended with payMethods
object containing specified payment method.
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":"yrjut2mp63wdzcozq7w0br",
"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"
}
]
}'
For details on parameters, please refer to Create an Order section in the Single Platform API Reference.
Highlighted within the above request are:
- The
buyer
object, which specifies basic customer information. - And the
payMethods
object, which specifies installments (ai
) as the payment method.
POS used in the example does not have installments switched on. Consequently, the Buyer won't be directed to the application form; instead, the PayU system will display a summary page.
Automatic Collection
PayU makes it possible to enable or disable the automatic receipt in a POS.
Unless you disable automatic collection on one of your POS, any transaction created with its credentials will be processed automatically without manual confirmation. If this option is disabled, you will need to manually confirm transactions in the management panel.
Manually Confirming Transaction
To manually confirm a transaction in the Management Panel when Automatic collection is disabled:
- Go to the Management Panel.
- Click on the Transactions tab. A list will appear underneath, from which select the "List of transactions" option.
- In the Status field, select "Waiting for collection". Optionally, set other search parameters.
- Click on the Show button.
- To confirm the transaction, in the Action column, click on Collect.
- Check if data is correct and click on OK button
Information about transaction support via API is available in the Capture and Cancel section.
How to promote
The objective of every e-business is to provide customers with a comprehensive and innovative offering. With the introduction of PayU | Installments, a store can accomplish this objective by presenting details about the new service in a straightforward and lucid manner.
This section outlines the process of incorporating the following components:
- Elements contributing to graphic identification, including buttons and static banners.
- Installment widget.
- Calculator widget.
These elements provide the following advantages:
- professional approach to e-shop customers;
- relevant amount of information about shopping on installments;
- keeping customers interested, thus increasing the number of successful transactions;
- allowing customers to make quick payments;
- encouraging satisfied customers to return to the e-shop.
Graphic Identification
Sign - “Here you can pay via PayU | Installments”
In order to inform a customer that you offer shopping on installments, we recommend adding the "Here you can pay via PayU | Installments" button on the main page or on other e-shop pages
A customer who clicks on the button is redirected to the informational PDF document about PayU Installments.
To produce this effect on your shop website, enter the following code:
<a href="http://www.payu.pl/en/payu-installments-for-business"><img src="http://static.payu.com/pl/standard/partners/raty_payu/tu_kupisz_na_raty_payu_blue.png"/></a>
Other graphic versions are available here.
Button - "Transaction"
To draw your customer's attention to quick installment shopping, use the following button:
To produce this effect on your shop website, style the form button using the following code between the <head>
tags:
<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>
Other graphic versions are available here.
Static Banners
We have also designed static graphical ads which you can use to inform customers that PayU | Installments are available in your shop.
Other graphic versions are available here.
Widget Installments
To communicate the minimum installment value for a specific product to customers, we suggest integrating an installment widget within the product list, individual product cards, the shopping cart, and the checkout section. When implementing the widget in the product list, which might involve multiple widgets, it's important to ensure each widget has a distinct identifier. A practical approach would be to assign an "id" corresponding to the product's ID. For instance, for a product with the ID 3241, you can set the "id" as id="installment-mini-3241"
.
To embed the widget into your website:
- Open the source code of your website.
- Paste the following script in the
<head>
section. - Scripts Needed for Widget
- Paste the following code, after editing
creditAmount
,posId
(enter your data) andkey
(enter your data) in the<body>
section of your source code. - Widget Example
- REST API - first characters of
'OAuth protocol - client_secret'
- Classic API - first two characters of
'Key (MD5)'
- pl (default),
Rata już od:
- en,
Installment from:
- Save changes.
- Refresh the website in your browser.
<meta charset="utf-8" />
<script src="https://static.payu.com/res/v2/widget-mini-installments.js"></script>
Please refrain from copying this script to your server, as PayU scripts contain specific information about the current installment settings.
<p><span id="installment-mini"></span></p>
<script type="text/javascript">
var value = 1234.56
var options = {
creditAmount: value, // amount in PLN
posId: '00000', // point of sale identifier
key: 'a0', // first two characters of API key
showLongDescription: true,
}
OpenPayU.Installments.miniInstallment('#installment-mini', options)
.then(function (result) {
// This fragment of code will be executed after widget is shown
// parameter ‘result’ contains additional functions and parameters described in 'Additional integration metods' section
})
.catch(function (e) {
console.error(e.toString()) // This snippet writes config errors
// to developer’s console
})
</script>
Parameter | Default value | Required | Description |
---|---|---|---|
creditAmount | none | yes | Purchase value should be in correct range – check the range for PayU | Installments payment method on page Installments and Pay later. If amount is out of given range widget will not be presented. |
posId | none | yes | Point of sale identifier posId . Identifier contains only digits. |
key | none | yes | Key dependent on the point of sale type. Key contains digits or lowercased characters a-f. For: |
showLongDescription | false | no | Once activated, the specific prefix will be added. For languages: true value. Regarding future product changes it will be automatically updated. |
currencySign | PLN | no | Currency |
lang | pl | no | Language used in the component. Available values: en, pl. |
If you cannot see any changes despite refreshing the page, try to clear cache and verify if the creditAmount
is in correct range - check the range for PayU | Installments payment method on page Installments and Pay later.
Additional Integration Methods
OpenPayu.Installments.miniInstallment
function returns a Promise
with resolved result object. Structure of a result
object is presented in a table below.
Parameter | Type | Required | Description |
---|---|---|---|
isWidgetAvailable | boolean | yes | true , when input parameters allow to display widget. Otherwise false , when for example credit amount is out of correct range - check the range for payment method on PayU | Installments page. |
element | HTMLElement | available, when isWidgetAvailable = true | DOM element containing text with installment amount and link opening popup with installments details. |
openWidget | function | available, when isWidgetAvailable = true | Function displays installment details popup. |
Using the element
Object
<p><span id="installment-mini"></span></p>
<script type="text/javascript">
var value = 1234.56
var options = {
creditAmount: value, /// amount in PLN
posId: '00000', // point of sale identifier
key: 'a0', // first two characters of API key
showLongDescription: false,
}
OpenPayU.Installments.miniInstallment('', options) // selector is not required
.then(function (result) {
if (result.isWidgetAvailable) {
// check if widget is available
const customText = document.createElement('span')
customText.innerText = 'PayU installments from: '
document.getElementById('installment-mini').append(customText)
document
.getElementById('installment-mini')
.append(result.element) // element can be appended to any html element on page
}
})
.catch(function (e) {
console.error(e.toString()) // This snippet writes config errors
// to developer’s console
})
</script>
Notes for the element
Object:
- Upon calling the
OpenPayU.Installments.miniInstallment('', options)
function, you can utilize theelement
object within aPromise
callback. Thiselement
object represents a DOM element containing text that displays the installment amount and a link that, when clicked, opens a popup containing installment details. element
object is also available when selector argument inOpenPayU.Installments.miniInstallment
function is empty (undefined, null or ""). In that case you need to display element in your own scripts.element
object is available only whenisWidgetAvailable
equals true. Before object usage check if condition is fulfilled.- It's considered a good practice to hide all HTML elements that rely on the widget's availability, especially when the
isWidgetAvailable
parameter is set to false.
Displaying Installment Details Popup Manually
<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') // display element
document.querySelector('#payuLogo').onclick = function () {
result.openWidget()
} // handle onclick action
}
})
.catch(function (e) {
console.error(e.toString())
})
</script>
Notes for openWidget()
Function:
- Upon invoking the
OpenPayU.Installments.miniInstallment('', options)
function, you can access theopenWidget()
function within aPromise
callback. This function enables you to present a popup displaying installment details. openWidget()
function is available whenisWidgetAvailable
equals true. Before function invocation check if condition is fulfilled.- A recommended approach is to hide all HTML elements that will have the
openWidget()
function attached to them, in situations where theisWidgetAvailable
parameter is set to false. - If you don't need to present installment amount, pass empty selector (undefined, null or "") to
OpenPayU.Installments.miniInstallment
function.
FAQ
After adding the code to the website, a blank page is displayed.
While modifying the code, the HTML file structure may have been damaged, causing the webpage to function improperly or not at all (resulting in a blank screen). An HTML file is a structured document that must maintain the correct format.
After adding the code to the website, I don't see any changes; the widget is not visible.
- The amount is not within the correct range – refer to the amount ranges for the PayU Installments payment method.
- Check if the widget is not visible at the bottom of the page. If the widget is visible on the page (but in the wrong location), refer to point 3.
- Verify whether there are any configuration validation errors for the widget. These errors are logged to the browser console.
- Ensure that the backend code (e.g., PHP) is correctly inserted into the HTML page.
- The widget consists of three elements: a link to our script (in the head tag), an HTML tag with the widget (in the body tag), and code executing the JavaScript function. It is likely that one of these elements is missing from the page.
- For each product on the product list, the widget needs to be added.
The widget is displaying, but in the wrong location.
You need to locate an element on the page, likely associated with the price, beneath which the mini installment widget should appear, and move the HTML tag to that location.
The widget is displaying incorrect data.
- The correct codes have been added in the right places; however, an incorrect amount was passed to the widget.
- There are HTML tags on the page with duplicated identifiers (id).
On which pages is it worth placing the widget?
- Product description/product card
- Product list – for each product, a separate widget. Be careful to ensure that each widget has a unique ID (e.g.,
id="installment-mini-2903"
, next one could beid="installment-mini-2821"
). - Cart
- Checkout – order finalization
Where can I find the POS_ID and KEY?
- In the widget installation instructions, certain data indicated in the HTML code are examples, and you should replace them with your own data. These include, for example, POS_ID and KEY.
- Log in to the management panel.
- Choose My Stores.
- Select the payment point in the chosen store.
- Click on the relevant payment option.
- A green frame with data will appear.
- POS_ID consists only of digits.
- The entire key shown in the management panel (under the name
OAuth Protocol – client_secret
or, if absent,Second key (MD5)
) consists of 32 characters (digits or lowercase letters a-f). Only the first two characters of the key are required.
I am using a so-called boxed system. Will the widget work for me?
- To make the widget work, a change in the page's source code is required. For some boxed systems, modifying the code may be challenging. In such cases, contact your software provider. If you are using PrestaShop, you don't need to install the widget - PayU provides an official PrestaShop plugin with the option to promote installment payments, including the installment widget.
- The recommended version of the PrestaShop plugin is at least 3.1.14. If you are using an older version, we recommend updating the plugin.