zendron | Stripe Developers | Page 1

daring hawkBOT Jul 5, 2023, 9:39 PM

#

mint portal Jul 5, 2023, 9:40 PM

#

currently using: "@stripe/stripe-react-native": "^0.28.0",

#

for a better view at the error being thrown

#

in case you need more information, hmu, i've been sitting on this error for ages now 😅

worthy sleet Jul 5, 2023, 9:43 PM

#

👋

#

What integration are you building?

mint portal Jul 5, 2023, 9:43 PM

#

what integration?

worthy sleet Jul 5, 2023, 9:44 PM

#

Ah sorry you said Payment Sheet already

mint portal Jul 5, 2023, 9:44 PM

#

Yup

worthy sleet Jul 5, 2023, 9:44 PM

#

Can you share your Payment Sheet code?

mint portal Jul 5, 2023, 9:44 PM

#

Sure thing, one second

#

    const currentUser = auth().currentUser;

    if (!currentUser) {
      return null;
    } else {
      const token = await currentUser.getIdToken();
      const response = await createPaymentSheet(
        token,
        event.event_uid,
        event.price,
        numberOfTickets,
      );

      const {paymentIntent, ephemeralKey, customer} = await response.json();

      return {
        paymentIntent,
        ephemeralKey,
        customer,
      };
    }
  };

  const initializePaymentSheet = async () => {
    const result = await fetchPaymentSheetParams();

    if (result) {
      const {paymentIntent, ephemeralKey, customer} = result;

      const {error} = await initPaymentSheet({
        merchantDisplayName: 'Placeholder',
        customerId: customer,
        customerEphemeralKeySecret: ephemeralKey,
        paymentIntentClientSecret: paymentIntent,
        // Set `allowsDelayedPaymentMethods` to true if your business can handle payment
        //methods that complete payment after a delay, like SEPA Debit and Sofort.
        allowsDelayedPaymentMethods: false,
        defaultBillingDetails: {
          name: 'Jane Doe',
        },
      });

      if (!error) {
        setLoading(true);
      } else {
        console.log(error);
      }
    }
  };

  const openPaymentSheet = async () => {
    actionSheetRef.current?.hide();
    await initializePaymentSheet();

    const {error} = await presentPaymentSheet();
    setLoading(false);

    if (error) {
      actionSheetRef.current?.show();
    } else {
      Alert.alert('Success', 'Your order is confirmed!');
    }
  };```

worthy sleet Jul 5, 2023, 9:46 PM

#

Can you also show me your StripeProvider?

mint portal Jul 5, 2023, 9:47 PM

#

        publishableKey={
          'pk_test_...'
        }>
        <UserContext.Provider value={[user, setUser]}>
          <NavigationContainer
            theme={{
              colors: {
                primary: '#1875ed',
                background: '#1f1d2b',
                card: '#1f1d2b',
                text: '#fff',
                border: '#1f1d2b',
                notification: '#ff0000',
              },
              dark: true,
            }}>
            <Stack.Navigator
              initialRouteName="Login"
              screenOptions={{headerShown: false}}>
              <Stack.Screen name="Home" component={Home} />
              <Stack.Screen name="Login" component={Login} />
              <Stack.Screen name="Register" component={Register} />
              <Stack.Screen
                name="EnterUserInformation"
                component={EnterUserInformation}
              />
              <Stack.Screen name="AddEvent" component={AddEvent} />
              <Stack.Screen name="Profile" component={Profile} />
              <Stack.Screen name="EditProfile" component={EditProfile} />
              <Stack.Screen name="EventInfo" component={EventInfo} />
            </Stack.Navigator>
          </NavigationContainer>
        </UserContext.Provider>
      </StripeProvider>```

#

That's in my App.tsx

worthy sleet Jul 5, 2023, 9:48 PM

#

Thanks.

#

Thinking

mint portal Jul 5, 2023, 9:48 PM

#

Sure thing, let me know if you have an idea what the problem could be or if you need any more information 😄

worthy sleet Jul 5, 2023, 9:51 PM

#

Can you show me your dependencies in your package.json?

mint portal Jul 5, 2023, 9:51 PM

#

Sure, one sec

worthy sleet Jul 5, 2023, 9:52 PM

#

And have you logged out exactly where you get to before hitting this error?

mint portal Jul 5, 2023, 9:52 PM

#

