# Inbank Hire Purchase Calculator for E-shops Documentation version 1.03, 20.11.2025 Here at Inbank we strive to help our partners sell more by simplifying purchases and making financing more accessible to customers. For this reason, we have built a plug-and-play calculator solution for our merchants. Just pick the calculator format suitable to your website, follow the simple steps below and start displaying monthly payments to your customers. This added feature will boost your conversion and sales. For questions regarding the Inbank Hire Purchase calculator, contact us at: - Estonia - integration@inbank.ee - Poland - integration@inbank.pl - Latvia - integration@inbank.lv - Czechia - integration@inbank.cz Note that you need to contact your Inbank representative for the calculator to appear on the pages of your e-shop. The domain, where the calculator is used, needs to be whitelisted by Inbank. # Adding the Calculator to a Page You can add the calculator to any webpage by simply using an iFrame. The website platform of your site defines how the iFrame can be published to all product pages (or checkout page if needed). You can easily construct the calculator code using Inbank's iFrame code generator: - In Estonia - https://epos.inbank.ee/et/calculator-iframe-generator - In Poland - https://epos.inbank.pl/pl/calculator-iframe-generator - In Latvia - https://epos.inbank.lv/lv/calculator-iframe-generator - In Czechia- https://epos.inbank.cz/cs/calculator-iframe-generator Example of the iFrame calculator configuration: ```html ``` Note that you need to contact your Inbank representative for the calculator to appear on the pages of your e-shop. The domain, where the calculator is used, needs to be whitelisted by Inbank. Note that all calculators have a mobile view which will be applied if the calculator is viewed from a mobile device. The precise appearance of the calculator mobile views depends heavily on the layout of the pages. There are dimensions that allow for all components of the calculator to be displayed, for example: - Dimensions of 400(width)x590(height) will be equally suitable for both mobile and desktop views, for a calculator that has three sliders and does not include the representative sample nor the `Apply` button. - Dimensions of 400(width)x560(height) will be equally suitable for both mobile and desktop views, for a calculator that has two sliders, the `Apply` button and does not include the representative sample. - Dimensions of 400(width)x660(height) will be equally suitable for both mobile and desktop views, for a calculator that has three sliders, the `Apply` button and does not include the representative sample. For other calculator configurations, the dimensions would need to be adjusted. While some dimensions might be suitable for the desktop view, they might not work too well on mobile. In such cases, the implementation of two different dimensions for the two views is needed. For best results, the container holding the iFrame has to be responsive. Based on that the partner can then change the width and height. Note that in order to use the Inbank calculator, your site should use the following Response Headers values: `X-Frame-Options: SAMEORIGIN` (more information here) and `Referrer-Policy: origin` (more information here). # Configuring the Calculator There are multiple parameters that can be configured, so that the calculator looks and works as you expect it to. Mandatory configuration parameters are marked with \*. |Parameter|Description| | :- | :- | |Required parameters| |height and width|The dimensions of the calculator on a page. The height and width are editable and can be suited to your needs. Size examples can be found in the [Inbank Hire Purchase Calculator Views](#calculatorViews) section.
Note that for best results, the container holding the iFrame has to be responsive. Based on that the partner can then change the width and height.| |URL\*|The URL to which calculation requests are made. The correct URL path ensures that the calculator reflects the data for the correct country and payment product.

