Install the widget

To install the widget simply, follow these steps:

❶ Include Scalapay scripts

Add Scalapay library scripts into head tag of product or cart HTML page:

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

❷ Add scalapay HTML tag in the page template

Place the widget in the desired location in the HTML of the product and cart page:

Our recommended placement of the widget can be found in our Best practice & Guideline section.

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
      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/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
      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 Later</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
      frequency-number='14'
      number-of-installments='1'
      hide='false'
      min='5'
      max='1500'
      amount-selectors='["#price-container"]'
      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/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
      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>