# commercetools commerce APIs extension

commercetools Frontend comes with out-of-the-box extensions for commercetools commerce APIs for B2C and B2B. With the extensions, you can fetch data from commercetools commerce APIs and display it in your [Frontend components](/frontend-development/frontend-components.md).

**Prerequisites**

- Access to your commercetools Frontend GitHub customer repository
- Access to your commercetools Frontend Project from the [Studio](/frontend-studio)
- Access to your commerce [Project](/api/getting-started/initial-setup.md)

## Use the extension

You can find the extension in your commercetools Frontend project at this path `packages/PROJECT_NAME/backend/commerce-commercetools`.

If the `commerce-commercetools` extension is not available in your commercetools Frontend project, before proceeding with the following configuration, you must:

1. Copy the `commerce-commercetools` code from the following repositories to your project:

   - [B2C extension](https://github.com/FrontasticGmbH/scaffold-b2c/tree/main/backend/commerce-commercetools)
   - [B2B extension](https://github.com/FrontasticGmbH/scaffold-b2b/tree/main/backend/commerce-commercetools)

2. [Register the extension in your project](/frontend-development/extensions.md#define-extensions).

To use the extension you must:

1. [Create an API client](/frontend-development/using-the-commercetools-extension.md#create-an-api-client).
2. [Configure your extension](/frontend-development/using-the-commercetools-extension.md#configure-the-extension).
3. [Add data source schemas to the Studio](/frontend-development/using-the-commercetools-extension.md#add-data-source-schemas-to-the-studio).

### Create an API client

When [creating an API client](/merchant-center/developer-settings.md#create-an-api-client), do the following:

- If you are using the B2C extension, select **Frontend B2C** from the template drop-down list.
- If you are using the B2B extension, select **Frontend B2B** from the template drop-down list.

For more information about API Clients, see [Authorization](/api/authorization.md) and [Scopes](/api/scopes.md).

### Configure the extension

To configure your extension, follow these steps:

1. [Add the following project configuration fields to the project schema](/frontend-development/api-hub-configuration.md#add-project-configuration-fields-to-the-project-schema) from the Studio.

   ```json title="Add commerce Project configuration fields"
   {
     "name": "commercetools commerce extension",
     "fields": [
       {
         "label": "Project Key",
         "field": "EXTENSION_COMMERCETOOLS_PROJECT_KEY",
         "type": "string",
         "translatable": false,
         "required": true
       },
       {
         "label": "Client ID",
         "field": "EXTENSION_COMMERCETOOLS_CLIENT_ID",
         "type": "encrypted",
         "translatable": false,
         "required": true
       },
       {
         "label": "Client Secret",
         "field": "EXTENSION_COMMERCETOOLS_CLIENT_SECRET",
         "type": "encrypted",
         "translatable": false,
         "required": true
       },
       {
         "label": "Locale overwrite",
         "field": "EXTENSION_COMMERCETOOLS_LOCALE_OVERWRITE",
         "type": "string",
         "translatable": false,
         "required": false
       },
       {
         "label": "Authentication URL",
         "field": "EXTENSION_COMMERCETOOLS_AUTH_URL",
         "type": "string",
         "translatable": false,
         "required": false,
         "default": "https://auth.sphere.io"
       },
       {
         "label": "API URL",
         "field": "EXTENSION_COMMERCETOOLS_HOST_URL",
         "type": "string",
         "translatable": false,
         "required": false,
         "default": "https://api.sphere.io"
       },
       {
         "label": "Product ID field",
         "field": "EXTENSION_COMMERCETOOLS_PRODUCT_ID_FIELD",
         "type": "string",
         "translatable": false,
         "required": false,
         "default": "id"
       },
       {
         "label": "Category ID field",
         "field": "EXTENSION_COMMERCETOOLS_CATEGORY_ID_FIELD",
         "type": "string",
         "translatable": false,
         "required": false,
         "default": "id"
       }
     ]
   }
   ```

2. [Set the commerce Project configuration values](/frontend-development/api-hub-configuration.md#enter-project-configuration-values-in-project-settings) from the Studio.

   You can set different values for each [environment](/frontend-studio/using-environments-in-the-studio.md).

### Add data source schemas to the Studio

In your commercetools Frontend project, at the `/packages/<project>/backend/schemas/dataSource` path, you can find the following data source schemas:

- The `frontastic-product-list.json` product list schema
- The `frontastic-product.json` single product schema

To add the data source schemas to the Studio, follow these steps:

1. From the Studio home page or from the left navigation menu, go to **Developer > Data sources**.

2. Click **Upload schema**.

3. Search and select the JSON file to upload: the schema editor opens.

4. Click **Publish** to add the schema.

You can now use the extension to [fetch data to be displayed in the Frontend components](/frontend-development/creating-frontend-component-with-a-data-source.md).

## Edit the extension

You can edit the extension to adapt it to your needs.

We recommend adding code to extend the extension's functionality rather than deleting or replacing anything. This way, when extension updates are released, they will be easier to apply.

To update your code, clone the extension [GitHub repository](https://github.com/FrontasticGmbH/scaffold-b2c/tree/main/backend/commerce-commercetools).

## Related pages

- [Area overview page with navigation](/frontend-development.md)
- [Previous page: Using a session](/frontend-development/using-a-session.md)
- [Next page: Internationalization](/frontend-development/internationalization.md)
- [Search documentation and API specs](/search.md)