The demo URL which can be used for testing purposes is:
  • In Estonia - https://demo-calculator.inbank.ee/calculator/indivy/plan?
  • In Poland - https://demo-calculator.inbank.pl/calculator/indivy/plan?
  • In Latvia - https://demo-calculator.inbank.lv/calculator/indivy/plan?
  • In Czechia - https://demo-calculator.inbank.cz/calculator/indivy/plan?

    • The production URL is:
  • In Estonia - https://calculator.inbank.ee/calculator/indivy/plan?
  • In Poland - https://calculator.inbank.pl/calculator/indivy/plan?
  • In Latvia - https://calculator.inbank.lv/calculator/indivy/plan?
  • In Czechia - https://calculator.inbank.cz/calculator/indivy/plan?
    • | |product_code\*|The product code, which defines all the parameters and rules for the monthly payment calculation. The product_code is provided by Inbank.| |shop\_uuid\*|A unique code that is used to identify your e-shop in Inbank systems. The shop\_uuid is provided by Inbank.| |amount\*|The price of the product. You need to define in your e-commerce platform how the iFrame will get the price of the product automatically from the product page. If the price is smaller or bigger then allowed in the payment product configuration, an error will be shown to the customer. In the iFrame example [provided above](#addCalculator), the amount is set to a static value. However, it is expected that the amount is taken from the product page.
    Note that this parameter is only required when the calculator template is set to `no_editable_amount` or `text`.

    For example, in WordPress with the WooCommerce e-commerce plugin the price can be extracted like this:
  • Have the product defined as ```$product``` in the .php file in which you want to add the calculator.
  • When assembling the iFrame URL, replace the `amount` value with ```get\_price(); ?>```.

    • ```global $product;```

    ``` ```frameborder="0"```
    ```scrolling="no"```
    ```height="300"```
    ```width="200"```
    ```src="https://demo-calculator.inbank.ee/calculator/indivy/plan?product_code=product_code_example&amount=get_price(); ?>&shop_uuid=shop_uuid_example&lang=en"/>```| |Optional parameters|| |currency|The currency in which the product price is set. The currency parameter is used for displaying the correct symbol after a monthly payment value. Available currencies are eur, czk and pln. If the currency is not indicated, the default value eur is used.| |lang|The language in which texts in the calculator are shown. Available languages are en, et, pl, lv, cs and ru. If the language is not indicated, the default value en is used.| |template|The calculator view which is to appear on the page. If the template parameter is not set, the calculator with uneditable loan amount is shown. Available options:
  • `editable_amount` - template that allows the customer to change the loan amount
  • `no_editable_amount` - template that does not allow the customer to change the loan amount
  • `text` - minimalistic template that only includes the monthly calculation for the loan amount set in the calculator
    • | |logo|Whether the Inbank logo is displayed in the calculator or not. By default the parameter is set to `true`.| |mode|The background color of the calculator. By default, this parameter is set to `purple`.
    Available options:
  • `purple` corresponds to color code `#21093A`
  • `grey` corresponds to color code `#F7F7F7`
  • `white` corresponds to color code `#FFFFFF`
    • | |secondary_color|The color of certain elements of the calculator. If this parameter is not set, the default color scheme is applied to the calculator. Available options:
  • `red` corresponds to color code `#EE5151`
  • `black` corresponds to color code `#1D1D1D`
  • `blue` corresponds to color code `#2360D3`
  • `green` corresponds to color code `#60BF5E`
  • `yellow` corresponds to color code `#FFB800`
  • `plum_purple` corresponds to color code `#AA93FF`
  • `signal_orange` corresponds to color code `#FF9540`
  • `sky_blue` corresponds to color code `#95CDF5`
  • `pale_khaki` corresponds to color code `#D9D4A7`
  • `night_violet` corresponds to color code `#60378B`
    • | |show_sample|Whether the detailed calculation description is to be displayed in the calculator.
    Note that the representative sample is legally required to be shown in Latvia.| |start_session|Whether the customer can start the financing process from the calculator. By default this parameter is set to `false`.
    Note that the use of this parameter needs to be agreed with your Inbank representative.| |session_link|The link to the payment session which is started from the calculator. This link is used if parameter start_session is set to `true`.
    Note that the use of this parameter needs to be agreed with your Inbank representative. The session link is provided by Inbank.| # Inbank Hire Purchase Calculator Views The Inbank Hire Purchase calculator lets your customers explore the different monthly payment values they can get depending on the loan period of their selection. The minimum and maximum periods displayed in the calculator depend on the payment product configuration. From the calculator customers can also start the financing process with Inbank. The Hire Purchase calculator has three templates to choose from: - editable\_amount - the template where the customer can manually adjust the loan amount for the calculation - no\_editable amount (the default one) - the calculator template where customers will not be able to edit the loan amount - text - the minimalistic calculator template that only displays the Inbank logo and the monthly calculation The size of the calculator view is defined in the iFrame configuration and is fully adjustable. Note that the size of the calculator iFrame needs to allow for all the elements of the calculator. You can see samples of dimensions in the examples below. The calculator also offers customization options in terms of colors and use of Inbank logo. Examples of templates and customization options are shown below. Default color combinations for backgrounds purple, grey and white. Dimensions h=480, w=380. Dimensions h=550, w=370. Default color combinations for backgrounds purple, grey and white without the Inbank logo. Dimensions h=380, w=330. Dimensions h=450, w=330. Default color combinations for backgrounds purple, grey and white with an uneditable amount. Dimensions h=385, w=330. Dimensions h=450, w=330. Default color combinations for backgrounds purple, grey and white with editable amount and enabled down payment. Dimensions h=575, w=350. Default color combinations for backgrounds purple, grey and white with the Inbank logo, editable amount and enabled down payment. Dimensions h=650, w=350. Default color combinations for backgrounds purple, grey and white with the Inbank logo, editable amount, enabled down payment and representative sample. Dimensions h=660, w=400. Default color combinations for backgrounds purple, grey and white in text template. Dimensions h=115, w=350. Default color combinations for backgrounds purple, grey and white in text template with representative sample. Dimensions h=195, w=350. Default color combinations for backgrounds purple, grey and white in text template without the Inbank logo. Dimensions h=100, w=240. Color customization options with grey background and template with editable amount. The same customizations are also available for other background colors and the uneditable amount template. There is also the option of not displaying the Inbank logo as well. Dimensions h=480, w=350. Dimensions h=545, w=380. Note that for calculations used in Latvia and other cases when there is a need to show the representative sample, example dimensions for a calculator that has two sliders and no `Apply` button are: - w=400, h=585 for vertical layout - w=360, h=195 for text calculator template # Responsive Calculator Implementation Width For responsiveness you need to take into account different screen sizes or set the iFrame width in percentages or `auto`, depending on how your website is built (for example, `width="auto"` OR `width="100%"`). This will then set the iFrame width depending on the parent element. If the parent element is 500px wide then the calculator maximum width can also be maximum 500px. Common breakpoints for widths of devices: - 320px — 480px: Mobile devices - 481px — 768px: iPads, Tablets - 769px — 1024px: Small screens, laptops - 1025px — 1200px: Desktops, large screens - 1201px and more — Extra large screens, TV Height On the other hand you need to set the height depending on the width of the calculator, for example the more the calculator shrinks (getting smaller in width) the more height it needs. This can be done with showing different blocks via: - Bootstrap: Grid examples (d-block, d-md-block, d-lg-block, d-xl-block, d-xl-none, d-lg-none, d-md-none, d-none) - React Material UI → https://mui.com/system/display/#hiding-elements - Pure CSS → https://www.freecodecamp.org/news/css-media-queries-breakpoints-media-types-standard-resolutions-and-more/ With PURE CSS you need to define all the media types and sizes and inside there you either display a block or you do not display a block. You can find two basic calculator implementation examples below (based on Bootstrap and React Material UI). ## Bootstrap Example Insert code below here to test it out and understand what it does and how it's working - https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_grid_examples1&stacked=h If you want more precise elements you can also make more divs with different blocks to show and not to show and set the height in each iFrame. ```

    Two Columns

    Use the .col class on a specified number of elements and Bootstrap will recognize how many elements there are (and create equal-width columns). In the example below, we use two col elements, which gets a width of 33.33% and 66.66%

    Here comes for example your navigation sidebar
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularized in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularized in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum

    BIG CALCULATOR

    SMALL CALCULATOR

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularized in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
    ``` ## React Material UI Example Insert code here into index.js file and see how the calculator reacts differently on the website - https://codesandbox.io/s/material-ui-grid-demo-kq102?file=/src/index.js ``` import React from "react"; import ReactDOM from "react-dom"; import { Grid, Paper, Hidden} from "@material-ui/core"; import "/static/iframe/hire-purchase/styles.css"; function App() { return (

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularized in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularized in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularized in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum

    BIG CALCULATOR

    SMALL CALCULATOR

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularized in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum

         ); } const rootElement = document.getElementById("root"); ReactDOM.render(, rootElement); ```

    ## Servers Demo environment ``` https://demo-api.inbank.ee ``` Live environment ``` https://api.inbank.ee ``` ## Security ### bearerAuth Type: http Scheme: bearer ## Download OpenAPI description [Inbank Hire Purchase Calculator for E-shops](https://docs.inbank.eu/_bundle/iframe/hirePurchase/hirePurchase-flow.yaml)