> 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: eCommerce Additional Fees Service Plugin

## Article: eCommerce Additional Fees Custom Extension

## Article Link: https://dev.wix.com/docs/develop-websites/articles/code-tutorials/wix-e-commerce-stores/e-commerce-additional-fees-service-plugin.md

## Article Content:

# Velo Tutorial: eCommerce Additional Fees Service Plugin

Wix service plugins (formerly SPIs and custom extensions) allow you to implement custom logic to change how your site behaves and displays. For example, when you set up a Wix eCommerce site, there are limitations to how you can charge buyers of your products. What if you want to charge buyers an extra fee for gift-wrapping an item? What if you want to charge a carbon emission fee? The answer is service plugins.

Read more information on how to implement a [service plugin](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/integrations/service-plugins-formerly-spis/custom-app-extensions-using-spis.md).

With the Additional Fees service plugin, you can define the additional fees that fit your site's needs. You can also customize code to calculate different types of additional fees. 

For example, you can add some of the following additional fees to your checkout flow: 

* Gift wrapping fees
* Shipping insurance fees
* Item warranty fees
* Credit card service fees
* Shipping and handling fees
* Fragile packaging fees
* Carbon offset fees

These additional fees are displayed in your store's **Cart** and **Checkout** pages. 

This article explains how to set up an Additional Fees plugin on your site using Velo.

The process has 3 steps:

1.  Create a new Additional Fees service plugin on your site.
2.  Implement your plugin with custom code.
3.  Deploy the plugin.

