> Portal Navigation:
>
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt
## Resource: Tutorial: Bookings Pricing Service Plugin
## Article: Bookings Pricing Custom Extension
## Article Link: https://dev.wix.com/docs/develop-websites/articles/code-tutorials/wix-bookings/tutorial-bookings-pricing-service-plugin.md
## Article Content:
# 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 [Code sidebar](https://docs.google.com/spreadsheets/d/1tCBuqrexV3XCAKCozkUufXO5qFeXmf9hX2DZ3UJC07U/edit?usp=sharing). Learn more about [service plugins](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/integrations/service-plugins-formerly-spis/about-service-plugins.md).
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 Code sidebar that contains the files for your backend code.
1. [Add Wix Bookings](https://www.wix.com/app-market/web-solution/bookings) to your site.
2. With Velo Dev Mode enabled, click the **Public & Backend**  tab on the Code 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 Code sidebar. Inside this folder is another folder with the name of the plugin you set up. This folder contains 2 default plugin files:
* `.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.
* `-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](https://dev.wix.com/docs/velo/events-service-plugins/bookings/service-plugins-spis/bookings-custom-pricing/introduction.md).
Sample **options** object:
```json
{
"options": {
"booking": {
"numberOfParticipants": 2,
"endDate": "2023-04-11T19:00:00.000Z",
"bookingSource": {
"platform": "WEB",
"actor": "CUSTOMER"
},
"sendSmsReminder": false,
"flowControlSettings": {
"withRefund": false
},
"revision": "1",
"_id": "35f6fd1f-df83-4195-bd67-7f7237b428b5",
"createdBy": {
"anonymousVisitorId": "869f0e9d-40be-4f2b-a415-14f1316f295e"
},
"selectedPaymentOption": "ONLINE",
"contactDetails": {
"firstName": "Joy Smith",
"email": "joysmith@company.com",
"phone": "0001231234"
},
"additionalFields": [
{
"_id": "709498bf-e275-4c82-aa9c-e76d3d4e9af6",
"value": "1",
"label": "Addon 1"
},
{
"_id": "35a296f6-d71e-4d61-b8ef-cd2973cd9e99",
"value": "1",
"label": "Addon 2"
},
{
"_id": "e3fe7974-3142-4fd5-993c-41472f36f697",
"value": "0",
"label": "Addon 3"
},
{
"_id": "9f1252be-0625-457b-b5cf-96a1fa42281a",
"value": "false",
"label": "weekendRate",
"valueType": "CHECK_BOX"
}
],
"bookedEntity": {
"slot": {
"location": {
"_id": "f8290483-b327-418e-8aab-0a661c80a46f",
"name": "5th Avenue",
"formattedAddress": "1002 5th Avenue, New York, NY, USA",
"locationType": "OWNER_BUSINESS"
},
"endDate": "2023-04-11T15:00:00.000-04:00",
"timezone": "America/New_York",
"resource": {
"_id": "76570209-101f-409b-af97-b445bdb63125",
"name": "Bathhouse Staff",
"scheduleId": "7046edd2-0ee0-43d1-a60f-2ed9cfd36b64"
},
"scheduleId": "c4f2bde3-c327-4424-a99f-7fe0294d419c",
"sessionId": "4jOkD28c0FrsNUSgzQzuLRkA2t1rv1FLTwquKmJyctoZm00vdeKFMyH4n9cCLtmQe8wwAEJlPoJAU9LSPJu26G42joedYythPDtgGeAtC7N5ThJYEmZmm8qrccxj7YxJ36UA6sb9deXOfkwnK2r9A5KWYeM77OPTjaIupKlbIU186GE5wQEBmM2uHCyMUqOvOtoDPyGMJXTlr3DAVEYYiIL0N3VXBmHbBVD25LmgexOYDN2MqqZ3eLMX5wVArHPeJPAWeI5bfVKgSi0ozO16W66hj6HudqeIem8fuHQdEqDXgfkVsUE8QPagmlsf8abmjGqFtSPEI7jsoOb",
"startDate": "2023-04-11T12:00:00.000-04:00",
"serviceId": "851bca8b-dd5b-4575-8e66-f0bcaca2bfdf"
},
"title": "Bathhouse session",
"tags": [
"GROUP"
]
},
"startDate": "2023-04-11T16:00:00.000Z",
"participantNotification": {
"notifyParticipants": true
},
"_updatedDate": "2023-04-09T10:48:19.751Z",
"totalParticipants": 2,
"_createdDate": "2023-04-09T10:48:19.751Z"
}
}
}
```
* **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](https://dev.wix.com/docs/velo/events-service-plugins/bookings/service-plugins-spis/bookings-custom-pricing/introduction.md).
Example return value:
```json
{
"calculatedPrice": 16.0
}
```
### -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 `.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:
```js
export function getConfig() {
return {pricingProviderName: "calculatePrice"}
}
```
Example return object:
```json
{
"pricingProviderName": "calculatePrice"
}
```
### 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:
```javascript
import { functionName } from './myFileName.js';
```
### Test the plugin
You can test your plugin before publishing your site using [functional testing](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/testing-monitoring/functional-testing/test-backend-functions-with-functional-testing.md) 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 [Wix Logs](https://support.wix.com/en/article/velo-about-site-monitoring).
## Step 3: Deploy the plugin
Once your code files are ready, you need to publish the site.
1. Publish your site.
> **Note**
> There may be a delay between publishing the site and the new bookings pricing options appearing on the live 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 Code 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 `.js` file.
```javascript
import { getPrices } from 'backend/queries';
export const calculatePrice = async (options, context) => {
const prices = getPrices();
const additionalFields = options.booking.additionalFields;
const numberOfParticipants = options.booking.numberOfParticipants;
const weekendRate = getFieldValue(additionalFields, "weekendRate");
const addon1Value = getFieldValue(additionalFields, "Addon 1");
const addon2Value = getFieldValue(additionalFields, "Addon 2");
const addon3Value = getFieldValue(additionalFields, "Addon 3");
const rate = weekendRate === "true" ? prices.weekend : prices.weekday;
const finalPrice === numberOfParticipants * rate +
addon1Value * prices.addon1 +
addon2Value * prices.addon2 +
addon3Value * prices.addon3;
return {calculatedPrice: finalPrice};
};
export function getFieldValue(additionalFields, text) {
const foundFieldArray = additionalFields.filter(additionalField => additionalField.label === text);
return foundFieldArray.length === 0 ? undefined : foundFieldArray[0].value;
}
```
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](https://www.wix.com/velo-examples/custom-service-price/bookflow) where you can see this code in action.