Si tienes problemas con la visualización del widget en tu web personalizada, puedes verificar lo siguiente:
Asegúrate de haber insertado correctamente los scripts de la biblioteca de Scalapay en la etiqueta `<head>` de la página HTML del producto o del carrito. El script debe estar estructurado de la siguiente manera:
<script type="module" src="https://cdn.scalapay.com/widget/scalapay-widget-loader.js?version=V5"></script>.
Añada la etiqueta HTML Scalapay en la plantilla de la página del producto, del carrito de la compra y de la página de pago siguiendo nuestras directrices:
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>
Verifica que hayas configurado correctamente los importes mínimo y máximo en el cuerpo de la configuración del widget.
Durante el proceso de prueba, el campo de entorno debe establecerse en 'integración' y el campo de token de comerciante debe establecerse en '8KDS3SPEL'.
En producción, el valor entorno puede dejarse en blanco y el Merchant Token debe ser el que aparece en la sección Desarrollador de su Portal de Comerciantes.
Verifica que el campo `amount-selectors` apunte al selector de precio correcto en la página de producto o carrito. Recuerda insertar el selector en el formato correcto `[" , "]`.
¿Cómo identificar el selector de precio correcto?
Haz clic derecho en cualquier parte de la página y selecciona "Inspeccionar".
Inspecciona la página para identificar el lugar donde deseas activar un elemento.
3. Una vez encontrado el elemento, busca el selector en el código HTML. Copia el selector y pégalo en el campo `amount-selectors`.
El código podría verse así:
`div.summary.entry-summary > div > form > table > tbody > tr:nth-child(2) > td.value > div > div > div > div.woocommerce-variation-price > span > span > bdi.`