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 |
| 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: productorcheckout. | 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 |
| alignment | left | Text alignment of the widget, can be either left , rightor 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 |
| font-size | normal | Controls the widget text size through predefined values. It can be either normal / small | No |
| background | true | Controls whether the widget background/container with grey border is rendered. It can be either true / false | No |
| logo-color | pink | Controls the Scalapay logo color. It can be either pink / black | No |
| learn-more | false | Replaces the chevron CTA with a text link when enabled. It can be either true / false | No |
| spend-progress | standard | Controls the spend-progress section below the main installment message. It can be either standard / text-mode / hidden | No |
| max-width | auto | Caps the widget width relative to the parent container. auto or percentage value, for example 60% | 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'Subscribe to updates
Follow Widget releases from Widget changelog page, or subscribe to the global Scalapay Developers changelog RSS feed to receive new updates automatically.
Updated 11 days ago