Sign in
An image of the Stripe logo
Create account
Sign in
Home
Payments
Business operations
Financial services
Developer tools
All products
Home
Payments
Business operations
Home
Payments
Business operations
Financial services
Developer tools
Support
Overview
Overview
Get started
Create an app
How Stripe Apps work
Sample apps
Development
Store secrets
Authorization flows
Server-side logic
App settings page
Build a UI
UI design
Design your app
Style your app
Patterns to follow
Components
Share and distribute
Distribution options
Upload your app
Publish your app
Add deep links
Versions and releases
Post-install actions
Metrics and analytics
Reference
App manifest
CLI
Extension SDK
Permissions
Viewports
Extensions
Migrate to Stripe Apps
HomeDeveloper tools

Getting started with Stripe Apps
Beta

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

  1. If you have an existing Connect extension, see Migrate to Stripe Apps.

  2. Sign in to the Stripe Dashboard using your existing Stripe account or by creating a new one:

    Go to the Dashboard

  3. If you haven’t already, install the Stripe CLI for your machine’s setup:

    Terminal
    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.

  4. Log in to the Stripe CLI using the same account you used to sign in to the Stripe Dashboard.

    Terminal
    stripe login
  5. Verify that you’re using CLI version 1.8.11 or newer. You can check by running:

    Terminal
    stripe version

    If your Stripe CLI version is older than 1.8.11, update your Stripe CLI version to the latest version.

Install the Stripe Apps CLI plugin

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

Terminal
stripe plugin install apps

Create an app

  1. Build the basic structure of your “Hello, world!” app:

    Terminal
    stripe apps create helloworld
  2. Follow the prompts by entering the following information:

    • ID: You can accept the auto-generated application ID or customize one. This is how Stripe identifies your app.
    • 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:

  1. Go into the helloworld directory:

    Terminal
    cd helloworld
  2. To preview your app, start your local development server:

    Terminal
    stripe apps start
  3. 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.

  4. Click Continue to preview your app in your Stripe account:

    Screenshot of enabling preview mode

    Your app loads in the Dashboard:

    Hello World 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:

  1. In your App.tsx file, change the title while you keep the Stripe Dashboard page open and your development server running.

  2. Save the file to see your changes in your app.

    Updating app title

  3. In your App.tsx file, remove > from the </ContextView> closing tag, and save the file to see an error:

    Hello World error

    You can resolve the error in the Stripe Dashboard, your browser dev tools, or the Stripe CLI.

  4. 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.

Next steps

  • Build a UI extension
  • Add server-side logic
  • Distribution options
Was this page helpful?
Questions? Contact us.
View developer tutorials on YouTube.
Check out our product changelog.
Powered by Markdoc
You can unsubscribe at any time. Read our privacy policy.
On this page
Before you begin
Install the Stripe Apps CLI plugin
Create an app
Preview your app
Build your app
Stripe Shell
Test mode
▗▄ ▄▟█ █▀▀ ▗▟████▙▖ ██████ ███▗▟█ ███ ███▗▟██▙▖ ▗▟█████▙▖ ███▖ ▀▀ ███ ███▀▀▀ ███ ███▀ ███ ███ ███ ▝▜████▙▖ ███ ███ ███ ███ ███ █████████ ▄▄ ▝███ ███ ▄ ███ ███ ███▄ ███ ███ ▄▄ ▝▜████▛▘ ▝▜███▛ ███ ███ ███▝▜██▛▘ ▝▜█████▛▘ ███ ▀▘
Welcome to the Stripe Shell! Stripe Shell is a browser-based shell with the Stripe CLI pre-installed. Login to Stripe docs and press Control + Backtick on your keyboard to start managing your Stripe resources in test mode. - View supported commands: - Find webhook events: - Listen for webhook events: - Call Stripe APIs: stripe [api resource] [operation] (e.g. )
The Stripe Shell is best experienced on desktop.
$