Stripe for React-Native presentPaymentSheet has the wrong data

Question

I have a bug that I don't understand how to solve.

I have a component which is supposed to open a Payment sheet to let the user pay using the code below.

const StripePayScreen = React.forwardRef((props: Props, ref) => {
  const { initPaymentSheet, presentPaymentSheet } = useStripe();
  const intl = useIntl();

  React.useImperativeHandle(ref, () => ({
    openPaymentSheet: async (slotId: string): Promise<StripeResult> => {
      try {
        const { data: result } = await checkoutDocking(slotId);
        const { clientSecret, customerId, ephemeralKey } = result;

        await initPaymentSheet({
          customerId: customerId,
          customerEphemeralKeySecret: ephemeralKey,
          paymentIntentClientSecret: clientSecret,
          applePay: true,
          merchantCountryCode: 'BE',
          googlePay: true,
        });

        const { error: err } = await presentPaymentSheet();

        if (err) {
          Alert.alert(`Error code: ${err.code}`, err.message);
          return { success: false };
        } else {
          return { success: true, message: intl.formatMessage({ defaultMessage: 'Payment successful', id: 'eOTip2' }) };
        }
      } catch (e: any) {
        console.log(e.response);
        return {
          success: false,
          message: intl.formatMessage({ defaultMessage: 'an error happened during the payment', id: 'JUwdbh' })
        };
      }
    }
  }));

  return <></>;
});

StripePayScreen.displayName = 'StripePayScreen';

export default StripePayScreen;

The necessary keys and ids are fetched from an api call which is working correctly and the result of the call is as expected in the front-end. But it seems that the presentPaymentSheet function does not take the data from the initPaymentSheet just called before but from the previous call to this function. I'm sure of this because the amount in the view is the one from the previous payment and not the one I expect. This is causing differents bugs like:

• As I said, the price is not the right one.

• It's trying to resolve the payment intent from the previous payment because I assume that it is using the clientSecret from the previous call.

• If there hasn't been any initPaymentSheet called before (did not call the function at all yet), the view just load infinitely and you need to cancel it to load the "correct" view after that.

I'm using expo 42 and stripe-react-native: 0.1.4

Does someone have any clue about it?

(It's the first time I post a question on StackOverflow, so don't hesitate to tell me if I did something wrong in this post.)

Answer 1

Figured it out myself.

I have just added a wait between the initPaymentSheet and presentPaymentSheet as mentioned here https://github.com/stripe/stripe-react-native/issues/315.

It seems to use a queue of some sort internally which mess up the process if it is running too fast.