> 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: Wix eCommerce: Order Page

## Article: Wix eCommerce: Order Page

## Article Link: https://dev.wix.com/docs/build-apps/develop-your-app/extensions/dashboard-extensions/dashboard-plugins/supported-wix-app-dashboard-pages/wix-e-commerce/wix-e-commerce-order-page.md

## Article Content:

# Wix eCommerce: Order Page

The eCommerce Order page has 4 plugin slots: 2 dashboard, and 2 dashboard menu. [Slots](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/dashboard-extensions/dashboard-plugins/supported-wix-app-dashboard-pages/about-dashboard-page-slots.md) are the placeholders in the UI for plugins. The slot ID is the value for the required `extends` field when configuring the plugin in the [App Dashboard](https://dev.wix.com/apps).

## Location in dashboard

Sales > Orders > Order page

To test your plugin on a site, do the following:

1. Install any Wix app that integrates with the Wix eCommerce platform. For example, Wix Stores.
2. Add a new order manually, or let a customer generate the order (for example, by purchasing a product).

## Dashboard plugin slots

The Order page features 2 dashboard plugin slots.

### Slot 1: Order page

The order page dashboard plugin slot is positioned on the right side of the page, under the **Order info** (customer details) card.

![](https://wixmp-833713b177cebf373f611808.wixmp.com/images/wix-ecom-order-page-md_build-apps-portal_develop-your-app_extensions_dashboard-extensions_dashboard-plugins_supported-wix-app-dashboad-pages_assets_ecom-order_1_dp.png)

#### Sample use case

Add a plugin to the Order page that allows the site owner to display a map with the delivery courier's location for the order.

#### Configuration

Use the following slot ID for the `extends` property in your dashboard plugin's configuration in your app's dashboard:

**slot ID**: `cb16162e-42aa-41bd-a644-dc570328c6cc`

For example:

```json
{
  "hostingPlatform": "BUSINESS_MANAGER",
  "extends": "cb16162e-42aa-41bd-a644-dc570328c6cc",
  "description": "Dashboard Plugin on the Order page.",
  "title": "Order Page Dashboard Plugin",
  "height": 400,
  "iframeUrl": "https://www.example.com",
  "componentName": "Order Page Widget Plugin"
}
```

<blockquote class="important">

**Important:**
The hosting platform must be "BUSINESS_MANAGER".

</blockquote>
  
#### Interaction between the dashboard page and your plugin

Apps built by Wix pass parameters via dashboard slots for you to utilize in your plugin's functionality. Learn how to [interact with and retrieve parameters from the dashboard page](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/dashboard-extensions/dashboard-plugins/about-dashboard-plugin-extensions.md).

This slot passes the following parameters:

| Name              | Type                | Description                                                                                                                                                          |
| ----------------- | ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `orderId`         | String              | Order ID.                                                                                                                                                            |
| `onOrderUpdate()` | `()=>Promise<void>` | Callback that notifies the host page about an order update, prompting a UI refresh. It returns a promise indicating when the UI update on the host page is complete. |

### Slot 2: Pre-collect payment modal

The **Collect Payment** menu has items that open a modal when selected. This dashboard menu plugin slot displays a custom modal after the site owner selects a menu item and before the default modal appears. The slot is rendered in the modal's overlay.

![](https://wixmp-833713b177cebf373f611808.wixmp.com/images/wix-ecom-order-page-md_build-apps-portal_develop-your-app_extensions_dashboard-extensions_dashboard-plugins_supported-wix-app-dashboad-pages_assets_ecom-order-page-pre-collect-modal.gif)

**Sample use case**

Add a modal overlay that allows site owners to add things to an order, such as additional items, notes, or extra fees like delivery charges.

#### Configuration

Use the following slot ID for the `extends` property in your dashboard plugin's configuration in your app's dashboard:

**slot ID**: `b92f0e25-535f-4bef-b130-8e5abc85b2fe`

For example:

```json
{
  "hostingPlatform": "BUSINESS_MANAGER",
  "extends": "b92f0e25-535f-4bef-b130-8e5abc85b2fe",
  "description": "Order Page Pre-Collect Payment Modal Dashboard Plugin on the Order Page.",
  "title": "Order Page Pre-Collect Payment Modal Plugin",
  "height": 400,
  "iframeUrl": "https://www.example.com",
  "componentName": "My Pre-Collect Payment Modal Plugin"
}
```

<blockquote class="important">

**Important:**
The hosting platform must be "BUSINESS_MANAGER".

</blockquote>

#### Interaction between the dashboard page and your plugin

Apps built by Wix pass parameters via dashboard slots for you to utilize in your plugin's functionality. Learn how to [interact with and retrieve parameters from the dashboard page](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/dashboard-extensions/dashboard-plugins/about-dashboard-plugin-extensions.md).

This slot passes the following parameters:

| Name                     | Type                | Description                                                                                                                                                         |
| ------------------------ | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `orderId`                | String              | Order ID.                                                                                                                                                           |
| `onSuccess()`            | `()=>Promise<void>` | Callback to progress to the next modal (default or plugin modal) after a successful order update. Returns a promise indicating when the host UI update is complete. |
| `onCancel()`             | `()=>void`          | Callback to progress to the next modal (default or plugin modal) without any changes.                                                                               |
| `menuOption`             | Object              | The menu item that was selected.                                                                                                                                    |
| `menuOption.key`         | String              | Key of the menu item that was selected. Supported values: `CHARGE_WITH_CREDIT_CARD`, `RECORD_ORDER_MANUAL_PAYMENT`, `CHARGE_WITH_INVOICE`, `EXTENSION`              |
| `menuOption.componentId` | String              | Component ID of the extension that was clicked. Only applies when the `EXTENSION` menu item key is implemented by another slot.                                     |

### Multiple plugins in the same slot

These plugin slots can host multiple plugins as follows:

- The **Order Page** plugins are displayed vertically and ordered by creation date, with the most recent plugin at the bottom.
- The **Pre-collect payment modal** plugins are displayed sequentially, one modal after the other, before the default modal appears.

## Dashboard menu plugin slots

The Order page features 2 dashboard menu plugin slots.

### Slot 3: Collect Payment menu

This dashboard menu plugin slot is located in the **Collect Payment** menu.

![](https://wixmp-833713b177cebf373f611808.wixmp.com/images/wix-ecom-order-page-md_build-apps-portal_develop-your-app_extensions_dashboard-extensions_dashboard-plugins_supported-wix-app-dashboad-pages_assets_ecom-order_3_dmp.png)

**Sample use case**

Add a menu item enabling site owners to accept your custom payment method for orders. This allows site owners to charge their clients through your app.

#### Configuration

Use the following slot ID for the `extends` property in your dashboard menu plugin's configuration in your app's dashboard:

**slot ID**: `bb4aa225-86d8-47fe-87d1-f519b1b93473`

For example:

```json
{
  "hostingPlatform": "BUSINESS_MANAGER",
  "extends": "bb4aa225-86d8-47fe-87d1-f519b1b93473",
  "description": "Collect Payment Dashboard Menu Plugin on the Order Page.",
  "title": "Order Page Collect Payment Menu Plugin",
  "action": {
    "openModal": {
      "componentId": "36bceb0e-5ac3-4b12-a40d-df0bf5e8dc89",
      "componentParams": {}
    }
  },
  "componentName": "My Order Page Collect Payment Dashboard Menu Plugin"
}
```

<blockquote class="important">

**Important:**
The hosting platform must be "BUSINESS_MANAGER".

</blockquote>

#### Interaction between the dashboard page and your plugin

Apps built by Wix pass parameters via dashboard slots for you to utilize in your plugin's functionality. Learn how to [interact with and retrieve parameters from the dashboard page](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/dashboard-extensions/dashboard-plugins/about-dashboard-plugin-extensions.md).

This slot passes the following parameters:

| Name          | Type                | Description                                                                                    |
| ------------- | ------------------- | ---------------------------------------------------------------------------------------------- |
| `orderId`     | String              | Order ID.                                                                                      |
| `onSuccess()` | `()=>Promise<void>` | Callback to notify the host when you are done handling the flow associated with new menu item. |

### Slot 4: More Actions menu

This dashboard menu plugin slot is located in the **More Actions** menu at the top of the Order page.

![](https://wixmp-833713b177cebf373f611808.wixmp.com/images/wix-ecom-order-page-md_build-apps-portal_develop-your-app_extensions_dashboard-extensions_dashboard-plugins_supported-wix-app-dashboad-pages_assets_ecom-order-more-actions.png)

**Sample use case**

Add a menu item that initiates the return process for an order using a third party provider.

#### Configuration

Use the following slot ID for the `extends` property in your dashboard menu plugin's configuration in your app's dashboard:

**slot ID**: `7c82ce37-3890-4613-9364-03a363c92ebe`

For example:

```json
{
  "hostingPlatform": "BUSINESS_MANAGER",
  "extends": "7c82ce37-3890-4613-9364-03a363c92ebe",
  "description": "Order page More Actions dashboard menu plugin.",
  "title": "Order Page More Actions Dashboard Plugin",
  "iconKey": "Payment",
  "action": {
    "openModal": {
      "componentId": "36bceb0e-5ac3-4b12-a40d-df0bf5e8dc89",
      "componentParams": {}
    }
  },
  "componentName": "More Actions Plugin"
}
```

<blockquote class="important">

**Important:**

- The hosting platform must be "BUSINESS_MANAGER".
- Each slot must include an [icon](https://www.wix-pages.com/wix-design-system-employees/?path=/story/foundations-icons--icons) to comply with Wix's style requirements. Provide the icon's name as the value for `"iconKey"`.

</blockquote>

#### Interaction between the dashboard page and your plugin

Apps built by Wix pass parameters via dashboard slots for you to utilize in your plugin's functionality. Learn how to [interact with and retrieve parameters from the dashboard page](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/dashboard-extensions/dashboard-plugins/about-dashboard-plugin-extensions.md).

This slot passes the following parameters:

| Name          | Type                | Description                                                                                    |
| ------------- | ------------------- | ---------------------------------------------------------------------------------------------- |
| `orderId`     | String              | Order ID.                                                                                      |
| `onSuccess()` | `()=>Promise<void>` | Callback to notify the host when you are done handling the flow associated with new menu item. |

### Multiple plugins in the same slot

These menu plugin slots can host multiple plugins.

The menu plugins are displayed vertically and ordered by date created, with the most recently created plugin displayed at the bottom.

## Wix APIs

You can implement logic in your plugin using the Wix eCommerce Orders API:

- [SDK](https://dev.wix.com/docs/sdk/backend-modules/ecom/orders/setup.md)
- [REST](https://dev.wix.com/docs/rest/business-solutions/e-commerce/orders/introduction.md)

## Slot IDs

| Slot                      | ID                                     | Parameters                                                                                       |
| ------------------------- | -------------------------------------- | ------------------------------------------------------------------------------------------------ |
| Order page                | `cb16162e-42aa-41bd-a644-dc570328c6cc` | `orderId`, `onOrderUpdate()`                                                                     |
| Pre-collect payment modal | `b92f0e25-535f-4bef-b130-8e5abc85b2fe` | `orderId`, `onSuccess()`, `onCancel()`, `menuOption`, `menuOption.key`, `menuOption.componentId` |
| Collect Payment menu      | `bb4aa225-86d8-47fe-87d1-f519b1b93473` | `orderId`, `onSuccess()`                                                                         |
| More Actions menu         | `7c82ce37-3890-4613-9364-03a363c92ebe` | `orderId`, `onSuccess()`                                                                         |

## See also

- [About Dashboard Page Slots](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/dashboard-extensions/dashboard-plugins/supported-wix-app-dashboard-pages/about-dashboard-page-slots.md)
- [About Dashboard Plugin Extensions](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/dashboard-extensions/dashboard-plugins/about-dashboard-plugin-extensions.md)
- [Add Self-hosted Dashboard Plugin Extensions](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/self-hosting/supported-extensions/about-self-hosted-app-extensions.md)
- [About Dashboard Menu Plugin Extensions](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/dashboard-extensions/dashboard-plugins/dashboard-menu-plugins/dashboard-menu-plugin-extensions.md)- [Add Dashboard Menu Plugin Extensions](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/dashboard-extensions/dashboard-plugins/dashboard-menu-plugins/add-dashboard-menu-plugin-extensions.md)