## Stripe Apps Development

This documentation section covers the development of Stripe Apps, a platform that allows developers to extend Stripe's functionality by embedding custom user experiences within the Stripe Dashboard and orchestrating the Stripe API.

### Core Concepts and Getting Started

*   **Overview**: Stripe Apps enable the creation of custom applications that can authenticate users for third-party services, listen for events, automate workflows, and design custom user interfaces within the Stripe Dashboard.
*   **Getting Started**: Learn the basics of app development by building, previewing, and updating a Stripe app. This includes setting up the Stripe CLI and creating a basic "Hello, world!" app.
*   **How Stripe Apps Work**: Understand the fundamental architecture of Stripe Apps, which typically consist of a frontend component (UI extensions) and a backend component.
*   **App Manifest Reference**: Every Stripe app requires an `app manifest` file (`stripe-app.json`) that describes its integration with the Stripe platform, including permissions, distribution type, and API access types.
*   **Common Use Cases**: Explore different app types (backend, frontend, full-stack) and their common applications, such as syncing data between Stripe and external systems.

### Building Your Stripe App

*   **Build an App**: This is the central hub for app development, guiding users through the process.
*   **Build a UI**: Learn how to create custom user interfaces within the Stripe Dashboard using TypeScript, React, and Stripe's UI Extensions SDK and UI toolkit.
    *   **How UI Extensions Work**: Understand the sandboxed iframe environment for UI extensions and their reliance on Stripe's UI components.
    *   **Next UI Components**: Get early access to the next generation of UI components for enhanced functionality.
    *   **Component Hierarchy Constraints**: Learn about rules governing component composition to ensure predictable UI rendering.
    *   **UI Testing**: Discover utilities and helpers for writing unit tests for your app's user interface.
    *   **UI Components**: A comprehensive reference to all available UI components for building your app's interface, including:
        *   Layout and structural components: `Box`, `Inline`, `FullPageView`, `OverviewPage`
        *   Interactive elements: `Button`, `ButtonGroup`, `Checkbox`, `Radio`, `Select`, `Switch`, `TextField`, `TextArea`, `SearchField`
        *   Data display: `Accordion`, `Badge`, `Banner`, `BarChart`, `Chip`, `DataTable`, `DetailPageModule`, `DetailPagePropertyList`, `DetailPageTable`, `Divider`, `Icon`, `Img`, `LineChart`, `Link`, `List`, `Menu`, `PropertyList`, `Sparkline`, `Spinner`, `Table`, `Tabs`, `TaskList`
        *   View components: `ContextView`, `FocusView`, `OnboardingView`, `SettingsView`, `SignInView`
*   **Add Server-Side Logic**: Implement backend code to validate and process user actions and data, integrate with third-party systems, and handle webhook events.
*   **API Authentication Methods**: Choose the appropriate method for authenticating requests to the Stripe API:
    *   **Platform Key**: The default method using your account's secret API key.
    *   **OAuth 2.0**: An industry-standard protocol for secure authorization.
    *   **Restricted API Key (RAK)**: Generates a permissioned key with specific access for your app.
*   **Authorization Flows**: Implement PKCE OAuth workflows for secure authorization.
*   **Store Secret Credentials and Tokens**: Utilize the Secret Store API to securely persist sensitive data like authentication credentials.
*   **Handle Different Modes**: Adapt your app to work seamlessly with both live mode and sandbox environments for testing.
*   **Enable Sandbox Support**: Configure your public app for sandbox installation to allow users to evaluate its features.
*   **Enable Local Network Access**: Grant permission for your app to access local network resources during development and preview.
*   **App Settings Page**: Create a dedicated page for users to configure their app settings within the Stripe Dashboard.
*   **Onboarding**: Guide users through a smooth and intuitive sign-in and initial setup process.
    *   **OnboardingView Component**: Implement onboarding flows using this dedicated UI component.
*   **Design Patterns**: Follow recommended design patterns for consistency, clarity, and scalability. This includes guidance on:
    *   Action Buttons
    *   Additional Context
    *   Back Link
    *   Communicating State
    *   Demo Content
    *   Empty State
    *   Filter Controls
    *   Full Page Apps
    *   Lists
    *   Loading
    *   Onboarding Flow
    *   Progress Stepping
    *   Redirects
    *   Settings Sign In
    *   Sign In Template
    *   Sign Out
    *   Waiting Screens
*   **Style Your App**: Learn how to style UI components using provided design tokens to match the Dashboard's visual style.
*   **Design Your App**: Get started with design tools, guidelines, and philosophy for creating user-friendly apps.
*   **Developer Tools**: Utilize bundled tools for type-checking, linting, and testing your app's code.

### Migration and Distribution

*   **Migrate an Extension to Stripe Apps**: Understand why and how to migrate legacy extensions to the newer Stripe Apps platform.
*   **Migrate a Plugin to Stripe Apps or Stripe Connect**: Decide on the best migration path for your existing third-party integrations.
    *   **Migrate a Plugin to an OAuth 2.0 App**: Transition your plugin to use OAuth 2.0 for authentication.
    *   **Migrate a Plugin to a RAK App**: Migrate your plugin to use Restricted API Keys (RAKs).
*   **Distribution Options**: Learn how to share your Stripe Apps with users, either privately or publicly on the Stripe App Marketplace.
    *   **Upload and Install Your App**: Make your app available to team members on your Stripe account.
    *   **Test Your App Externally**: Set up and distribute test versions of your app before publication.
    *   **Publish Your App**: Follow the steps to get your app approved for the Stripe App Marketplace.
        *   **Stripe Apps Quality Requirements**: Understand the qualitative requirements for apps listed on the App Marketplace.
    *   **Promote Your App**: Learn how to partner with Stripe to accelerate your app's growth.
*   **Manage Your App's Versions and Releases**: Understand app versioning and releases to ship new versions and manage changes over time.

### Reference

*   **Extension SDK API Reference**: Documentation for the Extension SDK API, including context props and utility functions.
*   **Permissions Reference**: A list of available events and their required permissions for your app.
*   **Route Descriptors**: Learn how to navigate within the Dashboard using route descriptors for soft, context-preserving navigation.
*   **Viewports Reference**: A list of available viewports for Stripe Apps and how users see them.