Jane Docs
Search…
Jane Roots
Jane Roots is Jane's headless eCommerce solution, allowing for fully custom frontends to be built on top of Jane's infrastructure.

What is Headless?

Headless is a fancy term. It simply means that Jane exposes data that allows you to build a custom user interface. Put another way – Jane handles the backend; you handle the frontend.
A few examples of what Jane handles on the backend:
  • Product content – Jane ensures that all product content (inventory levels, photos, descriptions, taxonomy, etc.) is accurate.
  • Recommendations – Jane's recommendation algorithm returns the most relevant complementary products for a given product.
  • Specials – Jane handles all specials logic, ensuring the optimal specials are applied to the right products.
  • Checkout requirements – Jane ensures that the user is not able to check out, e.g., when the store is closed.

Who can use Jane Roots?

Jane Roots is relevant to anyone who sells cannabis online – brands, single stores, single-state operators, multi-state operators, etc. If you can provide an eCommerce portal through which customers can make reservations for cannabis, you can build on Jane Roots.
However! There are a few prerequisites to building on Jane Roots:
  • Technical sophistication – Jane Roots is for developers. If you're not sure whether Jane Roots is appropriate for you, here are a few litmus test questions you should be able to answer without thinking too much:
    • What is the most performant way to support search and filtering?
    • What kind of infrastructure is needed to deploy a web app?
    • What are your KPIs and how will you measure them?
  • Relationship with Jane – Jane Roots is limited to Jane partners. If you're already a Jane partner (e.g. you're a dispensary using Jane's eComm solutions; you're a brand using Jane's brand embed solution), feel free to contact your partner success rep, and we'll get the conversation going. If you're not already a Jane partner, reach out!

Architecture

The architecture of a frontend built on Jane Roots will contain at least the following elements:
Menus
Search + Sorting
Product Cards
Specials (e.g. BOGOs)
Filters
Product Detail Pages
Product Reviews

Data

To build out an eCommerce experience, you'll need to get the right data. Jane exposes this data through its APIs, which are documented here.
Jane Roots Documentation
Depending on whether you're a brand or a dispensary (or a chain of dispensaries), you will be retrieving different sets of data.

Dispensaries

Dispensaries have access to the following data:
  • Carts – retrieve all carts for a given user.
  • Menu Products – retrieve all product data for a given store. 
  • Recommendations – leverage Jane's recommendation algorithm to retrieve all complementary products for a given product.
  • Reviews – retrieve all verified reviews for a given product.
  • Deals and Discounts – retrieve all available discounts (e.g. cart-level, user-group, product-level, BOGOs, etc.).
  • Store Information – retrieve all data necessary to display store details (e.g. schedules, reservation slots, etc.)
  • Curbside checkout – allow users to notify stores when they've arrived at the designated curbside pickup spot.

Brands

Brands have access to the following data:
  • Carts – retrieve all carts that originated from your frontend.
  • Products – retrieve all of your brand's products within a specified radius of a given zipcode.
  • Menu Products – retrieve all product data for a given store. 
  • Recommendations – leverage Jane's recommendation algorithm to retrieve all complementary products for a given product.
  • Reviews – retrieve all verified reviews for a given product.
  • Deals and Discounts – retrieve all available discounts (e.g. cart-level, user-group, product-level, BOGOs, etc.).
  • Stores – retrieve all stores that carry a given product.
  • Curbside checkout – allow users to notify stores when they've arrived at the designated curbside pickup spot.

Plug-and-play Checkout

Jane's Cart and Checkout pages are battle-tested – they have been optimized to support a range of operational requirements, support the highest checkout conversion rate in the cannabis industry, and have facilitated over $3 billion in checkouts.
Building out your own cart and checkout pages is a lot of work. It requires ingesting, coordinating, and executing on various concerns to ensure the user checks out in accordance with the store's operational requirements. For example, you will have to account for at least the following:
  1. 1.
    Enforcing cart limits
  2. 2.
    Validating the user's delivery address
  3. 3.
    Optimizing the distribution of specials across the user's cart
  4. 4.
    CRM integrations
  5. 5.
    User group discounts
  6. 6.
    Tax calculations
  7. 7.
    Store schedules, including max orders per window
We highly recommend letting Jane handle all of this (and more) for you.

Implementation

