Getting started with Stripe Apps

Learn the basics of app development by building, previewing, and updating a Stripe app.

In this guide, build a “Hello, world!” sample app with a UI extension on the Customer details page in the Stripe Dashboard.

Before you begin

If you have an existing Connect extension, see Migrate to Stripe Apps.
Go to the Stripe Dashboard to sign in or create an account.
If you haven’t already, install the Stripe CLI and log in using the same account.
Command Line
Select a language
homebrew
Install from source
No results
# Install Homebrew to run this command: https://brew.sh/ brew install stripe/stripe-cli/stripe # Connect the CLI to your dashboard stripe login
For additional install options, see Get started with the Stripe CLI.
Verify that you’re using CLI version 1.12.4 or newer. You can check by running:
Command Line
```
stripe version
```
If your Stripe CLI version is older than 1.12.4, update your Stripe CLI version to the latest version.
Verify that Node.js is installed by running:
Command Line
```
node -v
```
Stripe Apps requires Node.js version >=14. We recommend using an Active LTS version (18 or later). If you don’t have Node.js installed, download and install it. You can manage your app’s dependencies with NPM or Yarn. If you plan to publish your app to the App Marketplace, there are additional restrictions:

Your account must be activated, with a verified email address and business details.
A Connect platform account can’t publish an app on the Stripe Marketplace.

Install the Stripe Apps CLI plugin

To start building a Stripe app, install the Stripe Apps CLI plugin:

Command Line
stripe plugin install apps

If you already have the apps plugin installed, verify that you’re on version 1.5.12 or later.

Command Line
stripe apps -v
# apps version 1.5.12

If you need to upgrade the apps plugin, you can run:

Command Line

stripe plugin upgrade apps

Create an app

Build the basic structure of your “Hello, world!” app:
Command Line
```
stripe apps create helloworld
```
Follow the prompts by entering the following information:
- ID: You can accept the auto-generated app ID or customize one. This is how Stripe identifies your app. Your app ID must be globally unique.
- Display name: Enter a display name. This is the name your Dashboard displays for your app. You can always change the name later.

Your directory file structure is now:

src/views/: Directory for your TypeScript files that creates UI elements in the Stripe Dashboard, also known as views.
- App.tsx: The sample view that the Customer details page renders in the Stripe Dashboard.
- App.test.tsx: The test file to test the functionality of the App.tsx view.
stripe-app.json: The app manifest file that describes how your app integrates with the Stripe platform.
package.json: The file that contains metadata specifically to handle app dependencies.
yarn.lock: The auto-generated file that lists the current versions of app dependencies.
jest.config.ts: The configuration file to run test files.
images.d.ts: The type declaration for supporting image files in your Stripe app.
tsconfig.json: The configuration file for compiling TypeScript files.
.eslintrc.json: The configuration file for linting TypeScript files.
.vscode/extensions.json: The file that contains recommended VS code extensions.
.gitignore: The file that tells git to ignore certain files or folders.

Stripe Apps only supports React 17. Make sure any dependency you install is compatible with this version. For more information see How UI extensions work.

Preview your app

You can run your app locally, update it, and preview your changes in the Dashboard:

Go into the helloworld directory:
Command Line
```
cd helloworld
```
To preview your app, start your local development server:
Command Line
```
stripe apps start
```
Press Enter to open your browser.
Note
Use a browser that supports the Stripe Dashboard. Safari doesn’t support the Dashboard. For more updates, see the GitHub issue tracking browser support.
Click Continue to preview your app in your Stripe account:
Enable app preview
Your app in the Dashboard

Enable local network access before viewing your app.

The App view only renders on the Customer details page in the Dashboard. If you don’t see your app, make sure you create a customer in the Dashboard.

Build your app

While you’re previewing your app in the Dashboard, the local development server enables real-time updates on your app:

In your App.tsx file, change the title while you keep the Stripe Dashboard page open and your development server running. Save the file to see your changes in your app.
In the same file, remove > from the </ContextView> closing tag, and save the file to see an error:
You can resolve the error in the Stripe Dashboard, your browser developer tools, or the Stripe CLI.
To stop the development server, Ctrl+C from your command line.

Your sample app is complete. Next, start adding more features to your Stripe app.