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.
Sign in to the Stripe Dashboard.
If you haven’t already, install the Stripe CLI and log in using the same account.
Command Line
选择语言
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 is installed and up to date.
Command Line
```
node -v
```
You can manage your app’s dependencies with NPM or Yarn. Use the latest stable version for the best development experience. If you plan to publish your app to the App Marketplace, there are additional restrictions:

Your account must be activated.
Currently to publish an app on the Stripe Marketplace, you can’t be a Platform account.

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:

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.
注意
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

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.