Configure the widget on Product Page and Cart Page

Follow these instructions to configure the widget items.

Settings

AttributeDefault valueDescription
amount-selectors[".price-container .price"]List of price box selectors divid
amount300,64The amount used as fallback if amount-selectors prop is not defined
frequency-number30Number of days between each installment
number-of-installments3Number of installments
hidefalseHide widget
hide-pricefalseHide the installment value calculated in the widget banner
min5Minimum amount to display the widget
max1500Maximum amount to display the widget
currency-positionbeforePosition of the currency
currency-displaysymbolType to display the currency
logo-size100Logo size in percentage
localeenLanguage of the labels
themeprimaryTheme of the widget
channelstandardThe widget channel. Must be equal to travel to render the widget travel version
typeproductThe widget type. Must be equal to checkout to render the checkout page text
show-titlefalseShow payment method title. Currently only used by widget with checkout type to render the payment method title
split-feefalseShow Split Fee

Settings usage

Amount limits

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

min=5

max=1500

❗️

Min & Max limits

These limits are set to default to 5 and 1500: make sure to modify them accordingly to your contract.

Frequency number

It refers to the number of the days between each instalment. The value is 30.

frequency-number=30

Number of instalments

It refers to the number of the payments with Scalapay. The values are 3 or 4.

number-of-installment=3

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 change.

amount-selectors='["#price-container"]'

For pages that can have multiple prices such as a regular price and 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 (i.e. 100.00 €, 100.00`).

amount=300,64

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 widget

It gives the possibility to hide 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 Instalments)

logo-size={logo-size} // (values with a range from 60 to 120)

Update currency position

Change the position of the currency before or after the amount. (Only available for Pay in Instalments)

currency-position={'before' | 'after'}

Update currency display

Modify the code of the currency. (Only available for Pay in Instalments)

currency-display={'symbol' | 'code'}

Channel

It is used to differentiate the standard and the travel version of the widget.

channel={'standard'|'travel'}

Type

This field describes the type of the widget. It has to be equal to checkout for the text of the checkout page to appear.

type={'product'|'checkout'}

Show title

This field is used only at checkout to make sure that the payment title is displayed at checkout.

show-title={'true'|'false'}

Full example

<!doctype html>
<html>
  <head>
    <title>Scalapay Widget Pay in 3</title>
    <script type="module" src="https://cdn.scalapay.com/widget/scalapay-widget-loader.js"></script>
  </head>
  <body>
    <div id="price-container">€ 100.00</div>
    <scalapay-widget
      frequency-number='30'
      number-of-installments='3'
      hide='false'
      hide-price='false'
      min='5'
      max='1500'
      amount-selectors='["#price-container"]'
      currency-position='before'
      currency-display='symbol'
      logo-size='100'
      theme='primary'
      locale='en'
    ></scalapay-widget>
  </body>
</html>
<!doctype html>
<html>
  <head>
    <title>Scalapay Widget Pay in 4</title>
    <script type="module" src="https://cdn.scalapay.com/widget/scalapay-widget-loader.js"></script>
  </head>
  <body>
    <div id="price-container">€ 100.00</div>
    <scalapay-widget
      frequency-number='30'
      number-of-installments='4'
      hide='false'
      hide-price='false'
      min='0'
      max='2000'
      amount-selectors='["#price-container"]'
      currency-position='before'
      currency-display='symbol'
      logo-size='100'
      theme='primary'
      locale='en'
    ></scalapay-widget>
  </body>
</html>


Configure the widget at checkout

Here you can find the procedure to configure the parameters of the widget at checkout.

Settings

AttributeSuggested valueDescription
typecheckoutThe widget type. It has to be equal to checkout for the text of the checkout page to appear.
show-titlefalse | trueShow payment method title. Only used at checkout to make sure that the payment title is displayed at checkout.

Settings usage

Show title

show-title={'false' | 'true'}

If the show-title field is set to false, the result at front end is the following:


If the show-title field is set to true, the result at front end is the following:


Full example

<!doctype html>
<html>
  <head>
    <title>Scalapay Widget Pay in 3</title>
    <script type="module" src="https://cdn.scalapay.com/widget/scalapay-widget-loader.js"></script>
  </head>
  <body>
    <div id="price-container">€ 100.00</div>
    <scalapay-widget
      frequency-number='30'
      number-of-installments='3'
      hide='false'
      hide-price='false'
      min='5'
      max='1500'
      amount-selectors='["#price-container"]'
      currency-position='before'
      currency-display='symbol'
      logo-size='100'
      theme='primary'
      locale='en'
    ></scalapay-widget>
  </body>
</html>
<!doctype html>
<html>
  <head>
    <title>Scalapay Widget Pay in 4</title>
    <script type="module" src="https://cdn.scalapay.com/widget/scalapay-widget-loader.js"></script>
  </head>
  <body>
    <div id="price-container">€ 100.00</div>
    <scalapay-widget
      frequency-number='30'
      number-of-installments='4'
      hide='false'
      hide-price='false'
      min='5'
      max='1500'
      amount-selectors='["#price-container"]'
      currency-position='before'
      currency-display='symbol'
      logo-size='100'
      theme='primary'
      locale='en'
    ></scalapay-widget>
  </body>
</html>
<!doctype html>
<html>
  <head>
    <title>Scalapay Widget Pay in 3</title>
    <script type="module" src="https://cdn.scalapay.com/widget/scalapay-widget-loader.js"></script>
  </head>
  <body>
    <div id="price-container">€ 100.00</div>
    <scalapay-widget
      type= 'checkout'
      show-title= "true"               
      frequency-number='30'
      number-of-installments='3'
      hide='false'
      hide-price='false'
      min='5'
      max='1500'
      amount-selectors='["#price-container"]'
      currency-position='before'
      currency-display='symbol'
      logo-size='100'
      theme='primary'
      locale='en'
    ></scalapay-widget>
  </body>
</html>