Problem Using Stripe Payment In React Native App - asp.net

Question

I am using stripe in React Native App not expo and using .Net Core web api as a backend,
this is my backend code where, stripe customers creates and their ephemeral keys and setup_intent
public Customer create_customer()
{
StripeConfiguration.ApiKey =_appSettings.StripeApiSecret;
var options = new CustomerCreateOptions
{
Description = "My First Test Customer",
};
var service = new CustomerService();
return service.Create(options);
}
public EphemeralKey create_empherical_key(string customerId)
{
var options = new EphemeralKeyCreateOptions
{
StripeVersion = "2020-08-27",
Customer = customerId
};
var service = new EphemeralKeyService();
return service.Create(options);
}
public SetupIntent setup_intent(string customerId)
{
var options = new SetupIntentCreateOptions
{
Customer = customerId
};
var service = new SetupIntentService();
return service.Create(options);
}
my backend is working fine it creates all the values that stripe needs,
main problem is lying here in React Native app
function CheckoutScreen() {
const { initPaymentSheet, presentPaymentSheet } = useStripe();
const [loading, setLoading] = useState(false);
const fetchPaymentSheetParams = async () => {
const response = await fetch(`${ environment.stripeurl +`create_customer`}`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
});
const { setupIntent, ephemeralKey, customer } = await response.json();
return {
setupIntent,
ephemeralKey,
customer,
};
};
const initializePaymentSheet = async () => {
const {
setupIntent,
ephemeralKey,
customer,
} = await fetchPaymentSheetParams();
const { error } = await initPaymentSheet({
customerId: customer.id,
customerEphemeralKeySecret: ephemeralKey.secret,
setupIntentClientSecret: setupIntent.clientSecret,
});
if (!error) {
setLoading(true);
}
};
const openPaymentSheet = async () => {
const { error } = await presentPaymentSheet();
if (error) {
Alert.alert(`Error code: ${error.code}`, error.message);
} else {
Alert.alert('Success', 'Your payment method is successfully set up for future payments!');
}
};
useEffect(() => {
initializePaymentSheet();
}, []);
return (
<View>
<Button
variant="primary"
disabled={!loading}
title="Set up"
onPress={openPaymentSheet}
/>
</View>
);
I receiving all the values of customer, setupintent and ephemeralkey in the front end, when it reach on the line
const { error } = await presentPaymentSheet();
the app crashes.
for refrence I am also providing link of the documentation.
https://stripe.com/docs/payments/save-and-reuse?platform=react-native&ui=payment-sheet
And these are the packages version that I am currently using in this react-native app.
{
"name": "Tookan_App",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"#stripe/stripe-react-native": "^0.12.0",
"react": "17.0.2",
"react-native": "0.68.2"
},
"devDependencies": {
"#babel/core": "^7.18.2",
"#babel/runtime": "^7.18.3",
"#react-native-community/eslint-config": "^3.0.2",
"babel-jest": "^28.1.0",
"eslint": "^8.16.0",
"jest": "^28.1.0",
"metro-react-native-babel-preset": "^0.71.0",
"react-test-renderer": "17.0.2"
},
"jest": {
"preset": "react-native"
}
}