Calculator component

Preview

Initialize

Destructure the "calculator" component and initialize it from the widgets collection like this:

const { calculator } = window.TinkaWidgets;
const calculatorComponent = calculator({ ...props });

De-initialize

You can also destroy this component manually when there is no need for it anymore. In order to do so, call the destroy() function like:

const { calculator } = window.TinkaWidgets;
const calculatorComponent = calculator({ ...props });

calculatorComponent.destroy();

Props

Property	Type	Description
`target` required	HTMLElement	The target HTML node where the component will get rendered.
`product` required	string	The Tinka product used in the checkout page (e.g. Credit). For ease of use, we provide also the product names in `window.TinkaWidgets.products.names`. For a list of all the product names that could be enabled, please refer to this link.
`orderAmount` required	number	The total order amount in cents. (e.g. 2000 for 20 euros)
`colorScheme`	`light`, `dark`	Changes the colors for the text depending on the color scheme chosen

Code snippet

Here is an ready to add example you could use in your code:

<head>
  <link rel="stylesheet" href="https://components.tinka.business/tinka-widgets.css" />
  <script src="https://components.tinka.business/tinka-widgets.js"></script>
</head>

<body>
  <div data-tinka-calculator></div>
</body>

<script>
  addEventListener('DOMContentLoaded', function () {
    const { calculator, products } = window.TinkaWidgets;

    const calculatorComponent = calculator({
      target: document.querySelector('[data-tinka-calculator]'),
      product: products.names.Credit,
      orderAmount: 2300
    });
  });
</script>

Customization

You can use the following selectors to refer to inner elements of the widget

.tinka-calculator-widget-header is the header of the modal containing the title and the logo.
.tinka-calculator-widget is the container of the widget. The body of the modal.
.editable-active .icon-button is the active state of the step button.
.editable-inactive .icon-button is the inactive state of the step button.
.not-editable .icon-button is the disabled state of the step button..
.tinka-calculator-widget-step-text is the step text.
.tinka-calculator-widget-step-value is the step value.
.tinka-calculator-widget-total-amount-text is the total amount text.
.tinka-calculator-widget-total-amount-value is the total amount value.
.tinka-calculator-widget-total-interest-text is the total interest text.
.tinka-calculator-widget-total-interest-value is the total interest value.
.tinka-calculator-widget-interest-rate-text is the interest rate text.
.tinka-calculator-widget-interest-rate-value is the interest rate value.
.tinka-calculator-widget-more-info-button is the information button that redirect to the tinka nl site.

EXAMPLE

In this example, the widget is customised to have custom font and custom colours for different parts of the calculator.

.tinka-calculator-widget-trigger {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.tinka-calculator-widget-header {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    color:#403E36;
    font-weight: normal;
}
.tinka-calculator-widget {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.editable-active .icon-button {
    background-color: #403E36;
    border-color: #403E36;
    color: #E34A00;
}
.editable-inactive .icon-button {
    border-color: #403E36;
    color: #E34A00;  
}
.not-editable .icon-button {
    color: lightgray;
}
.tinka-calculator-widget-step-text {
    color: #403E36;
}
.tinka-calculator-widget-step-value {
    font-weight: bold;
		color: #E34A00;  
}
.tinka-calculator-widget-total-amount-text {
    color: #E34A00;
}
.tinka-calculator-widget-total-amount-value {
    color: #E34A00;
    font-family: Arial, Helvetica, sans-serif;
}
.tinka-calculator-widget-total-interest-text {
    color: #403E36;
}
.tinka-calculator-widget-total-interest-value {
    color: #E34A00;
}
.tinka-calculator-widget-interest-rate-text {
    color: #403E36;
}
.tinka-calculator-widget-interest-rate-value {
    color: #E34A00;
}
.tinka-calculator-widget-more-info-button {
    color: red;
    border-color:  #E34A00;
    outline-color:  #E34A00;  
}