Bug: Stripe Payment Sheet Hangs and Freezes App

[junaid7898]

🐛 Bug: Stripe Payment Sheet Hangs and Freezes App

---

Problem

Whenever I click the "Edit/Add Payment Method" button, the Stripe payment sheet appears from the bottom of the screen, but it keeps loading indefinitely. After a few seconds, the entire app hangs — especially on the emulator — and becomes unresponsive.

---

Expected Behavior

• The payment sheet should fully load and allow the user to enter payment information.
• If there's an issue, it should fail gracefully and return control to the app.

---

Actual Behavior

• The sheet appears but gets stuck with a loading spinner.
• The app becomes unresponsive shortly after.
• I have to force close the app.
• Xcode shows a crash when running on iOS.

What I’ve Tried & Environment

• Cleaned the build:

  cd android && ./gradlew clean
  

• Removed node_modules and reinstalled:

  rm -rf node_modules && npm install
  

• Rebuilt the app

• Reinstalled pods in iOS:

  cd ios && pod install
  

• Verified backend response returns valid:

  • setupIntent
  • ephemeralKey
  • customerId

---

Environment

• React Native version: 0.72.6
• @stripe/stripe-react-native: ^0.35.0
• @stripe/react-stripe-js: ^2.4.0
• @stripe/stripe-js: ^2.4.0
• Platform: iOS
• Device: Emulator

---

Code Sample

import React, { useEffect, useState } from 'react';
import { Alert, View } from 'react-native';
import { useStripe } from '@stripe/stripe-react-native';
import { Button } from 'react-native-paper';
import { useSelector } from 'react-redux';
import { axiosInstance } from '../path/to/axiosInstance';

const PaymentComponent = ({ onPress }) => {
  const { initPaymentSheet, presentPaymentSheet } = useStripe();
  const { user } = useSelector(state => state.user);
  const [customerId, setCustomerId] = useState(null);

  const fetchPaymentSheetParams = async () => {
    const response = await axiosInstance.post('/payment/sheet', {
      name: `${user.firstName} ${user.lastName}`,
      email: user.email,
      customerId: customerId || undefined,
    });

    const { setupIntent, ephemeralKey, customer } = response.data;

    if (!customerId) {
      setCustomerId(customer);
    }

    return { setupIntent, ephemeralKey, customer };
  };

  const initializePaymentSheet = async () => {
    const { setupIntent, ephemeralKey, customer } = await fetchPaymentSheetParams();

    const { error } = await initPaymentSheet({
      merchantDisplayName: 'Your App',
      customerId: customer,
      customerEphemeralKeySecret: ephemeralKey,
      setupIntentClientSecret: setupIntent,
      applePay: false,
    });

    if (error) {
      Alert.alert('Error', error.message || 'An error occurred');
    }
  };

  const openPaymentSheet = async () => {
    const { error } = await presentPaymentSheet();

    if (error) {
      Alert.alert(`Error code: ${error.code}`, error.message);
      initializePaymentSheet();
      onPress?.(customerId);
    } else {
      Alert.alert('Success', 'Payment method successfully set up!', [
        {
          text: 'OK',
          onPress: () => {
            initializePaymentSheet().then(() => {
              onPress?.(customerId);
            });
          },
        },
      ]);
    }
  };

  useEffect(() => {
    initializePaymentSheet();
  }, []);

  return (
    <View style={{ marginTop: 10, flex: 1 }}>
      <Button
        mode="contained"
        onPress={openPaymentSheet}
        style={{ alignSelf: 'center' }}
      >
        Edit/Add Payment Method
      </Button>
    </View>
  );
};

export default PaymentComponent;

Screenshots

Xcode crash log output

Frozen screen in emulator

[slomelirdz]

I’m experiencing this exact same issue while working on the PaymentSheet implementation. I’m testing it on an iPhone 15 Pro Max running iOS 18.4.1 and getting the same behavior. Any idea how to fix this or what might be causing it? Thanks!

[tianzhao-stripe]

Hi @junaid7898 and @slomelirdz, in order for us to better assist you with your integration issues, I'd love to point you to our support channel on our Discord, where we have engineers ready to help you 24/5. Thank you!