Skip to content

DEVDOCS-6277 - update content for new dev portal #915

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 11 commits into
base: main
Choose a base branch
from
Open

DEVDOCS-6277 - update content for new dev portal #915

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
38adf54
DEVDOCS-6277 - update content for new dev portal
bc-terra Apr 21, 2025
b823730
Update publishing.mdx
bc-terra Apr 21, 2025
409e64e
Update guide.mdx
bc-terra Apr 21, 2025
dc1dd19
Update glossary.mdx
bc-terra Apr 21, 2025
556d311
Update nextjs-quick-start.mdx
bc-terra Apr 21, 2025
439b661
Update nextjs-connect.mdx
bc-terra Apr 21, 2025
b989a48
Update docs/integrations/apps/guide/publishing.mdx
bc-terra Apr 30, 2025
27148d7
Update docs/integrations/apps/guide/publishing.mdx
bc-terra Apr 30, 2025
813b08b
Update docs/integrations/apps/guide/publishing.mdx
bc-terra Apr 30, 2025
352c849
Update docs/integrations/apps/guide/publishing.mdx
bc-terra Apr 30, 2025
52a3f59
Merge branch 'main' into DEVDOCS-6277
bc-terra May 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions docs/integrations/apps/app-extensions/glossary.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@

# Glossary

