458 lines
14 KiB
Plaintext
458 lines
14 KiB
Plaintext
---
|
||
addHowToData: true
|
||
---
|
||
|
||
import DocCardList from '@theme/DocCardList';
|
||
import DocCard from '@theme/DocCard';
|
||
import Icons from '@theme/Icon';
|
||
import LearningPath from '@site/src/components/LearningPath';
|
||
|
||
# B2B Recipe
|
||
|
||
This document guides you through the different documentation resources that will help you build a B2B store with Medusa.
|
||
|
||
## Overview
|
||
|
||
In a B2B store, the seller provides other businesses with wholesale products and prices. Medusa allows you to build a B2B store in different ways:
|
||
|
||
1. **Fully B2B:** You can use Medusa as-is and cater to businesses only. You can also specify different pricing for different businesses using [Customer Groups](../user-guide/customers/groups.mdx) and [Price Lists](../user-guide/price-lists/index.md).
|
||
2. **B2B and B2C:** You can serve both businesses and customers within the same store, supplying different products or prices for each.
|
||
|
||
This recipe covers the high-level steps to implement the second case, a B2B and B2C store.
|
||
|
||
<LearningPath pathName="b2b" />
|
||
|
||
---
|
||
|
||
## Create B2B Sales Channel
|
||
|
||
In Medusa, a sales channel allows you to set product availability per channel. In this case, you can create a B2B sales channel that will include only your wholesale products.
|
||
|
||
You can create a sales channel either through the Medusa admin or through the Admin REST APIs.
|
||
|
||
<DocCardList colSize={6} items={[
|
||
{
|
||
type: 'link',
|
||
href: '/user-guide/sales-channels/manage',
|
||
label: 'Option 1: Use Medusa Admin',
|
||
customProps: {
|
||
icon: Icons['users-solid'],
|
||
description: 'Create the sales channel using the Medusa admin.',
|
||
}
|
||
},
|
||
{
|
||
type: 'link',
|
||
href: '/modules/sales-channels/admin/manage',
|
||
label: 'Option 2: Using the REST APIs',
|
||
customProps: {
|
||
icon: Icons['academic-cap-solid'],
|
||
description: 'Create the sales channel using the REST APIs.',
|
||
}
|
||
},
|
||
]} />
|
||
|
||
---
|
||
|
||
## Create a Publishable API Key
|
||
|
||
Publishable API keys can be associated with one or more sales channels. Then, in a client such as a storefront, you can pass the publishable API key in the header of your requests to ensure all products retrieved belong to the associated sales channel(s).
|
||
|
||
You can create a publishable API key either through the Medusa admin or through the Admin REST APIs.
|
||
|
||
<DocCardList colSize={6} items={[
|
||
{
|
||
type: 'link',
|
||
href: '/user-guide/settings/publishable-api-keys',
|
||
label: 'Option 1: Use Medusa Admin',
|
||
customProps: {
|
||
icon: Icons['users-solid'],
|
||
description: 'Create the publishable API key using the Medusa admin.',
|
||
}
|
||
},
|
||
{
|
||
type: 'link',
|
||
href: '/development/publishable-api-keys/admin/manage-publishable-api-keys',
|
||
label: 'Option 2: Using the REST APIs',
|
||
customProps: {
|
||
icon: Icons['academic-cap-solid'],
|
||
description: 'Create the publishable API key using the REST APIs.',
|
||
}
|
||
},
|
||
]} />
|
||
|
||
---
|
||
|
||
## Add Wholesale Products
|
||
|
||
Using the Medusa admin or the Admin REST APIs, you can add your wholesale products to your store. You can also use the Product Import feature to import your products from an existing CSV file.
|
||
|
||
After or while you add your products, make sure to set the products’ availability to the B2B sales channel you’ve created.
|
||
|
||
<DocCardList colSize={6} items={[
|
||
{
|
||
type: 'link',
|
||
href: '/user-guide/products/manage',
|
||
label: 'Add Products Using Medusa Admin',
|
||
customProps: {
|
||
icon: Icons['users-solid'],
|
||
description: 'Create the product using the Medusa admin.',
|
||
}
|
||
},
|
||
{
|
||
type: 'link',
|
||
href: '/modules/products/admin/manage-products',
|
||
label: 'Add Products Using REST APIs',
|
||
customProps: {
|
||
icon: Icons['academic-cap-solid'],
|
||
description: 'Create the product using the REST APIs.',
|
||
}
|
||
},
|
||
{
|
||
type: 'link',
|
||
href: '/user-guide/products/import',
|
||
label: 'Import Products Using Medusa Admin',
|
||
customProps: {
|
||
icon: Icons['users-solid'],
|
||
description: 'Import the products using the Medusa admin.',
|
||
}
|
||
},
|
||
{
|
||
type: 'link',
|
||
href: '/modules/products/admin/import-products',
|
||
label: 'Import Products Using REST APIs',
|
||
customProps: {
|
||
icon: Icons['academic-cap-solid'],
|
||
description: 'Import the product using the REST APIs.',
|
||
}
|
||
},
|
||
]} />
|
||
|
||
---
|
||
|
||
## Create B2B Customer Groups
|
||
|
||
To apply different prices for your B2B customers, you need to create a customer group that indicates this customer is a B2B customer.
|
||
|
||
You can either create a single B2B customer group that all your B2B customers will fall into, or you can create different B2B customer groups for every B2B customer. The second approach is useful if you want to apply different prices for different businesses.
|
||
|
||
While you’re creating the customer groups, make sure to add the `metadata` of the customer group a key `is_b2b` that acts as a flag to indicate that this is a B2B customer group. This is useful for later steps.
|
||
|
||
Alternatively, you may choose to create custom entities or a different mechanism that indicates a customer is a B2B customer. This is covered in the [Create Custom Entities section](#create-custom-entities).
|
||
|
||
<DocCardList colSize={6} items={[
|
||
{
|
||
type: 'link',
|
||
href: '/user-guide/customers/groups',
|
||
label: 'Option 1: Use Medusa Admin',
|
||
customProps: {
|
||
icon: Icons['users-solid'],
|
||
description: 'Create the customer group using the Medusa admin.',
|
||
}
|
||
},
|
||
{
|
||
type: 'link',
|
||
href: '/modules/customers/admin/manage-customer-groups',
|
||
label: 'Option 2: Using the REST APIs',
|
||
customProps: {
|
||
icon: Icons['academic-cap-solid'],
|
||
description: 'Create the customer group using the REST APIs.',
|
||
}
|
||
},
|
||
]} />
|
||
|
||
---
|
||
|
||
## Add B2B Customers
|
||
|
||
After adding your B2B customer group, you can add B2B customers and assign them to the B2B customer group. Alternatively, if you want to allow B2B customers to register themselves, you can implement that logic within your storefront.
|
||
|
||
You can create a customer either through the Medusa admin or Admin REST APIs.
|
||
|
||
<DocCardList colSize={6} items={[
|
||
{
|
||
type: 'link',
|
||
href: '/user-guide/customers/manage',
|
||
label: 'Option 1: Use Medusa Admin',
|
||
customProps: {
|
||
icon: Icons['users-solid'],
|
||
description: 'Create the customers using the Medusa admin.',
|
||
}
|
||
},
|
||
{
|
||
type: 'link',
|
||
href: '/modules/customers/admin/manage-customers',
|
||
label: 'Option 2: Using the REST APIs',
|
||
customProps: {
|
||
icon: Icons['academic-cap-solid'],
|
||
description: 'Create the customers using the REST APIs.',
|
||
}
|
||
},
|
||
]} />
|
||
|
||
---
|
||
|
||
## Create B2B Price List
|
||
|
||
A price list allows you to set different prices on a set of products for different conditions. You can use this when building a B2B store to assign different prices for B2B customer groups.
|
||
|
||
You can use price lists to either set the same price for all B2B customers, or different prices for different B2B customers if you’ve created them in different customer groups.
|
||
|
||
You can create a price list either through the Medusa admin or Admin REST APIs. You can also import prices into your price list after creating it.
|
||
|
||
<DocCardList colSize={6} items={[
|
||
{
|
||
type: 'link',
|
||
href: '/user-guide/price-lists/manage',
|
||
label: 'Add Price List Using Medusa Admin',
|
||
customProps: {
|
||
icon: Icons['users-solid'],
|
||
description: 'Create the price list using the Medusa admin.',
|
||
}
|
||
},
|
||
{
|
||
type: 'link',
|
||
href: '/modules/price-lists/admin/manage-price-lists',
|
||
label: 'Add Price List Using REST APIs',
|
||
customProps: {
|
||
icon: Icons['academic-cap-solid'],
|
||
description: 'Create the price list using the REST APIs.',
|
||
}
|
||
},
|
||
{
|
||
type: 'link',
|
||
href: '/user-guide/price-lists/import',
|
||
label: 'Import Prices Using Medusa Admin',
|
||
customProps: {
|
||
icon: Icons['users-solid'],
|
||
description: 'Import the prices using the Medusa admin.',
|
||
}
|
||
},
|
||
{
|
||
type: 'link',
|
||
href: '/modules/price-lists/admin/import-prices',
|
||
label: 'Import Prices Using REST APIs',
|
||
customProps: {
|
||
icon: Icons['academic-cap-solid'],
|
||
description: 'Import the prices using the REST APIs.',
|
||
}
|
||
},
|
||
]} />
|
||
|
||
---
|
||
|
||
## Create Custom Entities
|
||
|
||
Your use case may be more elaborate than what is shown in this recipe. For example, you may need to have a Company entity that allows a business to register its employees as users with different privileges and configurations.
|
||
|
||
Medusa can be customized to add custom entities, endpoints, services, and more. If you require some additional entities or a different logic in how you choose to implement a B2B store, you can customize Medusa as you see fit.
|
||
|
||
<DocCardList colSize={6} items={[
|
||
{
|
||
type: 'link',
|
||
href: '/development/entities/create',
|
||
label: 'Create Entity',
|
||
customProps: {
|
||
icon: Icons['academic-cap-solid'],
|
||
description: 'Learn how to create a custom entity.',
|
||
}
|
||
},
|
||
{
|
||
type: 'link',
|
||
href: '/development/overview',
|
||
label: 'Medusa Development',
|
||
customProps: {
|
||
icon: Icons['academic-cap-solid'],
|
||
description: 'Find all the development resources to customize Medusa.',
|
||
}
|
||
},
|
||
]} />
|
||
|
||
---
|
||
|
||
## Create an Endpoint to Check Customers
|
||
|
||
On the clients communicating with your store, such as the storefront, you’ll need to check if the currently logged-in customer is a normal customer or a B2B customer.
|
||
|
||
The endpoint’s logic is different based on how you’ve implemented the B2B logic. For example, if you’ve used the `is_b2b` flag in the customer group, your endpoint can check whether that flag is enabled for the logged-in customer.
|
||
|
||
Medusa allows you to create custom endpoints exposed as REST APIs.
|
||
|
||
<DocCard item={{
|
||
type: 'link',
|
||
href: '/development/endpoints/create',
|
||
label: 'Create an Endpoint',
|
||
customProps: {
|
||
icon: Icons['academic-cap-solid'],
|
||
description: 'Learn how to create an endpoint in Medusa.',
|
||
}
|
||
}} />
|
||
|
||
<details>
|
||
<summary>
|
||
Example Implementation
|
||
</summary>
|
||
|
||
Here’s an example of an endpoint that allows you to check the customer’s group and whether it has the `is_b2b` flag enabled:
|
||
|
||
```ts title=src/api/index.ts
|
||
import { CustomerService } from "@medusajs/medusa"
|
||
import { Router } from "express"
|
||
import { requireCustomerAuthentication } from "@medusajs/medusa"
|
||
import cors from "cors"
|
||
import { ConfigModule } from "@medusajs/medusa"
|
||
import { getConfigFile } from "medusa-core-utils"
|
||
|
||
export default (rootDirectory) => {
|
||
const router = Router()
|
||
const { configModule } = getConfigFile<ConfigModule>(
|
||
rootDirectory,
|
||
"medusa-config"
|
||
)
|
||
|
||
const corsOptions = {
|
||
origin: configModule.projectConfig.store_cors.split(","),
|
||
credentials: true,
|
||
}
|
||
|
||
router.options("/store/customers/is-b2b", cors(corsOptions))
|
||
router.get(
|
||
"/store/customers/is-b2b",
|
||
cors(corsOptions),
|
||
requireCustomerAuthentication(),
|
||
async (req, res) => {
|
||
const customerService: CustomerService = req.scope.resolve(
|
||
"customerService"
|
||
)
|
||
|
||
const customer = await customerService
|
||
.retrieve(req.user.customer_id, {
|
||
relations: ["groups"],
|
||
})
|
||
|
||
const is_b2b = customer.groups.some(
|
||
(group) => group.metadata.is_b2b === "true"
|
||
)
|
||
|
||
return res.json({
|
||
is_b2b,
|
||
})
|
||
})
|
||
|
||
return router
|
||
}
|
||
```
|
||
|
||
</details>
|
||
|
||
---
|
||
|
||
## Customize Admin
|
||
|
||
Based on your use case, you may need to customize the Medusa admin to add new widgets or pages.
|
||
|
||
The Medusa admin plugin can be extended to add widgets, UI routes, and setting pages.
|
||
|
||
<DocCardList colSize={4} items={[
|
||
{
|
||
type: 'link',
|
||
href: '/admin/widgets',
|
||
label: 'Create Admin Widget',
|
||
customProps: {
|
||
icon: Icons['academic-cap-solid'],
|
||
description: 'Learn how to add widgets into existing admin pages.',
|
||
}
|
||
},
|
||
{
|
||
type: 'link',
|
||
href: '/admin/routes',
|
||
label: 'Create Admin UI Routes',
|
||
customProps: {
|
||
icon: Icons['academic-cap-solid'],
|
||
description: 'Learn how to add new pages to your Medusa admin.',
|
||
}
|
||
},
|
||
{
|
||
type: 'link',
|
||
href: '/admin/setting-pages',
|
||
label: 'Create Admin Setting Page',
|
||
customProps: {
|
||
icon: Icons['academic-cap-solid'],
|
||
description: 'Learn how to add new page to the Medusa admin settings.',
|
||
}
|
||
},
|
||
]} />
|
||
|
||
---
|
||
|
||
## Customize Storefront
|
||
|
||
On the storefront, you may want different login or registration interfaces for B2B and regular customers. You may also want to display products differently for each type of customer.
|
||
|
||
Medusa provides a Next.js starter that you can use and customize. You can also build your own storefront with any front-end technology. Medusa provides you with different client libraries and its REST APIs to use.
|
||
|
||
In the storefront, make sure to use the publishable API key you associated with your B2B sales channel to ensure only B2B products are retrieved.
|
||
|
||
<DocCardList colSize={6} items={[
|
||
{
|
||
type: 'link',
|
||
href: '/starters/nextjs-medusa-starter',
|
||
label: 'Option 1: Use Next.js Starter',
|
||
customProps: {
|
||
icon: Icons['academic-cap-solid'],
|
||
description: 'Learn how to install and use the Next.js starter template.',
|
||
}
|
||
},
|
||
{
|
||
type: 'link',
|
||
href: '/storefront/roadmap',
|
||
label: 'Options 2: Build Custom Storefront',
|
||
customProps: {
|
||
icon: Icons['academic-cap-solid'],
|
||
description: 'Learn how to build a custom storefront with your preferred technology.',
|
||
}
|
||
},
|
||
]} />
|
||
|
||
<DocCard item={{
|
||
type: 'link',
|
||
href: '/development/publishable-api-keys/storefront/use-in-requests',
|
||
label: 'Use Publishable API Keys',
|
||
customProps: {
|
||
icon: Icons['academic-cap-solid'],
|
||
description: 'Learn how to use the publishable API key in client requests.',
|
||
}
|
||
}} />
|
||
|
||
---
|
||
|
||
## Deploy B2B Store
|
||
|
||
Once you finish your development, you can deploy your B2B backend and storefront to your preferred hosting providers.
|
||
|
||
<DocCardList colSize={6} items={[
|
||
{
|
||
type: 'link',
|
||
href: '/deployments/server',
|
||
label: 'Deploy Medusa Backend',
|
||
customProps: {
|
||
icon: Icons['academic-cap-solid'],
|
||
description: 'Learn how to deploy your Medusa backend to your preferred hosting provider.',
|
||
}
|
||
},
|
||
{
|
||
type: 'link',
|
||
href: '/deployments/storefront',
|
||
label: 'Deploy Storefront',
|
||
customProps: {
|
||
icon: Icons['academic-cap-solid'],
|
||
description: 'Learn how to deploy your storefront to your preferred hosting provider.',
|
||
}
|
||
},
|
||
]} />
|
||
|
||
---
|
||
|
||
## Additional Development
|
||
|
||
You can find other resources for your B2B development in the [Medusa Development section](../development/overview.mdx) of this documentation.
|