Widget configuration

The following section explains how to correctly configure the widget items

Settings

Attribute

Default value

Description

amount

null

Set the amount of the product price.

min

35

Set the min amount limits

max

1500

Set the max amount limits

alignment

null

Change widget alignment.

Valid values are: 'left', 'center' or 'right'

size

null

Change font size

logoSize

null

Change logo size

The value must are as a % with a range of 60% to 120%

logoAlignment

null

Change bottom position of the logo (e.g. 10)

logoColor

#000000

Change logo color

priceColor

#000000

Change price color

amountSelector

null

Product price selector that allow the widget to watch for updates and change dynamically.

amountSelectorArray

null

Array of product price selector (such as a regular price and special price) that allow the widget to watch for updates and change dynamically.

All selector must seperated by a comma ',' and the widget will prefer the price of the first selector.

hideLogo

null

Hide logo

hidePrice

null

Hide amount

numberOfPayments

3

Change the installments number

locale

en

Set the language of the widget.

Valid values are: 'en', 'it', 'de', 'pt', 'fr', 'nl', 'es', 'fi'.

priceBoxSelector

null

Selector to listen for any price changes.

amountDatasetAttribute

null

Name of the dataset property that contain the price.

currencyPosition

null

Move the position of the currency before or after the amount.

Valid values are: 'before', 'after'

currencyDisplay

symbol

Modify the code of the currency.

Valid values are: 'symbol', 'code'

Settings usage

Amount & Amount Limits

Set the amount and the amount limits of the product price on pageload by adding the following attributes:

amount={product-amount}
min={minimum-amount}
max={maximum-amount}

🚧

Min & Max limits

This limits are set to default to 35 and 1500: make sure to modify them accordingly to your contract!

Handle changes to product amount

If the product price changes, simply add the selector of the product price component to allow the widget to watch for updates and change dynamically

amountSelectorArray='["#price-container .regular-price > span"]'

For pages that can have multiple prices such as a regular price and special price, simply add multiple price selectors seperated by a comma ',' and the widget will prefer the price of the first selector

amountSelectorArray='["#price-container > span.special-price > span.price", "#price-container > span.regular-price > span.price"]'

Update language

The scalapay widget supports English, French, Italian, German languages. Set the language by adding the following attribute (valid values are 'en', 'it', 'de', 'pt', 'fr', 'nl', 'es', 'fi'):

locale={locale}

Optional Attributes

Set logo and font size to align with your style guide by adding the following attributes.
You can also set the vertical position of Scalapay logo and update price and color.

size={font-size} 
logoSize={logo-percentage-size} // (values are as a % with a range of 60% to 120%)
logoAlignment={vertical-alignment}
priceColor={price-color}
logoColor={logo-color}

Handle changes to the price container

Some e-commerce sites will dynamically replace the whole pricebox wrapper and not just the price amount. To handle these cases provide the selector of the parent element of the div that get's replaced.
The widget will then watch for any changes and update accordingly:

priceBoxSelector='#price-container'

Hide Price

Some e-commerce sites with complex pricing on the product page would preffer to just present the Scalapay widget without the amount.

hidePrice='true'

Use dataset selector

Some e-commerce sites with use a dataset property within the selector to store the price.

amountDatasetAttribute={dataset-attribute-name}

Update currency position

Move the position of the currency before or after the amount.

currencyPosition={currency-position}

Update currency Display

Modify the code of the currency.

currencyDisplay={currency-format}

👍

And now you're ready to test!


What’s Next