Due to some of the limitations that Wix places on embedding third party Javascript code into their websites, this disables certain aspects of Billsby's features, including:
The 'Continue' button: this would normally forward customers to a thank-you page, but will not work when you click it on a Wix website and so must be disabled
The responsive feature: this would normally optimize the size of the checkout for mobile screens, but will not work when accessed through Wix, instead the checkout will remain a fixed width
Passing customer details into Billsby checkout is also disabled on Wix websites
To help you add the Billsby checkout to your Wix website, we've created a step-by-step video to guide you through the process which you can view here.
Firstly, you need to enable the Wix compatibility mode in your Billsby account. This hides our close button and disables the ability to continue to another page on the confirmation screen. To do this, navigate to Settings > Configuration > Checkout and account management settings > Show or hide features.
Make sure to click Update Features to save the change.
On your Wix Dashboard, click Edit Site.
Once there you need to turn on Dev mode. Doing this allows you to have access to the slightly more advanced tools that we need for this integration. Just find Dev mode in the top menu, and hit Turn on Dev Mode.
Next up you have to create a button. This button will be what your customers select to load the Billsby checkout. From the side menu, hit Add and then select any of the buttons.
Now you've created your button, you need to tell it what to do and how to work. Go to Tools > Developer tools and make sure that Properties & Events is enabled.
On the Properties & Events menu, navigate to Event Handlers and then onClick(). Then, select Add Event.
Delete all of the code that is added to the editor and replace it with the below code:
import wixWindow from 'wix-window'; export function buttonname (event, $w) { wixWindow.openModal("https://checkout.billsby.com/subscription?data-billsby-company=billsbysubdomain", { "width": 700, "height": 530, }); }
All you need to do is replace the two placeholders in the code. So, where it says buttonname, simply replace this with the name of the onClick event for your button e.g. button1_click. Then, where it says billsbysubdomain, replace this your company subdomain found in Settings > Configuration > Company details.
Finally, save and publish the changes.