Skip to content

💳 Stripe

Add payment processing keys to your environment.

⚠️ Don't want to use Stripe? If you don't need payment processing, you can remove Stripe by:

  1. Remove ExpoStripeProvider from your app layout (app/_layout.tsx):
// Remove this wrapper:
// <ExpoStripeProvider>
 
// Keep only:
<RevenueCatProvider>
  <QueryClientProvider client={queryClient}>
    <ThemeProvider>
      <AuthProvider>
        <AppInitializer>
          {/* Your app content */}
        </AppInitializer>
      </AuthProvider>
    </ThemeProvider>
  </QueryClientProvider>
</RevenueCatProvider>
  1. Remove Stripe plugin from app.json - delete this entire plugin block:
// Remove this entire block:
[
  "@stripe/stripe-react-native",
  {
    "merchantIdentifier": "merchant.com.your.app",
    "publishableKey": "pk_test_your_publishable_key_here"
  }
]
  1. Skip this entire setup page

🔑 Create Stripe Account

1. Sign Up

  1. Go to stripe.com
  2. Create your account
  3. Complete business verification (for live payments)

2. Get API Keys

  1. Go to Developers → API Keys
  2. Copy your Publishable key to .env.local:
EXPO_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_your_publishable_key
  1. Copy your Secret key to supabase/functions/.env:
STRIPE_SECRET_KEY=sk_test_your_secret_key

🔗 Setup Webhooks

1. Create Webhook Endpoint

  1. Go to Developers → Webhooks
  2. Click "Add endpoint"
  3. URL: Use your Supabase URL from step 2: https://your-project-id.supabase.co/functions/v1/stripe-webhook
  4. Select events:
    • payment_intent.succeeded
    • customer.subscription.created
    • customer.subscription.updated
    • customer.subscription.deleted
  5. Click "Add endpoint"

2. Get Webhook Secret

  1. Click on your created webhook
  2. Copy the Signing secret and add it to your supabase/functions/.env file:

Add the Stripe secret keys to your supabase/functions/.env file:

STRIPE_SECRET_KEY=sk_test_your_secret_key
STRIPE_WEBHOOKS_SECRET=whsec_your_webhook_secret

🍎 Configure Apple Merchant ID

1. Create Merchant ID in Apple Developer

  1. Go to Apple Developer Console
  2. Certificates, Identifiers & Profiles → Identifiers
  3. Click "+" → Merchant IDs
  4. Create merchant ID: merchant.com.your.app
  5. Description: "Your App Payments"
  6. Register and Done

2. Configure app.json

Add the Stripe plugin to your app.json:

{
  "expo": {
    "plugins": [
      [
        "@stripe/stripe-react-native",
        {
          "merchantIdentifier": "merchant.com.your.app",
          "publishableKey": "pk_test_your_publishable_key_here"
        }
      ]
    ]
  }
}
Note:
  • Replace merchant.com.your.app with your actual merchant ID
  • Replace pk_test_your_publishable_key_here with your Stripe publishable key from step 2

3. Rebuild Native Code

After modifying app.json, rebuild the native code:

# Clean rebuild to apply plugin changes
npx expo prebuild --clean

Important: This step is required whenever you modify plugins in app.json.

✅ Environment Updated

Your .env.local should now include:

EXPO_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_...

Your supabase/functions/.env should now include:

STRIPE_SECRET_KEY=sk_test_...
STRIPE_WEBHOOKS_SECRET=whsec_...

🎯 Next Step

Continue to 📧 Resend to setup email service.

Step 7/11 Complete ✅

Stripe payments configured!

📚 Additional Resources

Official Documentation

Video Tutorials