Widget configuration

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

Settings

Attribute	Default value	Description	Required
merchant-token		This 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
amount		The 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-amount	contract min amount	Minimum amount to display the widget. Must be equal or higher than contract minimum.	No
max-amount	contract max amount	Maximum amount to display the widget. Must be equal or lower than contract minimum.	No
currency-position	`after` (if locale=en, `before`)	Position of the currency, before or after the amount. The value can be: 'before' or 'after'.	No
currency-display	`symbol`	Format of the currency. The value can be: `symbol`or`code`.	No
locale	`en`	Language 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
type	`product`	The widget format. The value can be: `product`or`checkout`.	No
environment	`production`	In 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
hide-installments	`false`	Hides the amount of instalments from the widget E.g.: `false` -> Pay in 3 installments of €10.00 without interest. `true` -> Pay in 3 installments without interest.	No
hide-learn-more	`false`	Converts the "learn more" link from product/cart widget to an i icon if set to `true`. Does not affect the checkout widget.	No
alignment	`left`	Text alignment of the widget, can be either `left` , `right`or `center`	No
dark-mode	`never`	Enables a version of the widget useful for dark backgrounds. Can be either `never`, `always`, or `system` (`system` detects device/broswer dark mode and adapts accoringly)	No
channel	empty	Set 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'