If you are experiencing display issues with the widget on your custom site, you can check the following:
Make sure you have correctly inserted the Scalapay library scripts in the `<head>` tag of the product or cart HTML page. The script should be structured as follows:
<script type="module" src="https://cdn.scalapay.com/widget/scalapay-widget-loader.js?version=V5"></script>
2. Add the Scalapay HTML tag in the page template in Product Page, Cart and Check Out following our Guidelines & best practices.
Product Page Script
<!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>
Cart Page Script
<!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>
Check Out Page Script
<!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>
Check that you have correctly set the minimum and maximum amounts in the body of the widget configuration.
You can find your Merchant Token in the Developer section of your Merchant Portal.
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.
Check that the `amount-selectors` field points to the correct price selector on the product or cart page. Remember to insert the selector in the correct format `[" , "]`.
How to Identify the Correct Price Selector?
Right-click anywhere on the page and click "Inspect".
Inspect the page to identify where you want to activate an element.
3. Once you have found the element, search for the selector in the HTML code. Copy the selector and paste it into the amount-selectors field.
The code might look like this:
`div.summary.entry-summary > div > form > table > tbody > tr:nth-child(2) > td.value > div > div > div > div.woocommerce-variation-price > span > span > bdi.