## Stripe Apps Development

This section provides comprehensive documentation for developing and integrating Stripe Apps. Stripe Apps allow you to extend Stripe's functionality by embedding custom user interfaces directly into the Stripe Dashboard or by orchestrating the Stripe API for third-party services.

### Core Concepts and Getting Started

*   **Overview of Stripe Apps (`/stripe-apps`)**: Understand the fundamental capabilities of Stripe Apps, including developing and distributing them, authenticating users, listening for events, and automating workflows.
*   **Getting Started (`/stripe-apps/create-app`)**: Learn the basics of app development by building a simple "Hello, world!" app, including setting up the Stripe CLI and creating your first UI extension.
*   **How Stripe Apps Work (`/stripe-apps/how-stripe-apps-work`)**: Gain a deeper understanding of the architecture of Stripe Apps, including their frontend and backend components, and how they interact with the Stripe Dashboard.

### Building Your Stripe App

#### Frontend Development

*   **Build a UI (`/stripe-apps/build-ui`)**: Learn how to create custom user interfaces within the Stripe Dashboard using TypeScript, React, and Stripe's UI Extensions SDK.
*   **UI Extensions (`/stripe-apps/how-ui-extensions-work`)**: Understand the system for rendering your own UI within Stripe's products using TypeScript and React, noting differences from standard browser-based React applications.
*   **UI Components (`/stripe-apps/components`)**: Explore the library of prebuilt UI components available for building your app's interface, including detailed documentation for each component.
    *   **Layout and Structure**: `Accordion` (`/stripe-apps/components/accordion`), `Box` (`/stripe-apps/components/box`), `Divider` (`/stripe-apps/components/divider`), `FocusView` (`/stripe-apps/components/focusview`), `FormFieldGroup` (`/stripe-apps/components/formfieldgroup`), `FullPageTabs` (`/stripe-apps/components/fullpagetabs`), `FullPageView` (`/stripe-apps/components/fullpageview`), `Inline` (`/stripe-apps/components/inline`), `List` (`/stripe-apps/components/list`), `Menu` (`/stripe-apps/components/menu`), `OnboardingView` (`/stripe-apps/components/onboardingview`), `OverviewPage` (`/stripe-apps/components/overviewpage`), `PropertyList` (`/stripe-apps/components/propertylist`), `SettingsView` (`/stripe-apps/components/settingsview`), `SignInView` (`/stripe-apps/components/signinview`), `Tabs` (`/stripe-apps/components/tabs`), `TaskList` (`/stripe-apps/components/tasklist`), `Table` (`/stripe-apps/components/table`), `TextArea` (`/stripe-apps/components/textarea`), `Toast` (`/stripe-apps/components/toast`), `Tooltip` (`/stripe-apps/components/tooltip`)
    *   **Data Visualization**: `BarChart` (`/stripe-apps/components/barchart`), `LineChart` (`/stripe-apps/components/linechart`), `Sparkline` (`/stripe-apps/components/sparkline`)
    *   **Input and Controls**: `Button` (`/stripe-apps/components/button`), `ButtonGroup` (`/stripe-apps/components/buttongroup`), `Checkbox` (`/stripe-apps/components/checkbox`), `Chip` (`/stripe-apps/components/chip`), `DateField` (`/stripe-apps/components/datefield`), `Icon` (`/stripe-apps/components/icon`), `Img` (`/stripe-apps/components/img`), `Radio` (`/stripe-apps/components/radio`), `Select` (`/stripe-apps/components/select`), `Spinner` (`/stripe-apps/components/spinner`), `Switch` (`/stripe-apps/components/switch`), `TextField` (`/stripe-apps/components/textfield`)
    *   **Information Display**: `Badge` (`/stripe-apps/components/badge`), `Banner` (`/stripe-apps/components/banner`), `ContextView` (`/stripe-apps/components/contextview`), `DetailPageModule` (`/stripe-apps/components/detailpagemodule`), `DetailPagePropertyList` (`/stripe-apps/components/detailpagepropertylist`), `DetailPageTable` (`/stripe-apps/components/detailpagetable`), `Link` (`/stripe-apps/components/link`)
