Design patterns for Stripe Apps
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
Provide users with a sign in or sign up flow that’s recognizable, secure, and intuitive.
Apply this recommended sign in or sign up template as the first step in your onboarding flow.
When building a back-end only app, build your onboarding flow as part of the user’s Stripe settings.
When showing demo content, follow this pattern to highlight the top functionality that your app offers.
When providing users with additional context, dedicate a space for it on a separate screen.
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.
Use this pattern to provide users with a clear and universal flow when signing out of your app.
User actions
Use this pattern to allow users to navigate to a previous page.
Use this pattern to emphasize the primary action a user needs to complete.
Status
Use this pattern to clearly communicate the status of a request to users.
Use this pattern to make sure that users know that there’s no data available to load.
Use this pattern to make sure that users know that data is being downloaded.
Use this pattern to make sure users can track step-by-step progress toward a specific task.
Use this pattern to make sure users clearly understand that they’re connecting to Stripe.