Issues with Payment Sheet not appearing

[trex-quo]

Describe the bug
Calling initPaymentSheet() and presentPaymentSheet() in immediate succession does not bring up the Payment Sheet. Adding a short sleep() statement (~1000ms) in between the two calls resolves the issue.

Additionally, calling presentPaymentSheet() from a modal crashes the app.

To Reproduce
Steps to reproduce the behavior:

  const onSubscribePress = async () => {
    let {error} = await initPaymentSheet({
      paymentIntentClientSecret: clientSecret,
      googlePay: true,
      merchantCountryCode: 'US',
      testEnv: true,
    });

    if (error) {
        //handle error
    }

    //without this line, the payment sheet will not open
    await sleep(1000);

    try {
      console.log('presenting payment sheet');
      ({error} = await presentPaymentSheet({
        clientSecret: clientSecret,
      }));
    } catch (e) {
      console.log({e});
      setLoading(false);
      return;
    }
  };

Expected behavior
It seems logical to choose not make a backend call until the client taps the payment button, meaning that the init and present call would fall under the same function. Sleeping is not an ideal solution to this problem, so it would be nice if the payment sheet was presented properly without having to do this.

It would also be helpful if we could present the payment sheet from within a modal. As is, we need to redesign the app specifically for Android in order to present the payment sheet outside of our subscribe screen, which is contained in a modal.

Desktop (please complete the following information):

• OS: macOS Big Sur
• Version 11.2.3

Smartphone (please complete the following information):

• Device: iPhone 11, Galaxy S10
• @stripe/stripe-react-native v0.1.4

[tayzlor]

Just a quick comment to mention I'm experiencing the same issue when you try and call both the initialise function and the present function off the back of a button press, and can confirm that a small delay does resolve the issue.

Currently doing some further troubleshooting to understand why and will provide any more info when I have it!

[tayzlor]

So looks like this may be occurring because initPaymentSheet uses fragment commit() to update the paymentSheetFragment var in

stripe-react-native/android/src/main/java/com/reactnativestripesdk/StripeSdkModule.kt

Lines 273 to 275 in 89042f4

	activity.supportFragmentManager.beginTransaction()
	.add(fragment, "payment_sheet_launch_fragment")
	.commit()

The problem with commit() (in this scenario) is that it just schedules the commit() but the commit does not happen immediately therefore if both initPaymentSheet and presentPaymentSheet are called in quick succession paymentSheetFragment can still be null and the sheet won't render.

Android API 24 added a commitNow function which runs the commit synchronously.

Possible solution to the above would be to use commitNow() during the initPaymentSheet method?

[thorsten-stripe]

Thanks for investigating, we'll take a look.

[manish-shukla01]

i ran into the same issue. although even with sleep for 2 seconds, issue did not disappear. i tried only with test card. need to try with real card, not sure if it will be any different with real card. i can try to change the UI little bit so these action dont happen right after one another but is this problem going to be fixed. if yes, i can leave as is.

[jalbertsr]

This same issue keeps happening to me, and I'm following exactly as it is explained in your docs. I was using version 1.4 and I did saw this issue was apparently solved in 1.5, so I update to 2.0.0. But it keeps happening :(

I'm using the StripeProvider wrapping my component, inside my useEffect you can find the initializePaymentSheet function that first fetches the customerId, customerEphemeralKeySecret and paymentIntentClientSecret and just after having those I call initPaymentSheet still inside my useEffect. Only after the user presses the button to pay, I do call presentPaymentSheet, it doesn't matter the time I wait, it always ends with the same (not very meaningful) error.

are we sure this is 100% fixed @thorsten-stripe ? any hints?

thanks in advance.

[schoenbl]

Same thing is happening to me. OP's solution works as well.