Skip to main content

From a finished bundle to a fulfilled order

This tutorial follows a bundle from the moment the customer is happy with their designs to an order you can look up afterwards. You will finish the bundle, choose how the order is created, and query the order and the transactions inside it.

Before you begin​

You need a bundle that contains at least one workflow experience. If you don't have one, follow Build a multi-product bundle first.

1. Finish the bundle​

Call finish() on the bundle. It finalizes every design and resolves with a BundleDesignCreationMessage. The optional callback reports progress, which is useful for a loading indicator.

const message = await bundle.finish((progressText) => console.log(progressText));

const transactionIds = message.items.map((item) => item.transactionId);

Each entry in message.items represents one design, and its transactionId is the reference to that design. Store these IDs against anything you create in your own systems.

2. Choose how the order is created​

There are two routes. Pick the one that matches your integration.

With an e-commerce platform, you don't create the order yourself. Inside a theme, pass the finished message to the platform and it adds the line items to the cart. Spiff Commerce then creates the order when the cart is checked out in your store.

getSpiffThemeLoader().addToEcommerceCart(message);

See Order Submission for how the transaction IDs are attached to your platform's line items.

Without an e-commerce platform, place the order directly. Go to step 3.

3. Place the order​

placeOrder() creates an order containing every design in the bundle. Each design is ordered in the quantity set on its transaction, or 1 if none is set. It resolves with an Order.

const order = await bundle.placeOrder();
console.log(order.id, order.internalId);

The returned order has two fields:

NameTypeDescription
idstringThe ID of the order. Use it to look the order up.
internalIdstringAn internal reference for the order.

Placing the order adds it to the orders page of your account in the Hub and fires any fulfillment logic configured for the products.

info

placeOrder() is a convenience for the common case. If you need to control more of the order, such as marking it as paid or recording an external ID, use the orderCreate GraphQL mutation instead. It is described in Placing an order with the GraphQL API, and it can order a whole bundle by its bundleId.

4. Find the order and its transactions​

Save the order id. You can then read the order back with the orders query, which returns the line items and the transaction behind each one. Authenticate and send the request as described in GraphQL basics, using an application key.

{
    orders(ids: ["<the order id>"]) {
        id
        internalId
        createdAt
        paid
        lineItems {
            id
            quantity
            sku
            status
            previewImageLink
            transaction {
                id
                designName
            }
        }
    }
}

Each line item is a purchased design. Its transaction.id matches the transactionId you saw in step 1, so you can connect an order back to the exact design the customer made.

Next steps​

Last updated on