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
Build with LLMsStripe for Visual Studio CodeStripe health alertsFile uploads
Security and privacy
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 AppsDesign patterns

Communicating state for Stripe Apps

Learn how to guide users to take actions in your app.

Copy page

Keep the user informed by showing them when they need to take a certain action.

Before you begin

Create an app.

Suggested use

  • Use a Toast component to provide temporary feedback after users take an action.
  • Use a Banner component to show users they need to take action on unexpected system-level requirements, changes, or issues. For example:
On the left, a green check Toast on download. On the right, a red Notice on error.

Examples

Consider the following attributes when choosing to deliver a message.

ToastBanner
Green check Toast example with text 'Changes saved' Banner example with text 'New updates'

Display

Temporary

All toasts trigger on users’ actions. Toasts dismiss automatically after a short period or when the app closes.

Persistent

You can deliver banners at any time. Dismissing a banner requires an action.

Content

Limited text length

Messages for toasts should be short, and fewer than four words on one line. The maximum character length for a toast is 30.

Medium to long message

Banners contain title and body text. Banners are suitable for providing information with additional details.

Action

Optional

Provide an action as a shortcut for users to quickly enter the related event.

Required

Inform users to take the required action.

PositionBottom of the app drawerUnder app drawer header
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