The following glossary describes key App Extensions features.
Expand Down Expand Up @@ -91,7 +90,7 @@ When the user clicks the App Extension's [label](#label), BigCommerce sends your
}
```

![App Extension URL diagram](https://storage.googleapis.com/bigcommerce-production-dev-center/images/app-extensions/app-extensions-scope.png "App Extension URL diagram")
![App Extension URL diagram](https://storage.googleapis.com/bigcommerce-production-dev-center/images/app-extensions/app-extension-url-diagram.png "App Extension URL diagram")


## signed_payload_jwt
Expand Down
8 changes: 4 additions & 4 deletions docs/integrations/apps/app-extensions/guide.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,13 +45,13 @@ The following section describes the process for creating an app profile and app-

Generate an [app-level API account](/docs/start/authentication/api-accounts#app-level-api-accounts) by [creating an app profile](/docs/integrations/apps/guide/developer-portal#create-an-app-profile) in a [Developer Portal account](https://devtools.bigcommerce.com/my/apps) registered to the same email account that owns the development store.

Add the [required OAuth scopes](#oauth-scopes) from the preceding section on the **Technical** tab of the app profile dialog, then click **Update & Close**.
Add the [required OAuth scopes](#oauth-scopes) from the preceding section on the **Scopes** tab of the app editor, then click **Update & Close**.

For more information on creating app profiles, see [Managing Apps in the Developer Portal](/docs/integrations/apps/guide/developer-portal).

The following image shows the `App Extensions : manage` scope on the **Technical** tab of the Developer Portal's app profile dialog:
The following image shows the `App Extensions : manage` scope on the **Scopes** tab of the Developer Portal's app editor:

![App Extensions scope](https://storage.googleapis.com/bigcommerce-production-dev-center/images/app-extensions/app-extensions-scope.png "App Extensions scope")
![App Extensions scope](https://storage.googleapis.com/bigcommerce-production-dev-center/images/app-extensions/next-app-extensions-scope-manage.png "App Extensions scope")

### Create a draft app

Expand Down Expand Up @@ -131,7 +131,7 @@ The following section describes the process for creating an app profile and app-

Copy the ngrok domain name from the `.env` file to the matching inputs on the **Technical** tab of the **app profile**.

![Callback URLs](https://storage.googleapis.com/bigcommerce-production-dev-center/images/app-extensions/callback-urls.png "Callback URLs")
![Callback URLs](https://storage.googleapis.com/bigcommerce-production-dev-center/images/app-extensions/next-nextjs-ngrok-callbacks.png "Callback URLs")

### Install the draft app on your store

Expand Down
74 changes: 41 additions & 33 deletions docs/integrations/apps/guide/developer-portal.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,49 +18,53 @@ Creating an app also creates an app API account. To learn more about app API acc

1. Sign in or create an account with the [Developer Portal](https://devtools.bigcommerce.com).

2. Click the **Create an app** button on the right side of the landing page.
2. Click the **Create app** button on the right side of the landing page.

![Create an App](https://storage.googleapis.com/bigcommerce-production-dev-center/images/app-api-account/devtool-create-app.png "Create an App")
![Create an App](https://storage.googleapis.com/bigcommerce-production-dev-center/images/app-api-account/next-devtools-create-app.png "Create an App")

3. Give your app a name in the **What would you like to call your app?** dialog. This name is only visible to you. Once complete, click the **Create** button.
3. Give your app a name in the **Set up your app** dialog. This name is only visible to you. Once complete, click the **Generate Credentials** button.

![Name the app](https://storage.googleapis.com/bigcommerce-production-dev-center/images/app-api-account/devtool-name-app-dialog.png "Name the App")
![Name the app](https://storage.googleapis.com/bigcommerce-production-dev-center/images/app-api-account/next-devtools-name-app-dialog.png "Name the App")

4. The **app registration dialog** appears; click the **Technical** tab at the top.
4. The **app created** dialog appears, displaying your app’s Client ID and Client Secret. Click the **Finish** button to redirect the page to the app editor.

![Technical](https://storage.googleapis.com/bigcommerce-production-dev-center/images/app-api-account/devtools-technical.png "Technical")
![App Editor](https://storage.googleapis.com/bigcommerce-production-dev-center/images/app-api-account/next-devtools-edit-app.png "App Editor")

5. Scroll down to the **OAuth scopes** section and toggle the necessary OAuth scopes for your app.
5. Click the **Scopes** tab at the top.

![Assign OAuth scopes](https://storage.googleapis.com/bigcommerce-production-dev-center/images/app-api-account/devtool-oauth-scopes-tight.png "Assign OAuth scopes")
![Scopes](https://storage.googleapis.com/bigcommerce-production-dev-center/images/app-api-account/next-devtools-scopes.png "Scopes")

6. Click the **Update & Close** button on the registration dialog's lower right corner.
6. Toggle the necessary OAuth scopes for your app.

7. A new dialog opens, asking if you want to add new OAuth scopes. Click **Confirm Update**.
![Assign OAuth scopes](https://storage.googleapis.com/bigcommerce-production-dev-center/images/app-api-account/next-devtools-scopes-tight.png "Assign OAuth scopes")

![Confirm OAuth changes](https://storage.googleapis.com/bigcommerce-production-dev-center/images/app-api-account/devtool-oauth-scopes-confirm.png "Confirm OAuth changes")
7. Click the **Save changes** button on the registration dialog's lower right corner.

8. A new dialog opens, asking if you want to add new OAuth scopes. Click **Confirm new scopes**.

![Confirm OAuth changes](https://storage.googleapis.com/bigcommerce-production-dev-center/images/app-api-account/next-devtools-scopes-confirm.png "Confirm OAuth changes")

You can view the client ID and client secret any time; see the following section on [viewing credentials](#view-credentials).

## View credentials

1. To view an app API account's credentials, navigate to the Dev Portal's [My Apps dashboard](https://devtools.bigcommerce.com/my/apps) and click the **View Client ID** padlock icon to the right of the relevant app's listing.
1. To view an app API account's credentials, navigate to the Dev Portal's [Apps overview](https://devtools.bigcommerce.com/my/apps) and click the **View credentials** icon to the right of the relevant app's listing.

![Menu - view client ID](https://storage.googleapis.com/bigcommerce-production-dev-center/images/app-api-account/devtool-app-menu-client-id.png "View Client ID")
![Menu - view credentials](https://storage.googleapis.com/bigcommerce-production-dev-center/images/app-api-account/next-devtools-app-menu-credentials.png "View credentials")

2. A dialog box opens to reveal your API account credentials.

To learn more about using an app API account to generate store-specific access tokens, see [Implementing the OAuth Flow](/docs/integrations/apps/guide/auth).

## Edit an app profile

1. To edit an app, navigate to the Dev Portal's [My Apps dashboard](https://devtools.bigcommerce.com/my/apps) and click the **Edit App** pencil icon to the right of the app you want to edit.
1. To edit an app, navigate to the Dev Portal's [Apps overview](https://devtools.bigcommerce.com/my/apps) and click the name of the app you want to edit.

![Menu - edit app](https://storage.googleapis.com/bigcommerce-production-dev-center/images/app-api-account/devtool-app-menu-edit-app.png "Edit an App")
![Menu - edit app](https://storage.googleapis.com/bigcommerce-production-dev-center/images/app-api-account/next-devtools-app-menu-edit.png "Edit an App")

2. The **edit app dialog** opens. It is identical to the app registration dialog.
2. The app editor opens.

![Edit app dialog](https://storage.googleapis.com/bigcommerce-production-dev-center/images/app-api-account/devtool-edit-dialog-landing.png "Edit App / App Registration Dialog Landing View")
![App Editor](https://storage.googleapis.com/bigcommerce-production-dev-center/images/app-api-account/next-devtools-edit-app.png "App Editor")


<Callout type="info">
Expand All @@ -70,41 +74,45 @@ To learn more about using an app API account to generate store-specific access t

### Edit technical details

1. Once you [enter the app dialog](#edit-an-app-profile), click the **Technical** tab at the top to edit enabled features, callback URLs, and OAuth scopes.
1. Once you [enter the app editor](#edit-an-app-profile), click the **App information** tab at the top to edit enabled features and callback URLs.

![Technical Details](https://storage.googleapis.com/bigcommerce-production-dev-center/images/app-api-account/devtools-technical.png "Technical Details")
![Technical Details](https://storage.googleapis.com/bigcommerce-production-dev-center/images/app-api-account/next-devtools-technical-info.png "Technical Details")

![Assign OAuth scopes](https://storage.googleapis.com/bigcommerce-production-dev-center/images/app-api-account/devtool-oauth-scopes-tight.png "Assign OAuth scopes")
2. To edit OAuth scopes, click the **Scopes** tab at the top.

![Assign OAuth scopes](https://storage.googleapis.com/bigcommerce-production-dev-center/images/app-api-account/next-devtools-scopes-tight.png "Assign OAuth scopes")

2. To save your change, click the **Update & Close** button on the edit dialog's lower right corner.
3. To save your change, click the **Save changes** button on the editor's lower right corner.

3. A new dialog opens, asking if you want to add new OAuth scopes. Click **Confirm Update**.
4. A new dialog opens, asking if you want to add new OAuth scopes. Click **Confirm new Scopes**.

![Confirm OAuth changes](https://storage.googleapis.com/bigcommerce-production-dev-center/images/app-api-account/devtool-oauth-scopes-confirm.png "Confirm OAuth changes")
![Confirm OAuth changes](https://storage.googleapis.com/bigcommerce-production-dev-center/images/app-api-account/next-devtools-scopes-confirm.png "Confirm OAuth changes")

4. After saving, edits are effective immediately for all app users.
5. After saving, edits are effective immediately for all app users.

### Indicate multi-storefront support

If your app supports stores that sell through multiple storefronts or sales channels, add that information to the app's profile.

1. Once you [enter the edit app dialog](#edit-an-app-profile), click the **App Supported Features** tab at the top.
1. Once you [enter the app editor](#edit-an-app-profile), click the **Listing information** tab at the top.

![MSF Toggle](https://storage.googleapis.com/bigcommerce-production-dev-center/images/app-api-account/devtools-msf.png "Toggle MSF on the App Supported Features tab")
![Listing information](https://storage.googleapis.com/bigcommerce-production-dev-center/images/app-api-account/next-devtools-listing-info.png "Listing information tab")

2. Select either **Single Storefront** or **Multi Storefront**. This doesn't grant or deny your app access to any APIs; it helps us test and label your app appropriately.

3. To save your change, click the **Update & Close** button on the edit dialog's lower right corner.
![MSF Toggle](https://storage.googleapis.com/bigcommerce-production-dev-center/images/app-api-account/next-devtools-msf-enable.png "Toggle MSF on the Listing information tab")

3. To save your change, click the **Save changes** button on the edit dialog's lower right corner.

To read about designing or modifying your app to support multi-storefront, see [Multi-Storefront App Compatibility and Optimization](/docs/integrations/apps/multi-storefront)

## Submit an app for approval

1. Submit apps for [App Marketplace](https://www.bigcommerce.com/apps) approval by navigating to the Dev Portal's [My Apps dashboard](https://devtools.bigcommerce.com/my/apps), then finding the app you want approved and clicking the **Submit** checkmark icon to the right of its listing.
1. Submit apps for [App Marketplace](https://www.bigcommerce.com/apps) approval by navigating to the Dev Portal's [Apps overview](https://devtools.bigcommerce.com/my/apps), then finding the app you want approved and clicking the **Publish app…** option from the action menu to the right of its listing.

![Menu - submit](https://storage.googleapis.com/bigcommerce-production-dev-center/images/app-api-account/devtool-app-menu-submit.png "Submit an App")
![Menu - publish](https://storage.googleapis.com/bigcommerce-production-dev-center/images/app-api-account/next-devtools-publish.png "Publish an App")

2. The registration dialog opens; complete the app's profile.
2. The **Confirm listing information** page opens; verify the information provided, and click the **Submit app for review** button in the bottom right corner.

To learn more about completing app registration fields and submitting apps for approval, consult our [App Publishing Guide](/docs/integrations/apps/guide/publishing).

Expand All @@ -114,13 +122,13 @@ Deleting an app also deletes its API account. This is a destructive action; you

To learn about mitigating the risks of deleting an app and its API account, see the [Guide to API Accounts](/docs/start/authentication/api-accounts#delete-apps-carefully).

1. To delete an app, navigate to the Dev Portal's [My Apps dashboard](https://devtools.bigcommerce.com/my/apps) and click the **Delete App** trash can icon to the right of the app you want to edit.
1. To delete an app, navigate to the Dev Portal's [Apps overview](https://devtools.bigcommerce.com/my/apps) and click the **Delete app** option from the action menu to the right of its listing.

![Menu - delete app](https://storage.googleapis.com/bigcommerce-production-dev-center/images/app-api-account/devtool-app-menu-delete.png "Delete an App")
![Menu - delete app](https://storage.googleapis.com/bigcommerce-production-dev-center/images/app-api-account/next-devtools-app-delete.png "Delete an App")

2. The **delete app dialog** opens to verify whether you truly want to delete the app. Click **Delete**.

![Delete App Dialog](https://storage.googleapis.com/bigcommerce-production-dev-center/images/app-api-account/devtool-delete-app-confirm.png "Delete App Dialog")
![Delete App Dialog](https://storage.googleapis.com/bigcommerce-production-dev-center/images/app-api-account/next-devtools-delete-confirm.png "Delete App Dialog")

## Next steps
* [Implement the OAuth flow](/docs/integrations/apps/guide/auth)
Expand Down
Loading