Skip to main content

Create an Order

Walk through the cart-to-order flow using GraphQL mutations. By the end of this page you will have created a cart, added a product, set addresses, chosen a payment method and converted it into an order.

The flow​

Creating an order in Propeller follows five steps:

  1. Start a cart with cartStart
  2. Add items with cartAddItem
  3. Set addresses with cartUpdateAddress
  4. Choose payment and shipping with cartUpdate
  5. Process the cart into an order with cartProcess

Each step returns the updated cart so you can display the current state to the user.

Start a cart​

Create an empty cart. For an anonymous session you only need a language. For B2B, pass contactId and companyId to get customer-specific pricing.

mutation StartCart($input: CartStartInput) {
  cartStart(input: $input) {
    cartId
    channelId
    items {
      productId
      quantity
    }
    total {
      subTotal
      totalGross
    }
  }
}

Variables:

{
  "input": {
    "language": "NL"
  }
}

Expected result:

{
  "data": {
    "cartStart": {
      "cartId": "019c873a-92ac-7993-b787-6d50d24f44ac",
      "channelId": 1,
      "items": [],
      "total": {
        "subTotal": 0,
        "totalGross": 50
      }
    }
  }
}

Save the cartId. You will pass it as the id argument to every subsequent mutation.

Add items to the cart​

Add a product by its productId (from the catalog query on the previous page). You can set the quantity and optionally pass a clusterId for cluster products.

mutation AddItem($id: String!, $input: CartAddItemInput!) {
  cartAddItem(id: $id, input: $input) {
    cartId
    items {
      itemId
      productId
      quantity
      price
      totalPrice
    }
    total {
      subTotal
      totalNet
      totalGross
    }
  }
}

Variables:

{
  "id": "019c873a-92ac-7993-b787-6d50d24f44ac",
  "input": {
    "productId": 45,
    "quantity": 2
  }
}

Expected result:

{
  "data": {
    "cartAddItem": {
      "cartId": "019c873a-92ac-7993-b787-6d50d24f44ac",
      "items": [
        {
          "itemId": "a1b2c3d4-e5f6-7890-abcd-ef1234567890",
          "productId": 45,
          "quantity": 2,
          "price": 342.54,
          "totalPrice": 685.08
        }
      ],
      "total": {
        "subTotal": 685.08,
        "totalNet": 841.05,
        "totalGross": 695.08
      }
    }
  }
}

Each item gets an itemId (UUID). Use this to update or remove items later with cartDeleteItem.

Set addresses​

Set the invoice and delivery addresses. Call cartUpdateAddress once for each address type.

Invoice address:

mutation SetInvoiceAddress($id: String!, $input: CartUpdateAddressInput!) {
  cartUpdateAddress(id: $id, input: $input) {
    cartId
    invoiceAddress {
      firstName
      lastName
      street
      number
      postalCode
      city
      country
    }
  }
}

Variables:

{
  "id": "019c873a-92ac-7993-b787-6d50d24f44ac",
  "input": {
    "type": "INVOICE",
    "firstName": "Lisa",
    "lastName": "de Vries",
    "street": "Keizersgracht",
    "number": "100",
    "postalCode": "1015 AA",
    "city": "Amsterdam",
    "country": "NL",
    "email": "lisa@brouwerindustrie.nl"
  }
}

Delivery address:

Use the same mutation with "type": "DELIVERY". If the delivery address is the same as the invoice address, you still need to set both.

{
  "id": "019c873a-92ac-7993-b787-6d50d24f44ac",
  "input": {
    "type": "DELIVERY",
    "firstName": "Lisa",
    "lastName": "de Vries",
    "street": "Keizersgracht",
    "number": "100",
    "postalCode": "1015 AA",
    "city": "Amsterdam",
    "country": "NL",
    "email": "lisa@brouwerindustrie.nl"
  }
}

Choose payment and shipping​

First, query the cart to see which payment methods are available. Then update the cart with your selection.

Check available payment methods:

query GetCartPayMethods($id: String!) {
  cart(id: $id) {
    cartId
    payMethods {
      code
      name
      price
    }
  }
}

Expected result:

{
  "data": {
    "cart": {
      "cartId": "019c873a-92ac-7993-b787-6d50d24f44ac",
      "payMethods": [
        { "code": "IDEAL", "name": "Ideal", "price": 0 },
        { "code": "CREDITCARD", "name": "Visa", "price": 0 },
        { "code": "REKENING", "name": "On account", "price": 0 }
      ]
    }
  }
}

Set payment and shipping method:

mutation UpdateCart($id: String!, $input: CartUpdateInput!) {
  cartUpdate(id: $id, input: $input) {
    cartId
    paymentData {
      method
    }
    postageData {
      method
    }
    total {
      subTotal
      totalNet
      totalGross
    }
  }
}

Variables:

{
  "id": "019c873a-92ac-7993-b787-6d50d24f44ac",
  "input": {
    "paymentData": {
      "method": "IDEAL"
    },
    "postageData": {
      "method": "standard"
    }
  }
}

Process the cart into an order​

Convert the cart into a finalized order. Pass an orderStatus to set the initial status of the order.

mutation ProcessCart($id: String!, $input: CartProcessInput!) {
  cartProcess(id: $id, input: $input) {
    cartOrderId
    cart {
      cartId
      orderStatus
    }
    order {
      id
      uuid
      status
      type
      createdAt
      total {
        gross
        net
      }
    }
  }
}

Variables:

{
  "id": "019c873a-92ac-7993-b787-6d50d24f44ac",
  "input": {
    "orderStatus": "NEW",
    "language": "NL"
  }
}

Expected result:

{
  "data": {
    "cartProcess": {
      "cartOrderId": 277,
      "cart": {
        "cartId": "019c873a-92ac-7993-b787-6d50d24f44ac",
        "orderStatus": "NEW"
      },
      "order": {
        "id": 277,
        "uuid": "019c873b-f7ed-72fe-83a3-6d8b9d84f9a7",
        "status": "NEW",
        "type": "dropshipment",
        "createdAt": "2026-02-22T21:23:00.402Z",
        "total": {
          "gross": 695.08,
          "net": 841.05
        }
      }
    }
  }
}

The order is now created. The order.id is the order number you can use to look it up later.

What's next​

Continue to What's next for links to more advanced frontend features like customer authentication, quote requests and order history.