Velo Tutorial: Bookings Pricing Service Plugin

Wix service plugins allow you to expand what your site can do by integrating with 3rd-party services not currently supported by Wix. They also allow you to implement custom logic to change how your site displays and behaves. For example, when you set up Wix Bookings, there is only a single price per service. What if you want to offer different service prices to your customers, such as varied pricing based on different choices? Or different rates for weekends and holidays? Service plugins are the answer. 

You can manage multiple service plugins from the Public & Backend Code section in the Velo Sidebar. Learn more about service plugins. 

With a Bookings Custom Pricing plugin, you can implement custom pricing options using code. You can also connect your site to external pricing rate providers whose functionality is not currently supported by Wix. These prices can be displayed on your site's checkout pages. 

This tutorial explains how to set up a custom pricing plugin on your site using Velo.

The process has 3 steps:

1. Create a Bookings Pricing plugin on your site.
2. Implement your plugin with custom code.
3. Deploy the plugin.

Step 1: Create a Bookings Pricing plugin

The first step in setting up your new plugin is to add it to your site. This process creates a new folder in the Service Plugins section of the Velo Sidebar that contains the files for your backend code.

1. Add Wix Bookings to your site.

2. With Velo Dev Mode enabled, click the Public & Backend  tab on the Velo Sidebar.

3. Scroll down to the Service Plugins panel at the bottom of the sidebar.

   

4. Hover over Service Plugins and click .

5. Select Bookings Pricing.

   

6. Enter a name for your plugin and click Add & Edit Code.

   The name can't contain spaces or special characters. Hyphens are allowed.

   

Step 2: Implement the plugin

The procedure in the previous section creates a folder called bookings-custom-pricing under Service Plugins in the Public & Backend Code section of the Velo Sidebar. Inside this folder is another folder with the name of the plugin you set up. This folder contains 2 default plugin files:

• <my-plugin-name>.js: The code in this file generally defines a function named after the purpose of the service plugin, such a calculatePrice(). The function is called by Wix to retrieve the data provided by your plugin.
• <my-plugin-name>-config.js: The code in this file generally defines the name of the main service plugin function.

Implement the custom code for your plugin in these files.

Here are some guidelines for writing your code:

.js

The code in this file defines a function named calculatePrice(). Wix Bookings calls this function at checkout to retrieve the custom pricing options provided by your plugin. The function accepts the following parameters:

• options: An object holding information about the booking, including the service, location, time, and participants. For more details, see the service plugin reference.

  Sample options object:

• context: An object that holds the values or variables that are available and relevant within the scope of the function during its execution.

The calculatePrice() function must return an object with a calculatedPrice integer. This objects defines the booking's price that site visitors see on the Checkout page. For more details, see the service plugin reference.

Example return value:

-config.js

The code in this file defines a function named getConfig() that returns the name of the main service plugin function that is defined in the <my-plugin-name>.js file as an object. This is important because you can have multiple .js files and multiple functions in these .js files.

In our case, the main service plugin function name is calculatePrice().

Example getConfig() function:

Example return object: 

Add files to the plugin

If you don't want to keep all of your code in the main plugin files, you can add files to the plugin's folder and import functions and objects into the main files.

1. Hover over the plugin folder's name and click Show More .

2. Select New .js file.

3. To import from these files to the main plugin files, use the following syntax:

Test the plugin

You can test your plugin before publishing your site using functional testing like you would with any backend Velo code. Make sure your calculatePrice() function's return values are properly formatted. To test your plugin after deploying, add console logs to your code. The results appear in the Site Events log.

Step 3: Deploy the plugin

Once your code files are ready, you need to publish the site.

1. Publish your site.

Update the plugin

You can make updates to your plugin as necessary. Make sure to publish your site for your updates to take effect.

Remove the plugin

You can remove the plugin from your site from the Velo Sidebar.

1. Hover over the plugin's folder and click Show More .

2. Select **Remove.

   

3. Click Remove.

Example

We created an example to demonstrate how you can use service plugins to extend the pricing for bookings on your site.

Offer custom pricing for add-ons and weekend rates

In this example, we calculate and display custom pricing that offers lower rates for weekdays and varied pricing for different addon options. To test this code, paste it into your .js file.

Custom plugins allow you to implement pricing with your own customized business logic and display the new pricing on your site during checkout. In this example, we calculate and display custom pricing that offers lower rates for weekdays and varied pricing for different addon options.

We use the addtionalFields property of the booking to get the weekend rate and the price of each addon.

To test this code, paste it into your <my-plugin-name>.js file.

In this example, the booking's price is modified based on add-ons the customer can add to their booking, and a more expensive rate if the booking is for the weekend.

We built a sample site where you can see this code in action.