*   **Next Generation UI Components (`/stripe-apps/next-ui-components`)**: Get early access to upcoming UI component updates.
*   **Component Hierarchy Constraints (`/stripe-apps/component-hierarchy-constraints`)**: Understand the rules governing how components can be composed to ensure a predictable UI.
*   **Styling Your App (`/stripe-apps/style`)**: Learn how to style your app using provided design tokens to match the Stripe Dashboard's look and feel.
*   **Design Your App (`/stripe-apps/design`)**: Access design tools, guidelines, and philosophy for creating a cohesive and user-friendly app experience.

#### Backend Development

*   **Add Server-Side Logic (`/stripe-apps/build-backend`)**: Implement backend code to validate user actions, process data, integrate with third-party systems, and handle webhook events.
*   **Back-end App Example (`/stripe-apps/back-end-app-example`)**: A guide to building a Stripe app with backend processing and no user interface.
*   **Front-end App Example (`/stripe-apps/front-end-app-example`)**: A guide to building a Stripe app with a user interface but no backend processing.
*   **Full-Stack App Example (`/stripe-apps/full-stack-app-example`)**: A guide to building a Stripe app with both a user interface and backend functionality.

### Authentication and Authorization

*   **API Authentication Methods (`/stripe-apps/api-authentication`)**: Choose the appropriate method for your app to authenticate requests to the Stripe API.
    *   **OAuth 2.0 (`/stripe-apps/api-authentication/oauth`)**: Implement industry-standard OAuth 2.0 for secure user authentication.
    *   **Restricted API Key (`/stripe-apps/api-authentication/rak`)**: Utilize restricted API keys (RAKs) for more secure and permissioned access.
    *   **Platform Key**: Understand how to use your account's secret API key for requests on behalf of users.
*   **Authorization Flows (`/stripe-apps/pkce-oauth-flow`)**: Implement PKCE OAuth workflows for secure authorization.
*   **Store Secret Credentials (`/stripe-apps/store-secrets`)**: Learn how to securely persist sensitive data like authentication tokens using the Secret Store API.

### App Management and Distribution

*   **Create an App (`/stripe-apps/create-app`)**: The starting point for building your Stripe app.
*   **App Settings Page (`/stripe-apps/app-settings`)**: Create a page for users to configure their app settings within the Stripe Dashboard.
*   **Distribution Options (`/stripe-apps/distribution-options`)**: Understand the options for sharing your Stripe Apps with users, including the Stripe App Marketplace.
*   **Upload and Install Your App (`/stripe-apps/upload-install-app`)**: Learn how to make your app available to team members on your Stripe account.
*   **Publish Your App (`/stripe-apps/publish-app`)**: Guide to getting your app approved and listed on the Stripe App Marketplace.
*   **App Review Requirements (`/stripe-apps/review-requirements`)**: Familiarize yourself with the quality standards for apps on the App Marketplace.
*   **Test Your App Externally (`/stripe-apps/test-app`)**: Set up and distribute test versions of your app before public release.
*   **Manage Versions and Releases (`/stripe-apps/versions-and-releases`)**: Learn how to manage app versions and ship new releases over time.
*   **Enable Sandbox Support (`/stripe-apps/enable-sandbox-support`)**: Configure your public app for sandbox installations to allow users to evaluate its features.
*   **Handle Different Modes (`/stripe-apps/handling-modes`)**: Adapt your app to work seamlessly in both live mode and sandbox environments.
*   **Enable Local Network Access (`/stripe-apps/enable-local-network-access`)**: Configure local network access for app previewing.

### Migration and Legacy Extensions

*   **Migrate an Extension to Stripe Apps (`/stripe-apps/migrate-extension`)**: Understand why and how to migrate legacy extensions to the modern Stripe Apps platform.
*   **Migrate a Plugin to Stripe Apps or Stripe Connect (`/stripe-apps/plugins/decide-migration`)**: Decide on your migration path for plugins to Stripe Apps or Stripe Connect.
    *   **Migrate to OAuth 2.0 App (`/stripe-apps/plugins/oauth`)**: Guide to migrating your plugin to an OAuth 2.0 app.
    *   **Migrate to a RAK App (`/stripe-apps/plugins/rak`)**: Guide to migrating your plugin to a Restricted API Key (RAK) app.
*   **Legacy Extensions (`/building-extensions`)**: Information about the deprecated extensions integration pattern for historical reference.

### Advanced Features and Patterns

