Adding Stripe Payments to an AI-Generated React Native App

Stripe or IAP? The 2-second rule

Apple’s rule is simpler than most blog posts make it. Ask: “Is the thing being sold consumed inside my app?”

• Yes (digital): pro features, unlock levels, subscription tier, in-app coins. Must use IAP.
• No (physical or out-of-app service): products shipped to the user, booking an Uber ride, paying a marketplace seller, food delivery, event tickets, personal training. Use Stripe.

The 30% tax only applies to digital. Use Stripe whenever you legally can.

Prerequisites

• Stripe account with a test mode key and a plan to complete the live activation checklist before launch
• A backend endpoint (Supabase Edge Functions, Expo API Routes, or your own server)
• Expo project using EAS Build — payments do not run in Expo Go
• An Apple Merchant ID if you plan to support Apple Pay

Step 1: install and configure

npx expo install @stripe/stripe-react-native

# app.json plugins:
# "plugins": [
#   ["@stripe/stripe-react-native", {
#     "merchantIdentifier": "merchant.com.yourapp",
#     "enableGooglePay": true
#   }]
# ]

# Create a dev build:
eas build --profile development --platform all

Step 2: wrap your app in StripeProvider

// app/_layout.tsx (Expo Router):
import { StripeProvider } from '@stripe/stripe-react-native';
import { Slot } from 'expo-router';

export default function RootLayout() {
  return (
    <StripeProvider
      publishableKey={process.env.EXPO_PUBLIC_STRIPE_PK!}
      merchantIdentifier="merchant.com.yourapp"
    >
      <Slot />
    </StripeProvider>
  );
}

Use the publishable key (pk_test_...). The secret key never appears in the client.

Step 3: backend endpoint to create PaymentIntents

// Supabase Edge Function or Node API:
import Stripe from 'stripe';
const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!);

export async function POST(req: Request) {
  const { amount, userId } = await req.json();

  const customer = await stripe.customers.create({
    metadata: { userId },
  });

  const paymentIntent =
    await stripe.paymentIntents.create({
      amount, // cents
      currency: 'usd',
      customer: customer.id,
      automatic_payment_methods: { enabled: true },
    });

  return Response.json({
    clientSecret: paymentIntent.client_secret,
    customerId: customer.id,
    ephemeralKey: (await stripe.ephemeralKeys.create(
      { customer: customer.id },
      { apiVersion: '2024-12-18.acacia' }
    )).secret,
  });
}

Step 4: present PaymentSheet on checkout

import { useStripe } from '@stripe/stripe-react-native';

const { initPaymentSheet, presentPaymentSheet } =
  useStripe();

async function onCheckout() {
  const res = await fetch('/api/payment-intent', {
    method: 'POST',
    body: JSON.stringify({ amount: 2999, userId }),
  });
  const data = await res.json();

  await initPaymentSheet({
    paymentIntentClientSecret: data.clientSecret,
    customerId: data.customerId,
    customerEphemeralKeySecret: data.ephemeralKey,
    merchantDisplayName: 'Your Brand',
    applePay: { merchantCountryCode: 'US' },
    googlePay: {
      merchantCountryCode: 'US',
      testEnv: __DEV__,
    },
  });

  const { error } = await presentPaymentSheet();
  if (!error) {
    // Payment succeeded — navigate to success screen.
  }
}

PaymentSheet handles card entry, Apple Pay, Google Pay, saved cards, and 3D Secure. You write the success handler; everything else is Stripe.

Step 5: webhooks for order reliability

Never trust the client to confirm payment. Stripe sends webhooks to a URL you expose; your backend is the source of truth for order status.

• payment_intent.succeeded — mark the order paid, trigger fulfillment.
• payment_intent.payment_failed — notify the customer, allow retry.
• charge.refunded — update order status.
• Verify the Stripe signature on every webhook — stripe.webhooks.constructEvent.

Testing

• Use 4242 4242 4242 4242 as the test card — any future date, any CVC.
• Test 3D Secure with 4000 0027 6000 3184.
• Apple Pay sandbox requires a real Apple ID signed into a physical device.
• Google Pay in test mode uses Stripe test cards on Android devices signed into Google Pay.

Common gotchas

• Forgetting the merchant identifier in app.json → Apple Pay button never appears.
• Mixing test and live keys between client and backend. Both must match.
• Trusting the client to mark orders paid. Always wait for the webhook.
• Not saving the Stripe Customer ID. Required for saved cards and subscriptions.
• Forgetting to enable Apple Pay in the Xcode capabilities. Simple to miss; breaks silently.

Faster path: scaffold it in the prompt

Apps generated via ShipNative can include the Stripe client-side plumbing if you describe your monetization in the initial prompt — e.g., “Checkout via Stripe PaymentSheet with Apple Pay.” You still wire up the backend endpoints and webhooks yourself, but the RN-side code ships pre-wired and tested.