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 |
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-selectors
prop is not defined.
The value could be the price with or without the currency (e.g.100,00€ , 100.00
).
amount='300,64'
Updated 10 days ago