Sign in
An image of the Stripe logo
Create account
Sign in
Home
Payments
Business operations
Financial services
Developer tools
No-code
All products
Home
Payments
Business operations
Home
Payments
Business operations
Financial services
Developer tools
Overview
Developer tools
SDKs
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
      Action buttons
      Activation flow
      Additional context
      Back link
      Communicating state
      Demo content
      Empty state
      Lists
      Loading
      Progress stepping
      Redirects
      Settings sign in
      Sign in template
      Sign out
      Waiting screens
    Components
    Share and distribute
    Distribution options
    Upload your app
    Test your app
    Publish your app
    Promote 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
Stripe Connectors
Partners
HomeDeveloper tools

Design patterns for Stripe Apps
Beta

Follow our recommended design patterns to expedite your Stripe app review.

Patterns function as the foundation of your app design. Think of them as a combination of components—for example, combining the Spinner and other individual components to create a Loading screen. As we establish new patterns, we’ll add guidance to this section. Follow these patterns as you design your app to provide users with a consistent, clear, and scalable experience.

Onboarding

Activation flow

Provide users with a sign in or sign up flow that’s recognizable, secure, and intuitive.

Sign in

Apply this recommended sign in or sign up template as the first step in your onboarding flow.

Settings sign in

When building a back-end only app, build your onboarding flow as part of the user’s Stripe settings.

Demo content

When showing demo content, follow this pattern to highlight the top functionality that your app offers.

Additional context

When providing users with additional context, dedicate a space for it on a separate screen.

Redirect to Stripe

If users need to open a new tab to complete the onboarding flow, use this pattern to provide users a clear path back to Stripe.

Sign out

Use this pattern to provide users with a clear and universal flow when signing out of your app.

User actions

Back link

Use this pattern to allow users to navigate to a previous page.

Action buttons

Use this pattern to emphasize the primary action a user needs to complete.

Status

Communicating state

Use this pattern to clearly communicate the status of a request to users.

Empty state

Use this pattern to make sure that users know that there’s no data available to load.

Loading

Use this pattern to make sure that users know that data is being downloaded.

Progress stepping

Use this pattern to make sure users can track step-by-step progress toward a specific task.

Waiting screens

Use this pattern to make sure users clearly understand that they’re connecting to Stripe.

Layout

Lists

Use this pattern to organize information as a list.

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
Onboarding
User actions
Status
Layout
Stripe Shell
Test mode
Welcome to the Stripe Shell! Stripe Shell is a browser-based shell with the Stripe CLI pre-installed. Login 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.
$