Design patterns for Stripe Apps
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 so that it functions in a consistent, clear, and scalable manner.
Layout
Full-page apps
Learn how to build a custom Stripe Dashboard page that provides a complete, multi-view interface for your users.
Chart layout
Choose the right chart for your data and control sizing, arrangement, and layout within your app.
Lists
Use this pattern to organize information as a list.
Filter controls
Use this pattern to let users filter table rows with Chip and adjust chart views with Select.
Onboarding
Onboarding
Provide users with an onboarding flow that’s 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 go 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.