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
    Components
Stripe Connectors
Partners
Partner ecosystem
Partner certification
HomeDeveloper toolsStripe Apps

Onboarding

Guide your users through your app's sign in and initial setup flows.

Copy page

Onboarding is the process your users go through to get your app set up after installation. It’s their first interaction with your app, and it needs to be intuitive and polished, with minimal friction before they can start using your app.

The required onboarding steps are different for every app, but we provide tools and best practices to help you.

Design patterns

View our onboarding design patterns for common scenarios including activation, sign in, redirection, and so on.

Display your onboarding view

When a user installs your app and goes to view it in the Dashboard, it’s important that the onboarding flow is the first thing they encounter. Make sure to:

  • Create an onboarding component (using SignInView, if a sign in flow is needed).
  • In all of your page-specific views, check to see if the user has completed onboarding when the view first loads, and display your onboarding component appropriately. For example:
    import {SignInView, ContextView} from '@stripe/ui-extension-sdk/ui'; import appIcon from './icon.svg'; // This component can be defined in a separate file for reuse between views const Onboarding = () => ( <SignInView description="Connect your SuperTodo account to Stripe." primaryAction={{label: 'Sign in', href: 'https://supertodo.example.com'}} brandColor="#635bff" brandIcon={appIcon} /> ); const CustomerDetailView = () => { // The definition of "isSignedIn" is dependent upon your app's sign in method if (!isSignedIn) { return <Onboarding /> } return ( <ContextView title="SuperTodo customer view"> // your signed-in content here </ContextView> ); };
  • Do the same in your Dashboard default view. If you don’t have a default view, create one so that wherever the user is in the Dashboard, they’re presented with the right flow when they open your app. If you don’t need a Default view for purposes other than onboarding, you can return null from the view if the user has already completed onboarding and the Dashboard displays the Stripe Dashboard default drawer that guides users to a page-specific view. For example:
    import {SignInView} from '@stripe/ui-extension-sdk/ui'; import appIcon from './icon.svg'; // This component can be defined in a separate file for reuse between views const Onboarding = () => ( <SignInView description="Connect your SuperTodo account to Stripe." primaryAction={{label: 'Sign in', href: 'https://supertodo.example.com'}} brandColor="#635bff" brandIcon={appIcon} /> ); const DashboardDefaultView = () => { // The definition of "isSignedIn" is dependent upon your app's sign in method if (!isSignedIn) { return <Onboarding /> } return null; };

Rely on Stripe authentication for zero-touch user onboarding

If you’re building an app that stores data in an external backend but doesn’t need its own concept of user accounts, you can rely on Stripe’s authentication to offer zero-touch onboarding. Using this method, your app doesn’t require any onboarding and is usable immediately after installation.

Start by setting up your backend to authenticate requests from your app’s UI. With that in place, you can store information in your database with an added column for the user ID or account ID provided by Stripe. Users are already signed into the Stripe Dashboard when they use your app, so there’s no need for additional authentication.

See also

  • SignInView
  • Add an app settings page
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