presentPaymentSheet UI Doesn't Appear, Screen Dims, iOS only

[WelshDev]

Describe the bug On iOS when calling presentPaymentSheet, this does not display the UI. The screen slightly dims and stays like this forever. Tapping on the top half cancels the payment. Tapping where the UI should be visible, this causes the keyboard to appear and/or a country select dropdown. It's as if the fields are there but they're just invisible. This exact same code works just fine on Android. This is being developed on an iPhone Xr but has also been submitted and deployed via TestFlight for testing on other devices and they're all seeing the same. According to Stripe the payment intent and all of that is being created just fine.

Expected behavior On android devices the payment UI appears as expected and I can complete a payment without issue. This is only an issue on iOS devices. I would expect the UI to appear which allows you to enter your card details. In the attached video, when the screen goes light again, that's me tapping the top 50% or so of the screen which causes the payment to cancel.

Screenshots https://github.com/stripe/stripe-react-native/assets/57954883/8ebdd62a-9607-4a54-a4e6-d495987f173c

Device & Versios:

• Device: iPhone Xr
• OS: iOS 17.2
• "@stripe/stripe-react-native": "^0.14.0"
• "react": "17.0.2"
• "react-native": "0.68.2"

My Code

        // Grab params we need from server
        const {
            error,
            paymentIntent,
            ephemeralKey,
            customer,
        } = await fetchPaymentParams();

        // Got an error?
        if(error)
        {
            // Grab the error
            setCheckoutError(error.message);
        }
        else
        {
            // Initiate payment sheet
            const { error } = await initPaymentSheet({
                customerId: customer,
                customerEphemeralKeySecret: ephemeralKey,
                paymentIntentClientSecret: paymentIntent,
                merchantDisplayName: 'Example Ltd'
            });

            // Got an error?
            if(error)
            {
                // Grab the error
                setCheckoutError(error.message);
            }
            else
            {
                // Display the payment UI
                const { error } = await presentPaymentSheet();

                // Got an error?
                if(error)
                {
                    // Grab the error
                    setCheckoutError(error.message);
                }
                else
                {
                    // Navigate to success
                    navigation.navigate('PurchaseSuccess');
                }
            }
        }
    };```

[WelshDev]

This seems to be the same as https://github.com/stripe/stripe-react-native/issues/1581

[loveheenavasu]

Hi @WelshDev , I was facing the same issue.

below updates worked for me

• updated my xcode(latest update) to 15.3 , earlier it was 15.1
• updated my @stripe/stripe-react-native to latest version 0.37 , earlier it was 0.17
• delete node modules and pods and derived data
• reinstalled node_modules - yarn install
• reinstalled pods - cd ios > pod install
• XCode :: clean the Build Folder and then rebuilt it.

I hope it will solve your problem too , and if you find any other solution kindly do mention that.

Happy Coding

[mahendraios]

I have tried all the above mentioned steps, but still I'm not seeing PaymentSheet. @loveheenavasu

[charliecruzan-stripe]

This is due to the older version of stripe-react-native. If you're seeing this on v0.37.0, can you please link a project that reproduces this behavior?