>**Note** 
> In order to add the Additional Fees service plugin to your site, you need to install the [Wix Stores App](https://support.wix.com/en/article/wix-stores-adding-wix-stores) or the [Wix Bookings App](https://support.wix.com/en/article/wix-bookings-adding-wix-bookings-from-the-wix-owner-app).

## Step 1: Create a new Additional Fees service 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 (Wix Editor), or the **/src/backend/__spi__** section of the Wix IDE Explorer (Wix Studio), which contains the files for your code.

1.  Add the [Wix Stores app](https://support.wix.com/en/article/wix-stores-adding-wix-stores) or the [Wix Bookings app](https://support.wix.com/en/article/wix-bookings-adding-wix-bookings-from-the-wix-owner-app) to your site.
2. Enable coding: 
    + **Wix Studio:** If necessary, click ![Code icon](https://github.com/wix-incubator/wix-code-docs/assets/50321691/2c41d3df-930f-4e0f-966f-038742adceed) and then **Start Coding**.  
    + **Wix Editor:** Enable [Velo Dev Mode](https://support.wix.com/en/article/about-velo-by-wix#to-enable-velo-on-your-site), and then click the **Public & Backend**  ![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/76096845-8b12-44f1-91f6-3dc2e838fdd9/2022/08/29/23d50509-633d-4616-9f56-65add8fa6d0b/d910e041-d150-4f35-aa75-30ad262abc7a.png)  tab in the Code sidebar.
3. Go to the Service Plugins section: 
    + **Wix Studio:** Click **Public & Backend**. 
    + **Wix Editor:** Scroll down to the Service Plugins panel at the bottom of the sidebar.

4.  Hover over **Service Plugins** and click  ![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/11fda387-da5a-430a-ada3-46def885b67f/2022/03/02/65d645bd-dee9-40dc-9f91-c44b06d72492/289e91de-47c5-429c-b61d-67bd8d4fd1ec.png) , then click **Additional Fees**.

5.  Follow the prompts to add the plugin and accept any terms and conditions that display. 
6.  Enter a name for your integration and click **Add & Edit Code**. The name can't contain spaces or special characters. 
7. **Wix Studio:** Open the Wix IDE, and go to **/src/backend/__spi__/ecom-additional-fees**. If your service plugin doesn't appear, try refreshing both the Studio Editor and the Wix IDE. 
8. **Publish** your site.

## Step 2: Implement the plugin

The procedure in the previous step creates a folder in the service plugins section of the Code sidebar (Wix Editor), or in the Wix IDE's Explorer (Wix Studio). The name of the folder is based on the plugin you chose. Inside this is another folder with the name of the plugin you set up. This folder contains 2 files, `<my-plugin-name>.js` and `<my-plugin-name>-config.js`.

Implement the custom code for your plugin in these files. Below are some guidelines for writing your code. 

### `<my-plugin-name>.js`

The code in this file defines a function called `calculateAdditionalFees()`. This function is called by Wix eCommerce when an action occurs in the cart or on the checkout page, and then receives the additional fees provided by your plugin. The function contains the following parameter:

*   **options**: An object containing data and shipping information about the items in your cart. Your plugin can use this data to calculate any additional fees. For more details, see the [Additional Fees Service Plugin Reference.](https://www.wix.com/velo/reference/spis/wix-ecom/ecom-additional-fees) 

Example **options** object:

```json
[
  {
    "lineItems":[
      {
        "physicalProperties":{
          "sku":"0001",
          "shippable":true
        },
        "quantity":1,
        "price":"4.00",
        "_id":"00000000-0000-0000-0000-000000000004",
        "rootCatalogItemId":"cb688748-3f3d-e5f4-accb-5bf894a4ecd0",
        "productName":"Luxury glass",
        "catalogReference":{
          "catalogItemId":"cb688748-3f3d-e5f4-accb-5bf894a4ecd0",
          "appId":"215238eb-22a5-4c36-9e7b-e7c08025e04e",
          "options":{
            "options":{
              
            },
            "variantId":"00000000-0000-0000-0000-000000000000"
          }
        }
      }
    ],
    "shippingInfo":{
      "selectedCarrierServiceOption":{
        "code":"fc538775-9417-87a9-6808-c71996de4723",
        "logistics":{
          "deliveryTime":"3-5 days",
          "instructions":"Deliver during opening hours.",
          "pickupDetails":{}
        },
        "carrierId":"c8a08776-c095-4dec-8553-8f9698d86adc",
        "title":"standard shipping",
        "requestedShippingOption":"true",
      },
      "carrierServiceOptions":[
        {
          "carrierId":"c8a08776-c095-4dec-8553-8f9698d86adc",
          "shippingOptions":[
            {
              "code":"fc538775-9417-87a9-6808-c71996de4723",
              "title":"standard shipping",
              "logistics":{
                "deliveryTime":"3-5 days",
                "instructions":"Deliver during opening hours.",
                "pickupDetails":{}
              }
            }
          ]
        }
      ]
    }
  }
]
```

The `calculateAdditionalFees()` function returns an object containing an array called `additionalFees` and a property called `currency`, defining the additional fees and currency that appears in the **Cart** and on the **Checkout** pages. For more details, see the [Additional Fees Service Plugin Reference](https://www.wix.com/velo/reference/spis/wix-ecom/ecom-additional-fees).

Example return value:

```json
{
  additionalFees: [
    {
      code: "wrapping-fee",
      name: "Wrapping Fee",
      price: "5",
      taxDetails: {
        taxable: false
      }
    } 
  ],
  currency: "EUR"
}
```

>**Note** 
> The **currency** you return must be the same as the site's currency.

### `<my-plugin-name>-config.js`

The code in this file defines a function named `getConfig()` that returns an empty object.

Example:

```json
export function getConfig() {
  return {};
}
```

### Add files to the plugin

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

+ **Wix Editor:**

  1.  Hover over the plugin folder's name and click **Show More**  ![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/76096845-8b12-44f1-91f6-3dc2e838fdd9/2022/09/04/45269098-373f-4d2c-8168-2fc5242c6024/c890c6a3-6762-4501-bdb4-e44c678108df.png).
  2.  Select the **New.js** file.

+ **Wix Studio:**
  Create a new file in the plugin's folder.

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

```
import { functionName } from './myFileName.js';
```

## Test the plugin

You can test your plugin before publishing your site in the Wix Editor 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 any backend Velo code. Make sure your `calculateAdditionalFees()` function's return values are properly formatted. 

You can test your plugin after deploying for both Wix Editor and Wix Studio. To test your plugin after deploying, add console log statements to your code. The results appear in [Wix Logs](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/logs/about-logs.md).

## Step 3: Deploy the plugin

Once your code files are ready, publish your site. Navigate to your site, and add an item to your Cart. Any additional fees you've customized are displayed in the cart and on the checkout pages. if they pertain to your cart items. 

1.  Once your code files are ready, click **Save**. 
2.  **Publish** your site. 
3.  After your service plugins are published, open your site.
4.  Navigate to your **Cart** or **Checkout** page, and make a change. For example, add an item to your cart, or select a shipping location.
5.  See your custom additional fees appear in your site's **Cart** and in your site's **Checkout** pages. 

    ![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/a551efd3-24d0-48fe-8aec-00f810ffc5fc/2022/09/01/99f540fc-3cc3-4b45-b952-c921ce89f03a/f6f5cbe0-8ef0-4ec1-ae09-333b98e7d6c7.png) 

## Example

We created an example to demonstrate how you can use the service plugins feature to extend the additional fees on your site. 

> **Note:** This example and its steps are based on a Wix Editor site. You can adapt the steps for a Wix Studio site by using the equivalent [Wix Studio features](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/overview/about-coding-with-wix-studio.md#finding-your-way).

### Wrapping Fee

In this example, a wrapping fee has been integrated into a store's site. The code in the `additional-fees.js` file counts all the items in the cart that contain the words `glass`, `bowls`, `vase`, or `plates` in their names. These items are considered fragile. The wrapping fee for each fragile item in a customer's cart is then calculated. If a cart contains at least 5 fragile items, the wrapping fee is not applied.

We built a sample site where you can see this code in action. To set up a working copy of the sample site, do the following:

1.  Open a copy of the [sample site](https://editor.wix.com/html/editor/web/renderer/new?siteId=fc57098b-9c22-415e-950a-ce5edce5e1e2&metaSiteId=97fcc7f0-2cb2-4b33-86e3-45fbe430fc5e).
2.  [Publish the site](https://support.wix.com/en/article/wix-editor-publishing-your-site#publishing-your-site) to save the copy to your Wix account.
3.  In your new site's dashboard, [go to Settings](https://www.wix.com/my-account/site-selector/?buttonText=Open%20Settings&title=Select%20a%20Site&autoSelectOnSingleSite=true&actionUrl=https://www.wix.com/dashboard/{{metaSiteId}}/settings).
4.  Click **Language & Region**.
5.  Scroll down to **Site Currency**.
6.  Click the **Currency** drop-down menu and select **US Dollar - USD ($)**.
7.  Click **Save**.

>**Note** 
> The sample site is not a premium Wix site. This means you can only see the extra fees displayed in the site's cart and not on the checkout page.

## Remove an plugin

You can remove an plugin from your site. 

**Wix Editor:** 

1. In the **Public & Backend** section of the Code sidebar, under **Service Plugins**, hover over the plugin's folder and click **Show More**  ![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/76096845-8b12-44f1-91f6-3dc2e838fdd9/2022/09/04/c4ff84cb-4d96-4e1a-966a-9c6b66dca0b2/062297c2-c368-4aee-b705-f0a55abc5bf6.png) .
2. Select **Remove**.
3. Click **Remove**.

**Wix Studio:**
Right click on the plugin's folder and select **Delete Permanently**.