Product banner component

Initialize

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

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

productBannerComponent.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)
`variant`	`minimal`, `expanded`	If set to 'expanded', it will show also the credit calculator component. The default is set to 'minimal' and the component won't render the calculator unless this property is added.
`colorScheme`	`light`, `dark`	Changes the colors for the text depending on the color scheme chosen
`action`	`faq`, `calculator`	Required if `expanded` is set to true. Shows the relevant expanded component (anchor link to the Tinka FAQ page or a button to open the calculator component).

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-product-banner></div>
</body>

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

    const productBannerComponent = productBanner({
      target: document.querySelector('[data-tinka-product-banner]'),
      product: products.names.Credit,
      orderAmount: 2300,
      action: 'faq',
      variant: 'expanded',
      colorScheme: 'light'
    });
  });
</script>

Customization

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

.tinka-product-banner-widget is the container of the widget.
.tinka-product-banner-widget [role="term"] selects the inner text box element.
.tinka-product-banner-widget-logo is the checkout logo inside the widget.
.tinka-product-banner-widget .afm-credit-warning selects the warning banner mandated by AFM. (We do not recommend customising this banner to make it less noticible to the consumers. )

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. The warning banner is adjusted to take the full width of the container with larger image inside.

.tinka-product-banner-widget {
  border: 1px solid #cccccc;
  background: #eeeeee;
  padding: 12px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-style: italic;
}
.tinka-product-banner-widget [role='term'] {
  font-weight: bold;
  justify-content: space-between;
}
.tinka-product-banner-widget-logo {
  float: right;
}
.tinka-product-banner-widget .afm-credit-warning {
  height: 40px !important;
  background-size: auto 24px !important;
  max-width: 999px;
}

Tinka Developer Portal