[Expo][iOS] App crashes on presentPaymentSheet with React Navigation

Hi, calling presentPaymentSheet causes my app to crash with no useful error messages. I’m getting the error, Service exited due to SIGABRT.

I am able to get the paymentOption from initPaymentSheet and am not receiving any errors with that function, so I believe I have set up the StripeProvider correctly.

I have also confirmed that I have successfully set paymentIntent, ephemeralKey, and customerId.

Here is the relevant code:

Initializing Payment

useEffect(() => {
    const initializePaymentSheet = async () => {
      console.log('initializing payment sheet');
      setState({ ...state, paymentSheetLoading: true });
      const variables = { phone, email, customerId, products, promo };
      const { paymentIntent, ephemeralKey, customer } = await fetchPaymentSheetParams(variables);

      const paymentVariables = {
        customerId: customer,
        customerEphemeralKeySecret: ephemeralKey,
        paymentIntentClientSecret: paymentIntent,
        customFlow: true,
        merchantDisplayName: 'Flyby',
        applePay: true,
        merchantCountryCode: 'US',
        googlePay: true,
        testEnv: true,
      };

      console.log(paymentVariables);

      const { paymentOption, error } = await initPaymentSheet(paymentVariables);

      if (!error) {
        console.log('no error');
        setState({
          ...state,
          paymentMethod: paymentOption,
          paymentSheetEnabled: true,
          clientSecret: paymentIntent,
          paymentSheetLoading: false,
        });
      } else {
        setState({ ...state, paymentSheetLoading: false });
        console.error(error);
      }
    };
    initializePaymentSheet();
  }, []);

Choosing payment object

const choosePaymentOption = async () => {
    if (!clientSecret) {
      return;
    }
    console.log('choosing payment option');
    console.log(clientSecret);

    let results;
    try {
      results = await presentPaymentSheet({
        confirmPayment: false,
        clientSecret: clientSecret,
      });
    } catch (e) {
      console.log(e);
    }
    const { error, paymentOption } = results;

    console.log(paymentOption);

    if (error) {
      console.log('error', error);
    } else if (paymentOption) {
      setState({
        ...state,
        paymentMethod: {
          label: paymentOption.label,
          image: paymentOption.image,
        },
      });
    } else {
      setState({ ...state, paymentMethod: null });
    }
  };

Component

<TouchableOpacity onPress={choosePaymentOption} disabled={!paymentSheetEnabled}>
     <View>
          <SectionTitle>Add Payment Method</SectionTitle>
          <FontAwesomeIcon icon={faPlus} />
     </View>
</TouchableOpacity>

I am using React Navigation. I have read that presentPaymentSheet doesn’t work in modals, and my screen is not a modal.

Any ideas or suggestions on how to debug this would be very much appreciated!!

[bbenson09]

This was the issue! Thanks for your help!

[arekkubaczkowski]

So the docs says that you can’t use latest version of library within Expo. https://github.com/stripe/stripe-react-native/blob/master/CHANGELOG.md#014---2021-06-04---expo-sdk-4200