B2BStorefrontHeadless

Channel Setup for Non-Catalyst Frameworks

B2B Edition’s Buyer Portal can be used with headless storefronts created using a third-party solution, such as WordPress or Next.js. This allows you to extend B2B Edition’s front-end buyer tools to multiple headless storefronts, while managing your back-end processes from the BigCommerce control panel.

Follow the instructions in this article to set up a headless storefront channel that uses the default, hosted version of the Buyer Portal. If you want to deploy a locally-developed custom Buyer Portal to your headless channel, see the Headless Guide in the b2b-buyer-portal repository.

These instructions are for enabling B2B Edition on non-Catalyst headless frameworks. See B2B Edition for Catalyst-specific considerations.

1

Prepare

You will need to create two API tokens for your BigCommerce store. They have different permissions required, so please pay attention to which one is used for the step you are working on. Refer to this support article for more information on how to create API Accounts.

  • Create a token (TOKEN_A) with modify permissions for the following resources:

    • Channel listings
    • Channel settings
    • Sites & routes

  • Create a token (TOKEN_B) with modify permissions for the following resources:

    • Carts
    • Storefront API tokens
    • Storefront API customer impersonation tokens

Tokens are created using the API path https://{storehash}.mybigcommerce.com/manage/settings/api-account.

Also check that you have multi-storefront feature enabled and available seats.

2

Create the channel

Send a request to the Create a channel endpoint using TOKEN_A to create a channel for your headless platform. Note the channel ID returned in the response; you’ll use it in successive steps.

Example request: Create channel
POST https://api.bigcommerce.com/stores/{store_hash}/v3/channels
Accept: application/json
Content-Type: application/json
X-Auth-Token: {{TOKEN_A}}
{
    "name": "<the name you want for your channel>",
    "platform": "<desired platform>",
    "type": "storefront",
    "status": "active",
    "is_listable_from_ui": true,
    "is_visible": true
}
3

Generate an impersonation token

Generate an impersonation token by using the next cURL as base and using TOKEN_B.

Example request: Create an impersonation token
POST https://api.bigcommerce.com/stores/{store_hash}/v3/storefront/api-token-customer-impersonation
Accept: application/json
Content-Type: application/json
X-Auth-Token: {{TOKEN_B}}
{
  "channel_id": <channel returned on the first request>,
  "expires_at": <Unix timestamp (UTC time) defining when the token should expire. Supports seconds, but does not support milliseconds, microseconds, or nanoseconds.>
}
4

Create a site for the channel

Create the site for the channel, using TOKEN_A.

Example request: Create an impersonation token
POST https://api.bigcommerce.com/stores/{store_hash}/v3/sites
Accept: application/json
Content-Type: application/json
X-Auth-Token: {{TOKEN_A}}
{
    "url": <url you want to point>,
    "channel_id": <the channel id returned on step 1>
}
5

Update script tag information

Add the following script tag on your application.

<script>
  type="module"
  data-storehash="{STORE_HASH}"
  data-channelid="{CHANNEL_ID}"
  src="https://cdn.bundleb2b.net/b2b/production/storefront/headless.js">
</script>
6

Enable headless channel on the B2B dashboard

In the B2B Edition control panel, go to Storefronts > Headless Storefronts and select Activate B2B for the storefront channel.

Activating B2B on a headless storefront

7

Make products available on your new channel

In the control panel, go to Products > View and select all the products you want to make available on the new channel. Then click Bulk Actions > Add to channels. Next, select the desired channels and click Add.