How to install the widget

To install the widget simply:

  1. Include Scalapay scripts in the page template
  2. Add scalapay HTML tag in the page template

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

2. 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='0'
      max='2000'
      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='0'
      max='2000'
      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='0'
      max='2000'
      amount-selectors='["#price-container"]'
      theme='primary'
      locale='en'
    ></scalapay-widget>
  </body>
</html>