Documentation version v1.02, 05.10.2023

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 technical help on integrating the Inbank Hire Purchase calculator to your e-shop, contact our integration team:

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

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:

<iframe
    frameborder="0"
    scrolling="no"
    height="400"
    width="250"
src="https://demo-calculator.inbank.ee/calculator/indivy/plan?product_code=product_code_example&amount=2500&shop_uuid=shop_uuid_example&lang=en">
</iframe>

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).

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 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, 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 <?php echo $product->get\_price(); ?>. global $product; <iframe frameborder="0" scrolling="no" height="300" width="200" src="https://demo-calculator.inbank.ee/calculator/indivy/plan?product_code=product_code_example&amount=<?php echo $product->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 grey white
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 black blue green yellow plum_purple signal_orange sky_blue pale_khaki night_violet
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.

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=475, w=380.

Dimensions h=540, w=370.

Default color combinations for backgrounds purple, grey and white.

Dimensions h=240, w=900.

Dimensions h=250, w=1350.

Default color combinations for backgrounds purple, grey and white without the Inbank logo.

Dimensions h=380, w=330.

Dimensions h=445, w=330.

Default color combinations for backgrounds purple, grey and white without the Inbank logo.

Dimensions h=240, w=900.

Dimensions h=250, w=1350.

Default color combinations for backgrounds purple, grey and white with an uneditable amount.

Dimensions h=380, w=330.

Dimensions h=445, w=330.

Default color combinations for backgrounds purple, grey and white with editable amount and enabled down payment.

Dimensions h=570, 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=655, w=400.

Default color combinations for backgrounds purple, grey and white with editable amount and enabled down payment.

Dimensions h=240, w=1350

Default color combinations for backgrounds purple, grey and white with the Inbank logo, editable amount, enabled down payment and representative sample.

Dimensions h=320, w=1520.

Default color combinations for backgrounds purple, grey and white in text template.

Dimensions h=110, 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=475, w=350.

Dimensions h=540, 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=800, h=300 for horizontal layout
• w=360, h=195 for text calculator template

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).

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.

<div class="container-fluid">
<h2>Two Columns</h2>
<p>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%</p>
<div class="row">
<div class="col-3 bg-success">
  <div class="content /some other classes u need/">
  Here comes for example your navigation sidebar
  </div>
</div>
<div class="col-9 bg-warning">
  <div class="content mb-4">
    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
  </div>
  <div class="content mb-4">
    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
  </div>
  <div class="content mb-4">
    <div class="d-none d-sm-none d-md-none d-lg-block d-xl-block">
      <p>BIG CALCULATOR</p>
      <iframe frameborder="0" scrolling="no" height="350" width="100%" src="https://calculator.inbank.ee/calculator/indivy/plan?amount=2500&shop_uuid=d0b66b89-c5be-4b42-a3f0-37abdc921887&product_code=hp_epos_confido&currency=eur&lang=et&template=editable_amount&mode=purple&logo=true&show_sample=false&start_session=false"></iframe>
    </div>
    <div class="d-block d-sm-block d-md-block d-lg-none d-xl-none">
      <p>SMALL CALCULATOR</p>
      <iframe frameborder="0" scrolling="no" height="450" width="100%" src="https://calculator.inbank.ee/calculator/indivy/plan?amount=2500&shop_uuid=d0b66b89-c5be-4b42-a3f0-37abdc921887&product_code=hp_epos_confido&currency=eur&lang=et&template=editable_amount&mode=purple&logo=true&show_sample=false&start_session=false"></iframe>
    </div>
    <div class="content mb-4">
      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
    </div>
  </div>
</div>
</div>

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 "./styles.css";

function App() {
  return (
    <Grid container spacing={2} justify="center">
      <Grid item xs={3}>
        <Paper style={{ height: "100%", background: "lightgrey" }} />
      </Grid>
      <Grid item xs={9}>
        <Paper style={{ height: "100%", background: "lightyellow", padding: "15px"}}>
          <div style={{ marginBottom: "4px" }}>
          <p>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</p>
          </div>
          <div style={{ marginBottom: "4px" }}>
          <p>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</p>
          </div>
          <div style={{ marginBottom: "4px" }}>
          <p>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</p>
          </div>
          <Hidden only={['xs', 'sm']}>
          <div>
            <p> BIG CALCULATOR </p>
            <iframe frameborder="0" scrolling="no" height="300px" width="100%" src="https://calculator.inbank.ee/calculator/indivy/plan?amount=2500&shop_uuid=d0b66b89-c5be-4b42-a3f0-37abdc921887&product_code=hp_epos_confido&currency=eur&lang=et&template=editable_amount&mode=purple&logo=true&show_sample=false&start_session=false"></iframe>
          </div>
          </Hidden>
          <Hidden only={['md', 'lg', 'xl']}>
          <div>
            <p> SMALL CALCULATOR </p>
            <iframe frameborder="0" scrolling="no" height="450px" width="100%" src="https://calculator.inbank.ee/calculator/indivy/plan?amount=2500&shop_uuid=d0b66b89-c5be-4b42-a3f0-37abdc921887&product_code=hp_epos_confido&currency=eur&lang=et&template=editable_amount&mode=purple&logo=true&show_sample=false&start_session=false"></iframe>
          </div>
          </Hidden>
          <div style={{ marginBottom: "4px" }}>
          <p>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</p>
          </div>
        </Paper>
      </Grid>
    </Grid>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);