Documentation
Support

Travel widget: configuration

Suggest Edits

Here you can find details to how correctly configure the widget for travel merchants

📘

How easy it is to render the travel version of Scalapay widget?

Simply set the channel attribute to travel, all the other paramters must be configured according to contract terms (es. selectors, products that can be enabled, min and max amount) : visit the Set Configuration page to learn more

Settings

AttributeSuggested valueDescription
channeltravelThe widget channel. Must be equal to travel to render the widget travel version

Settings usage

Channel

channel='travel'

Travel widget product and cart page - Full example

<!doctype html>
<html>
  <head>
    <title>Scalapay Widget Pay in 3</title>
    <script type="module" src="https://cdn.scalapay.com/widget/v3/js/scalapay-widget.esm.js"></script>
    <script nomodule src="https://cdn.scalapay.com/widget/v3/js/scalapay-widget.js"></script>
  </head>
  <body>
    <div id="price-container">€ 100.00</div>
    <scalapay-widget
      channel='travel'
      type= 'product'           
      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'
      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/v3/js/scalapay-widget.esm.js"></script>
    <script nomodule src="https://cdn.scalapay.com/widget/v3/js/scalapay-widget.js"></script>
  </head>
  <body>
    <div id="price-container">€ 100.00</div>
    <scalapay-widget
      channel='travel'
      type= 'product'            
      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'
      locale='en'
    ></scalapay-widget>
  </body>
</html>

🚧

Please note

The channel and type attributes must be set according to the example above

The frequency-number and number-of-installments attributes pertain to the Scalapay products agreed in the contract, please check the contract to configure them (then refer to the above example)

The min and max attributes pertain to the contractual terms agreed with Scalapay, please check the contract to configure them (then refer to the above example)

All the other parameters must be configured according to your website characteristics and preferences

Travel widget checkout - Full example

<!doctype html>
<html>
  <head>
    <title>Scalapay Widget Pay in 3</title>
    <script type="module" src="https://cdn.scalapay.com/widget/v3/js/scalapay-widget.esm.js"></script>
    <script nomodule src="https://cdn.scalapay.com/widget/v3/js/scalapay-widget.js"></script>
  </head>
  <body>
    <div id="price-container">€ 100.00</div>
    <scalapay-widget
      channel='travel'
      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'
      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/v3/js/scalapay-widget.esm.js"></script>
    <script nomodule src="https://cdn.scalapay.com/widget/v3/js/scalapay-widget.js"></script>
  </head>
  <body>
    <div id="price-container">€ 100.00</div>
    <scalapay-widget
      channel='travel'
      type= 'checkout'
      show-title= "true"               
      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'
      locale='en'
    ></scalapay-widget>
  </body>
</html>

🚧

Please note

The channel and type attributes must be set according to the example above

The frequency-number and number-of-installments attributes pertain to the Scalapay products agreed in the contract, please check the contract to configure them (then refer to the above example)

The min and max attributes pertain to the contractual terms agreed with Scalapay, please check the contract to configure them (then refer to the above example)

All the other parameters must be configured according to your website characteristics and preferences

Updated over 1 year ago