Widget Testing

You can test the how the Scalapay widget will interact with your product and cart page prior to installation.

Simply copy the code below and paste into the console of your broswer. You will see an additional widget get placed under the price above.

Use the following script by injecting directly into the console to test the integration before rolling out on your site

Script

var script = document.createElement('script');
script.src = 'https://cdn.scalapay.com/js/scalapay-widget/scalapay-widget.js';
script.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(script);

Create the div element to load the widget into

var scalapayWidgetDiv = document.createElement('scalapay-widget');

Set the attributes

scalapayWidgetDiv.setAttribute('amount', '200');
scalapayWidgetDiv.setAttribute('min', '5');
scalapayWidgetDiv.setAttribute('max', '300');
scalapayWidgetDiv.setAttribute('size', '100px');
scalapayWidgetDiv.setAttribute('logoSize', '100%');
scalapayWidgetDiv.setAttribute('priceColor', '#145ad1');
scalapayWidgetDiv.setAttribute('logoColor', '#000000');
scalapayWidgetDiv.setAttribute('logoAlignment', '');
scalapayWidgetDiv.setAttribute('amountSelectorArray', '["#price-container > p > span.special-price > span.price", "#price-container > p > span.regular-price > span.price"]');
scalapayWidgetDiv.setAttribute('numberOfPayments', '3');
scalapayWidgetDiv.setAttribute('hideLogo', 'false');
scalapayWidgetDiv.setAttribute('hidePrice', 'false');
scalapayWidgetDiv.setAttribute('locale', 'en');
scalapayWidgetDiv.setAttribute('currencyPosition', 'before');
scalapayWidgetDiv.setAttribute('currencyDisplay', 'code');

Find the location of the current pricebox

var priceBoxDiv = document.querySelector("#price-container");

Append the scalapay Widget after the priceBox

priceBoxDiv.insertAdjacentElement('afterend', scalapayWidgetDiv);

👍

You're almost ready to go

Check the Testing section to complete your custom integration


What’s Next