---
title: "Order | Customer's Canvas Hub"
canonical: "https://customerscanvas.com/docs/hub/admin-guide/workflows/ui-framework/widgets/order/"
---

# Order

> This non-visual widget controls the data that will be passed to the e-commerce system when the customer finishes the personalization process.

```json
{
  "name": "order-details",
  "type": "order",
  "params": { ... }
}
```

Let's see how you can pass the data within this widget.

## Images

After the customer finishes the personalization process, you first need to take the design preview from the `design-editor` widget to use it in the e-commerce shopping cart. To do so, you render proof images as described in the [editor widget](https://customerscanvas.com/docs/hub/admin-guide/workflows/ui-framework/widgets/design-editor.md#getting-the-personalization-results) and pass their URLs in the `images` property as follows:

```json
{
  "name": "order-details",
  "type": "order",
  "params": {
    "images": "{{$['editor'].proofImageUrls}}"
  }
}
```

## Download

You also need to provide print files. They can be downloaded using the URLs stored in the `hiResUrls` property of the editor. You can pass them as `downloadUrls` as follows:

```json
{
  "name": "order-details",
  "type": "order",
  "params": {
    "images": "{{$['editor'].proofImageUrls}}",
    "downloadUrls": "{{$['editor'].hiResUrls}}"
  }
}
```

## Data

In the `data`, you can pass any custom data to the order created in the e-commerce system. For example, it can be the `stateId` parameter.

```json
{
  "name": "order-details",
  "type": "order",
  "params": {
    "images": "{{$['editor'].proofImageUrls}}",
    "downloadUrls": "{{$['editor'].hiResUrls}}",
    "data": {
      "stateId": "{{$['editor'].stateId}}"
    }
  }
}
```

## Props

Using the `props` object, you can add a link to the design, order description, and service data to the project created for that order in Customer's Canvas. For example, you can pass a private design as the pair of `_stateId` and `_userId`. The service data in `_fields` has arbitrary names.

```json
{
  "name": "order-details",
  "type": "order",
  "params": {
    "images": "{{$['editor'].proofImages}}",
    "downloadUrls": "{{$['editor'].hiResUrls}}",
    "props": {
      "_stateId": [ "{{ $['editor'].stateId }}" ],
      "_userId": "{{ $['editor'].userId }}",
      "_fields": {
        "Notes": "{{ $['text-block']._ }}",
        "Number of copies": 10,
        "Email notification": "orders@example.com"
      }
    }
  }
}
```

## Params

| Name | Type | Description | Default value|
|--|--|--|--|
| `images`| string[] | An array of URLs to preview images | empty array |
| `downloadUrls`| string[] | An array of the print-ready files | empty array|
| `data`| object | (optional) Data passed to the e-commerce system | empty object |
| `props`| object | (optional) Data passed to the Customer's Canvas as project properties, which are available in the `onSubmitting` callback | empty object |
| `customPrice`| number | (optional) A custom price for the order | `0` |
| `quantity`| number | (optional) The number of products ordered | `1` |
| `sku`| string | (optional) An identifyer of a product variant; related only to the PIM module products | empty string |