# Inbank Calculator Guide


<b>Documentation version 1.12, 02.06.2026</b>

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 calculator, contact us at:

- Estonia - <a href="mailto:integration@inbank.ee">integration@inbank.ee</a>
- Poland - <a href="mailto:integration@inbank.pl">integration@inbank.pl</a>
- Latvia - <a href="mailto:integration@inbank.lv">integration@inbank.lv</a>
- Czech Republic - <a href="mailto:integration@inbank.cz">integration@inbank.cz</a>
- Lithuania - <a href="mailto:integration@inbank.lt">integration@inbank.lt</a>

# Adding the Calculator to a Page

You can add the calculator to any webpage by simply using a JS script. The website platform of your site defines how the script can be added to all product pages (or checkout page if needed).

Example of the calculator script:

```html
<div id="inbank-calculator"></div>
<script>
!function(w,d,i,u){(function(){return new Promise(function(r,j){if(w.CalculatorWidget)return r(w.CalculatorWidget);if(d.getElementById(i))return void setInterval(function(){w.CalculatorWidget&&(clearInterval(this),r(w.CalculatorWidget))},100);var s=d.createElement("script");s.id=i,s.src=u,s.async=1,s.onload=function(){w.CalculatorWidget&&w.CalculatorWidget.init?r(w.CalculatorWidget):j("init not found")},s.onerror=function(){j("script load failed")},d.head.appendChild(s)})})().then(function(calculator){
calculator.init("inbank-calculator", {
  layout: "default",
  variant: "calculator-indivy-plan",
  shop_uuid: "add_shop_uuid_here",
  product_code: "add_product_code_here",
  amount: 4500,
  template: "non_editable_amount",
  mode: "lavender",
  lang: "en",
  region: "ee"
});
}).catch(console.error)}(window,document,"inbank-calculator-loader","https://calculator.inbank.eu/api/calculator");
</script>
```

<b>Note</b> that you need to contact your Inbank representative to whitelist your domain if you plan to initiate an ePOS session. For standard calculator usage without starting a session, whitelisting is not required.

# 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 \*.

|<b>Parameter</b>|<b>Description</b>|
| :- | :- |
|<i>layout</i>|The layout of the calculator, which defines its look and size. Available options: <br> <li>`default` - for Hire Purchase and HP Flex/Moki payment products. The rendered calculator layout is determined automatically based on the selected product type. Examples of this layout are available in [Default Calculator Layout](/api/js-calculator-flow/section/inbank-calculator-layouts/default-calculator-layout).</li> <li>`extended` - vertical layout for payment products. Examples of this layout are available in [Extended Calculator Layout](/api/js-calculator-flow/section/inbank-calculator-layouts/extended-calculator-layout).</li> <li>`extended-horizontal` - horizontal layout for payment products. Examples of this layout are available in [Extended Calculator Layout](/api/js-calculator-flow/section/inbank-calculator-layouts/extended-calculator-layout).</li>|
|<i>variant</i>\*|The type of payment product to be used in the calculations. Currently, this value needs to be set to `calculator-indivy-plan`.|
|<i>shop_uuid</i>\*|A unique code that is used to identify your site in Inbank systems. The `shop_uuid` can be found in Partner Portal.|
|<i>product_code</i>\*|The product code, which defines all the parameters and rules for the monthly payment calculation. The `product_code` can be found in Partner Portal.|
|<i>amount</i>\*|The price of the product. If the price is smaller or bigger than allowed in the payment product configuration, an error will be shown to the customer. <br><br> You need to define in your e-commerce platform how the calculator will get the price of the product automatically from the product page. In the example [provided above](/api/js-calculator-flow/section/adding-the-calculator-to-a-page), the amount is set to a static value. However, it is expected that the amount is taken from the product page. <br><br> For example, in WordPress with the WooCommerce e-commerce plugin, the price can be extracted like this: <li>Have the product defined as ```$product``` in the .php file in which you want to add the calculator.</li> <li>When assembling the calculator script, replace the `amount` value with ```<?php echo $product->get_price(); ?>``` as follows: ```amount: <?= $product->get_price(); ?>```</li>|
|<i>template</i>|Whether the customer will be able to edit the loan amount in the calculator modal. If the `template` parameter is not set, the calculator with an uneditable loan amount is shown. Available options:<br> <li>`editable_amount` - template that allows the customer to change the loan amount in the calculator modal</li> <li>`no_editable_amount` - template that does not allow the customer to change the loan amount in the calculator modal</li>|
|<i>mode</i>|The background color of the calculator. By default, this parameter is set to `lavender`. Available options:<br> <li>`purple`</li> <li>`lavender`</li> <li>`white`</li>|
|<i>lang</i>|The language in which texts in the calculator are shown. Available languages are `en`, `lt`, `lv`, `et`, `cs` and `ru`. If the language is not indicated, the default value `en` is used.|
|<i>region</i>\*|The environment to which the calculator is connected. <br>Estonia: <li>`eedemo` for demo/test environment</li> <li>`ee` for the production environment</li> <br>Latvia: <li>`lvdemo` for demo/test environment</li> <li>`lv` for the production environment</li> <br>Lithuania: <li>`ltdemo` for demo/test environment</li> <li>`lt` for the production environment</li> <br>Poland: <li>`pldemo` for demo/test environment</li> <li>`pl` for the production environment</li> <br>Czechia: <li>`czdemo` for demo/test environment</li> <li>`cz` for the production environment</li>|
|<i>URL</i>|The link to the calculator library in either demo or live environment. The link is set as the last element of the script. Available options: <br><li>demo-  https://demo-calculator.inbank.eu/api/calculator</li> <li>live - https://calculator.inbank.eu/api/calculator</li>|

