For Stripe implementation in React Native I use the initStripe
initialization method. The code is running without issue on iOS device, but on Android it shows an error whenever I tried to open the PaymentSheet.
This is the error I’m getting:
Error code: Failed PaymentConfiguration was not initialized. Call PaymentConfiguration.init().
This is the code for Checkout screen:
useEffect(() => {
initStripe({
publishableKey: api.stripe_key,
urlScheme: "https://website.com/",
});
}, []);
const initializePaymentSheet = async (fee: number) => {
try {
const response = await fetch(api.STRIPE_URL + "/create_payment_intent", {
method: "POST",
headers: {
"Content-Type": "application/json",
Authorization: "Bearer " + token,
},
body: JSON.stringify({
amount: total.toFixed(2),
customer: customer,
application_fee_amount: appFee.toFixed(2),
business_acc_id: account,
}),
});
const { paymentIntent, ephemeralKey } = await response.json();
const { error } = await initPaymentSheet({
merchantDisplayName: "Lorem Ipsum",
customerId: customer,
customerEphemeralKeySecret: ephemeralKey,
paymentIntentClientSecret: paymentIntent,
allowsDelayedPaymentMethods: false,
defaultBillingDetails: {
name: 'Jhon Doe',
},
returnURL: "app://stripe-redirect",
});
if (!error) {
setLoading(true);
}
} catch (e) {
console.error(e);
}
};
const openPaymentSheet = async () => {
const { error } = await presentPaymentSheet();
if (error) {
console.log(`Error code: ${error.code}`, error.message);
} else {
console.log("Success", "Your order is confirmed!");
setModalVisible(true);
}
};
This is the package info:
"expo": "^52.0.0",
"@stripe/stripe-react-native": "0.38.6",
This is the screenshot from iOS simulator: Screenshot
Any idea why the payment is initializing in iOS properly but not on Android?
2
Answers
You might want to put some logs in the
useEffect
block to confirm ifinitStripe
is called beforeinitializePaymentSheet
andopenPaymentSheet
.I had the same error. I solved it by using the StripeProvider Component and putting it into the App.tsx. Before it was in the Payment Component, so some functionality might not have loaded before I imported other Stripe stuff. I think this is a bug in Stripe, it shouldn’t happen, but this is how you can solve it.