Checkout component

Preview

Initialize

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

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

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

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-checkout></div>
</body>

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

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

Customization

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

.tinka-checkout-widget is the container of the widget.
.tinka-checkout-widget [role="term"] selects the heading element which contains the product name.
.tinka-checkout-widget-logo is the checkout logo inside the widget.
.tinka-checkout-widget [role="definition"] selects the container of the product details.
.tinka-checkout-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

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