Skip to main content

Credit Widget

To communicate the possibility to use a credit payment for a specific product to customers, we suggest integrating a credit widget within the product list, individual product cards, the shopping cart, and the checkout section.

The credit widget allows you to present detailed information about the possibility of paying by installments (PayU | Installments) and PayU Pay Later payments. The customer will receive information about the available crediting options for the purchase, the number of installments, interest rates, or the time to repay in the case of PayU Pay Later payments.

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:

  1. Open the source code of your website.
  2. Paste the following script in the <head> section.
    <meta charset="utf-8" />
    <script src="https://static.payu.com/res/v2/widget-mini-installments.js"></script>
    Warning!

    Please refrain from copying this script to your server, as PayU scripts contain specific information about the current installment settings. In case of sending content-security-policy please add to allowed domains: static.payu.com, credit-widget-config.payu.com and secure.payu.com

  3. Paste the following code, after editing creditAmount, posId (enter your data) and key (enter your data) in the <body> section of your source code.
    <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>
    Parameters Available in the Panel.
    ParameterDefault valueRequiredDescription
    creditAmount
    none
    yes
    Purchase value should be in correct range. You can check the range in the Installments and Pay Later section. If the `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:
    • REST API - first characters of 'OAuth protocol - client_secret'
    • Classic API - first two characters of 'Key (MD5)'
    showLongDescription
    false
    no
    Allows you to add a description before the displayed amount. Depending on the available credit products, the following text may be displayed:
    • 0% installment from
    • Installment from
    • Pay later
    It is recommended to iniatiate value with a true value. Regarding future product changes it will be automatically updated.
    currencySign
    PLN
    no
    Currency. Available values PLN, CZK
    lang
    pl
    no
    Language used in the component. Available values: en, pl, cs.
    excludePayTypes
    []
    no
    List of payment methods to be omitted during widget presentation. You should provide a list of values from the first column of the table in the Installments and Pay Later section.
    It is recommended to leave the list empty and exclude methods in exceptional cases. The widget automatically filters payment methods based on the methods enabled at the payment point.
  4. Save changes.
  5. Refresh the website in your browser.
Notes

If you cannot see any changes despite refreshing the page, try to clear cache and verify if the creditAmount is in correct range. You can check the range in the Installments and Pay later section.

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.

Result Parameters
ParameterTypeRequiredDescription
isWidgetAvailable
boolean
yes
true, when input parameters allow to display widget. Otherwise false, when for example credit amount is out of correct range. You can check the range in the Installments and Pay Later section.
element
HTMLElement
available, when isWidgetAvailable = true
DOM element containing text with installment amount and link opening popup payment method details.
openWidget
function
available, when isWidgetAvailable = true
Function displays popup with payment methods details.

Using the element Object​

Example of Code Snippet Showing element Object Usage
<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 the element object within a Promise callback. This element object represents a DOM element containing text that displays the installment amount and a link that, when clicked, opens a popup containing payment details.
  • element object is also available when selector argument in OpenPayU.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 when isWidgetAvailable 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 Payment Methods Details Popup Manually​

Example of a Code Snippet Allowing to Open Widget Popup
<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 the openWidget() function within a Promise callback. This function enables you to present a popup displaying payment methods details.
  • openWidget() function is available when isWidgetAvailable 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 the isWidgetAvailable parameter is set to false.
  • If you don't need to present 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 likely causes are:

  • The amount is not within the correct range – refer to the amount ranges for the specific payment methods in the Installments and Pay Later section.
  • 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 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 widget should appear, and move the HTML tag to that location.

The widget is displaying incorrect data.

The likely causes are:

  • 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?

We Recommend placing the widget on:

  • 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 be id="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 page with a frame displaying the necessary data will then 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 credit payments, including the 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.
  • If you are using WooCommerce, you don't need to install the widget - PayU provides an official WooCommerce plugin with the option to promote credit payments, including the widget.

On this page