To use Jane's headless checkout, follow these steps:
Add this script to your HTML page. This script will create an empty container for the Jane cart/checkout pages.
1
<script id="jane-frame-script" src="https://api.iheartjane.com/v1/headless/embed.js"></script>
Copied!
When you're ready to materialize the cart/checkout pages, use the browser's postMessage API to send the following payload (with the values that correspond to your store and products) to the container. With this payload, Jane will create a server-side cart and handle all cart/checkout validations.
1
data = {
2
messageType: 'buildCart',
3
payload: {
4
products: [
5
{
6
productId: 2089,
7
priceId: 'eighth_ounce',
8
count: 2,
9
},
10
{
11
productId: 1,
12
priceId: 'eighth_ounce',
13
count: 1,
14
},
15
],
16
user: {
17
firstName: 'John',
18
lastName: 'Smith',
19
birthDate: '1988-04-20',
20
phone: '5551112222',
21
22
externalId: '12345',
23
},
24
cognitoToken: 1234,
25
storeId: 68,
26
headlessPartnerName: 'Partner Name',
27
headlessCheckoutPartnerId: '1234-asdf-5678-ghjk', // provided by Jane
28
options: {
29
font: {
30
fontFamily: 'Public Sans',
31
url:'URL',
32
},
33
theme: {
34
themeColor: '#ffcd00',
35
navigationColor: '#017c6b',
36
ctaTextColor: '#034638'
37
},
38
redirectUrl: 'https://iheartjane.com/',
39
disableWeightSelection: false,
40
disableLoadingSpinner: true,
41
disableAuthFeatures: true,
42
kiosk: false // set to true to enable kiosk mode
43
},
44
},
45
}
46
47
frame = document.getElementById('jane-menu')
48
frame.contentWindow.postMessage(data, '*')
Copied!
To see a live example of this in action, visit https://www.leafly.com/dispensary-info/rise-silver-spring. You should see something like the following:

Client-Side Event Callbacks

When users interact with the cart, Jane sends callbacks to the parent site. For example, when users add or remove items from their carts in the Jane UI, Jane sends cartItemdAdd and cartItemRemove events to the parent page. You can respond to these events to keep your local cart state in sync with Jane's cart.
Here are the events Jane posts back to the parent page:
1
// The iFrame is ready to accept cart data (use this event to
2
// ensure the iFrame has loaded before you postMessage to it):
3
{
4
data: {
5
messageType: "loadingEvent",
6
payload: {
7
name: "headlessAppLoaded"
8
}
9
}
10
}
11
12
// Jane sends three cart-level events:
13
// cartItemAdd, cartItemRemoval, and checkout:
14
{
15
messageType: 'analyticsEvent',
16
payload: { name : 'cartItemAdd',
17
properties: {
18
productId: string,
19
product: { product_id, name, brand, category, kind }
20
}
21
}
22
}
23
24
{
25
messageType: 'analyticsEvent',
26
payload: { name : 'cartItemRemoval',
27
properties: { productId: string }
28
}
29
}
30
31
32
{
33
messageType: 'analyticsEvent',
34
payload: { name : 'checkout',
35
properties: {
36
estimatedTotal: number
37
cartId: number
38
products: Array { product_id, name, brand, category, kind, count }
39
}
40
}
41
}
Copied!
Additional information on these events can be found here: https://docs.iheartjane.com/docs/custom-analytics-scripts.

Webhooks

After an order is placed via Jane's Headless Checkout, you'll want to be updated when the status of the order changes (e.g. when an order is marked as "ready for pickup"). This updating is accomplished by webhooks.
Setting up webhooks requires the following steps (coordination with Jane is necessary to set up webhooks):
  1. 1.
    Stand up an endpoint to which Jane will send POST requests.
  2. 2.
    Pass in your headlessCheckoutPartnerId to the postMessage payload.
  3. 3.
    After the user checks out, the endpoint will receive POST requests with the following payload:
1
cart: {
2
amount: 41.8,
3
assigned_employee_id: null,
4
assigned_employee_name: null,
5
assigned_manager_id: null,
6
assigned_manager_name: null,
7
checked_out_time: '2021-06-21 21:41:28',
8
checkout_message: '',
9
customer_phone_number: '+1112223333',
10
customer_email_address: '[email protected]',
11
customer_name: 'John Smith',
12
created_at: '2021-06-21 21:41:20',
13
id: 7469,
14
pos_order_id: null,
15
promo_code: null,
16
queue_number: 'G19',
17
rating: 0,
18
reservation_mode: 'pickup',
19
reservation_start_window: '2021-06-21 22:45:00',
20
status: 'verification',
21
store_id: 68,
22
store_name: "Jane's Shop",
23
tags: {},
24
user_id: null,
25
external_user_id: '12345',
26
external_user_source: 'foo',
27
uuid: 'fed89a88-2928-4a1f-9134-45c2fd27b2ca',
28
products: [Array]
29
}
30
webhook_event: 'cart_status_updated'
31
Copied!
The status of the reservation will be part of the webhook payload.

Sandbox Project

If you'd like to play around with this, you can do so by using the following starter project:
headless.zip
3KB
Binary
Jane Headless Checkout Sandbox

Ready to build on Jane Roots?

If you're ready to start building on Jane Roots, please reach out to your partner success representative, or send a message to [email protected], and we'll dig in.
Last modified 30d ago