Skip to main content

​
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.
Stripe Paywall Screen

​
What’s Included

Paywall Screen

Beautiful, customizable paywall with support for yearly, monthly, and one-time purchases.

Apple Pay & Google Pay

Native payment buttons for faster checkout on iOS and Android.

Webhook Handling

Complete webhook setup for subscription events, payment success/failure, and more.

tRPC API

Type-safe API endpoints for creating payment intents, checkout sessions, and managing subscriptions.

Database Schema

Prisma models for customers, subscriptions, and payment history.

SelectCard Component

Reusable selection card component matching the app’s design system.

​
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

1

Set up Stripe

Create products in your Stripe dashboard and configure environment variables. View Setup Guide →
2

Configure webhooks

Set up webhook endpoints to handle subscription events. View Webhook Guide →
3

Customize the paywall

Update the paywall copy and pricing labels in apps/mobile/app/payments/stripe.tsx to match your branding.

​
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

Setup Guide

Environment variables, ngrok, and product creation.

Webhooks

Handle subscription events and payment notifications.

API Reference

tRPC endpoints for payments and subscriptions.

Database Schema

Prisma models for payment data.