"dependencies": {
"@invertase/react-native-apple-authentication": "^2.2.2",
"@react-native-async-storage/async-storage": "^1.18.2",
"@react-native-community/geolocation": "^3.0.6",
"@react-native-firebase/app": "^17.5.0",
"@react-native-firebase/auth": "^17.5.0",
"@react-native-firebase/storage": "^18.0.0",
"@react-native-google-signin/google-signin": "^10.0.1",
"@react-navigation/bottom-tabs": "^6.5.7",
"@react-navigation/native": "^6.1.6",
"@react-navigation/native-stack": "^6.9.12",
"@rneui/base": "^4.0.0-rc.7",
"@rneui/themed": "^4.0.0-rc.7",
"@stripe/stripe-react-native": "^0.28.0",
"react": "18.2.0",
"react-hook-form": "^7.43.9",
"react-native": "0.71.8",
"react-native-actions-sheet": "^0.8.29",
"react-native-date-picker": "^4.2.13",
"react-native-dropdown-picker": "^5.4.6",
"react-native-fbsdk-next": "^11.2.1",
"react-native-image-picker": "^5.3.1",
"react-native-linear-gradient": "^2.6.2",
"react-native-maps": "^1.7.1",
"react-native-open-maps": "^0.4.2",
"react-native-qrcode-svg": "^6.2.0",
"react-native-reanimated": "2.17.0",
"react-native-safe-area-context": "^4.5.3",
"react-native-screens": "^3.20.0",
"react-native-snackbar": "^2.6.2",
"react-native-svg": "^13.9.0",
"react-native-vector-icons": "^9.2.0",
"react-native-vision-camera": "^2.15.4",
"vision-camera-code-scanner": "^0.2.0"
},
"devDependencies": {
"@babel/core": "^7.20.0",
"@babel/preset-env": "^7.20.0",
"@babel/runtime": "^7.20.0",
"@react-native-community/eslint-config": "^3.2.0",
"@tsconfig/react-native": "^2.0.2",
"@types/jest": "^29.2.1",
"@types/react": "^18.0.24",
"@types/react-test-renderer": "^18.0.0",
"babel-jest": "^29.2.1",
"eslint": "^8.19.0",
"jest": "^29.2.1",
"metro-react-native-babel-preset": "0.73.9",
"prettier": "^2.4.1",
"react-test-renderer": "18.2.0",
"typescript": "4.8.4"
},

worthy sleet Jul 5, 2023, 9:52 PM

#

Is it erroring specifically on initPaymentSheet?

mint portal Jul 5, 2023, 9:52 PM

#

worthy sleet And have you logged out exactly where you get to before hitting this error?

I get it on this line: const {error} = await presentPaymentSheet();

worthy sleet Jul 5, 2023, 9:53 PM

#

Ah okay interesting

mint portal Jul 5, 2023, 9:53 PM

#

Not a 100% sure anymore, so gonna test it again

#

Just tested it again and it is erroring on presentPaymentSheet() as I said

worthy sleet Jul 5, 2023, 9:58 PM

#

Kk

#

Can you share a PaymentIntent as well?

mint portal Jul 5, 2023, 9:58 PM

#

Sure, like the id of one?

worthy sleet Jul 5, 2023, 9:58 PM

#

I just upgraded my sample as well since I last was on 0.26.0

#

So I'll see if mine will run on 0.28.0

#

Yep the ID works

mint portal Jul 5, 2023, 9:58 PM

#

Ok sounds good

#

pi_3NQdCkCOddejTQWT09xJULYa

#

Like there are loads of payment intents being created, but none of them are actually being fulfilled, since the payment sheet never opens 😅

worthy sleet Jul 5, 2023, 9:59 PM

#

Yep that checks out

#

Ugh I'm hitting lots of build errors when trying to upgrade

mint portal Jul 5, 2023, 10:08 PM

#

All good, I'm not in a hurry, just thought that maybe a second pair of eyes would be nice to have after being stuck at this problem for hours

worthy sleet Jul 5, 2023, 10:09 PM

#

Yeah I'll keep messing with mine but the quickest way to figure stuff like this out is actually to build a fresh project and only add your Stripe React Native code

#

It almost always comes down to a dependency conflict

#

Your code looks all fine to me

#

So this could definitely be a bug on our end where we should handle some dependency better

#

But the question is... which one.

mint portal Jul 5, 2023, 10:10 PM

#

Yeah for sure 😂

#

I'll try it as well

#

I thought of it, being a dependency issue, but I wasn't quite sure, since the error message didn't indicate any conflicting dependencies and more like some issues with the library itself

