Support

Widget configuration

In order to configure the widget on your custom website, follow the steps below.

Settings

AttributeDefault valueDescriptionRequired
merchant-tokenThis field is mandatory.
You will find it in the "Developer" section on your Scalapay Merchant Portal.
Yes
(if omitted defaults to a test pay in 3 only merchant)
amount-selectors[".price-container .price"]Array of string selectors to use to find the amount in the DOM.
Use css selectors (like .class-name or #id or div.classname)
Yes - or fallback to amount attribute
amountThe amount used as fallback if amount-selectors is not defined.
It does NOT overwrite the value obtained with amount-selectors
Only if attribute amount-selectors is not present
min-amountcontract min amountMinimum amount to display the widget.
Must be equal or higher than contract minimum.
No
max-amountcontract max amountMaximum amount to display the widget.
Must be equal or lower than contract minimum.
No
currency-positionafter (if locale=en, before)Position of the currency, before or after the amount.
The value can be: 'before' or 'after'.
No
currency-displaysymbolFormat of the currency.
The value can be: symbol or code.
No
localeenLanguage of the widget.
The Scalapay widget supports English, Italian, Portuguese, German, French and Spanish languages.
The value can be: en, it, pt, de, fr, es.
No
typeproductThe widget format.
The value can be: product or checkout.
No
environmentproductionIn accordance with the merchant token entered, the environment value can be: integration or production.No
amount-separator, The separator before the cents in the amount provided to the widget (e.g. 1500,00 vs 1500.00)
The available values are: , or ..
No
channelemptySet this field as travel only if you are a travel merchant.
This will affect the text of the widget modal.
No

Amount selectors

Add the selector of the product price component to allow the widget to change dynamically: in this way, if the product price changes, the value of the instalments changes.

amount-selectors='["#price-container"]'

For pages that can have multiple prices such as a regular price and a special price, add multiple price selectors separated by a comma ',' and the widget will take as reference the price of the first selector.

amount-selectors='["#price-container .default-price", "#price-container .secondary-price"]'

Amount value

The amount prop is used as fallback ifamount-selectorsprop is not defined.
The value could be the price with or without the currency (e.g.100,00€ , 100.00).

amount='300,64'