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
namedescriptionlabs-
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' }} />
Authentication
If you'd like your website users to be able to create accounts, here are the endpoints you'll need to use:
Relevant endpoints:
User State
You'll need to manage the user's state (logged in or not) on your own.
If you follow the sample app, take a look here for an example using cookies to store the logged in user's authentication token:
https://github.com/dispenseapp/dispense-sample-app/blob/main/src/utils/auth.ts
Checkout
When redirecting your users to checkout, if they are logged in, you'll want them to be logged in at checkout.
The Blueprint checkout page allows you to pass the user's authentication token via query string parameters:
const cartUrl = cart.checkoutUrl + '?auth={authentication token}'
Updated 3 months ago