Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
2 changes: 1 addition & 1 deletion .style/.spelling
Original file line number Diff line number Diff line change
Expand Up @@ -426,7 +426,7 @@ reCAPTCHA
v1
invoice_email.html
invoice_printable.zip
CyberDuck
Cyberduck
prefilled
invoice.html
PrintableDetailedInvoice.html
Expand Down
6 changes: 3 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ Here are some quick links to our [Contribution](/CONTRIBUTING.md) guide:

- [Making a Quick Edit](/CONTRIBUTING.md#making-a-quick-edit)
- [Editing Locally](/CONTRIBUTING.md#editing-locally)
- [Commit Messages](/CONTRIBUTING.md/cod#commit-messages)
- [Commit Messages](/CONTRIBUTING.md#commit-messages)
- [Style Guides](/CONTRIBUTING.md#style-guides)
- [Contributing to Other Projects](/CONTRIBUTING.md#contributing-to-other-projects)

Expand Down Expand Up @@ -53,10 +53,10 @@ Always update your fork to ensure you're working with the newest source files.

```shell
.
├── .github/ # github config
├── .github/ # GitHub config
└── workflows/ # workflows to lint pull requests, etc.
└── ...
├── .idea/ # directory ignored by git - use for yourself
├── .idea/ # directory ignored by Git - use for yourself
├── .style/ # CSPELL data files
├── assets/
├── csv/ # static files used in docs
Expand Down
2 changes: 1 addition & 1 deletion docs/integrations/apps/guide/buttons.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ Your button will link merchants to BigCommerce's install endpoint for your appli

## Rendering success and failure pages

Modify your web site's server-side code to serve either a success or failure page, depending on whether the external installation was successful or unsuccessful.
Modify your website's server-side code to serve either a success or failure page, depending on whether the external installation was successful or unsuccessful.

If you skip this step, your application will load in the iFrame created by your button. To ensure a good experience for your users, we strongly recommend that you return a confirmation page, instead of allowing your application to be loaded in that modal.

Expand Down
8 changes: 4 additions & 4 deletions docs/integrations/apps/guide/callbacks.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ This article is a reference for endpoints to which we send event-driven callback

## Overview

Your app's front-end views render inside an iFrame in the store control panel, so your app has no native ability to listen for a few high-level events. To support your work, BigCommerce sends `GET` requests to callback routes in your app that correspond to three events: opening the app, uninstalling the app, and revoking a user's access to the app. Each request includes a signed JSON web token (_JWT_), which contains identifying information about the store and the user.
Your app's front-end views render inside an iFrame in the store control panel, so your app has no native ability to listen for a few high-level events. To support your work, BigCommerce sends `GET` requests to callback routes in your app that correspond to three events: opening the app, uninstalling the app, and revoking a user's access to the app. Each request includes a signed JSON web token (_JWT_), which contains identifying information about the store and the user.

Your app is only required to handle the `GET /auth{:http}` and `GET /load{:http}` endpoints, but we recommend writing handlers for the others, as well. Please see the corresponding detail sections that follow for more about the consequences of not handling optional callback endpoints.

Expand All @@ -26,7 +26,7 @@ The following table lists the app management callbacks that BigCommerce stores s

## Render the app with load

Once the store owner or authorized user installs your app, it appears on the **Apps** sub-menu list in their store control panel, as well as their authorized users' control panels. When a user clicks your app's listing or another referring UI component, BigCommerce dispatches a request to your app's `GET /load{:http}` endpoint. The following is an example request:
Once the store owner or authorized user installs your app, it appears on the **Apps** sub-menu list in their store control panel, as well as their authorized users' control panels. When a user clicks your app's listing or another referring UI component, BigCommerce dispatches a request to your app's `GET /load{:http}` endpoint. The following is an example request:

```http filename="Example request: /load callback from BigCommerce"
GET https://your_app.example.com/load?signed_payload_jwt={header_b64.payload_claims_b64.signature_b64}
Expand Down Expand Up @@ -98,8 +98,8 @@ The following is an example of the payload claims encoded in the `signed_payload
"id": 7654321,
"email": "owner@example.com"
},
"url": "/",
"channel_id": null,
"url": "/",
"channel_id": null
}
```

Expand Down
4 changes: 2 additions & 2 deletions docs/integrations/apps/guide/catalyst-compatible-apps.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ It’s likely that your app or integration is already compatible with Catalyst i

### I am the developer of a net-new Single-Click App, and want to ensure my app is compatible with Catalyst.

#### Follow these teps:
#### Follow these steps:
1. **Understand Catalyst's Architecture**
- Catalyst uses Next.js and React components for storefront UI.
- Familiarize yourself with routing, data fetching, and state management.
Expand Down Expand Up @@ -92,6 +92,6 @@ Our App Marketplace team will review your app compatibility, follow up with any
## Leverage our BigCommerce Developer ecosystem to learn more

- Join our [BigCommerce Developers Slack](https://developer.bigcommerce.com/slack).
- Align your app with Catalyst’s roadmap, coming soon on the [Catalyst Github repo](https://github.com/bigcommerce/catalyst)!
- Align your app with Catalyst’s roadmap, coming soon on the [Catalyst GitHub repo](https://github.com/bigcommerce/catalyst)!
- Contribute to the [Resource Hub](https://developer.bigcommerce.com/resource-hub) to showcase your integration.

8 changes: 4 additions & 4 deletions docs/integrations/apps/guide/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ Here's a few things you'll need before beginning app development:
3. [BigCommerce partnership](https://www.bigcommerce.com/partners/) (required to publish apps to marketplace)

## Beginning quickly
The fastest way to begin app development is by starting with one of our sample apps. You can follow our [Building Apps Quick Start Tutorial](/docs/integrations/apps/quick-start), either alone or in conjunction with [spinning up a Heroku instance](https://heroku.com/deploy?template=https://github.com/bigcommerce/sample-app-nodejs) that runs our [Node / React / Next.js sample app](https://github.com/bigcommerce/sample-app-nodejs/).
The fastest way to begin app development is by starting with one of our sample apps. You can follow our [Building Apps Quick Start Tutorial](/docs/integrations/apps/quick-start), either alone or in conjunction with [spinning up a Heroku instance](https://heroku.com/deploy?template=https://github.com/bigcommerce/sample-app-nodejs) that runs our [Node / React / Next.js sample app](https://github.com/bigcommerce/sample-app-nodejs/).

Alternatively, you can clone the GitHub repo for your preferred stack:

Expand All @@ -34,7 +34,7 @@ cd myapp # move into app dir

brew install ngrok/ngrok/ngrok # install ngrok using homebrew

ngrok config add-authtoken <TOKEN> # Obtain your authtoken by going to https://dashboard.ngrok.com/get-started/your-authtoken
ngrok config add-authtoken <TOKEN> # Obtain your authtoken by going to https://dashboard.ngrok.com/get-started/your-authtoken

npm install # install dependencies

Expand All @@ -61,8 +61,8 @@ Once you've exposed your app to the internet, you can register it as a draft app
Any store registered to the same email as your [Developer Portal](https://devtools.bigcommerce.com/my/apps) account can install your draft apps. Use the following steps to install:

1. Sign in to the store and navigate to **Apps** > **My Apps** > [**My Draft Apps**](https://login.bigcommerce.com/deep-links/manage/marketplace/apps/my-apps/drafts).
2. Click the draft app thumbnail to install the draft.
3. Once you click **Install**, BigCommerce will begin the OAuth flow by making a `GET` request to the app's `/auth` callback URL. If the app handles all the requests successfully, the app has been installed and you can begin feature development.
2. Click the draft app thumbnail to install the draft.
3. Once you click **Install**, BigCommerce will begin the OAuth flow by making a `GET` request to the app's `/auth` callback URL. If the app handles all the requests successfully, the app has been installed, and you can begin feature development.

## Next steps
* [Learn How Test App Authentication Locally with ngrok](https://medium.com/bigcommerce-developer-blog/how-to-test-app-authentication-locally-with-ngrok-149150bfe4cf)
Expand Down
4 changes: 2 additions & 2 deletions docs/integrations/apps/guide/ui.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ forms, tables, and modals. You can use these patterns as a starting point for yo
* [GitHub repo](https://github.com/bigcommerce/big-design-patterns-sandbox/).

### UX writing
BigDesign also provides a set of UX writing guidelines to help you create clear and consistent copy for your app's UI. These guidelines cover topics such as tone, voice, and terminology, and provide examples of how to write effective UI copy. You can use these guidelines to ensure that your app's UI copy aligns with BigCommerce's design language and provides a consistent user experience.
BigDesign also provides a set of UX writing guidelines to help you create clear and consistent copy for your app's UI. These guidelines cover topics such as tone, voice, and terminology, and provide examples of how to write effective UI copy. You can use these guidelines to ensure that your app's UI copy aligns with BigCommerce's design language and provides a consistent user experience.

[BigDesign UX writing guidelines](https://developer.bigcommerce.com/docs/start/design/ux-writing).

Expand All @@ -71,7 +71,7 @@ Single-click apps benefit from a high level of integration with the BigCommerce

To load inside the control panel iFrame, your app must do the following:
1. **Serve app resources over HTTPS:** BigCommerce's control panel is served over HTTPS. Your app must also be served over HTTPS, including any remote resources referenced (such as CSS, JS, and image files). If any resources are served over HTTP, the user's browser will display a mixed content error and refuse to render your app's UI in the control panel iFrame.
2. **Support browser same-origin policies:** Same-origin policities restrict apps running within iFrames from performing certain activities, such as interacting with other services. If your app requires this, open a new tab for actions that cannot occur in an iFrame<sup>1</sup>. [Learn more about same-origin policies](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy) (developer.mozilla.org).
2. **Support browser same-origin policies:** Same-origin policies restrict apps running within iFrames from performing certain activities, such as interacting with other services. If your app requires this, open a new tab for actions that cannot occur in an iFrame<sup>1</sup>. [Learn more about same-origin policies](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy) (developer.mozilla.org).

<Callout type="info">
Apps that operate in the iFrame get strong preference during [App Marketplace](https://www.bigcommerce.com/apps/) consideration; however, we sometimes make exceptions for apps that need to interact with other services.
Expand Down
2 changes: 1 addition & 1 deletion docs/integrations/apps/guide/users.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ Because you know the store owner or user's `email` and `ID` from the app install
- **Users**: Cannot `install` or `uninstall` apps. Users are permitted only to `load` the apps that a store owner authorized.

## The remove user request
Store owners can also remove users. This action generates a `GET` request to the remove user callback URL that you provided in the [Developer Portal](https://devtools.bigcommerce.com/my/apps). When this occurs, your app should remove the user identified in the request from it's records.
Store owners can also remove users. This action generates a `GET` request to the remove user callback URL that you provided in the [Developer Portal](https://devtools.bigcommerce.com/my/apps). When this occurs, your app should remove the user identified in the request from its records.

For details about remove user and load requests, see [Single-click App Callbacks](/docs/integrations/apps/guide/callbacks).

Expand Down
2 changes: 1 addition & 1 deletion docs/integrations/apps/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ Use [BigCommerce APIs](/docs/api) to integrate stores with business systems such
### Connect to sales channels
List products on external [sales channels](https://www.bigcommerce.com/apps/categories/sales-channels/) with [Channels Toolkit](/docs/integrations/channels/toolkit-reference).

[Learn more about connecting apps to sales channels.](/docs/integrations/channels).
[Learn more about connecting apps to sales channels](/docs/integrations/channels).

### Add and manage scripts
Create and manage scripts with [Scripts API](/docs/rest-management/scripts) and [Script Manager](https://support.bigcommerce.com/s/article/Using-Script-Manager).
Expand Down
10 changes: 5 additions & 5 deletions docs/integrations/apps/tutorial/nextjs-setup.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ For this tutorial, you need Node.js version 18+. To check your version of Node.j
node -v
```

If you do not have Node.js installed, you can download it from [nodejs.org (downloads)](https://nodejs.org/en/download/).
If you do not have Node.js installed, you can download it from [nodejs.org (downloads)](https://nodejs.org/en/download/).

## Set up a project directory

Expand Down Expand Up @@ -140,7 +140,7 @@ Next.js associates each file in the pages folder with a route based on the file'

Next.js allows you to use a theme provider and import CSS files from `node_modules`. In this tutorial, you integrate [BigDesign React components](https://developer.bigcommerce.com/big-design/) to give your app a distinct BigCommerce look and feel.

1. Next.js uses the `App` component to initialize pages. To override the default `App` component, add the `_app.tsx` file to the `pages` folder. This is where you initialize BigDesign.
1. Next.js uses the `App` component to initialize pages. To override the default `App` component, add the `_app.tsx` file to the `pages` folder. This is where you initialize BigDesign.

2. Open `_app.tsx` and import `GlobalStyles` from BigDesign and `AppProps` from Next.js.

Expand All @@ -160,7 +160,7 @@ const MyApp = ({ Component, pageProps }: AppProps) => (
<Component {...pageProps} />
</>
);

export default MyApp;
```

Expand All @@ -170,7 +170,7 @@ The `Component` prop represents the active page. Consequently, it will change wh

Because BigDesign uses styled-components, we need to add additional configuration for both BigDesign and styled-components to function properly.

1. Add a custom `_document.tsx` file to your pages folder.
1. Add a custom `_document.tsx` file to your pages folder.

2. Import `Document` and `DocumentContext`, the built-in TypeScript types, from Next.js.

Expand Down Expand Up @@ -218,7 +218,7 @@ export default class MyDocument extends Document {

## Start the development server

1. Using the terminal, open the root directory of your app and start the development server.
1. Using the terminal, open the root directory of your app and start the development server.

```shell copy filename="Start development server"
npm run dev
Expand Down
2 changes: 1 addition & 1 deletion docs/integrations/apps/unified-billing/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@ If your app is already published to production (i.e. visibility status = Public)
* Test using $0 checkouts, so that you don’t get charged real money.
* After you create a checkout, you can test completing of the checkout by creating and logging into a sandbox store as the Store Owner, and completing the checkout as a merchant would do.

If your app is NOT yet published to production (i.e visibility status = Draft, Under Review):
If your app is NOT yet published to production (i.e. visibility status = Draft, Under Review):
* Build your app and review the App Marketplace Approval Requirements
* Connect your app to Unified Billing
* Checkouts are limited to $0, so that you don't get charged real money.
Expand Down
Loading