Widget installation

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 src="https://cdn.scalapay.com/js/scalapay-widget/webcomponents-bundle.js"></script>
<script src="https://cdn.scalapay.com/js/scalapay-widget/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:

<div>
    <scalapay-widget amount="200"></scalapay-widget>
</div>

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

🚧

In general we recommend the following placement:

  • Right under the product price on the product page
  • Right under the total price on the cart page

Full Example

<!doctype html>
<html>
  <head>
    <title>Scalapay Widget</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.scalapay.com/js/scalapay-widget/webcomponents-bundle.js"></script>
    <script src="https://cdn.scalapay.com/js/scalapay-widget/scalapay-widget.js"></script>
  </head>
  <body>
        <scalapay-widget
            amount="200"
            min="5"
            max="300"
            size="100px"
            logoSize="100%"
            priceColor="#145ad1"
            logoColor="#000000"
            numberOfPayments="3"
            hideLogo="false"
            hidePrice="false"
            locale="en"
            currencyPosition="after"
            currencyDisplay="symbol"
        >
        </scalapay-widget>
  </body>
</html>