skip to Main Content

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


  1. You might want to put some logs in the useEffect block to confirm if initStripe is called before initializePaymentSheet and openPaymentSheet.

    Login or Signup to reply.
  2. 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.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search