currently, i am trying to implement Stripe with subscription payment in react native. I use @stripe/stripe-react-native library. I made the back-end which create customer and subscription. The back-end works as it returns customer id and secretClient. I wrap the whole App with StripeProvider. The initPaymentSheet works but the presentPaymentSheet does not work as it return the error in the title .

I search on internet and the solution is to modify the native code of android. Does anyone here ever meet this problem and knows how to solve it without modifying the android native code ?

Here are my code snippet

1. In the App.js

    <StripeProvider
      publishableKey={process.env.EXPO_PUBLIC_STRIPE_PUBLISHABLE_KEY}
    >
      <NavigationContainer theme={MyTheme}>
        <RootNavigation />
      </NavigationContainer>
    </StripeProvider>

2. The file i need to display payment sheet of stripe

  async function handleEditPaymentMethod() {
    const success = await setupStripePaymentSheet();
    if (success) {
      await openStripeCheckout();
    }
  }

          <ButtonExtend onPress={handleEditPaymentMethod} >
            <Text>
              Upgrade
            </Text>
          </ButtonExtend>

3. The file which i implement initPaymentSheet and presentPaymentSheet and api call

import {
  initPaymentSheet,
  presentPaymentSheet,
} from "@stripe/stripe-react-native";
import { supabase } from "./supabase";

const fetchStripekeys = async () => {
  const { data, error } = await supabase.functions.invoke("stripe-subscription");
  if (error) {
    return false;
  }

  return data;
};

export const setupStripePaymentSheet = async (totalAmount) => {
  try {
    const { subscriptionId, clientSecret } = await fetchStripekeys(totalAmount);

    if (!subscriptionId || !clientSecret) {
      return false;
    }

    const { error } = await initPaymentSheet({
      paymentIntentClientSecret: clientSecret,
      customerId: subscriptionId,
      merchantDisplayName: "My Company",
    });

    if (error) {
      return false;
    }

    return true;
  } catch (error) {
    return false;
  }
};

export const openStripeCheckout = async () => {
  const { error } = await presentPaymentSheet();

  if (error) {
    return false;
  }

  return true;
};