openapi: 3.0.1
info:
  title: Inbank Hire Purchase Calculator for E-shops
  version: null
  description: >

    <b>Documentation version 1.03, 20.11.2025</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 Hire Purchase 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>

    - Czechia - <a href="mailto:integration@inbank.cz">integration@inbank.cz</a>


    <b>Note</b> 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.


    <span id="addCalculator"></span>


    # 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 - <a
    href="https://epos.inbank.ee/et/calculator-iframe-generator"
    target="_blank">https://epos.inbank.ee/et/calculator-iframe-generator</a>

    - In Poland - <a
    href="https://epos.inbank.pl/pl/calculator-iframe-generator"
    target="_blank">https://epos.inbank.pl/pl/calculator-iframe-generator</a>

    - In Latvia - <a
    href="https://epos.inbank.lv/lv/calculator-iframe-generator"
    target="_blank">https://epos.inbank.lv/lv/calculator-iframe-generator</a>

    - In Czechia- <a
    href="https://epos.inbank.cz/cs/calculator-iframe-generator"
    target="_blank">https://epos.inbank.cz/cs/calculator-iframe-generator</a>


    Example of the iFrame calculator configuration:


    ```html

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

    ```


    <b>Note</b> 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.


    <b>Note</b> 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.


    <b>Note</b> that in order to use the Inbank calculator, your site should use
    the following Response Headers values: `X-Frame-Options: SAMEORIGIN` (more
    information <a
    href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options"
    target="_blank">here</a>) and `Referrer-Policy: origin` (more information <a
    href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy"
    target="_blank">here</a>).


    # 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>|

    | :- | :- |

    |<b>Required parameters</b>|

    |<i>height</i> and <i>width</i>|The dimensions of the calculator on a page.
    The <i>height</i> and <i>width</i> are editable and can be suited to your
    needs. Size examples can be found in the [Inbank Hire Purchase Calculator
    Views](#calculatorViews) section. <br> <b>Note</b> 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.|

    |<i>URL</i>\*|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. <br><br> The demo URL which can be used for
    testing purposes is: <br> <li>In Estonia - 
    https://demo-calculator.inbank.ee/calculator/indivy/plan?</li> <li>In Poland
    - https://demo-calculator.inbank.pl/calculator/indivy/plan?</li> <li>In
    Latvia - https://demo-calculator.inbank.lv/calculator/indivy/plan?</li>
    <li>In Czechia -
    https://demo-calculator.inbank.cz/calculator/indivy/plan?</li><br> The
    production URL is: <li>In Estonia - 
    https://calculator.inbank.ee/calculator/indivy/plan?</li> <li>In Poland - 
    https://calculator.inbank.pl/calculator/indivy/plan?</li> <li>In Latvia -
    https://calculator.inbank.lv/calculator/indivy/plan?</li> <li>In Czechia -
    https://calculator.inbank.cz/calculator/indivy/plan?</li>|

    |<i>product_code</i>\*|The product code, which defines all the parameters
    and rules for the monthly payment calculation. The <i>product_code</i> is
    provided by Inbank.|

    |<i>shop\_uuid</i>\*|A unique code that is used to identify your e-shop in
    Inbank systems. The <i>shop\_uuid</i> is provided by Inbank.|

    |<i>amount</i>\*|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.<br> <b>Note</b> that this parameter is only required
    when the calculator <b>template</b> is set to `no_editable_amount` or
    `text`.<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 iFrame URL, replace the `amount`
    value with  ```<?php echo $product->get\_price(); ?>```.</li> <br>```global
    $product;``` <br><br> ```<iframe``` <br> ```frameborder="0"``` <br>
    ```scrolling="no"``` <br> ```height="300"``` <br> ```width="200"```
    <br>```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"/>```|

    |<b>Optional parameters</b>||

    |<i>currency</i>|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.|

    |<i>lang</i>|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.|

    |<i>template</i>|The calculator view which is to appear on the page. If the
    <i>template</i> parameter is not set, the calculator with uneditable loan
    amount is shown. Available options:<li>`editable_amount` - template that
    allows the customer to change the loan amount</li> <li>`no_editable_amount`
    - template that does not allow the customer to change the loan amount</li>
    <li>`text` - minimalistic template that only includes the monthly
    calculation for the loan amount  set in the calculator</li>|

    |<i>logo</i>|Whether the Inbank logo is displayed in the calculator or not.
    By default the parameter is set to `true`.|

    |<i>mode</i>|The background color of the calculator. By default, this
    parameter is set to `purple`. <br> Available options: <br> <li>`purple`
    corresponds to color code `#21093A`</li> <li>`grey` corresponds to color
    code `#F7F7F7`</li> <li>`white` corresponds to color code `#FFFFFF`</li>|

    |<i>secondary_color</i>|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: <li>`red` corresponds to color code
    `#EE5151`</li> <li>`black` corresponds to color code `#1D1D1D`</li>
    <li>`blue` corresponds to color code `#2360D3`</li> <li>`green` corresponds
    to color code `#60BF5E`</li> <li>`yellow` corresponds to color code
    `#FFB800`</li> <li>`plum_purple` corresponds to color code `#AA93FF`</li>
    <li>`signal_orange` corresponds to color code `#FF9540`</li> <li>`sky_blue`
    corresponds to color code `#95CDF5`</li> <li>`pale_khaki` corresponds to
    color code `#D9D4A7`</li> <li>`night_violet` corresponds to color code
    `#60378B`</li>|

    |<i>show_sample</i>|Whether the detailed calculation description is to be
    displayed in the calculator. <br> <b>Note</b> that the representative sample
    is legally required to be shown in Latvia.|

    |<i>start_session</i>|Whether the customer can start the financing process
    from the calculator. By default this parameter is set to `false`. <br>
    <b>Note</b> that the use of this parameter needs to be agreed with your
    Inbank representative.|

    |<i>session_link</i>|The link to the payment session which is started from
    the calculator. This link is used if parameter <i>start_session</i> is set
    to `true`. <br> <b>Note</b> that the use of this parameter needs to be
    agreed with your Inbank representative. The session link is provided by
    Inbank.|


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


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


    <b>Default color combinations for backgrounds purple, grey and white.</b>


    Dimensions h=480, w=380.


    <img src="/static/iframe/hire-purchase/h475-w380.png" class="center"/>


    Dimensions h=550, w=370.


    <img src="/static/iframe/hire-purchase/h540-w370.png" class="center"/>


    <b>Default color combinations for backgrounds purple, grey and white without
    the Inbank logo.</b>


    Dimensions h=380, w=330.


    <img src="/static/iframe/hire-purchase/h380-w330.png" class="center"/>


    Dimensions h=450, w=330.


    <img src="/static/iframe/hire-purchase/h445-w330.png" class="center"/>


    <b>Default color combinations for backgrounds purple, grey and white with an
    uneditable amount.</b>


    Dimensions h=385, w=330.


    <img src="/static/iframe/hire-purchase/h380-w330-one-slider.png"
    class="center"/>


    Dimensions h=450, w=330.


    <img src="/static/iframe/hire-purchase/h445-w330-no-slider.png"
    class="center"/>


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


    Dimensions h=575, w=350.


    <img src="/static/iframe/hire-purchase/h570-w350.png" class="center"/>


    <b>Default color combinations for backgrounds purple, grey and white with
    the Inbank logo, editable amount and enabled down payment.</b>


    Dimensions h=650, w=350.


    <img src="/static/iframe/hire-purchase/h650-w350.png" class="center"/>


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


    Dimensions h=660, w=400.


    <img src="/static/iframe/hire-purchase/h655-w400.png" class="center"/>


    <b>Default color combinations for backgrounds purple, grey and white in text
    template.</b>


    Dimensions h=115, w=350.


    <img src="/static/iframe/hire-purchase/h110-w350-purple.png" width="300px"/>

    <img src="/static/iframe/hire-purchase/h110-w350-grey.png" width="300px"/>

    <img src="/static/iframe/hire-purchase/h110-w350-white.png" width="300px"/>


    <b>Default color combinations for backgrounds purple, grey and white in text
    template with representative sample.</b>


    Dimensions h=195, w=350.


    <img src="/static/iframe/hire-purchase/h195-w350-purple.png" width="320px"/>

    <img src="/static/iframe/hire-purchase/h195-w350-grey.png" width="320px"/>

    <img src="/static/iframe/hire-purchase/h195-w350-white.png" width="320px"/>


    <b>Default color combinations for backgrounds purple, grey and white in text
    template without the Inbank logo.</b>


    Dimensions h=100, w=240.


    <img src="/static/iframe/hire-purchase/h100-w240-purple.png" width="220px"/>

    <img src="/static/iframe/hire-purchase/h100-w240-grey.png" width="220px"/>

    <img src="/static/iframe/hire-purchase/h100-w240-white.png" width="220px"/>


    <b>Color customization options</b> 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.


    <img src="/static/iframe/hire-purchase/h475-w350.png"/>

    <img src="/static/iframe/hire-purchase/h475-w350-2.png" width="550"/>

    <img src="/static/iframe/hire-purchase/h475-w350-3.png"/>

    <img src="/static/iframe/hire-purchase/h475-w350-4.png" width="550"/>


    Dimensions h=545, w=380.


    <img src="/static/iframe/hire-purchase/h540-w380.png"/>

    <img src="/static/iframe/hire-purchase/h540-w380-2.png" width="550"/>

    <img src="/static/iframe/hire-purchase/h540-w380-3.png"/>

    <img src="/static/iframe/hire-purchase/h540-w380-4.png" width="550"/>


    <b>Note</b> 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


    <b>Width</b>


    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


    <b>Height</b>


    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 → <a
    href="https://mui.com/system/display/#hiding-elements"
    target="_blank">https://mui.com/system/display/#hiding-elements</a>

    - Pure CSS → <a
    href="https://www.freecodecamp.org/news/css-media-queries-breakpoints-media-types-standard-resolutions-and-more/"
    target="_blank">https://www.freecodecamp.org/news/css-media-queries-breakpoints-media-types-standard-resolutions-and-more/</a>


    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 - <a
    href="https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_grid_examples1&stacked=h"
    target="_blank">https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_grid_examples1&stacked=h</a>


    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>

    ```


    ## React Material UI Example


    Insert code here into index.js file and see how the calculator reacts
    differently on the website - <a
    href="https://codesandbox.io/s/material-ui-grid-demo-kq102?file=/src/index.js"
    target="_blank">https://codesandbox.io/s/material-ui-grid-demo-kq102?file=/src/index.js</a>


    ```

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

    ```


    </p></p></p>
servers:
  - url: https://demo-api.inbank.ee
    description: Demo environment
  - url: https://api.inbank.ee
    description: Live environment
paths: {}
components:
  securitySchemes:
    bearerAuth:
      type: http
      scheme: bearer
