🇫🇷 Carte-Grise-Pref.fr 🇫🇷 *UNIQUE* Shopify Integration For Custom draftOrder Products (FULL API Tutorial)…
If you need to integrate custom line-items into a Shopify store, you *NEED* to use the draftOrder API (there is no other way)… 5-minute tutorial explains EVERYTHING ⬇️
Recently worked with a client from France, who wanted to integrate a custom order process into their Shopify store.
Whilst not unique, the problem was they needed to provide 100% custom “line-items” to their buyers. This is not possible with the standard Shopify system, and (thus) a creative solution had to be found.
Turns out you *CAN* add custom items to a DRAFT order…
Draft orders are meant for warehousing operations, or other instances where a buyer may not deal with the store directly. They REALLY should be called “quote” orders, and (whilst effective) do NOT follow the standard flow of a standard Shopify store.
The problem with “draft” orders is that you can’t add them to a cart, and “check out” as you would with normal orders. Whilst the checkout process is similar, on-boarding is not (may cause issues with conversions).
This means that if you’re looking at integrating the draftOrder API into a Shopify experience, you need to understand its limitations, pitfalls and opportunities.
This tutorial is going to detail the process we used to integrate custom line orders into “draft” orders on the carte-grise-pref.fr site shown above…
- 📁 Draft Orders
- 🚨 How To Integrate
- 📈 Order Management
- 🖋️ Notes
1. 📁 Draft Orders
Shopify explains draft orders as follows:
You can create orders for your customers and send them invoices from the Shopify admin or the Shopify app. The orders that you create on behalf of your customers are named draft orders. Draft orders are similar to the orders that your customers create for themselves. A draft order is converted to an order when you accept payment for it.
Think of them as an invoice or quote (created for a single customer and sent directly via email or app)…
The flow is as follows:
- Create draft invoice for client (from the Shopify admin area)
- Send invoice to client (email or app)
- Allow customer to purchase product/service (Shopify’s checkout)
It’s important to note that this is different to adding variants to products (different colours, styles etc)…
Variants are based on a static base-price. This means that if you wanted to give a customer a completely custom offer, you would need to do so from within the context of the base price. If you’re doing hourly-billing or some other completely customized offer, this quickly becomes inadequate.
-
If you want to take advantage of Shopify’s platform, but need to
offer totally custom prices, you need to use the “draft” orders facility.
Unfortunately, this process exists beyond the scope of Shopify’s “front-end” user experience.
It means that if you wanted to offer users the ability to create a “custom” priced product from your store, and pay for it without needing to contact you, there’s a problem.
This is what we solved…
2. 🚨 How To Integrate
As explained on Shopify’s YouTube channel, the “draft order” system is meant to provide clients with a manual way of paying for bespoke orders…
This means that you’re NOT able to put the “draft” (invoice/quote) orders through the standard “cart” system that Shopify has. You have to accept payment manually.
The point is that (with our project), we needed to create a system which automatically created custom products, added them to an order and sent the buyer to a checkout page.
The checkout page was the most difficult part. Draft Orders has an API. Checkouts do not (not one you can access anyway)…
Thus, if you are interested in building a system which makes use of Shopify’s “draft orders”, you need to accommodate a different flow into the process.
—
🔒 Private Apps
To do this (like most things Shopify), you’ll need to create a “private app”…
Private apps are small applications built in NodeJS, Ruby, Python or some other system — which you upload to a server, and use to connect to your Shopify store. They’re most commonly used as a means to interface with third-party API’s.
If you want to create ANY sort of “extended” functionality with Shopify, you’ll need to offload the logic into a “private” app, and allow that to accept/deliver various requests. The following explains (briefly) how to do this…
[[ private app image — schematic ]]
When using Shopify, there may be instances where you need to extend your store’s functionality with the likes of API’s or some other “off-site” logic.
To do this, Shopify introduced what are known as “private apps” → basically the ability to create an API key and gain back-end access to your store:
[[ other stuff with code etc ]]
3. 📈 Order Management
If you implement something like the above (a completely object-oriented system for interfacing with API’s), you’ll find that you need to manage the orders you create…
We found this problem particularly prevalent when using the draft Orders API → rather than allowing the “draft” order to be added to a cart (as you would with the normal Shopify flow), you need to direct the buyer to a “checkout”.
Now, it wasn’t documented as to how you’d actually *do* this…
What we didn’t know at the time was that the “checkout API” is NOT required for “checkout” objects to be created for draft orders.
After discussion with Shopify’s tech support, it was discovered that each draft_order object carries an invoice_url property — this is a valid “checkout” object for the buyer, basically replacing the “Checkout API” in the draft order documentation…
This invoice_url object is the “checkout” url for the draft order.
Thus, we were able to take this URL from any of the “draft orders” we created, and pass it back to the store, allowing us to redirect the user after they’d completed their calculation:
Whilst this may not seem that extensive, it’s important because it means that we’re able to create *ANY* custom product within Shopify, and have it available for general purchase.
4. 🖋️ Notes
If you’re looking to customize Shopify, PRIVATE APPS are almost always going to be the answer.
Funnily enough, they’re not actually “apps” themselves, but API credentials you can use within the context of other applications:
In our example, we were able to take a user’s inputted calculation, and the corresponding response, send them to Shopify (to create a “draftOrder”), and then use the returned invoice_url to create a checkout process for the buyer.
Obviously, how this is handled determines the end result. Shopify is not designed to be a fully customizable CMS; it’s an eCommerce platform.
If you’re looking for a totally bespoke solution, you’ll need to look at alternative solutions (including the likes of Magento or BigCommerce).
In the case of the above (Carte-Grise-Pref.fr), the client was adamant on using Shopify. Therefore, if you’re looking at including similar levels of functionality into your system, you’ll likely have to include using a
📥 Thanks For Reading! 📥
If you need further help, please feel free to ask below…
