What is a payever widget?
Our widgets allow you to display the payment conditions and monthly rates for installment plans even before a customer initiates the checkout process of your shop. In general, widgets are therefore directly placed on a product page and inform the customers about possible installment plans for the specific product that is being displayed at that moment. If desired, it is further possible to offer an immediate and separate checkout on the actual product page (“Finance Express”) - in addition to the regular checkout of your shop.
For what payment options are the widgets available?
Our widgets are currently only available for Santander Installments (Germany, Denmark, Sweden, and Norway) and Santander factoring (Germany). There are no widgets for other payment options.
Where can I find the widgets and how do I implement them?
Step 1
Open the checkout app (either directly via the checkout icon in quick access bar or via the "open" button in the checkout module).
Step 2
Click on the "Channels" tab.
Here you will find all available forms of widgets - the functionality is always quite similar, the 4 variants (text, button, dropdown rate calculator and 2-field rate calculator) differ mainly in their visual design.
(Examples show different countries - content varies by country and financial product)
Click on the desired variant to edit details (e.g. 2-field rate calculator).
Step 3
Now configure your widget according to your preferences. You have to configure the following settings:
- Payment methods
Choose for which payment option/ payment product you want to show the widget. You can also specify the price interval in which the respective widget should be displayed (e.g. option A for products up to €/kr x, option B for products between €/kr x and y, and option C for products priced above €/kr y). To do this, click on "Edit" and then enter the desired upper and lower limit (please note that you must stay within the limits granted to you by Santander for this particular option - if your limit for a certain option is e.g. kr 10.000, you can not set the limit to 12.000 here).
- Add ons
You can choose Finance Express", "Overlay" and "None". If you select "None", there is no clickable link in the widget. If you select the overlay as an add on, an overlay with further information will pop up when clicking on the widget. Finance Express is a kind of "express checkout" that guides your customers past the normal checkout process. If you use one of our plugins, please note that it is unfortunately not possible in all shop systems to use the Finance Express to generate an order in the shop system - in case of doubt, please contact support@payever.de if you have any questions in this regard.
- General settings
Here you can choose whether you want to sort the rates in ascending or descending order. For text and button widgets, only the highest (descending) or the lowest (ascending) rate will be displayed, whereas when using one of the two calculators, the customer can always see all rates, with the highest (descending) or the lowest (ascending) being preselected. In case you are choking to use the widget with an overlay, note that an overlay always includes a calculator, so if you for instance use a text widget with an overlay, your customers can still view the other available rates via the overlay.
If you have activated Finance Express, you can also choose where the Finance Express should be displayed (on the right, left or top edge of the page, or centered in the middle of the page).
- Design settings
Last but not least, you can adjust the pixel width of the widget and the color scheme. Please also set the widget to "visible", otherwise it will not show. With "Reset settings" you can return to the default design at any time if you are not satisfied with your results.
Design examples:
You can also define the width here - note that this size is fixed and not responsive, so if you wanted it to have different sizes on mobile and desktop, you would need to add a media query for this to your style sheet (see example below).
For example if you have entered 480 here because you think that this looks best on desktop, you should add the media query to your style sheet and define that for devices that have less than 480 (that would be pretty much any phone), the style should be overwritten with a different, smaller pixel value. What the best value for that would be depends - typically smartphones have something between 320 and 400 pixels, but if you e.g. have the widget inside a box or element or have plenty of padding, you may need to go a bit lower than 320 (please do not go too low here though to ensure that the widget is still readable and looking decent).
You can of course also just type a value that is small enough for all devices (e.g. 320) into your payever account and not do any such media queries - the instructions above are just a recommendation from our side in case you prefer a bigger width better on desktop.
(max-width: 480px) {
.pe-widget-card {
min-width: 320px !important;
max-width: 320px !important;
}
}
Step 4
As soon as you have configured all the settings and you are satisfied with the result, click on "Get code" in the upper right corner.
Now paste the code snippet in your shop's product page template. Last but nor least, replace the example price in the code with the respective price variable of your shop so the correct rates can be calculated for each individual product.
