App Flow

Before you get started building your custom menu, it's helpful to start with a quick read-through of how your website will interact with the AIQ Ecommerce API.

Home Page

Your site's home page could display a list of top selling products and display a banner if the store is open and accepting orders.

Example: https://www.highscore-cannabis.com/

📘

Relevant endpoints:

Get venue by id - https://api-docs.dispenseapp.com/reference/get_venues-id

List products - https://api-docs.dispenseapp.com/reference/get_products

Products Page

Your product or 'shop' page could display all the products available at the store, and provide filtering and search.

Example: https://www.highscore-cannabis.com/shop

📘

Relevant endpoints:

List products - https://api-docs.dispenseapp.com/reference/get_products

Product Detail Page

Your site's product detail page can show an individual product with details like

1. name
2. description
3. labs -

Example: https://www.highscore-cannabis.com/none/hazmat-og

Cart Page

Example: https://www.highscore-cannabis.com/?cart=true

Checkout Page

Checkout is handled completely by us, all you need to do is <iframe> to a cart's checkout url:

<iframe src={cart.checkoutUrl} style={{ width: '100%', height: '100vh', border: 'none' }} />

Iframe Events

We'll publish various events via the iframe that allow you to hook into various scenarios that can happen on our Checkout page:

Back Button Event

The checkout page will display a 'Back' button at the top that allows users to navigate away from the checkout page. To handle this in your app, you'll need to listen to the GO_BACK event:

window.addEventListener('message', function (e) {
	if (e.data?.type === 'GO_BACK') {
		router.back()
	}
})

Order Complete

If you want to be notified when a user completes their purchase, listen to the ORDER_COMPLETE event:

window.addEventListener('message', function (e) {
	if (e.data?.type === 'ORDER_COMPLETE') {
    console.log('ORDER ID', e.data?.data?.orderId)
	}
})