Documentation
Support

Widget installation

Suggest Edits

In order to install the widget on your custom website, follow the steps below.


1. Include the Scalapay scripts

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

    <script type="module" src="https://cdn.scalapay.com/widget/scalapay-widget-loader.js"></script>


2. Add the Scalapay HTML tag in the page template

Place the widget in the desired position on the Product page and the Cart page via HTML code.

Our recommended placement of the widget can be found in our Guidelines & best practices section.


Full Example

<!doctype html>
<html lang="en">
<head>
    <title>Scalapay Suite Widget</title>
    <script type="module" src="https://cdn.scalapay.com/widget/scalapay-widget-loader.js?version=V5"></script>
</head>
<body>
<div id="price-container">€ 100.00</div>
<scalapay-widget
        type='product'
        min='5'
        max='1500'
        amount-selectors='["#price-container"]'
        currency-position='before'
        currency-display='symbol'
        locale='en'
        environment='integration'
        merchant-token='8KDS3SPEL'
></scalapay-widget>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
    <title>Scalapay Suite Widget</title>
    <script type="module" src="https://cdn.scalapay.com/widget/scalapay-widget-loader.js?version=V5"></script>
</head>
<body>
<div id="price-container">€ 100.00</div>
<scalapay-widget
        type='checkout'
        min='5'
        max='1500'
        amount-selectors='["#price-container"]'
        currency-position='before'
        currency-display='symbol'
        locale='en'
        environment='integration'
        merchant-token='8KDS3SPEL'
></scalapay-widget>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
    <title>Scalapay Suite Widget</title>
    <script type="module" src="https://cdn.scalapay.com/widget/scalapay-widget-loader.js?version=V5"></script>
</head>
<body>
<div id="price-container">€ 100.00</div>
<scalapay-widget
        type='cart'
        min='5'
        max='1500'
        amount-selectors='["#price-container"]'
        currency-position='before'
        currency-display='symbol'
        locale='en'
        environment='integration'
        merchant-token='8KDS3SPEL'
></scalapay-widget>
</body>
</html>


📘

ENVIRONMENT & MERCHANT TOKEN

During the testing process, the environment value has to be filled with 'integration' and the merchant token value has to be filled with '8KDS3SPEL'.

In production, the environment value can be left empty and the merchant token has to be the one available on the Merchant Portal in the Developer section.

Updated 2 days ago