*   **App Analytics (`/stripe-apps/analytics`)**: Access and understand data on how your apps are used and how your marketplace listings perform.
*   **Deep Links (`/stripe-apps/deep-links`)**: Create deep links to navigate users directly to your Stripe app within the Dashboard.
*   **Install Links (`/stripe-apps/install-links`)**: Allow users to install public apps outside of the Stripe App Marketplace.
*   **Post-Install Actions (`/stripe-apps/post-install-actions`)**: Support additional configurations that occur after app installation.
*   **Using Roles in UI Extensions (`/stripe-apps/using-roles-in-ui-extensions`)**: Tailor app functionality based on user roles within the Stripe Dashboard.
*   **Design Patterns (`/stripe-apps/patterns`)**: Follow recommended design patterns for a consistent, clear, and scalable app experience.
    *   **Full Page Apps (`/stripe-apps/patterns/full-page-apps`)**: Build custom Stripe Dashboard pages with complex layouts.
    *   **Action Buttons (`/stripe-apps/patterns/action-buttons`)**: Learn where to place action buttons for optimal user experience.
    *   **Onboarding Flow (`/stripe-apps/patterns/onboarding-experience`)**: Create effortless, customizable, and relevant onboarding experiences.
    *   **Additional Context (`/stripe-apps/patterns/additional-context`)**: Provide necessary context to users before they sign in.
    *   **Back Link (`/stripe-apps/patterns/back-link`)**: Help users navigate back to previous pages.
    *   **Communicating State (`/stripe-apps/patterns/communicating-state`)**: Inform users about temporary status or required actions.
    *   **Demo Content (`/stripe-apps/patterns/demo`)**: Display brief and focused demonstrations of your app's core functionality.
    *   **Empty State (`/stripe-apps/patterns/empty-state`)**: Clearly indicate when no data is available to load.
    *   **Filter Controls (`/stripe-apps/patterns/filter-controls`)**: Enable users to filter table rows using Chip components.
    *   **Lists (`/stripe-apps/patterns/lists`)**: Display collections of information effectively.
    *   **Loading (`/stripe-apps/patterns/loading`)**: Use the Spinner component to indicate when data is loading.
    *   **Progress Stepping (`/stripe-apps/patterns/progress-stepping`)**: Guide users through multi-step tasks.
    *   **Redirects (`/stripe-apps/patterns/redirects`)**: Create clear redirects for users, especially during onboarding.
    *   **Settings Sign In (`/stripe-apps/patterns/settings-signin`)**: Onboard users via a settings page for backend-only apps.
    *   **Sign In Template (`/stripe-apps/patterns/sign-in`)**: Implement a secure and focused sign-in experience.
    *   **Sign Out (`/stripe-apps/patterns/sign-out`)**: Provide a clear way for users to sign out of your app.
    *   **Waiting Screens (`/stripe-apps/patterns/waiting-screens`)**: Inform users about wait times and next steps during onboarding.

### Reference and Tools

*   **App Manifest Reference (`/stripe-apps/reference/app-manifest`)**: Detailed documentation for the `stripe-app.json` file, which describes your app's integration with Stripe.
*   **Stripe Apps CLI Reference (`/stripe-apps/reference/cli`)**: Learn how to use the command-line interface to create, develop, configure, and upload your Stripe app.
*   **Permissions Reference (`/stripe-apps/reference/permissions`)**: A list of available events and their required permissions for your app.
*   **Extension SDK API Reference (`/stripe-apps/reference/extensions-sdk-api`)**: Documentation for the Extension SDK API, including context props and utility functions.
*   **Viewports Reference (`/stripe-apps/reference/viewports`)**: A list of available viewports for Stripe Apps and how they are displayed to users.
*   **Route Descriptors (`/stripe-apps/route-descriptors`)**: Navigate within the Dashboard using route descriptors for soft, context-preserving navigation.
*   **Sample Apps (`/stripe-apps/sample-apps`)**: Explore working examples of Stripe Apps to use as a starting point for your own development.
*   **UI Testing (`/stripe-apps/ui-testing`)**: Learn how to test your app's UI using the provided utilities and helpers.
*   **UI Extension Developer Tools (`/stripe-apps/ui-extension-developer-tools`)**: Utilize bundled developer tools for type checking, linting, and testing your code.
*   **Upgrade Stripe's UI Extension SDK (`/stripe-apps/upgrade-stripes-ui-extension-sdk`)**: Guide to upgrading your app to the latest version of the UI extension SDK.