diff --git a/docs/integrations/apps/app-extensions/glossary.mdx b/docs/integrations/apps/app-extensions/glossary.mdx index d32a6670e..1b2271075 100644 --- a/docs/integrations/apps/app-extensions/glossary.mdx +++ b/docs/integrations/apps/app-extensions/glossary.mdx @@ -1,4 +1,3 @@ - # Glossary The following glossary describes key App Extensions features. @@ -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 diff --git a/docs/integrations/apps/app-extensions/guide.mdx b/docs/integrations/apps/app-extensions/guide.mdx index f23d8f899..f1c8cd19f 100644 --- a/docs/integrations/apps/app-extensions/guide.mdx +++ b/docs/integrations/apps/app-extensions/guide.mdx @@ -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 @@ -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 diff --git a/docs/integrations/apps/guide/developer-portal.mdx b/docs/integrations/apps/guide/developer-portal.mdx index 7813a347b..d0c54be21 100644 --- a/docs/integrations/apps/guide/developer-portal.mdx +++ b/docs/integrations/apps/guide/developer-portal.mdx @@ -18,35 +18,39 @@ 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. @@ -54,13 +58,13 @@ To learn more about using an app API account to generate store-specific access t ## 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") @@ -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). @@ -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) diff --git a/docs/integrations/apps/guide/publishing.mdx b/docs/integrations/apps/guide/publishing.mdx index e568a136d..1769d5ab0 100644 --- a/docs/integrations/apps/guide/publishing.mdx +++ b/docs/integrations/apps/guide/publishing.mdx @@ -19,85 +19,162 @@ We also recommend giving special attention to the following search indexed field * App summary * App category - ## Provide technical information -Provide the app's technical details to begin the app certification process. Specify the app type, multiple user support, callback URLs, and OAuth scopes, and provide detailed testing instructions. +In the **App information** tab, provide the relevant technical information required for the app’s functionality. Specify callback URLs and multiple user support. This tab also provides the app’s API credentials. + +![App information](https://storage.googleapis.com/bigcommerce-production-dev-center/Big%20Design%20Docs/next-devtools-technical-info.png) + +| Field | Description | +| --- | --- | +| Auth | Requested when store owner or authorized user clicks `install` | +| Load | Requested when user launches app | +| Uninstall | Requested when store owner or authorized user clicks `uninstall` | +| Enable multiple users | Optionally allow your app to be accessible to store users other than the owner | +| Remove user callback URL | Requested when a store owner opts to revoke a user’s authorization to use the app. For more information, see [Supporting Multiple Users](/docs/integrations/apps/guide/users) | + +## Add OAuth Scopes + +In the **Scopes** tab, add any scopes the app requires. For a list, see [OAuth scopes](/docs/start/authentication/api-accounts#oauth-scopes). + +![Scopes](https://storage.googleapis.com/bigcommerce-production-dev-center/images/app-api-account/next-devtools-scopes-tight.png "App scopes") + +| Field | Description | +| --- | --- | +| Set manually | Allows explicit selection of the necessary scopes | +| Modify all | Sets all scopes to Modify or the most permissive selection | + + +"Modify All" is for testing only. Apps configured with all scopes will not be approved for public listing in the Apps Marketplace. + + +|Scope permission | Description | +| --- | --- | +| None | Removes app access to the scope entirely | +| Read-Only | Only grants the app read access for the scope | +| Modify | Grants the app full access to read, write, create, or delete data | +| Create | Grants the app access to create data | +| Get | Grants the app access to read specific data | +| Token Login | Allows management of login processes including authentication and session handling | +| Generate Tokens | Allows generation of access tokens used to access storefront or customer account information | + +## Add listing information + +In the **Listing information** tab, add basic information and finer details about the app. This includes support, pricing, style and much more information. The various fields are grouped by similar data, as outlined below. + +While no fields are explicitly required for private apps, most are required for publication. See the [FAQ](#faq) for more information. + +### Marketplace profile + +The marketplace display information that directs end-users to contact and support information for the app as well as partner-specific information. + +![Marketplace profile](https://storage.googleapis.com/bigcommerce-production-dev-center/Big%20Design%20Docs/next-devtools-marketplace-info.png "Marketplace Profile") + +| Field | Description | +| --- | --- | +| Contact Name | Email address created when applying for your Partner ID | +| Partner Name | Name of your company; attributed on the detail page | +| Partner Website | URL to your homepage | +| Support Email | Business mail where users can get help with the app | +| Support Website | Used for **Get Support** button in Marketplace | +| Partner ID | Required for submission; assigned to [partners](/docs/start/partner#applying-to-the-technology-partner-program) after approval | + +### App-supported functions + +The supported functions with which the app is expected to be compatible. This has no effect on the function of the app. The selectors in this section enable or disable feature badges on the apps marketplace. + +![App-supported functions](https://storage.googleapis.com/bigcommerce-production-dev-center/Big%20Design%20Docs/next-devtools-supported-functions.png "App-supported functions") + +| Field | Description | +| --- | --- | +| Storefront type | Indicates whether multi storefront is compatible with the app | +| Multi-location inventory | Indicates whether multi-location inventory is compatible with the app | +| Testing instructions | Instructions needed to test the app thoroughly | + +### App Summary + +Descriptive information about the app, including the category in which the app should display in the apps marketplace -![Technical](https://storage.googleapis.com/bigcommerce-production-dev-center/Big%20Design%20Docs/Technical%20-Callback%20URLS.png "Technical") +![App Summary](https://storage.googleapis.com/bigcommerce-production-dev-center/Big%20Design%20Docs/next-devtools-app-summary.png "App Summary") -| Field | Description | -|:-----------------------|:---------------------------------------------------------------------------| -| Multiple Users | Optionally allow your app to be accessible to store users other than the owner | -| App Type | Type of app; single-click recommended | -| Auth Callback URL | Requested when store owner or authorized user clicks `install` | -| Load Callback URL | Requested when user launches app | -| Uninstall Callback URL | Requested when store owner or authorized user clicks `uninstall` | -| OAuth Scopes | OAuth scopes the app requires | -| Test Instructions | Instructions needed to test the app thoroughly | +| Field | Description | +| --- | --- | +| Short app summary | A brief description that shows up in search results | +| Full app description | A broad overview of the app including benefits, use-cases, and other information. Displayed on the app’s detail page in the apps marketplace | +| Marketplace category | The category in which the app should be placed. Improves visibility for users looking for particular types of apps. | -## Add a summary +### Media assets -Next, we'll need some basic information about you. +Logos, icons, and screenshots of the app that provide unique branding and user expectations. -![App Summary](https://storage.googleapis.com/bigcommerce-production-dev-center/Big%20Design%20Docs/App%20Summary%20-%20Your%20Profile.png "App Summary") +![Media assets](https://storage.googleapis.com/bigcommerce-production-dev-center/Big%20Design%20Docs/next-devtools-media-assets.png "Media assets") + +| Field | Description | +| --- | --- | +| App icon | A square icon with a transparent background. Displays in the Apps menu in the control panel. | +| Primary logo | A logo with either white or transparent background that shows the brand logo in the foreground. Displays in search results in the apps marketplace. | +| Alternate logo | A logo with a solid color background and the brand logo in the foreground. Displays in the featured apps if your app is featured on the marketplace. | +| App screenshots | Screenshots of the app as end-users experience it. Displayed on the app’s detail page in the apps marketplace. | -| Field | Description | -|:----------------|:-------------------------------------------------------------------------------------------------------| -| Contact Name | Email address created when applying for your Partner ID | -| Partner Name | Name of your company​; attributed on the detail page | -| Partner Website | URL to your homepage | -| Support Email | Business mail where users can get help with the app | -| Support Website | Used for **Get Support** button in Marketplace | -| Partner ID | Required for submission; assigned to [partners](/docs/start/partner#applying-to-the-technology-partner-program) after approval | -| App Name | Brand name given to app for titles and app content; should not include taglines or descriptors | -| App Logo | Primary app logo; should be 350 x 130px with a white background and dark branding with no taglines | -| App Icon | Shown on main app detail page and left nav in control panel once installed; should be 200 x 200px | -| Price | App's starting price; if offering free plan, choose **Free**; specify details in **Other** selection | -| App Summary | App tagline used in the marketplace category and search results; 128 characters max | -| Category | Marketplace category for app; used as search attribute; BigCommerce may re-categorize prior to launch | +### Videos, features, and case studies -## Fill in details +Relevant videos of app functionality, features that users will find appealing, and case studies that demonstrate the app’s usefulness. -Provide a helpful description with screenshots and a video to promote your app. We recommend bullet points followed by short paragraphs with headers. Aim for 200 words in total. + + Videos and Case studies are optional fields. + -![Details](https://storage.googleapis.com/bigcommerce-production-dev-center/Big%20Design%20Docs/Details.png "Details") +![Videos, Features, and Case studies](https://storage.googleapis.com/bigcommerce-production-dev-center/Big%20Design%20Docs/next-devtools-media-assets.png "Videos, Features, and Case studies") | Field | Description | -|:------|:------------| -| App Details | Value proposition; avoid fluff or buzzwords; not be indexed for search; 200 words max | +| --- | --- | | Videos | Videos highlighting purpose and value of your app | | Case Studies | Case studies demonstrating how merchants have benefited from using your app. 4 max | | Features | App's major features; include title and description for each; title is search indexed; rich text accepted; 5 max | -| Legal Terms & Privacy | App privacy policy and ToS links; legally required | -| International Optimization | Countries app optimized for and countries app does not support | -| Help Guides | Links to app's user and installation guides; highly recommended | -| App Screenshot | Screenshots of app UI in a BigCommerce store's control panel | -| Alternate Logo | Used if app featured in Marketplace carousel; should be 259 x 158px (or larger at ratio); color background and light branding; no taglines | -## Add supported features +### Resources and International optimization -Indicate whether your app supports functionality for multi-storefront and [multi-location inventory](https://support.bigcommerce.com/s/article/Multi-Location#app-support). +Useful resources and locale information for the app. -![App Supported Features](https://storage.googleapis.com/bigcommerce-production-dev-center/images/dev-portal-app-supported-features.png "App Supported Features") + + Company privacy policy and Company terms of service are required for legal reasons and should be included. Apps without these items will not be listed in the Marketplace until this information is provided. + -## Review submission +![Resources and International optimization](https://storage.googleapis.com/bigcommerce-production-dev-center/Big%20Design%20Docs/next-devtools-resources-international.png "Resources and International optimization") -Review the information added before submitting the app. +| Field | Description | +| --- | --- | +| Installation guide | A guide for installing the app if there are special considerations the user should take for initial setup | +| User guide | General guide for users, both new and experienced, for using the app | + +### Plans and billing + +Relevant pricing information. If your app has a free trial period, upfront costs, or monthly costs, these can be added after selecting the correct pay structure. + +![Plans and billing](https://storage.googleapis.com/bigcommerce-production-dev-center/Big%20Design%20Docs/next-devtools-pricing.png "Plans and billing") + +![Pricing details](https://storage.googleapis.com/bigcommerce-production-dev-center/Big%20Design%20Docs/next-devtools-pricing-expanded.png "Pricing details") -![Review](https://storage.googleapis.com/bigcommerce-production-dev-center/Big%20Design%20Docs/Review.png "Review") ## Submit your app for approval +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 - publish](https://storage.googleapis.com/bigcommerce-production-dev-center/images/app-api-account/next-devtools-publish.png "Publish an App") + +Review the information in the **Confirm listing information** page. + +![Confirm listing information](https://storage.googleapis.com/bigcommerce-production-dev-center/images/app-api-account/next-devtools-publish-confirm.png "Confirm listing information") + Before submitting your app for approval, it is imperative to adhere to the recommended best practices listed below to ensure the integrity of the app marketplace and keep clients safe. * Integrate with the [BigCommerce JS SDK](https://github.com/bigcommerce/checkout-sdk-js) for Java-based apps. The SDK effectively allows management of the user’s session, keeping it in sync with the control panel. * At a minimum, design apps to be cookieless (to comply with Chrome and Safari privacy/ security policies) and instead use JWTs to pass information. * Never pass sensitive data using query parameters. -After completing all information, then click **Submit for Review** to pay the review and listing fee and submit the app. Test the app before submitting it to avoid paying additional review fees. +After completing all information, then click **Submit app for Review** to pay the review and listing fee and submit the app. Test the app before submitting it to avoid paying additional review fees. -![Payment & Submission](https://storage.googleapis.com/bigcommerce-production-dev-center/Big%20Design%20Docs/Payment%20%26%20Submission.png "Payment & Submission") +![Payment & Submission](https://storage.googleapis.com/bigcommerce-production-dev-center/Big%20Design%20Docs/next-devtools-publish-payment.png "Payment & Submission") If you have any questions about your submission, email [AppStore@bigcommerce.com](mailto:appstore@bigcommerce.com). @@ -105,7 +182,7 @@ If you have any questions about your submission, email [AppStore@bigcommerce.com **Are all fields required?** -For Marketplace approval, you'll need to fill out all fields on your listing with applicable content and links. These will be reviewed as part of the Marketplace approval process. The **Case Studies** field and **Videos** field are optional. +For Marketplace approval, you'll need to fill out all fields on your listing with applicable content and links. These will be reviewed as part of the Marketplace approval process. The **Case Studies** field and **Videos** fields are optional. **Am I able to preview the changes to my listing before publishing them?** diff --git a/docs/integrations/apps/tutorial/nextjs-connect.mdx b/docs/integrations/apps/tutorial/nextjs-connect.mdx index 4e3cfc49d..2cd85d80f 100644 --- a/docs/integrations/apps/tutorial/nextjs-connect.mdx +++ b/docs/integrations/apps/tutorial/nextjs-connect.mdx @@ -181,7 +181,7 @@ To register an app, you need a BigCommerce store. If you do not have a BigCommer 1. In your [Developer Portal](https://devtools.bigcommerce.com/my/apps) account, click **Create an app**. -![Create an app](https://storage.googleapis.com/bigcommerce-production-dev-center/images/Sample_app/nextjs-app-03.png "Create an app") +![Create an app](https://storage.googleapis.com/bigcommerce-production-dev-center/images/Sample_app/next-devtools-create-app.png "Create an app") 2. Enter app details at the prompts. Because you are building a sample app, you can name it anything you want. Production-level apps should meet the general requirements outlined in [Approval Requirements](/docs/integrations/apps/guide/requirements). @@ -202,7 +202,7 @@ To register an app, you need a BigCommerce store. If you do not have a BigCommer * For Load Callback URL, enter the ngrok URL of your app followed by `/api/load`. * For Uninstall Callback URL, enter the ngrok URL of your app followed by `/api/uninstall`. -![Callback URL](https://storage.googleapis.com/bigcommerce-production-dev-center/images/Sample_app/nextjs-app-06.png "Callback URL") +![Callback URL](https://storage.googleapis.com/bigcommerce-production-dev-center/images/Sample_app/next-nextjs-ngrok-callbacks.png "Callback URL") #### Next.js route mapping @@ -211,7 +211,7 @@ To register an app, you need a BigCommerce store. If you do not have a BigCommer 6. Because you will be modifying the Products API resource, set the Products OAuth scope to **MODIFY**. To learn more about the available OAuth scopes, see [OAuth scopes](/docs/start/authentication/api-accounts#oauth-scopes). -![OAuth scopes](https://storage.googleapis.com/bigcommerce-production-dev-center/images/Sample_app/nextjs-app-07.png "OAuth Scopes") +![OAuth scopes](https://storage.googleapis.com/bigcommerce-production-dev-center/images/Sample_app/next-devtools-products-modify.png "OAuth Scopes") 7. Click **Update & Close**. diff --git a/docs/integrations/apps/tutorial/nextjs-quick-start.mdx b/docs/integrations/apps/tutorial/nextjs-quick-start.mdx index 014aeb123..8d2e36e5e 100644 --- a/docs/integrations/apps/tutorial/nextjs-quick-start.mdx +++ b/docs/integrations/apps/tutorial/nextjs-quick-start.mdx @@ -21,9 +21,9 @@ Scroll down to **Config Vars** and replace the `` placeholder inside ` ### BC DevTools: Create an app profile -To obtain the client ID and client secret, sign in to the [Developer Portal](https://devtools.bigcommerce.com/my/apps) and click **Create an app**. Name the app and click **Create**. For now, click **Close** to continue without entering information. +To obtain the client ID and client secret, sign in to the [Developer Portal](https://devtools.bigcommerce.com/my/apps) and click **Create app**. Name the app and click **Create**. -![Create an App](https://storage.googleapis.com/bigcommerce-production-dev-center/images/Sample_app/nextjs-app-03.png "Create an App") +![Create App](https://storage.googleapis.com/bigcommerce-production-dev-center/images/Sample_app/next-devtools-create-app.png "Create App") ### Add the app API account to Heroku