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.
Use a coding agent
The Stripe Apps skill helps your coding agent scaffold, build, preview, and test a Stripe app using Stripe’s latest guidance. Install Stripe’s agent skills, then start a new agent session in the directory where you want to create your app and use this prompt:
Use the Stripe Apps skill to build a "Hello, world!" Stripe app that displays a UI extension on the Customer details page. Guide me through previewing and testing it.
You can also follow the step-by-step guide below.
Before you begin
Note
Developing an app when you have an existing Stripe extension
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.
Install the Stripe CLI with npm:
Command Linenpm install -g @stripe/cli@latestNote
For more installation options for Windows, macOS, Linux, and Docker, check the Stripe CLI readme on GitHub.
After installation, connect the CLI to your Stripe account by logging in:
Command Linestripe loginThe CLI displays a pairing code and opens the Stripe Dashboard, where you approve access to accounts, sandboxes, and live mode. The CLI stores your credentials in your operating system’s secure credential store (when available) and refreshes the session automatically. To authenticate with an API key instead, run
stripe login --interactive, usestripe config, pass--api-key, or set theSTRIPE_environment variable.API_ KEY - Verify that you’re using CLI version 1.25.0 or newer. You can check by running:If your Stripe CLI version is older than 1.25.0, update your Stripe CLI version to the latest version.Command Line
stripe version - Verify that Node.js is installed by running:Stripe Apps requires Node.js versionCommand Line
node -v>=22. We recommend using an Active LTS version (22 or later). If you don’t have Node.js installed, download and install it. - Install pnpm. Stripe Apps uses pnpm as the package manager:Verify the installation:Command Line
brew install pnpmCommand Linepnpm --version
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.
If you’re authoring an extension, make sure you have:
| Prerequisite | Setup |
|---|---|
| Stripe account with access to the extensions private preview | If you don’t have access, sign up for early access. |
| Stripe CLI v1.12.4 or later, logged into your account | stripe version to check. Install or upgrade: brew upgrade stripe/stripe-cli/stripe |
| A sandbox (recommended for first-time setup) | Create one in the Dashboard if you don’t have one. |
| Node.js v22 or later | node --version |
| pnpm v10 (v11 is not supported) | pnpm --version |
| Stripe Apps CLI plugin v1.19.0 or later | stripe plugin install apps then confirm with stripe apps -v |
| Generate plugin v0.11.5 or later | stripe plugin install generate then confirm with stripe generate --version |
Install the Stripe Apps CLI plugin
To start building a Stripe app, install the Stripe Apps CLI plugin:
stripe plugin install apps
If you already have the apps plugin installed, verify that you’re on version 1. or later.
stripe apps -v # apps version 1.19.0
If you already have the apps plugin installed, we recommend upgrading to the latest version by running:
stripe plugin upgrade apps
Next, install the Stripe generate CLI plugin, which is required to scaffold new apps:
stripe plugin install generate
Verify that you’re on version 0. or later:
stripe generate --version # generate version 0.11.5
If you already have the generate plugin installed, we recommend upgrading to the latest version by running:
stripe plugin upgrade generate
Create an app
Build the basic structure of your “Hello, world!” app:
Command Linestripe generate app helloworld cd helloworldFollow 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.
App directory file structure
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
helloworlddirectory:Command Linecd helloworldTo preview your app, start your local development server:
Command Linestripe apps startPress 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.
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
Home.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.tsx 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.
Interested in the preview of new app components and capabilities?
Enter your email to request access.