Widget installation
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='8M3R8BYYK'
></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='8M3R8BYYK'
></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='8M3R8BYYK'
></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 '8M3R8BYYK'.
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 1 day ago