Skip to content
Sign in
An image of the Stripe logo
/
Create account
Sign in
Home
Payments
Finance automation
Banking as a service
Developer tools
No-code
All products
Home
Payments
Finance automation
Home
Payments
Finance automation
Banking as a service
Developer tools
Overview
Building your integration
Developer tools
SDKs
API
Security
Sample projects
Videos
Stripe Apps
    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
    Onboarding
    UI design
    Design your app
    Style your app
    Design patterns
    Components
    Share and distribute
    Distribution options
    Upload your app
    Versions and releases
    Test your app
    Publish your app
    Promote your app
    Add deep links
    Install links and OAuth
    Using roles in UI Extensions
    Post-install actions
    App analytics
    Reference
    App manifest
    CLI
    Extension SDK
    Permissions
    Viewports
    Extensions
    Migrate to Stripe Apps
    Building extensions
Stripe Connectors
Partners
HomeDeveloper tools

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

  1. If you have an existing Connect extension, see Migrate to Stripe Apps.
  2. Sign in to the Stripe Dashboard.
  3. If you haven’t already, install the Stripe CLI and log in using the same account.
    Command Line
    # 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.

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

Install the Stripe Apps CLI plugin

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

Command Line
stripe plugin install apps

Create an app

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

    Command Line
    stripe apps create helloworld
  2. 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:

  1. Go into the helloworld directory:

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

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

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

    Screenshot of enabling preview mode

    Enable app preview

    Hello World app

    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:

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

  2. In the same 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 developer tools, or the Stripe CLI.

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

See also

  • Build a UI extension
  • Add server-side logic
  • Distribution options
Was this page helpful?
Need help? Contact Support.
Watch our developer tutorials.
Check out our product changelog.
Questions? Contact Sales.
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
See also
Stripe Shell
Test mode
Welcome to the Stripe Shell! Stripe Shell is a browser-based shell with the Stripe CLI pre-installed. Log in to your Stripe account and press Control + Backtick (`) on your keyboard to start managing your Stripe resources in test mode. - View supported Stripe 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.
$