> ## Documentation Index
> Fetch the complete documentation index at: https://docs.launchtoday.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Stripe

> Accept payments, manage subscriptions, and handle billing with Stripe

# Stripe Integration

Stripe is the payment provider used for direct billing in Launch. It handles
one-time purchases, subscriptions, and customer management, while the app and
API coordinate paywalls, checkout, and entitlement updates.

Launch includes a production-ready Stripe integration with a paywall screen,
webhook handling, and subscription management. This gives you a full billing
flow without wiring everything from scratch.

<Frame>
  <img src="https://mintlify.s3.us-west-1.amazonaws.com/launch/images/798shots_so.png" alt="Stripe Paywall Screen" />
</Frame>

## What's Included

<CardGroup cols={2}>
  <Card title="Paywall Screen" icon="credit-card">
    Beautiful, customizable paywall with support for yearly, monthly, and
    one-time purchases.
  </Card>

  <Card title="Apple Pay & Google Pay" icon="apple">
    Native payment buttons for faster checkout on iOS and Android.
  </Card>

  <Card title="Webhook Handling" icon="webhook">
    Complete webhook setup for subscription events, payment success/failure, and
    more.
  </Card>

  <Card title="tRPC API" icon="code">
    Type-safe API endpoints for creating payment intents, checkout sessions, and
    managing subscriptions.
  </Card>

  <Card title="Database Schema" icon="database">
    Prisma models for customers, subscriptions, and payment history.
  </Card>

  <Card title="SelectCard Component" icon="square-check">
    Reusable selection card component matching the app's design system.
  </Card>
</CardGroup>

## Paywall Features

The included paywall screen lives in `apps/mobile/app/payments/stripe.tsx` and
supports:

* **Multiple pricing tiers** - Yearly, monthly, and lifetime options
* **Dynamic pricing** - Pulls products directly from your Stripe dashboard
* **Apple Pay & Google Pay** - Native payment buttons for faster checkout
* **Dark mode** - Fully themed for light and dark modes
* **Customizable content** - Easy to edit title, benefits, and branding
* **Terms & Privacy links** - Required for App Store compliance
* **Haptic feedback** - Native feel with tactile responses
* **Reusable SelectCard component** - Consistent design across your app

## Setup Requirements

The Stripe paywall only shows the “setup required” state when:

* The Stripe env vars are missing, **or**
* The Stripe product list loads successfully but contains zero products.

If the API request fails, the screen will display a separate error message so
you can distinguish missing config from backend/API issues.

## Quick Start

<Steps>
  <Step title="Set up Stripe">
    Create products in your Stripe dashboard and configure environment
    variables. [View Setup Guide →](/payments/stripe-setup)
  </Step>

  <Step title="Configure webhooks">
    Set up webhook endpoints to handle subscription events. [View Webhook Guide
    →](/payments/stripe-webhooks)
  </Step>

  <Step title="Customize the paywall">
    Update the paywall copy and pricing labels in
    `apps/mobile/app/payments/stripe.tsx` to match your branding.
  </Step>
</Steps>

## File Structure

Key integration points:

* API endpoints: `apps/api/src/routers/stripe.ts`
* Webhook handler: `apps/api/src/routes/stripe-webhooks.ts`
* Stripe client: `apps/api/src/lib/stripe.ts`
* Paywall UI: `apps/mobile/app/payments/stripe.tsx`

## Webhooks

The API includes webhook handling for Stripe events like subscription updates,
payment success/failure, and customer lifecycle changes. See
`apps/api/src/routes/stripe-webhooks.ts` for the event coverage.

## Database schema

Stripe data is stored in Prisma models dedicated to customers, subscriptions,
and payment history. Review the models in
`apps/api/prisma/schema.prisma` and the reference guide at
`/payments/database-schema`.

## Customizing the paywall

The paywall content and layout live in `apps/mobile/app/payments/stripe.tsx`.
Update the copy, pricing labels, and terms/privacy links to match your brand.

## Next Steps

<CardGroup cols={2}>
  <Card title="Setup Guide" icon="gear" href="/payments/stripe-setup">
    Environment variables, ngrok, and product creation.
  </Card>

  <Card title="Webhooks" icon="webhook" href="/payments/stripe-webhooks">
    Handle subscription events and payment notifications.
  </Card>

  <Card title="API Reference" icon="code" href="/payments/stripe-api">
    tRPC endpoints for payments and subscriptions.
  </Card>

  <Card title="Database Schema" icon="database" href="/payments/database-schema">
    Prisma models for payment data.
  </Card>
</CardGroup>