Home
This installation guide will help you setup the CreditClick Price Module in your platform.
As a web shop owner you are very familiar with the orienting customer who ultimately does not buy the product. A common reason is that at that moment the customer does not have the money available or simply does not want to pay the amount in one go. This is a missed opportunity for both the consumer and the webshop.
Experience shows that only 5% of consumers return to your website to buy the product after leaving your page. In other words; 95% of potential buyers are not seen back. With offering instalment based payments or a continuous credit portfolio, you have reduced a significant reason for consumers not coming back.
The CreditClick Price Module enhances conversion by highlighting the estimated cost per month already on the product page and in the shopping cart ("Pay at once or pay X per month"). The estimated cost per month is calculated automatically and is explained to the consumer in compliance with the local credit regulation.
Please note that the CreditClick Price Module is only displayed on the product page when the product offered amount is within the limits of the country.
| Minimum amount | Maximum amount | data-cc-country | |
|---|---|---|---|
The Netherlands |
€ 250,- |
€ 1000,- |
nl |
Germany |
€ 150,- |
€ 5000,- |
de |
In general, it’s easy to add the plugin to your webshop. If you have a shop where you have a more dynamic front-end like Angular 2+ or similar, you might need to do additional things to correctly load / reload the plugin. In the next sections we will describe how to interact with the plugin in general and how to deal with Angular 2+ in combination with the plugin.
The plugin script needs to be loaded on all the pages where you want to display the button. Normally the header is specified in one location. Please add the following lines to your header:
<head>
<script src="https://ecom.creditclick.com/cc.min.js"></script>
<script>loadCreditClick();</script>
</head>The loadCreditClick() call will execute the button creation after the DOM is fully loaded.
The button can be put anywhere inside the body tag. You only need to specify a <div> element with a data-cc attribute containing the price and a data-cc-country attribute containing the country where you offer the loan.
We also support an optional attribute data-cc-decimal. This attribute can be used when the price is not available in eurocents. We have support for both . and , as decimal separator.
|
❗
|
Either the price needs to be specified in eurocents, or the decimal seperator needs to be specified. |
|
❗
|
The country is not specifying the language, its specifying the offered loans for this particular country. |
In this example we specify the amount of € 500,00 for the Dutch market
<div data-cc="50000" data-cc-country="nl"></div>In this example we specify the amount of € 500,95 for the Dutch market with a decimal seperator
<div data-cc="500.95" data-cc-country="nl" data-cc-decimal="."></div>In this example we specify the amount of € 500,00 for the German market with a decimal seperator. Both ways below are supported.
<div data-cc="500.00" data-cc-country="de" data-cc-decimal="."></div>
<div data-cc="500" data-cc-country="de" data-cc-decimal="."></div>When you are working with Angular 2+, the content of your webpage is more dynamic. There are, for example, events that might change the value of elements. In general its wise to handle the script in the following way. As in general, you load the script in the head section of your page.
<head>
<script src="https://ecom.creditclick.com/cc.min.js"></script>
</head>On the page where the button needs to appear you put:
<div [attr.data-cc]="cart.getTotalPrice()*100" data-cc-country="nl"></div>To have a dynamic price, you can set it with the attribute [attr.data-cc] as show in the example above.
The loadCreditClick() call is not applicable for Angular, because the scripts are not fully loaded yet.
Therefore, we must handle it in a different way.
-
First, we declare an import to have a way into the CreditClick script:
declare var creditClick: any;
-
Then, we initiate the script once we know that the view is ready with loading. We found that the best event for this is the
AfterViewInitcall.ngAfterViewInit(): void { creditClick.init(); }
In general, certain updates cause a chain of events in Angular. For example, if you update the total price of your shopping cart. In this case the reload of the CreditClick script should be delayed because Angular takes time in updating variables. You can delay the reload call in the following way:
var timer = Observable.timer(300);
timer.subscribe(t => creditClick.init());When you are using the Lightspeed eCom platform, we also have a solution for you.
To install the CreditClick Price Module, log in to your Lightspeed webshop administrator backend. Reachable via 'https://<yourshop>/admin'
-
Go to Design → Theme Editor → Theme Editor.
-
Click on the custom.rain link and add the following line to the template script. Please add before
</head><script src="https://ecom.creditclick.com/cc.min.js"></script>
Figure 1. Add Script to custom.rain -
Click Save
❗If you are using both including VAT and excluding VAT in your shop, then use
{{product.price.price_incl}} -
Click on the product.rain link and find the line with
<div class="price-wrap<span class="price" style="line-height: 30px;">{{ product.price.price | money }}</span><div data-cc="{{product.price.price}}" data-cc-country="nl" data-cc-decimal="."></div> <script>loadCreditClick();</script>
Figure 2. Add Script to custom.rain -
Click Save