Credit table component

Preview

Initialize

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

const { creditTable } = window.TinkaWidgets;
const creditTableComponent = creditTable({ ...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 { creditTable } = window.TinkaWidgets;
const creditTableComponent = creditTable({ ...props });

creditTableComponent.destroy();

Props

Property	Type	Description
`target` required	HTMLElement	The target HTML node where the component will get rendered.
`merchant` required	string	The merchant name mentioned in the footer text under the table
`variant`	`minimal`, `expanded`	If set to 'expanded', it will show also the credit table title. The default is set to 'minimal' and won't change unless this property is added
`product` required	string	The Tinka product used in the credit table (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.
`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-credit-table></div>
</body>

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

    const creditTableComponent = creditTable({
      target: document.querySelector('[data-tinka-credit-table]'),
      product: products.names.Credit24Months,
      merchant: 'MerchantName',
      variant: 'expanded',
      colorScheme: 'light'
    });
  });
</script>

Customization

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

.tinka-credit-table-widget is the container of the widget.
.tinka-credit-table-widget-table-head selects the table head.

EXAMPLE

In this example, the widget is customised to have the logo align on the right within the container. Custom typeface settings and decorations are added to the container.

.tinka-credit-table-widget {
  border: 1px solid #cccccc;
  background: #eeeeee;
  padding: 12px;
  font-family: Arial, Helvetica, sans-serif;
  font-style: italic;
}
.tinka-credit-table-widget-table-head {
  font-family: Arial, Helvetica, sans-serif;
  font-style: normal;
  color: red;
}