Set Configuration
Here you can find details to how correctly configure the widget items
Settings
Attribute | Default value | Description |
---|---|---|
amount-selectors | [".price-container .price"] | List of price box selectors divid |
amount | --- | The amount used as fallback if amount-selectors prop is not defined |
price-box-selector | - | The CSS selector containing the price HTML Element. It’s used for listening to HTML changes and re-calculate the installments. If not valued, by default installments are re-calculate each time the HTML Element defined with amount-selectors changes. |
frequency-number | 30 | Number of days between each installment |
number-of-installments | 3 | Number of installments |
hide | false | Hide widget |
hide-price | false | Hide the installment value calculated in the widget banner |
min | 5 | Minimun amount to display the widget |
max | 1500 | Maximum amount to display the widget |
currency-position | before | Position of the currency |
currency-display | symbol | Type to display the currency |
logo-size | 100 | Logo size in percentage |
locale | en | Language of the labels |
theme | primary | Theme of the widget |
channel | standard | The widget channel. Mustbe equal to travel to render the widget travel version |
type | product | The widget type. Must be equal to checkout to render the checkout page text |
show-title | false | Show payment method title. Currently only used by widget with checkout type to render the payment method title |
Settings usage
Amount Limits
Set the amount limits of the product price on pageload by adding the following attributes:
min={minimum-amount}
max={maximum-amount}
Min & Max limits
This limits are set to default to 0 and 2000: make sure to modify them accordingly to your contract!
Frequency Number
Number of days between each installment. The value for Pay in Installments is 30. For Pay Later 14
frequency-number={frequency-number}
Number Of Instalment
Number of the payments with Scalapay. The values for Pay in Installments are 3 or 4. For Pay Later is 1.
number-of-instalment={number-of-instalment}
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
amount-selectors='["#price-container"]'
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
amount-selectors='["#price-container .default-price", "#price-container .secondary-price"]'
Amount value
The amount prop is used as fallback if amount-selectors
prop is not defined.
The value could be the price with or without the currency (i.e. 100.00 €
, 100.00
).
amount={amount-value}
Update language
The Scalapay widget supports English, Italian, Portuguese, German, French and Spanish languages.
Set the language by adding the following attribute (valid values are 'en', 'it', 'pt', 'de', 'fr', 'es'):
locale={'en' | 'it' | 'pt' | 'de' | 'fr' | 'es'}
Hide
Option to hide programmatically the widget.
hide={true | false}
Update logo size
The value to resize the logo has to be between 60 and 120.
Only available for Pay in Installments
logo-size={logo-size} // (values with a range from 60 to 120)
Update currency position
Move the position of the currency before or after the amount.
Only available for Pay in Installments
currency-position={'before' | 'after'}
Update currency Display
Modify the code of the currency.
Only available for Pay in Installments
currency-display={'symbol' | 'code'}
Theme
Used to change the presentation of the widget
Only available for Pay Later
theme={'primary' | 'variant'}
Channel
Used to render the standard vs travel version of the widget
channel={'standard'|'travel'}
Type
This field describes the widget type. Must be equal to checkout to render the checkout page text.
type={'product'|'checkout'}
Show Title
This field is used only at Checkout to choose the checkout type to render the payment title.
show-title={'true'|'false'}
Updated 7 months ago