* docs: migrate ui docs to docs universe * created yarn workspace * added eslint and tsconfig configurations * fix eslint configurations * fixed eslint configurations * shared tailwind configurations * added shared ui package * added more shared components * migrating more components * made details components shared * move InlineCode component * moved InputText * moved Loading component * Moved Modal component * moved Select components * Moved Tooltip component * moved Search components * moved ColorMode provider * Moved Notification components and providers * used icons package * use UI colors in api-reference * moved Navbar component * used Navbar and Search in UI docs * added Feedback to UI docs * general enhancements * fix color mode * added copy colors file from ui-preset * added features and enhancements to UI docs * move Sidebar component and provider * general fixes and preparations for deployment * update docusaurus version * adjusted versions * fix output directory * remove rootDirectory property * fix yarn.lock * moved code component * added vale for all docs MD and MDX * fix tests * fix vale error * fix deployment errors * change ignore commands * add output directory * fix docs test * general fixes * content fixes * fix announcement script * added changeset * fix vale checks * added nofilter option * fix vale error
296 lines
9.8 KiB
Plaintext
296 lines
9.8 KiB
Plaintext
---
|
||
addHowToData: true
|
||
---
|
||
|
||
import DocCardList from '@theme/DocCardList';
|
||
import Icons from '@theme/Icon';
|
||
|
||
# POS
|
||
|
||
This document guides you through Medusa's different features and resources to create a point-of-sale (POS) system.
|
||
|
||
## Overview
|
||
|
||
Building a POS system on top of an ecommerce engine introduces challenges related to the tech stack used, data sync across channels, and feature availability relevant to offline sales in a POS, not just online sales.
|
||
|
||
Medusa's modular architecture solves these challenges. Any frontend can utilize Medusa's commerce features through its REST APIs. Medusa's commerce features include multi-warehouse and sales channel features that facilitate integrating a POS system.
|
||
|
||
:::tip
|
||
|
||
Recommended read: [How Tekla built a POS system with Medusa](https://medusajs.com/blog/tekla-agilo-pos-case/).
|
||
|
||
:::
|
||
|
||
---
|
||
|
||
## Freedom in Choosing Your POS Tech Stack
|
||
|
||
When you build a POS system, you must choose which programming framework, language, or tool you want to use.
|
||
|
||
Medusa's modular architecture removes any restrictions you may have while making this choice. Any client or front end can connect to the Medusa backend using its headless REST APIs.
|
||
|
||

|
||
|
||
<DocCardList colSize={4} items={[
|
||
{
|
||
type: 'link',
|
||
href: '/development/fundamentals/architecture-overview',
|
||
label: 'Medusa’s Architecture',
|
||
customProps: {
|
||
icon: Icons['academic-cap-solid'],
|
||
description: 'Learn about Medusa\'s architecture and its ecosystem.',
|
||
}
|
||
},
|
||
{
|
||
type: 'link',
|
||
href: 'https://docs.medusajs.com/api/admin',
|
||
label: 'Admin REST APIs',
|
||
customProps: {
|
||
icon: Icons['academic-cap-solid'],
|
||
description: 'Check out available Admin REST APIs in Medusa.',
|
||
}
|
||
},
|
||
{
|
||
type: 'link',
|
||
href: '/js-client/overview',
|
||
label: 'JavaScript Client',
|
||
customProps: {
|
||
icon: Icons['academic-cap-solid'],
|
||
description: 'Learn about the JavaScript client and to use it.',
|
||
}
|
||
},
|
||
]} />
|
||
|
||
---
|
||
|
||
## Integrate a Barcode Scanner
|
||
|
||
POS systems make the checkout process smoother by integrating a barcode scanner. Merchants can scan a product by its barcode to check its details or add it to the customer's purchase.
|
||
|
||
Medusa’s [Product Variant entity](../references/entities/classes/ProductVariant.md) includes the necessary attributes to implement this integration, mainly the `barcode` attribute. Other notable attributes include `ean`, `upc`, and `hs_code`, among others.
|
||
|
||
To search through product variants by their barcode, you can create a custom endpoint and call it within your POS.
|
||
|
||

|
||
|
||
<DocCardList colSize={6} items={[
|
||
{
|
||
type: 'link',
|
||
href: '/modules/products',
|
||
label: 'Products',
|
||
customProps: {
|
||
icon: Icons['academic-cap-solid'],
|
||
description: 'Learn about the Product architecture and features.',
|
||
}
|
||
},
|
||
{
|
||
type: 'link',
|
||
href: '/development/endpoints/create',
|
||
label: 'Create Endpoint',
|
||
customProps: {
|
||
icon: Icons['academic-cap-solid'],
|
||
description: 'Learn how to create an endpoint in the Medusa backend.',
|
||
}
|
||
},
|
||
]} />
|
||
|
||
<details>
|
||
<summary>
|
||
Example: Search Products By Barcode Endpoint
|
||
</summary>
|
||
|
||
Here’s an example of creating a custom endpoint that searches product variants by a barcode:
|
||
|
||
```ts title=src/api/index.ts
|
||
import { Request, Response, Router } from "express"
|
||
import cors from "cors"
|
||
import {
|
||
ConfigModule,
|
||
errorHandler,
|
||
ProductVariantService,
|
||
wrapHandler,
|
||
} from "@medusajs/medusa"
|
||
import { getConfigFile } from "medusa-core-utils"
|
||
import { MedusaError } from "@medusajs/utils"
|
||
|
||
export default (rootDirectory: string): Router | Router[] => {
|
||
// Read currently-loaded medusa config
|
||
const { configModule } = getConfigFile<ConfigModule>(
|
||
rootDirectory,
|
||
"medusa-config"
|
||
)
|
||
const { projectConfig } = configModule
|
||
|
||
// Set up our CORS options objects, based on config
|
||
const storeCorsOptions = {
|
||
origin: projectConfig.store_cors.split(","),
|
||
credentials: true,
|
||
}
|
||
|
||
// Set up express router
|
||
const router = Router()
|
||
|
||
router.get(
|
||
"/pos/search-barcode",
|
||
cors(storeCorsOptions),
|
||
wrapHandler(
|
||
async (req: Request, res: Response) => {
|
||
const barcode = (req.query.barcode as string) || ""
|
||
if (!barcode) {
|
||
throw new MedusaError(
|
||
MedusaError.Types.INVALID_DATA,
|
||
"Barcode is required"
|
||
)
|
||
}
|
||
// get product service
|
||
const productVariantService = req.scope.resolve<
|
||
ProductVariantService
|
||
>("productVariantService")
|
||
|
||
// retrieve product variants by barcode
|
||
const productVariants = await productVariantService
|
||
.list({
|
||
barcode,
|
||
})
|
||
|
||
res.json({
|
||
product_variants: productVariants,
|
||
})
|
||
}
|
||
)
|
||
)
|
||
|
||
router.use(errorHandler())
|
||
|
||
return router
|
||
}
|
||
```
|
||
|
||
</details>
|
||
|
||
---
|
||
|
||
## Access Accurate Inventory Details
|
||
|
||
As you manage an online and offline store, it's essential to separate inventory quantity across different locations.
|
||
|
||
Using Medusa's multi-warehouse features, merchants can manage the inventory items and their availability across locations and sales channels. They can create a sales channel for their online store and a sales channel for their POS system, then manage the inventory quantity of product variants in each channel.
|
||
|
||

|
||
|
||
This also opens the door for other business opportunities, such as an endless aisle experience. Suppose a product isn't available in-store but is available in different warehouses. In that case, you can allow customers to purchase that item in-store and deliver it to their address.
|
||
|
||
<DocCardList colSize={4} items={[
|
||
{
|
||
type: 'link',
|
||
href: '/modules/multiwarehouse/overview',
|
||
label: 'Multi-Warehouse',
|
||
customProps: {
|
||
icon: Icons['academic-cap-solid'],
|
||
description: 'Learn about the Multi-warehouse architecture and features.',
|
||
}
|
||
},
|
||
{
|
||
type: 'link',
|
||
href: '/modules/sales-channels/overview',
|
||
label: 'Sales Channels',
|
||
customProps: {
|
||
icon: Icons['academic-cap-solid'],
|
||
description: 'Learn about the Sales Channel architecture and features.',
|
||
}
|
||
},
|
||
{
|
||
type: 'link',
|
||
href: '/modules/multiwarehouse/admin/manage-inventory-items',
|
||
label: 'Manage Inventory Items',
|
||
customProps: {
|
||
icon: Icons['academic-cap-solid'],
|
||
description: 'Learn how to use the Admin REST APIs to manage inventory items.',
|
||
}
|
||
},
|
||
]} />
|
||
|
||
---
|
||
|
||
## Build an Omni-channel Customer Experience
|
||
|
||
Using Medusa's Customer APIs and features, you can retrieve a customer's details from the backend and place an order on the POS under their account. The customer can then view their order details on their online profile as if they had placed the order online.
|
||
|
||
In addition, using Medusa's dynamic discounts feature, store operators can create discounts on the fly for customers using the POS system and apply them to their orders. You can also extend Medusa to provide features for a better customer experience, such as a rewards system or loyalty points.
|
||
|
||
<DocCardList colSize={6} items={[
|
||
{
|
||
type: 'link',
|
||
href: '/modules/customers/overview',
|
||
label: 'Customers',
|
||
customProps: {
|
||
icon: Icons['academic-cap-solid'],
|
||
description: 'Learn about the Customer architecture and features.',
|
||
}
|
||
},
|
||
{
|
||
type: 'link',
|
||
href: '/modules/discounts/overview',
|
||
label: 'Discounts',
|
||
customProps: {
|
||
icon: Icons['academic-cap-solid'],
|
||
description: 'Learn about the Discount architecture and features.',
|
||
}
|
||
},
|
||
]} />
|
||
|
||
---
|
||
|
||
## Accept Payment, Place Order, and Use RMA Features
|
||
|
||
Medusa's architecture allows you to integrate any third-party payment processor for your POS and online storefront. For example, you can integrate [Stripe Terminal](https://stripe.com/terminal) to accept in-store payments.
|
||
|
||
Once you accept the payment, you can place an order in the POS system using the [Draft Order APIs](https://docs.medusajs.com/api/admin#draft-orders). Draft orders provide similar features to an online checkout experience, including discounts, payment processing, and more.
|
||
|
||
Then, merchants can view all orders coming from different sales channels using the Medusa admin dashboard. This keeps logistics and order handling consistent and allows businesses to provide return and exchange features to online and in-store customers.
|
||
|
||
<DocCardList colSize={6} items={[
|
||
{
|
||
type: 'link',
|
||
href: '/modules/carts-and-checkout/backend/add-payment-provider',
|
||
label: 'Create a Payment Processor',
|
||
customProps: {
|
||
icon: Icons['academic-cap-solid'],
|
||
description: 'Learn how to create a payment processor.',
|
||
}
|
||
},
|
||
{
|
||
type: 'link',
|
||
href: '/modules/orders/draft-orders',
|
||
label: 'Draft Orders',
|
||
customProps: {
|
||
icon: Icons['academic-cap-solid'],
|
||
description: 'Learn about the Draft Order architecture and features.',
|
||
}
|
||
},
|
||
{
|
||
type: 'link',
|
||
href: '/modules/orders/returns',
|
||
label: 'Order Returns',
|
||
customProps: {
|
||
icon: Icons['academic-cap-solid'],
|
||
description: 'Learn about the Order Return architecture and features.',
|
||
}
|
||
},
|
||
{
|
||
type: 'link',
|
||
href: '/modules/orders/swaps',
|
||
label: 'Order Swaps',
|
||
customProps: {
|
||
icon: Icons['academic-cap-solid'],
|
||
description: 'Learn about the Order Swap architecture and features.',
|
||
}
|
||
},
|
||
]} />
|
||
|
||
---
|
||
|
||
## Additional Development
|
||
|
||
You can find other resources for your POS development in the [Medusa Development section](../development/overview.mdx) of this documentation.
|