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 Car Loan calculator to your e-shop, contact 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="500"
    width="400"
src="https://demo-calculator.inbank.ee/calculator/carloan?product_code=product_code_example&amount=2500&shop_uuid=shop_uuid_example&lang=en&currency=eur&make=Manufacturer&model=Model&image_url=example.link/image">
</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 pages.

For example, the 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. If the calculator would have the Apply button, for example, 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 Car Loan Calculator Views section. 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/carloan? In Poland - https://demo-calculator.inbank.pl/calculator/carloan? In Latvia - https://demo-calculator.inbank.lv/calculator/carloan? In Czechia - https://demo-calculator.inbank.cz/calculator/carloan? The production URL is: In Estonia - https://calculator.inbank.ee/calculator/carloan? In Poland - https://calculator.inbank.pl/calculator/carloan? In Latvia - https://calculator.inbank.lv/calculator/carloan? In Czechia - https://calculator.inbank.cz/calculator/carloan?
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 website how the iFrame will get the price of the product automatically from the product page. For an example of how this can be done in WordPress, refer to Including Product Data into the Calculator Configuration. If the price is smaller or bigger then allowed in the payment product configuration, an error will be shown to the customer. Note that this parameter is only required when the calculator template is set to no_editable_amount or text.
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 editable loan amount is shown. Available options: editable_amount - template that allows changing 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 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 true.
excess_amount	Whether customers should be offered monthly calculations and the option of financing for amounts that are over the maximum amount limit set for your Inbank product. By default the parameter is set to false. Note that the use of this parameter needs to be agreed with your Inbank representative.
make	Vehicle brand which will be used during the financing process. If the brand is not indicated, the default value null is used. You can define in your website how the iFrame will get the brand of the vehicle automatically from the product page. For an example of how this can be done in WordPress, refer to Including Product Data into the Calculator Configuration.
model	Vehicle model which will be used during the financing process. If the model is not indicated, the default value null is used. You can define in your website how the iFrame will get the model of the vehicle automatically from the product page. For an example of how this can be done in WordPress, refer to Including Product Data into the Calculator Configuration.
image_url	Link to the image of the vehicle which will be used during the financing process. If the link is not indicated, the default value null is used. You can define in your website how the iFrame will get the image link of the vehicle automatically from the product page. For an example of how this can be done in WordPress, refer to Including Product Data into the Calculator Configuration.
leasing	Whether the product for which the calculator is being used is an Inbank Car Leasing product. By default the parameter is set to false.

In the iFrame example provided above, all parameters are set to a static value. However, it is expected that the vehicle price is taken from the product page. 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
    style="border: 1px solid #f1f1f1; border-radius: 15px;"
    frameborder="0"
    scrolling="no"
    height="300"
    width="200"
src="https://demo-calculator.inbank.ee/calculator/carloan?product_code=product_code_example&amount=<?php echo $product->get_price(); ?>&shop_uuid=shop_uuid_example&lang=en&currency=eur&make=Manufacturer&model=Model&image_url=http://example.link/image"></iframe>  

Similarly, the vehicle brand, model and image link can be automatically inserted from the product page:

• To automatically insert the vehicle brand, set the make parameter to <?php echo $product->get_attribute( 'make' ); ?>
• To automatically insert the vehicle model, set the model parameter to <?php echo $product->get_attribute( 'model' ); ?>
• To automatically insert the vehicle brand, set the image_url parameter to <?php echo $product->get_attribute( 'imageURL' ); ?>

global $product;

<iframe
    style="border: 1px solid #f1f1f1; border-radius: 15px;"
    frameborder="0"
    scrolling="no"
    height="300"
    width="200"
src="https://demo-calculator.inbank.ee/calculator/carloan?product_code=product_code_example&amount=<?php echo $product->get_price(); ?>&shop_uuid=shop_uuid_example&lang=en&currency=eur&make=<?php echo $product->get_attribute( 'make' ); ?>&model=<?php echo $product->get_attribute( 'model' ); ?>&image_url=<?php echo $product->get_attribute( 'imageURL' ); ?>"></iframe> 

Please note, the code samples above are examples and the implementation details may differ based on the setup of your site.

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 (gets 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 them 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);