</p>

<span id="calculatorViews"></span>

# Inbank Calculator Layouts

## Default Calculator Layout

The `default` layout is used for both Hire Purchase and HP Flex/Moki payment products. The rendered calculator appearance is determined automatically based on the selected product type.

<b>Hire Purchase</b>

Depending on the width available to the calculator, it will have one of the following sizes:
- 300 x 125
- 402 x 150

On the examples below, the layout parameter is set to `default` for a Hire Purchase payment product.

- The example below shows the calculator with the `mode` set to `white`: <br></br>
  <img src="/static/js-calculator/inbank-default-hp-white.jpg" width="420" height="150"/>

- The example below shows the calculator with the `mode` set to `lavender`: <br></br> 
<img src="/static/js-calculator/inbank-default-hp-lavender.jpg" width="420" height="150"/>

- The example below shows the calculator with the `mode` set to `purple`: <br></br>
  <img src="/static/js-calculator/inbank-default-hp-purple.jpg" width="420" height="150"/>

</br>

Once the user clicks the button within the calculator, an additional modal will be displayed with a maximum width of 640px.

</br>

<img src="/static/js-calculator/inbank-default-calculator-modal.jpg" class="center"/>

</br></br>

<b>HP Flex/Moki</b>

The Moki calculator has fixed dimensions of 300 x 125.

On the example below, the layout parameter is set to `default` for a HP Flex/Moki payment product.

<img src="/static/js-calculator/inbank-hpflex-calculator.png" class="center"/>

</br></br>

Once the user clicks on the calculator, an additional modal will be displayed with a maximum width of 640px.

</br></br>

<img src="/static/js-calculator/inbank-flex-modal.png" class="center"/>

</br></br>

## Extended Calculator Layout

<b>Note</b> that you need to contact your Inbank representative to whitelist your domain if you plan to initiate an ePOS session. For standard calculator usage without starting a session, whitelisting is not required.

<b>Please note</b> that this layout is recommended if Hire Purchase, loan or leasing type of product is to be used with the calculator.

There are two layouts available for the Extended Calculator with the following sizes:

- `extended-horizontal` with dimensions 650x350
- `extended` with dimensions 350x650

Please note that the `extended-horizontal` version will switch to 350x650 dimensions automatically for screens too narrow to accommodate its usual dimensions.

</br>

On the examples below, the layout parameter is set to `extended-horizontal`.

- The example below shows the calculator with the `mode` set to `white`: <br></br>
<img src="/static/js-calculator/inbank-extended-horizontal-white-calculator.jpg" width="730" height="370"/>

- The example below shows the calculator with the `mode` set to `lavender`: <br></br>
<img src="/static/js-calculator/inbank-extended-horizontal-lavender-calculator.jpg" width="730" height="370"/>

- The example below shows the calculator with the `mode` set to `purple`: <br></br>
<img src="/static/js-calculator/inbank-extended-horizontal-purple-calculator.jpg" width="730" height="370"/>

</br></br>

On the examples below, the layout parameter is set to `extended`.

- The example below shows the calculator with the `mode` set to `white`: <br></br>
<img src="/static/js-calculator/inbank-extended-white-calculator.jpg" height="720"/>

- The example below shows the calculator with the `mode` set to `lavender`: <br></br>
<img src="/static/js-calculator/inbank-extended-lavender-calculator.jpg" height="720"/>

- The example below shows the calculator with the `mode` set to `purple`: <br></br>
<img src="/static/js-calculator/inbank-extended-purple-calculator.jpg" height="720"/>


</br></br>

</p>
</p>



## Servers

Demo environment
```
https://demo-api.inbank.ee
```

Live environment
```
https://api.inbank.ee
```

## Security

### bearerAuth

Type: http
Scheme: bearer

## Download OpenAPI description

[Inbank Calculator Guide](https://docs.inbank.eu/_bundle/api/js-calculator-flow.yaml)