In order to display the simulation snippet with consistent data, it is necessary to call two different requests to the Scalexpert API: Eligibility and Simulations .
The compiled data from these two calls will be needed in order to build the front-end snippet.
Scalexpert documentation on both API points is available here:
This API point will already give us the available solutions depending on the merchant contract and the store context (product or cart). These solutions will be used for the simulation.
It is also necessary to retrieve the information used for display. This information is contained in the table communicationKit:
"visualTitle": "Payez en 3 ou 4 fois",
"visualDescription": "Baas is great",
"visualInformationIcon": "XXX/XXX.ico (url icon)",
"visualAdditionalInformation": "xxx",
"visualLegalText": "xxx",
"visualTableImage": "https://merchant.kit/uri/table.png",
"visualLogo": "https://merchant.kit/uri/productTerms.ico",
"visualInformationNoticeURL": "https://merchant.kit/uri/productTerms.pdf",
"visualProductTermsURL": "https://merchant.kit/uri/productTerms.pdf"
API Point Data Simulations
This API point will give us digital information such as total prices, additional charges if any, the number of monthly payments and their amount.
This data will need to be formatted to display prices with decimals and currencies.
For example, the value solutionSimulations['simulations']['dueTotalAmount']is 1500.0.
It will be necessary to change the .by a ,, to add a one 0to cents, a space to thousands and finally to suffix this price with the euro currency €: this will give at the end 1 500,00 €.
Finally, it will be necessary to add translated texts and html if necessary, to format this information.
Front snippet
Presentation
Following the loading of assets described in the FRONT documentation , a JS objectSnippetis available.
It is necessary to initialize it with data, you have two methods for this:
The index anchorcorresponds to the Html tag on which the simulation snippet must be grafted.
The index simulationsrepresents all the simulation data used to build the simulation insert.
It is built in the form of a table compiling a dictionary of data per eligible payment solution in X times: {Array<Object>}.
Here, for each index in the dictionary, is its correspondence among the API data:
We can therefore see that for certain indexes, we can recover the value returned by the API as it is, while for others it will be necessary to format and complete the data with text and html as explained previously (cf. BACK Documentation | Simulations API Point Data ).
For the indexes infoShortDetailPaymentand infoLongDetailPayment, we use the price entered in solutionSimulations['simulations']['installments']['amount']and if necessary the number of monthly payments in solutionSimulations['simulations']['duration'].
It should be noted that, for financing solutions including additional costs, it will be wise to display the monthly payments for the first two months, in order to have visibility on a monthly payment including costs and then on a classic monthly payment.
For the installmentsItemsand indexes installmentsMentions, it is about creating a table of strings (including html or not) that will be displayed in the modal window of the snippet.
The idea is therefore also to base itself on the data from the different API points, to format them and then to combine them with translated texts in order to build a table with an entry per monthly payment for the index installmentsItemsand a table with all the fees and percentages specific to the financing solution chosen for the index installmentsMentions.
Here are examples of modifying the data here from the API, in order to stick to what is expected by the snippet for display.
The following examples are therefore made in JavaScript.
e-Financing API | Scalexpert API Docs