B2B Edition

Following these steps will help you integrate Catalyst with B2B Edition's Open Source Buyer Portal, which is a traditional client-side rendered React application. The steps below also document the process for running the B2B Buyer Portal React application locally, so that you can customize the experience inside of the Buyer Portal if required.

This implementation primarily handles authentication with the B2B Storefront API and triggering the render of the Buyer Portal on top of Catalyst. It is similar to the experience currently available for BigCommerce's Stencil storefront framework.

If you are looking to integrate directly into Catalyst's routes and components, this can be done by integrating B2B Edition's APIs (opens in a new tab). We've seen this happen organically and are working on streamlining this path as well.

Prerequisites

• You should have B2B Edition activated on your BigCommerce Store, with at least one B2B Edition Company and Customer added to that Company.
• The integration code used in this guide requires B2B GraphQL Proxy CAT support; if you are not sure if your BigCommerce store has this feature enabled, please reach out to BigCommerce support (opens in a new tab).

Getting Started

1. Carefully follow https://www.catalyst.dev/docs/installation (opens in a new tab). Ensure you have met the prerequisites linked at the top of that page. Replace the Catalyst CLI command with: pnpm create @bigcommerce/catalyst@latest --gh-ref integrations/b2b-buyer-portal
2. Open the B2B Edition dashboard in your store’s Control Panel (opens in a new tab), then navigate to Settings > API Accounts > Create API Account. Copy the value and add it in your .env.local as B2B_API_TOKEN
3. While still in the B2B Edition dashboard, navigate to Storefronts and click the ellipsis (...) next to your Catalyst Headless Storefront Channel. Click “Enable B2B” and ensure the channel updates to “B2B Enabled”
4. Run pnpm dev from your local Catalyst repository
5. Attempt to login and see you are redirected to the Buyer Portal

Running the B2B Buyer Portal React application locally

1. Clone and run the B2B Buyer Portal React application locally: B2B Buyer Portal GitHub Repository (opens in a new tab)
2. Set the LOCAL_BUYER_PORTAL_HOST environment variable to the host of the B2B Buyer Portal React application. The default is http://localhost:3001.
3. Ensure you configure the Buyer Portal type in your control panel to Custom (step 5 in the B2B Buyer Portal Headless Guide (opens in a new tab))
4. Run pnpm dev from your local Catalyst repository
5. Attempt to login and see you are redirected to the Buyer Portal