Widget configuration

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

Settings

Attribute	Default value	Description
merchant-token		This field is mandatory. You will find it in the "Developer" section on your Scalapay Partner Portal.
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`). Required if amount is not set.
amount		The amount used as fallback if amount-selectors prop is not defined.
min	5	Minimum amount to display the widget. Make sure to modify it accordingly to your contract.
max	1500	Maximum amount to display the widget. Make sure to modify it accordingly to your contract.
currency-position	before	Position of the currency. Change the position of the currency before or after the amount. The value can be: 'before' or 'after'.
currency-display	symbol	The value can be: 'symbol' or 'code'.
locale	en	Language of the labels. The Scalapay widget supports English, Italian, Portuguese, German, French and Spanish languages. The valid values are: 'en', 'it', 'pt', 'de', 'fr', 'es'.
type	product	The widget type. The value can be: 'product' or 'cart' or 'checkout'.
environment	production	In accordance with the merchant token entered, the environment value can be: integration or production.
amount-separator		When the format is not standard, you can specify the separator. The available values are: `,` `.`.
channel		The value can be: 'travel' if you are a travel merchant.
checkout-title-selector		Use this selector to change the title of the payment method with the Scalapay products defined by contract. Use css selectors (like `.class-name` or `#id` or `div.classname`).

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'