worthy sleet Jul 5, 2023, 10:11 PM

#

The other thing you could try is to just clone the sample app (https://github.com/stripe/stripe-react-native/blob/master/CONTRIBUTING.md#running-the-example-app)

#

And make sure that runs fine on your machine

mint portal Jul 5, 2023, 10:11 PM

#

will try!!

worthy sleet Jul 5, 2023, 10:12 PM

#

Yeah do a quick check on that. I don't think it is solely an issue with the library otherwise it would most likely be more widespread.

#

Though it is still possible (which I can check on once I get my upgrade to work)

mint portal Jul 5, 2023, 10:12 PM

#

Sure, I'll try it as well 😄

daring hawkBOT Jul 5, 2023, 10:25 PM

#

mint portal Jul 5, 2023, 10:39 PM

#

worthy sleet Ugh I'm hitting lots of build errors when trying to upgrade

same thing here 😅 trying to resolve them one by one, hopefully you have more luck

#

but not when trying to upgrade, i get them when trying to just build the example

worthy sleet Jul 5, 2023, 10:40 PM

#

Yeah I gave up... trying to build a fresh project

#

Ah I haven't tried to build example in a bit

mint portal Jul 5, 2023, 10:40 PM

#

LOL

#

Yeahh, btw it shouldn't make a big difference, but I wasn't testing on a simulator but rather on a physical device, just fyi

worthy sleet Jul 5, 2023, 10:41 PM

#

Ah interesting

#

Shouldn't matter. You could try on simulator to just make sure

mint portal Jul 5, 2023, 10:41 PM

#

Will do 👍

worthy sleet Jul 5, 2023, 10:41 PM

#

The other thing you could try doing is actually cloning your current project and downgrading

mint portal Jul 5, 2023, 10:41 PM

#

downgrading react?

#

or stripe package

worthy sleet Jul 5, 2023, 10:43 PM

#

The Stripe package. The error is coming from the underlying iOS SDK. Which was upgraded in the Stripe React Native SDK in 0.27.2: https://github.com/stripe/stripe-react-native/blob/master/CHANGELOG.md#0272---2023-05-15

#

So a test you could run would be downgrading to 0.27.0 and then pod install and then see what happens with that slightly older version.

#

Definitely not a great answer

#

But this stuff is such a pain

mint portal Jul 5, 2023, 10:44 PM

#

Yeahh I can see that 😂

#

I'll try it out

#

And thanks for your help so far, really appreciate it!!

worthy sleet Jul 5, 2023, 10:45 PM

#

Happy to help. The last thing that I'd recommend is actually posting an Issue onto the React Native Github (https://github.com/stripe/stripe-react-native) with the full details of your dependencies and your code and the error. Our React Native Eng team does monitor that and they would take a look over the next couple days if an Issue was posted

mint portal Jul 5, 2023, 10:46 PM

#

Perfect, might be doing that tomorrow morning, if I/we can't figure it out today 😄

mint portal Jul 5, 2023, 11:06 PM

#

worthy sleet So a test you could run would be downgrading to 0.27.0 and then pod install and ...

Well, same error with the older version as well

#

gonna go back to the newer version then, since the issue lies somewhere else apparently

#

Still really weird that it works just fine on Android but not on iOS

chrome island Jul 5, 2023, 11:09 PM

#

Hi 👋

Unfortunately I don't have a working React Native Integration to test with. Personally I do most of my development in Android as I find iOS syntax really confusing.

#

I know that's not a great answer though because all of this "should just work"

mint portal Jul 5, 2023, 11:10 PM

#

Hi Snufkin, no worries at all 😄 iOS syntax can indeed be really confusing

mint portal Jul 5, 2023, 11:12 PM

#

chrome island I know that's not a great answer though because all of this "should just work"

Yeahh, I'm probably gonna post an Issue onto the Stripe React Native Github Repository, but I'm too tired right now, so might do that tomorrow. Maybe @worthy sleet can figure out what the issue is, but he was fighting with building errors earlier, which are literally just pain, so yeah, we'll see 😄

#

It's just a really frustrating issue, because I just can't figure it out

chrome island Jul 5, 2023, 11:15 PM

#

I can understand that. I've gone down some dependency rabbit holes by accepting Android Studio's recommended upgrades. I hope you are able to resolve it and definitely raise the issue in GH! If there are some dependency issues with the stripe-react-native that will help it get addressed.

#zendron