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: , .. |
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'
Updated 2 days ago