Skip to content
Create account
or
Sign in
The Stripe Docs logo
/
Ask AI
Create account
Sign in
Get started
Payments
Finance automation
Platforms and marketplaces
Money management
Developer tools
Get started
Payments
Finance automation
Get started
Payments
Finance automation
Platforms and marketplaces
Money management
Overview
Versioning
Changelog
Upgrade your API version
Upgrade your SDK version
Developer tools
SDKs
API
Testing
Workbench
Event Destinations
Workflows
Stripe CLI
Stripe Shell
Developers Dashboard
Agent toolkit
Stripe health alertsBuild with LLMsStripe for Visual Studio CodeFile uploads
Security
Security
Extend Stripe
Stripe Apps
    Overview
    Get started
    Create an app
    How Stripe Apps work
    Sample apps
    Build an app
    Store secrets
    API authentication methods
    Authorization flows
    Server-side logic
    Listen to events
    Handle different modes
    Enable sandbox support
    App settings page
    Build a UI
    Onboarding
    Distribute your app
    Distribution options
    Upload your app
    Versions and releases
    Test your app
    Publish your app
    Promote your app
    Add deep links
    Create install links
    Assign roles in UI extensions
    Post-install actions
    App analytics
    Embedded components for Apps
    Embed third-party Stripe Apps
    Migrating to Stripe Apps
    Migrate or build an extension
    Migrate a plugin to Stripe Apps or Stripe Connect
    Reference
    App manifest
    CLI
    Extension SDK
    Permissions
    Viewports
    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
Stripe Connectors
Partners
Partner ecosystem
Partner certification
HomeDeveloper toolsStripe Apps

Design patterns for Stripe Apps

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

Copy page

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 so that it functions in a consistent, clear, and scalable manner.

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?
YesNo
Need help? Contact Support.
Join our early access program.
Check out our changelog.
Questions? Contact Sales.
LLM? Read llms.txt.
Powered by Markdoc