Getting started with Stripe AppsBeta
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 using your existing Stripe account or by creating a new one:
- If you haven’t already, install the Stripe CLI for your machine’s setup:
For additional install options, see Get started with the Stripe CLI.
- Log in to the Stripe CLI using the same account you used to sign in to the Stripe Dashboard.Command Line
stripe login
- Verify that you’re using CLI version 1.8.11 or newer. You can check by running:If your Stripe CLI version is older than 1.8.11, update your Stripe CLI version to the latest version.Command Line
stripe version
- Verify that node is installed and up to date.You can manage your app’s dependencies with NPM or Yarn. Use the latest stable version for the best development experience.Command Line
node -v
Install the Stripe Apps CLI plugin
To start building a Stripe app, install the Stripe Apps CLI plugin:
stripe plugin install apps
Create an app
Build the basic structure of your “Hello, world!” app:
Command Linestripe 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:
Preview your app
You can run your app locally, update it, and preview your changes in the Dashboard:
Go into the
helloworld
directory:Command Linecd helloworld
To preview your app, start your local development server:
Command Linestripe 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:
Your app loads 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 your
App.tsx
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 dev 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.