> This page is for Developer.

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.bigcommerce.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.bigcommerce.com/_mcp/server.

# The JavaScript API

Plan: B2B Developer

Lesson 7 of 25 · 15 min

## Introduction

As previously discussed, the Buyer Portal's JavaScript API is available as the `window.b2b.utils` object. Let's explore a few more of the utilities available.

## User Profile and Token

The `user.profile` function will return information about the currently logged-in user.

**Example Code:**

```js showLineNumbers={false}
console.log(window.b2b.utils.user.getProfile());
```

**Example Result:**

```js showLineNumbers={false}
{
  b2bId: 123456,
  companyRoleName: "Admin",
  customerGroupId: 2,
  emailAddress: "johndoe@example.com",
  firstName: "John",
  id: 20,
  lastName: "Doe"
  phoneNumber: "111-222-3333",
  role: 0
}
```

The `user.getB2BToken` is an essential function that fetches the currently logged-in user's B2B GraphQL authentication token.

**Example Code:**

```js showLineNumbers={false}
const token = window.b2b.utils.user.getB2BToken();
```

This token can be used to make custom B2B GraphQL API requests from your own code.

## Working with Quotes

A set of methods available from `window.b2b.utils.quote` allows you to manage the current "draft" quote belonging to the logged-in user.

### Adding Products to the Quote

The `addProducts` function will add products to the current draft quote:

```js showLineNumbers={false}
window.b2b.utils.quote.addProducts([
    {
        quantity: 10,
        productEntityId: 1,
        sku: 'PRODUCT1',
    },
    {
        quantity: 10,
        productEntityId: 2,
        sku: 'PRODUCT2',
    }
]).then(
    () => {
        // Success
    },
    () => {
        // Failure
    }
);
```

Each item must contain a `productEntityId` and either a specific `sku` (as seen above) or a `variantEntityId`.

```js showLineNumbers={false}
window.b2b.utils.quote.addProducts([
    {
        quantity: 10,
        productEntityId: 1,
        variantEntityId: 10,
    },
    {
        quantity: 10,
        productEntityId: 2,
        variantEntityId: 20,
    }
]).then(
    // ...
);
```

The `addProductFromPage` function is also available for the same purpose, accepting only a single product:

```js showLineNumbers={false}
window.b2b.utils.quote.addProductFromPage(
    {
        quantity: 10,
        productEntityId: 1,
        sku: 'PRODUCT1',
    }
).then(
    // ...
);
```

### Adding from the Cart

You can also use the `addProductsFromCart` function to add the current contents of the user's cart to the draft quote:

```js showLineNumbers={false}
window.b2b.utils.quote.addProductsFromCart()
    .then(
        () => {
            // Success
        },
        () => {
            // Failure
        }
    );
```

### Getting Quote Details

The `getCurrent` function is available to retrieve details of the logged-in user's current draft quote.

**Example Code:**

```js showLineNumbers={false}
console.log(window.b2b.utils.quote.getCurrent());
```

**Example Result:**

```js showLineNumbers={false}
{
  productList: [
    {
      basePrice: 50,
      id: "abc123...",
      optionSelections: [
        {
          optionId: 100,
          optionValue: 4,
        }
      ],
      primaryImage: "https://cdn11.bigcomerce.com/...",
      productId: 2,
      productName: "Example Product",
      quantity: 10,
      taxPrice: 3.24,
      variantId: 13,
      variantSku: "PRODUCT1-LG"
    }
  ]
}
```

## Working with Shopping Lists

The `window.b2b.utils.shoppingList` object is also available for working with shopping lists.

### Create a Shopping List

A new shopping list can be created with `createNewShoppingList`, which returns the details of the new list.

**Example Code:**

```js showLineNumbers={false}
window.b2b.utils.shoppingList.createNewShoppingList(
    'Quarterly Re-stock',
    'Standard re-stock list for per-quarter order'
).then(
    (list) => {
        console.log(list);
    },
    () => {
        // Failure
    }
);
```

**Example Result:**

```js showLineNumbers={false}
{
  id: '67890',
  name: "Quarterly Re-stock",
  description: "Standard re-stock list for per-quarter order",
  customerInfo: {
    firstName: "John",
    lastName: "Doe",
    userId: 123456,
    email: "johndoe@example.com",
  },
  grandTotal: "0",
  totalDiscount: "0",
  totalTax: "0",
}
```

### Adding Products

Using the `addProductFromPage` function will initiate the typical Buyer Portal modal allowing the user to choose a shopping list, then add the specified product details.

**Example Code:**

```js showLineNumbers={false}
window.b2b.utils.shoppingList.addProductFromPage(
    {
        quantity: 10,
        productEntityId: 1,
        sku: 'PRODUCT1'
    }
).then(
    () => {
        // Success
    },
    () => {
        // Failure
    }
);
```

![Shopping list selection modal](/_fern-files/bigcommerce.docs.buildwithfern.com/fda3754514dee626eb5d8904860318cbd6e52aeae656c4a09e31260f4e9b38f1/assets/learn/b2b-buyer-portal/shopping-list-modal.png)

Like the `quote` functions, the items accepted by `addProductFromPage` can contain a `variantEntityId` instead of a `sku`.

## Super Admins and Masquerade

The `window.b2b.utils.user` object also exposes a couple of functions that are useful when the logged-in user is a Super Admin with privileges to "masquerade" under different companies.

You can initiate a masquerade if you know the ID of a company the logged-in user has permissions for. (This list can be obtained with the `superAdminCompanies` GraphQL query, using the token obtained from `user.getB2BToken`.) Use `setMasqueradeCompany` to start the masquerade:

```js showLineNumbers={false}
window.b2b.utils.user.setMasqueradeCompany(123456);
```

The Super Admin's current masquerade session can be ended with `endMasquerade`:

```js showLineNumbers={false}
window.b2b.utils.user.endMasquerade();
```

You can review all available objects and methods in the `window.b2b.utils` namespace in the Buyer Portal source code, linked below.

## Resources

* [window.b2b.utils Reference](https://github.com/bigcommerce/b2b-buyer-portal/blob/main/apps/storefront/src/HeadlessController/index.tsx#L142)